불필요한 태그는 쓰지 않는다. wrapper 역할로만 사용되는 , div 안에 데이터를 넣기 위한 들을 많이 봤다. 써야 한다면 쓰는게 옳다. 하지만 하나의 노드가 추가될 때마다 DOM tree도 깊어진다. 최대한 DOM depth가 많아지지 않도록 해야 한다. 동적인 스타일 변화는 부모에 주지 않는다 변화가 발생하면 repaint는 자식 요소, reflow는 부모와 자식 요소 관계없이 일어난다. 그러니까 동적인 변화를 줘야 한다면 그 요소만 타겟해야 한다. 또한 그 요소에도 최대한 자식 요소가 없도록 구조하는 것이 좋다. inline style 보다는 클래스명이 낫다 클래스명의 변화도 reflow를 일으킨다. 여러 스타일을 인라인으로 추가한다면 스타일 하나 하나가 reflow를 유발한다. 모든 스타일들..
DOM DOM은 자바스크립트가 웹 페이지에 접근하여 내용과 디자인을 바꿀 수 있게 한다. 다른 프로그래밍 언어도 가능하지만 DOM 조작의 대표적인 언어는 자바스크립트다. 그래서 DOM은 프로그래밍 언어가 문서에 접근해서 읽고, 조작할 수 있게 하는 인터페이스다. 어떻게 생겼을까? DOM은 대표적으로 HTML을 통해서 표현된다. JavaScript로 DOM을 직접 조작하면서 화면은 정적이지 않다. 사이트는 이벤트에 따라 컬러가 바뀌고, 다이나믹하게 애니메이션이 일어나기도 한다. 그렇지만 변화가 일어날 때 CPU 소모가 발생한다는 문제가 있다. 자바스크립트는 DOM을 변경하고 검색한다. 문서는 트리 구조다. 변경된 요소를 찾으려면 하위 트리 구조까지 타고 가야 한다. JavaScript가 요소에 변화를 주면..
목표 개발과 배포 환경에 따른 환경변수를 설정한다. 이를 위해 webpack에서 dotenv와 definePlugin을 사용한다. 실제 회사에서 개발 환경은 Dev, Beta, Stage, Operation(Production) 과 같이 구분됩니다. 이 환경에 대해 부르는 이름과 구성은 상이할 수 있습니다. 그렇지만 우리가 작업하는 로컬인 Dev와 실제 적용된 운영(Production) 환경은 공통됩니다. 환경에 따라 크게 다른 부분은 API의 Base URL이 있습니다. 그렇기 때문에 환경 변수를 통해 개발 환경에 따른 값을 설정할 수 있습니다. 이 외에도 환경변수가 필요한 경우는 API의 private한 key값을 숨겨야 하는 경우도 있습니다. .env 환경변수를 설정할 파일들을 만듭니다. 이 글에서..
XSS 공격 Cross Site Scripting의 약어입니다. CSS가 맞는 줄임이겠지만, 이미 스타일시트로 보편화되어 사용되고 있는 CSS가 있지요. 그래서 CSS가 아니라 XSS로 줄여서 말합니다. XSS 공격은 DOM에 악성 자바스크립트 코드를 삽입하여 공격하는 기법입니다. 입력창에서 이렇게 스크립트를 삽입할 수 있습니다. Submit function displayMessage() { var name = document.getElementById('name').value; document.getElementById('message').innerHTML = 'Welcome, ' + name + '!'; } 공격의 예시 코드를 삽입해 어떤 공격을 할 수 있을까요? 사용자의 쿠키를 탈취하는 스크립트 로..
Polling이 무엇인지 알아보기에 앞서 Web 통신의 특성에 대해 알아야 합니다. Web HTTP 통신은 클라이언트가 서버에 요청을 하고, 응답을 받으면 연결이 끊어지는 특징이 있습니다. 바로 비연결성(Connectionless)이라고 합니다. 그래서 웹은 실시간으로 서비스를 운영할 수 없는 한계가 있습니다......만 Polling 방식을 통해서 실시간처럼 보이도록 할 수 있습니다. 폴링(Polling) 폴링은 업데이트가 갱신되었을 때, 이를 확인하기 위해 사용합니다. 다시 말해 새로운 데이터를 계속 보여주기 위해 반복적으로 API 요청을 하는 방식입니다. 예시 만약 인스타그램과 같은 SNS에 폴링을 적용한다면 사용자는 계속 새로고침을 하지 않아도, 최신 피드를 확인할 수 있습니다. 작동 순서는 대략..
자바스크립트에서 객체는 프로퍼티(Property, 속성)를 가지고 있습니다. 각 프로퍼티는 이름과 값이 있습니다. 이름은 문자열이고, 값은 어떤 타입이든 가리지 않습니다. const obj = { name: "객체" } 프로퍼티는 추가, 삭제가 가능합니다. 그러므로 객체는 프로퍼티의 집합이기도 합니다. 프로퍼티는 데이터, 접근자 프로퍼티로 나뉩니다. 데이터 프로퍼티(Data Property) const person = { age: 15, // 데이터 프로퍼티 name: "김개굴" // 데이터 프로퍼티 } 객체의 프로퍼티 대부분은 이름과 값이 있는 데이터 프로퍼티입니다. 이 객체는 두 개의 데이터 프로퍼티가 있습니다. 접근자 프로퍼티(Accessor Property) 위의 데이터 프로퍼티와는 좀 다른 모양..
