KodeVvon's World

DOM createElement로 생긴 요소는 메모리에만 가상으로 들어가 있다 때문에 append로 실제 화면에 출력되게 추가 처리를 해줘야한다 append는 지정한 요소 뒤, prepend는 지정한 요소 앞에서 생성 요소가 수정/생성/제거되면 브라우저는 변경된 것을 보여주기 위해 랜더링을 한다 요소 1개만 변하더라도 브라우저의 랜더링이 발생해 메모리 문제가 생김 -> 느려진다! 가상 DOM 위의 요소제어/랜더링 문제를 개선하고자 나온 방법(나름 신기술) 가상돔의 경우 이미 DOM을 메모리에 복제 후 이벤트 발생 시 메모리 내 DOM에 적용한다 메모리 DOM의 변경 사항을 실제 DOM과 비교한다 가상돔과 실제 DOM의 차이점만 파악 후 변경된 것들을 한번에 호출해 실시간으로 적용한다

패럴랙스 스크롤링 Parallax Scrolling 배경 이미지는 느리게 움직이게 하고, 사물 이미지는 빠르게 움직이도록 하는 것 원근감, 입체감을 느낄 수 있게 만드는 디자인 기법 웹에서는 스크롤에 따라 요소/배경에 시간차 애니메이션을 적용한다 스크롤을 할 때 개체마다 움직이는 속도를 다르게 적용하기도 한다 요소들간에 서로 다른 속도값을 가지게 만들어 역동성을 부여한다 참고 패럴랙스 스크롤링이 적용된 사이트

Web Storage API Web Storage API란 브라우저에서 제공하는 데이터를 저장 기능이다. '키'-'값'의 형태를 가진다. 저장된 데이터들은 서버로 전송하지 않기 때문에 원하는 정보만 서버로 보내서 저장할 수 있다! ​세션스토리지, 로컬스토리지 두 가지로 분류된다. 분류에 맞게 .sessionStorage와 .localStorage로 사용가능하다. 세션스토리지 페이지 세션이 유지되는 동안 브라우저가 저장공간을 제공(브라우저 탭이 닫히거나 꺼지면 데이터가 사라진다!) 저장 공간이 최대 5MB, 쿠키보다 크다 로컬스토리지 저장 공간이 쿠키, 세션스토리지보다 크다 유효기간 없이 데이터를 저장(세션스토리지와 다르게 브라우저를 닫고 열어도 데이터 남아있음) 자바스크립트를..

유의적 버전(SemVer) Semantic Versioning이라고도 함 유의적 버전, 유의적 버저닝, 유의미 버저닝, 의미 있는 버전 부여, 시맨틱 버저닝, 시맨틱 버전 관리 등을 의미 외부에서 배포중인 공개 API를 선언 후 라이브러리의 버전을 올리는 것 메이저.마이너.패치 순의 형식을 사용 버전 형식 뒤 '정식 출시전'이나 빌드 메타데이터를 위해 표시하는 레이블은 추가할 수 있음 메이저(MAJOR) : 기존 버전과 호환되지 않을 때 올릴 것 마이너(MINOR) : 기존 버전과 호환되면서, 새로운 기능을 추가했을 때 올릴 것 패치(PATCH) : 버그/오타 등 비교적 적은 규모를 수정했을 때 올릴 것 폴리필과 심 브라우저의 버전이 서로 달라도 비슷하거나 같은 기능을 사용할 수 있도록 도..

