DOM이란? Document Object Model의 약자로, 직역하면 문서 객체 모델이다. 웹페이지가 로드될 때 브라우저가 요소들을 모아 하나의 문서를 구성한다. 이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 DOM이다. Document는 HTML, Object는 노드 트리로 유추할 수 있다. 이때 노드란 HTML 태그들이다. DOM은 위 사진과 같이 노드를 트리(tree) 형태로 표현한다. 🌐 브라우저 동작 원리 브라우저가 HTML 파일을 받으면 이를 파싱(변환) 하고 노드들로 이루어진 DOM 트리를 생성한다. 이후 외부 CSS 파일과 inline 스타일을 파싱하여 스타일을 입힌 Render 트리를 생성한다. 각 노드들이 화면 어디에 나타나야 하는지 정확한 위치가 주어진다. 이..

❓아래 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 1번 let 변수 선언 키워드를 통해 num 변수 선언 및 값 할당해주고 있으며 num 변수가 1로 초기화 됨 2번 setTimeout은 비동기 함수로, 두번째 파라미터 밀리초 이후에 콜백 함수를 실행한다. 이때 1번이 실행되고 2번 콜백 함수가 바로 동작하는 것이 아닌, 비동기 작업을 예약하며 4번까지 코드가 끝난 후 실행된다. 즉, 4번까지 코드가 실행한 후 두번째 파라미터 밀리초 후 해당 콜백이 실행하는 것이다. 3번 let 변수 키워드로 선언된 변수는 ..

더보기 . 🤔 포스팅 계기 addEventListener 이벤트 핸들러를 등록하다보면 내 의도대로 동작하지 않을 때가 종종 발생한다. 대략 막는 방법은 알고 있어서 문제 해결하기에 바빴는데 실제로 Web Event의 특징을 알아보고자 포스팅하게 되었다. 📌 이벤트 등록 이벤트 등록이란 웹에서 사용자의 입력을 받기 위해 필요한 기능이다. 버튼을 클릭하면 console에 click! 문구를 실행시켜주는 addItem 함수가 실행되고 , 인자로 event 넘어온다. addEventListener() 는 동적인 기능을 추가하기 위해 사용하는 기본적인 기능이다. // HTML // add one item var button = document.querySelector('button'); button.addEven..

HTTP Method란 ? HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식이다. 쉽게 말해 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법이다. HTTP Method 종류 HTTP Method 종류는 크게 GET, POST, PUT, DELETE, PATCH 가 대표적이다. GET : 리소스 조회 POST : 요청 데이터 처리, 주로 등록에 사용 PUT : 리소스를 대체, 수정 , 해당 리소스가 없으면 새롭게 생성 DELETE : 리소스 삭제 PATCH : 리소스 부분 변경(수정) GET 메서드 리소스 조회 메서드(Read) 주로 데이터를 읽거나 검색할 때 사용되는 메서드이다...

얕은 복사는 객체의 참조값(주소값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다. 먼저, 자바스크립트에는 원시 타입(Primitive Type)과 참조 타입(Reference Type) 두 가지 타입의 자료형이 있다. 원시값 (기본 자료형) Number String Boolean Null Undefined Symnol 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장된다. 또한 원시 타입 자료형은 변수 선언, 초기화, 할당 시 값이 저장된 메모리 영역에 직접적으로 접근한다. 즉 변수에 새 값이 할당될 때 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다는 뜻이다. let origin = 100; let copy = origin; console.log(copy); // 10..

더보기 🤔 포스팅 계기 ES6에서 변수 선언 키워드 let, const가 도입되었고 var를 이용한 변수 선언을 권장하지 않고 있다. var가 중복 선언이 가능하다는 이유만 어렴풋이 알알았는데각각 변수 선언 키워드의 특징, 정확한 차이점을 파악하고자 포스팅하게 되었다. 자바스크립트에서의 변수 선언 키워드에는 var, let, const이 있다. 그 중 var를 통한 변수 선언은 지양하고 있는데 그 이유를 알아보자. var, let, const의 차이점을 정리해보면 다음과 같다. 1. 중복 선언과 재할당 2. 호이스팅 3. 스코프 차이점을 설명하기 전 자바스크립트에서의 변수 선언과 변수 할당에 대해 알아보자. 🔍 변수 선언, 초기화, 할당 자바스크립트에서의 변수는 선언 -> 초기화 -> 할당 단계를 거친다..

더보기 🤔 포스팅 계기 앞으로 진행할 프로젝트에서 이전과 달리 git을 활용하여 진행할 예정이다. 원활한 협업을 위해 git 공부를 하고 있지만 실제 협업에서 쓰이는 git branch 전략에 대해 처음 들어보았다..! git branch 전략 중 가장 많이 사용되는 방식인 Git Flow에 대해 자세히 알아보았다. 🔍 Git 브랜치 전략이란 ? 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 work-flow다. 각 브랜치는 어떤 브랜치를 생성할지, 어디에서 분기할지, 어디로 병합할 것인지 등등 git branch에 규칙을 만들어 협업을 유연하게 하는 방법론을 말한다. git 브랜치에 어떤 규칙을 정할 것인지 팀원들끼리 자유롭게 규칙을 정해도 되지만, 기존에 관례적으로..

더보기 🤔 포스팅 계기 Git을 배우면서 커밋 히스토리의 편의성과 중요성을 느끼고 있는 요즘, 기본적인 Merge 사용법은 알지만 그 외 다양한 merge 방법에 대한 이해도는 부족하다는 것을 느꼈다. 다양한 merge 방법을 이해하고 추후 깔끔하고 체계적인 커밋 히스토리 관리를 위해 포스팅하게 되었다. 🔍 Merge란? 우선 세 가지 merge 전략을 알아보기 전, merge란 git branch를 다른 branch로 합치는 과정을 말한다. merge에도 세 가지의 방법이 있다. Merge Rebase and Merge Squash and Merge 위 세 가지 방법 모두 두 개의 브랜치를 머지한다는 결과는 같지만, 머지하는 방법과 커밋 히스토리를 기록하는 방법은 다르다. 1. Merge $ git c..