전체 글

브라우저란? 우리가 거의 매일 사용하고 있는 소프트웨어, 인터넷 익스플로러, 파어어폭스, 사파리, 크롬, 오페라, 등과 같은 소프트웨어가 브라우저이다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시한다. 여기서 말하는 자원은 보통 HTML 문서이지만, PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resourse Identifier)에 의해 정해진다. 브라우저의 핵심 기능은 사용자가 참고하고자 하는 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, JavaScript, 이미지 파일 등을 응답받는다. 브라우저 기본 구조 브라우저의 기본 구조를 다시 살펴보자. 사용자 인터페이스(User ..

얕은 복사 vs 깊은 복사 한마디로 정리하면 얕은 복사는 객체의 참조값(메모리 주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다. 얕은 복사와 깊은 복사를 이해하기에 앞서 데이터 타입에 대한 이해가 필요하다. 데이터 타입 자바스크립트에서 모든 데이터는 원시형과 참조형으로 두 가지 데이터 타입이 존재하는데, 원시형(기본형, Primitive type)은 기본 자료형(단순한 데이터)를 의미한다. number, string, boolean, null, undefined 등이 해당한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장된다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다. 참조형(Reference type)은 여러 자료형으로 구성되는 메모리에 저장된 객..

이중 등호(==)와 삼중 등호(===)의 차이 자바스크립트에서 이중 등호(==)와 삼중 등호(===)는 모두 비교에 사용되며, 비교 대상간의 동일성 또는 동일성의 정도를 파악하는데 사용된다. 두 가지 모두 비교 대상이 동일하면 true를 반환하고, 그렇지 않으면 false를 반환한다. 결과를 내는 방식은 같지만, 이 둘은 서로 다른 기준을 사용해 동일성을 판단한다. 이중 등호(==)는 비교를 하기 전 유형 강제를 수행하기 때문에 종종 '느슨한 등호'라고도 한다. 즉, 비교하려는 피연산자의 데이터 타입이 다른 경우 자바스크립트 엔진은 비교를 가능하게 하기 위해 피연산자 중 하나를 다른 피연산자와 동일하게 자동 변환한다. const a = 100; const b = '100'; console.log(a ==..

Git 브랜치 전략 Git 브랜치 전략은 프로젝트의 git 브랜치를 효과적으로 관리하기 위한 워크플로우를 의미한다. 직접 브랜치 전략을 수립해도 되지만, 이미 많은 모범 사례들이 존재한다. 그 모범사례 중 유명한 Git Flow에 대해 알아보자. Git Flow Git Flow는 Vincent Driessen이 2010년에 올린 'A successful Git branching model'이란 블로그 글이 인기를 끌며 대중화된 브랜치 전략이라고 한다. Git Flow는 크게 Main / Develop / Supporting 브랜치로 구분하여 브랜치를 관리한다. 이때 Supporting 브랜치는 다시 Feature / Release / Hotfix 브랜치로 나뉜다. Main 브랜치와 Develop 브랜치는..

git의 branch란? git은 데이터를 change set이나 변경사항(diff)으로 기록하지 않고, 일련의 스냅샷으로 기록한다. 커밋을 하면 git은 현 staging area에 있는 데이터의 스냅샷에 대한 포인터, 저자나 커밋 메세지 같은 메타데이터, 이전 커밋에 대한 포인터 등을 포함하는 커밋 개체를 저장한다. 이전 커밋 포인터가 있어서 현재 커밋이 무엇을 기준으로 바뀌었는지 알 수 있다. 최초 커밋을 제외한 나머지 커밋은 이전 커밋 포인터가 적어도 하나씩 있고, 브랜치를 합친 merge 커밋의 경우 이전 커밋 포인터가 여러 개 있다. git의 브랜치는 커밋 사이를 가볍게 이동할 수 있는 어떤 포인터 같은 것이라고 생각하면 된다. 기본적으로 git은 main(과거엔 master) 브랜치를 만든다..

Position position 속성을 사용하면 웹 문서에서 요소의 위치를 자유롭게 정할 수 있다. position 속성은 자주 사용하지만 그만큼 실수하기 쉬운 부분이니 꼼꼼히 살펴보자. 요소의 위치를 정하는 left, right, top, bottom 속성 position 속성보다 먼저 알아두어야할 속성이 있다. 웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정할 수 있어야 하는데, 이때 사용하는 속성이 left, right, top, bottom이다. position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다. 속성 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정해준다. r..