오픈 그래프 태그 미리 보기 화면을 구성할 수 있도록 해주는 Meta태그 웹페이지가 sns에 공유될 때 우선적으로 활용되는 정보를 지정 링크 미리보기 정보 트위터 카드 트위터에 있는 기능 140자 텍스트만 표현할 수 있는 트위터의 제약을 풀어주는(?) 기능 추가적인 이미지/내용을 미리보기처럼 보여줄 수 있다 웹페이지가 트위터로 공유될 때 우선적으로 활용되는 정보를 메타태그에 설정해두는 것 메타 정보 기존의 데이터를 구조화한 데이터 다른 데이터를 설명해 주는 녀석 이녀석을 이용하면 검색엔진을 활용해서 특정 데이터를 쉽게 찾아낼 수 있음 파비콘, Favicon 웹페이지를 나타내는 아이콘, 웹페이지의 로고를 의미 기본적으로 root경로에 favicon.ico 파일을 두면 브라우저가 자동으로 로딩함 브라우저가 ..

BOM, DOM, CCSOM, Javascript BOM BOM(Browser Object Model)은 브라우저와 관련된 객체들의 집합을 의미 현재 웹 페이지를 열고 있는 웹 브라우저 자체가 객체로 표현된 것 BOM을 이용하면 브라우저와 관련된 기능들을 구성할 수 있음 BOM의 최상위 객체는 window BOM은 공식적인 표준이 없어서 브라우저마다 API가 조금씩 다를 수 있음 DOM은 BOM중의 한 녀석 DOM Document Object Model(DOM)은 HTML, XML, SVG 문서에 접근하기 위한 인터페이스 BOM과 다르게 공식적인 표준이 존재함 W3C(World Wide Web Consortium)의 DOM 표준은 크게 세 가지 모델로 나뉨 Core DOM : 모든 문서 타입을 위한 DO..

개발에서 API 요청과 결과를 쉽게 확인하기 위해 사용하는 Postman은 개발 생산성을 올려줄 수 있으나 근래에는 제법 무거운 녀석이 되었다는 말들이 많다. 초창기 단순 API테스트를 목적으로 사용되었던 것에 다른 기능들이 추가되면서 점차 규모가 커진 것 같다 Visual studio code(VS Code)에서 확장 클라이언트로 Thunder Client를 추천받아 사용해보니 vs code에서 바로 테스트를 할 수 있다는 것이 장점으로 다가왔다 가벼운 것 또한 장점이라 한다 설치 https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client Thunder Client - Visual Studio Marketplace E..

브라우저 객체 모델(Browser Object Model) BOM은 웹 브라우저 전체를 객체로 관리하는 것을 말한다 자바스크립트로 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것(내장객체)을 의미한다 브라우저에서 자주 사용되는 내장 객체 Window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체 Document 웹 문서에서 태그를 만날 때 만들어지는 객체. HTML 문서 정보를 가지고 있다 History 현재 창에서 사용자의 방문 기록을 저장하는 객체 Location 현재 페이지에 대한 URL정보를 가지고 있는 객체 Navigater 현재 사용 중인 웹 브라우저의 정보를 가지고 있는 객체 Screen 현재 사용 중인 화면 정보를 ..

JSON Web Token, JWT라고 불리는 이 녀석은 토큰처럼 사용할 수 있도록 JSON을 인코딩한 것을 말한다. 쉽게 말해 보안을 위한 웹기술 중 한 유형으로, 인증에 필요한 정보들을 암호화시킨 토큰기반 인증 시스템을 의미한다. 먼저 인증과 인가의 비슷하지만 다른 점을 짚고 넘어가보자. 인증(Authentication) 사용자의 신원을 검증하는 행위 신원을 확인하고 특정 서비스에 일정 권한이 주어진 사용자임을 인증 받는 것 프론트에서 서버에게 보내는 정보가 일치한다면, 서버는 사용자가 맞다고 판단해 액세스를 허용한다 자격 증명 확인 기능 사용자가 볼 수 있음 비밀번호, 생체인식, 일회용 핀 등의 방식으로 진행 ID토큰 사용 인가(Authorization) 한 번 인증을 받은 사용자가 이후 특정 리소..

https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io 선택된 색상과 자연스러운 색상들을 기본ui유형에 맞게 보여주는 사이트 색상값을 쉽게 알아낼 수 있어 유용하다!