꾸준한 개발자

계속적인 성장을 추구하는 개발자입니다. 꾸준함을 추구합니다.

계속 쓰는 개발 노트

JAVASCRIPT/자바스크립트 이론 17

호이스팅

호이스팅이란 변수나 함수를 스코프 상단으로 끌어올리는 기술입니다. console.log(a); // undefined var a = 1; 변수 선언보다 참조하는 문이 코드 순서 상 앞에 있지만, 에러가 발생하지 않고 참조 결과가 undefined로 나옵니다. 호이스팅이 일어났기 때문에 위와 같은 결과가 나옵니다. 변수 생성 단계 변수는 선언-초기화-할당, 3단계를 걸쳐 생성됩니다. 코드 실행 전 선언과 초기화가 이루어집니다. 선언 단계에서 데이터 메모리에 변수를 저장하고 초기화 단계에 undefined를 할당합니다. 그 후 코드가 실행되면서 할당하는 문에서 해당 데이터 값을 할당하게 됩니다. var 키워드로 선언된 변수와 let, const로 선언된 변수의 차이점이 있습니다. var 키워드로 선언된 변수..

this

this가 어떤 값에 바인딩 되는지는 실행 컨텍스트가 생성될 때 결정됩니다. 즉 함수를 호출할 때 결정된다 볼 수 있습니다. 그러다보니 함수를 어떻게 호출하는지에 따라 바인딩되는 값이 달라지게 됩니다. 전역 스코프에서 쓰이는 this 전역 스코프에서 쓰이는 this는 전역 객체에 바인딩 됩니다. 브라우저 환경에서는 window, node 환경에서는 global에 바인딩 됩니다. 메서드로서 호출될 때 메서드 안에 있는 this 함수와 메서드를 구분할 수 있는 것은 독립성에 있습니다. 함수의 경우 독립적으로 실행되는 반면, 메서드의 경우 자신을 호출하는 객체에 관한 동작을 수행합니다. var func = function (param) { console.log(this, x); }; func(1); var o..

원시타입과 참조타입 (Primitive type & Reference type)

자바스크립트의 데이터 타입 자바스크립트의 데이터 타입으로 7가지가 있습니다. string, number, boolean, null, undefined, symbol, object가 있으며, 데이터 타입은 원시타입과 참조타입으로 구분할 수 있습니다. string, number, boolean, null, undefined, symbol이 원시타입에 해당하며, object는 참조타입에 해당됩니다. 원시타입과 참조타입의 차이점 이 둘의 차이점을 알기 위해서는 자바스크립트에서 데이터를 어떻게 관리하고 있는지에 대한 배경지식이 있어야 합니다. var a; // 변수 a 선언 a = 1; // 변수 a에 데이터 할당 var a = 1; // 변수 선언과 할당을 한 문장으로 표현 원시타입의 경우, 자바스크립트 엔진은..

타입이란

타입 자바스크립트의 모든 값은 데이터 타입을 갖습니다. 타입이란 자바스크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별할 수 있는, 고유한 내부 특성의 집합입니다. 예를 들어 자바스크립트 엔진과 개발자가 10(숫자)이란 값을 '10'(문자열)이란 값과 다르게 취급한다면 두 값은 타입이 서로 다릅니다. 숫자 10은 계산을 하려는 의도지만 문자열 10은 글을 쓰는 페이지에 출력할 문자열로 쓸 의도로 만든 값입니다. 이런 타입의 특성을 제대로 파악해두어야 자바스크립트의 암묵적 타입 변환과 같은 방법을 정확히 이해할 수 있습니다. 내장 타입 자바스크립트는 7가지 내장 타입이 있습니다. 그리고 그 내장 타입은 원시타입과 객체 타입으로 나뉘어집니다. 원시 타입 undefined boolean number s..

currying이란

Currying은 1970년 Christopher Strachey가 Haskell Brooks Curry의 이름에서 착안하였습니다. 여러 개의 인자를 가진 함수를 호출할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법입니다. 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 합니다. 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질입니다. 예를 들어보면, f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 변환하는 것입니다. 화살표 함수로 예시를 들겠습니다. const sum = (a, b) => a + b; a와 b 매개..

REST API란

HTTP 서버 프로젝트 공동 설립자인 로이 필딩은 당시 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST를 소개했고, 이 REST의 기본 원칙을 지킨 서비스 디자인을 RESTful이라 표현합니다. 즉, REST란 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식(CRUD 요청을 Resource와 Method로 표현하여 특정한 형태로 전달)을 규정한 아키텍처이고, REST API는 REST를 기반으로 서비스 API를 구현한 것입니다. RESTful API는 아래와 같은 것들로 구성됩니다. Resource : 자원, URI Method : 요청 방식, GET / POST / PUT / PATCH / DELETE Representation of Resource (payload) : 자..

oAuth란

세 개의 참여자가 있습니다. 먼저, 제가 개발한 서비스(Client)가 있습니다. 그리고 그 서비스를 사용하는 사용자(Resource Owner)가 있습니다. 마지막으로 제 서비스가 연동하려는 다른 서비스(Resource Server, Authorization Server)가 있습니다.(구글, 페이스북 등) 예를 들어서 사용자가 제 서비스에서 글을 쓰면, 사용자의 구글 캘린더에 자동으로 저장되도록 하거나 페이스북에도 같은 글이 올라가면서 공유할 수 있도록 개발할 수 있습니다. 제 서비스는 사용자의 구글 혹은 페이스북 계정에 접근을 해야됩니다. 이때 사용되는 기술이 oAuth입니다. oAuth를 이용하면 안전하게 제 서비스가 구글 혹은 페이스북과 안전하게 상호작용할 수 있습니다. 구글 혹은 페이스북에서 사..

쿠키 / 세션 / 로컬스토리지 / 세션스토리지

쿠키 클라이언트가 서버에 방문한 정보를 브라우저에에 저장하는 작은 파일입니다. 쿠키의 경우 매번 서버에 요청을 할 때마다 같이 보내지기 때문에 쿠키가 크다면 서버에 부담이 갈 수 있습니다. 유효 기간을 지정해 줄 수 있으며 대부분의 브라우저에서 지원합니다. 용량은 약 4KB입니다. 세션 세션은 서버측에서 관리합니다. 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하고, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지합니다. 쿠키보다 안전하지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됩니다 로컬스토리지 HTML5에서 추가된 웹 저장소입니다. key-value 스토리지의 형태를 갖고 있으며, 단순하고 사용하기 쉽습니다. key-value 형식의 저장 이외의 기능은 없으..

브라우저 렌더링 과정

대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 애플리케이션의 클리언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됩니다. 따라서 브라우저 환경을 고려할 떄 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능합니다. 브라우저 렌더링 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지 폰트 파일 등 렝더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행합니다. 이때 자바스크립트는 DOM API를..

클로저란

MDN에서는 클로저를 다음과 같이 정의합니다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). (번역) 클로저는 주변 상태 (렉시컬 환경)에 대한 참조와 함께 번들로 묶인 (포함된) 함수의 조합입니다. 위 정의만으로는 이해가 쉽게 되지 않습니다. 다음 예제를 보겠습니다. const a = 1; function outerFunc() { const a = 2; function innerFunc() { console.log(a); // 2 } innerFunc(); } outerFunc(); outerFunc 함..