개발 신생아

용어 정리 파싱 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다. 렌더링 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 크게 2단계를 거쳐 이뤄진다. 1) DOM 요소와 스타일에 기반을 둔 레이아웃 계산 2) 계산된 요소의 화면 표현 일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그린다. 렌더링이 진행되는 과정 1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다. 2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌..

this란? 자신을 가리키는 참조 변수 this는 자바스크립트 엔진에 의해 암묵적으로 생성되어, 코드 어디서든 참조 가능 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. JS의 호출방식 (일반)함수 호출 메서드 호출 생성자 함수 호출(객체 생성 함수) apply / call / bind 호출 1. 함수 호출 const test = function(){ console.log(this); } test(); // window 일반 함수는 다음과 같이 가장 간단한 방법으로 호출할 수 있으며, 이때, this는 전역객체를 가리키게 된다. 2. 메소드 호출 var person = { name: 'Sung', printName: function() { console.log(this.name); } } ..

실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. JS는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 Call Stack에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 됩니다. 즉, 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있다. 실행 가능한 코드 3가지 전역 코드 : 전역 영역에 존재하는 코드 Eval 코드 : eval() 로 실행되는 코드 함수 코드 : 함수 내에 존재하는 코드 실행 순서 1) 생성 단계 (Creation Phase) Execution Context 생성. 선언문만 실행해서 Environment Record에 기록합니다. 2) 실행 단계 (Execution Phase) Environmen..

용어 정리 Call Stack : 코드가 실행될 경우 하나씩 stack의 형태로 쌓이는 곳. LIFO(Last In First Out) Memory Heap: 메모리 할당이 일어나는 곳. (객체들이 할당) Web API: 브라우저에서 제공하는 API들, 웹 브라우저에 내장되어 있다. ex) DOM, Ajax, setTimeout 등등.. Single Thread(단일 스레드): 동시에 하나의 일만 가능하다. ex) Javascript Callback Queue: 처리할 메시지 목록인 메시지 대기열, FIFO(First In First Out) Task Queue ex) setTimeout Job Queue(Micro Task Queue) 태스크 큐보다 우선순위가 높다. ex) Promise의 .then(..

클로저(Closure) 함수 + 함수를 둘러싼 렉시컬 환경(Lexical environment) 내부함수에서 외부함수의 변수 접근 가능 but, 외부함수에서 내부함수 변수는 접근 불가 클로저는 함수가 private한 변수를 가질 수 있게 한다. 렉시컬 환경 : 스크립트 전체, 실행중인 함수, 코드블록 등은 자신만의 렉시컬 환경을 갖는다. 왜 이름이 클로저(Closure : 폐쇄) ??? 내부함수의 변수에 대한 메모리할당은 유지하지만 외부에서 직접 볼 수 없게 은닉화 하기 때문 클로저 기법을 사용하는 이유 : 보안때문이라고 생각한다. 아무나 접근할 수 없기 때문에 let a = 1 function outt() { console.log(a); return function inn() { let a = 101;..

스코프 = 범위 스코프와 변수의 종류 전역스코프(Global scope) 이름 그대로 전역에 선언되어있어, 어느곳에서든지 해당 변수에 접근 가능 지역스코프(Local scope) 해당 지역에서만 접근 가능함 즉, 지역을 벗어난 곳에선 접근 불가능 전역변수(Global variable) 전역에서 선언된 변수, 어디서든 사용 가능 지역변수(Local variable) 지역 안에서 선언된 변수, 그 지역 안에서만 사용 가능 let a = 10; function test() { let a = 25; console.log(a); } function test2() { console.log(a); } test(); // 25 console.log(a); // 10 test2(); // 10 - 첫번째 선언한 변수 a..

JS의 변수 선언방식은 총 3가지이다. 1. var console.log(a); // undefined var a = 1; console.log(a); // 1 - 재선언과 업데이트가 가능하다. - 따라서 예기치 못한 많은 문제가 발생한다. - 선언과 초기화가 동시에 이루어지므로 ReferenceError가 아닌 undefined 출력 2. let console.log(a); let a = 1; console.log(a); //ReferenceError: a is not defined - 재선언x, 업데이트 가능하다. - var에서 발생한 많은 문제들을 해결하기위해 let을 개발자가 개발 - 선언과 초기화가 분리되어 진행된다. hoisting되어 선언은 되어있는상태지만 초기화가 이루어지지 않아, 에러발생..

Cookie와 Web storage는 둘 다 클라이언트 측에서 데이터를 저장하는 방법입니다. Cookie와 Web storage에 대해 각각 알아본 후 차이점을 알아보겠습니다. 1. Cookie 쿠키는 사용자가 웹사이트를 방문할 때 브라우저에 저장되는 작은 데이터 조각입니다. 유저 인증, 사용자 프로필 정보, 쇼핑카트 등 다양한 목적으로 사용될 수 있습니다. 만료일이 지나거나 브라우저가 닫히면 삭제될 수 있으며, 브라우저의 요청 헤더에 쿠키를 포함하여 서버로 전송됩니다. 2. Web Storage 웹 스토리지(Web Storage)는 쿠키의 단점을 보완하여 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소입니다. 데이터의 지속성에 따라 로컬 스토리지(Local Storage)와..