개발 신생아

동기처리 현재 실행중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것이다. 위에서부터 순서대로 차례대로 진행한다. ex) if문, 반복문(for, while), 함수호출 비동기처리 현재 실행중인 코드가 종료되기 전에 다음줄의 코드를 동시에 실행하는 것이다. ex) callback(), Promise(), 비동기 API, Web API function getName(cb) { setTimeout(() => { cb("Elice"); }, 2000); } function getAge(cb) { setTimeout(() => { cb(20); }, 2000); } function getAddress(cb) { setTimeout(() => { cb("abcd@gmail.com"); }, 2000)..

Cookie vs Session vs Token 보통 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있다. JWT를 알아보기 전에 우선 쿠키와 세션의 특징과 장단점 그리고 왜 토큰인증 방식을 사용하는지에 대해 알아보자. 1. Cookie 쿠키는 Key-Value 형식의 문자열 덩어리이다. 클라이언트가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록정보 파일이다. 각 사용자마다의 브라우저에 정보를 저장하므로 고유 정보 식별이 가능하다. Cookie 방식의 단점 가장 큰 단점은 보안에 취약하다는 것이다. 요청 시 쿠키의 값을 그대로 보내기 때문에 유출 및 조작 당할 위험이 존재한다. 쿠키에는 용량제한이 ..

깊은복사는 원시값을 복사하고, 얕은복사는 객체의 참조값을 복사한다. 원시값 기본자료형(단순한 데이터)를 의미한다. Number, String, Boolean, Null, Undefined 등이 해당한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장된다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다. 참조값 여러 자료형으로 구성되는 메모리에 저장된 객체 이다. Object, Symbol 등이 해당한다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)을 저장하게 된다. 그래서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것이다. 깊은복사 let num1 = 1;..

용어 정리 파싱 어떤 페이지(문서, 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;..