분류 전체보기

모던 자바스크립트, 디스트럭처링 (Desctructuring)

디스트럭처링 (Destructuring) 이란? 객체 혹은 배열을 분해하여 내부 요소를 추출하는 것이다. 일반적으로 직접 추출하는 것보다 더 간결하다. 기본값, 이름 변경, 중첩 및 나머지 구문 등을 제공한다. 함수의 매개변수에서 명확성과 표현력을 제공한다. 객체 디스트럭처링 디스트럭처링의 형태 객체 리터럴과 매우 흡사하다. 다만, value 에 객체 리터럴처럼 값을 넣는 것이 아니라, 요소를 가질 변수명을 넣는다. const obj = { first: 1, second: 2 }; const { first: f, second: s } = obj; console.log(f, s); 아래는 한단계 더 발전시킨 더 직관적인 예제이다. const { first: a } = { first: 42 }; consol..

자바스크립트의 실행 컨텍스트 (Execution Context) 란?

실행 컨텍스트란? 함수 실행 내에서 환경을 가리키는 추상적인 개념이다. 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트의 생성 시점 실행 컨텍스트는 일반적으로 매 함수 호출 시에 생성된다. 함수 호출만큼 자주 일어나진 않지만, 함수 호출 외에도 전역 공간, eval() 함수 실행에도 실행 컨텍스트가 구성된다. 화살표 함수의 실행 컨텍스트 화살표 함수도 일반 함수처럼 실행 컨텍스트가 생긴다. 단, 화살표 함수의 this 는 lexically scoped 된다. 그래서 화살표 함수는 어떻게 호출되냐보다 어떤 블럭에서 정의되었냐가 중요하다. 실행 컨텍스트가 하는 일 호이스팅을 수행한다. this 의 값을 결정한다. 현재의 스코프에서 어떤 변수에 접근할 수 있는지를 결정한다. 인자(argu..

Lexical Scope (렉시컬 스코프) 란? (자바스크립트의 스코핑 방식)

개요 자바스크립트에서는 렉시컬 스코프(Lexcial Scope) 라는 스코핑 방식을 이용한다. 이는 굉장히 낯설은 영단어로 처음 스코프 개념을 접하는 프로그래밍 초보자들에게 많은 혼란을 준다. Lexical Scope 란? Lexical Scope 란 한글로 번역하면 어휘적 스코프이다. 어휘적 스코프라는 말을 들었을 때 이 스코핑 방식에 대해 이해한다면, 당신은 프로그래밍 고인물일 확률이 높다. Lexical Scope 는 Static Scope (정적 스코프) 라고도 불리운다. 정적 스코프라고 불리우는 이유는 스코프가 컴파일 타임에 결정되고 변하지 않기 때문이다. 런타임에 스코핑을 지원하는 Dynamic Scope 와 다른 방식의 스코프이다. 왜 이름이 Lexical Scope 인가? Lexical S..

자바스크립트 클래스 3 - 상속

서브클래스 ES5 에서 상속을 구현하는 방식은 꽤 복잡했다. class 문법이 생기면서 이러한 부분이 많이 개선되었다. class ClassWithAlpha extends Color {} extends 를 이용하면, 두 개의 상속 체인이 생성된다. 해당 생성자로 생성된 객체에 대한 병렬상속관계라고 한다. 하나는 생성자 자체에 있으며, 하나는 생성자의 프로토타입 객체에 있다. 생성자 상속 체인 ColorWithAlpha 서브클래스 생성자를 만든다. Color (슈퍼클래스 생성자 함수) Color 의 프로토타입을 만들어 모든 정적 속성/메서드를 ColorWithAlpha 에서 접근 가능하게 한다. Function.prototype 이외의 프로토타입을 갖는 함수의 개념이 등장한다. 프로토타입 체인 서브클래스 ..

자바스크립트 클래스 2 - 클래스 바디

클래스 바디의 필드와 메서드 클래스 바디란 {} 내부의 요소들을 말한다. 클래스 바디엔 대표적으로 상태를 저장하는 필드와 상태를 이용해 동작을 수행하는 메서드가 있다. 클래스의 바디에 올 수 있는 요소의 경우의 수 종류: Getter, Setter, Method, Field 위치: Static, Instance 접근: Public, Private 클래스의 바디에 오는 요소는 위 3가지를 모두 가져야 한다. 총 16가지 조합이 가능하다. 클래스에만 있는 특별한 것들 생성자 정적 초기화 블록 클래스 필드 추가하기 class ExampleClass { constructor() { this.field = 1; } } const c = new ExampleClass(); console.log(c.field); /..

자바스크립트 클래스 1 - 기본 개념

자바스크립트 클래스 ES6 가 나오기 이전에는 프로토타입 체이닝을 이용해 객체를 객체지향의 상속과 비슷한 구현이 가능했다. new function() 을 이용했다. function 키워드가 클래스 생성자 역할까지 하려다보니 이 때 function 에 쓸데없는 것들이 많이 추가됐다. 결국 function 키워드는 화살표 함수의 등장으로 이제는 쓸 필요가 없다. (제너레이터 빼고) ES2015(ES6) 가 나온 이후에는 클래스처럼이 아닌 컴퓨터 프로그래밍에서의 클래스 를 구현하는 것이 가능해졌다. 여전히 프로토타입도 이용하지만, 단순히 프로토타입만을 이용해서는 불가능하고 클래스로는 가능한 것들이 생겼다. 컴퓨터 프로그래밍에서의 클래스란? 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메..

이터러블 스프레드 문법이란?

이터러블 스프레드 문법이란? 함수를 호출하거나 배열을 생성할 때, 결괏값을 이산값으로 분산하여 이터러블을 소비하는 방법이다. 속성 스프레드 문법 과 같이 ... 기호를 사용하지만, 다르다. 속성 스프레드 문법은 객체 내부에서만 유효하다. 이터러블 스프레드 문법은 iterable 객체 앞에서만 유효하다. 이터러블 스프레드 문법이 유효한 곳 함수의 인자 괄호 내부 배열 리터럴 내부 예제 1: 함수의 인자에서 사용 이터러블 스프레드 문법을 함수의 인자에서 사용할 수 있다. 이터러블 스프레드 문법 적용 전 Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9, 0); Math.min() 은 원래 위처럼 인자를 하나씩 넣어주어야 한다. 배열에 저 모든 숫자가 들어있다면, 인자를 넣기가 쉽지 않다. con..

ES6 이후에 새롭게 정의된 Object 편의 정적 메서드들

새롭게 추가된 Object 객체의 정적 메서드가 중요한 이유 현재 자바스크립트 표준을 정하는 ECMA 위원회의 의중이 가장 많이 반영된 메서드들이다. ECMA 위원회는 과거에 자바스크립트가 저지른 실수를 바로잡으려 한다. 그러나 하위 호환성을 완벽하게 유지해야 한다는 숙제가 있다. 그래서 ECMA 위원회는 기존의 것을 없애기보다 Object 쪽에 새로운 메서드들을 추가하며 그들의 현재 의중을 반영하고 있다. Object.assign() Object.assign(target, ...source); target 객체에 source 객체의 속성을 덮어씌운다. 마지막에 온 source 객체의 속성이 가장 나중에 덮어씌워지므로 승리한다. Object.assign() 은 엔진 내부에 있는 C 함수로 퍼포먼스가 매우..

DispatchServlet.doDispatch() 함수 끝까지 따라가서 HandlerMapping 과 HandlerAdapter 알아보기

doDispatch() 함수 끝까지 따라가서 HandlerMapping 과 HandlerAdapter 알아보기 스프링의 핵심 동작을 담당하는 DispatcherServlet 에서 요청 처리에 사용될 핸들러를 찾아주고, 실행할 때 사용된다. HandlerMapping 은 요청에 따른 핸들러를 찾아준다. HandlerAdapter 는 찾아낸 핸들러를 실행시켜줄 Adapter 이다. 실제 동작 살펴보기 코드와 동작을 디버깅하며 어떤 일이 벌어지는지 살펴보자. 예제 코드 @RestController public class HelloController { @RequestMapping("/") public String sayHello() { return "Hello, world!"; } } 로컬 환경에서 스프링에 ..

어댑터 패턴 (Adapter Pattern) 이란?

어댑터 패턴 (Adapter pattern) 현실 세계에서도 찾아보기 쉬운 패턴이다. 해외에서 한국의 전자제품을 사용하려면 110v '어댑터'를 가져가야 한다. 호환되지 않는 인터페이스를 가진 객체들이 협업할 수 있도록 해주는 구조적 디자인 패턴이다. 클라이언트가 사용하는 인터페이스를 따르지 않는 레거시 코드를 재사용할 수 있게 해준다. 다이어그램으로 어댑터 패턴 관계 살펴보기 각 클래스에 대한 설명은 아래와 같다. Target 은 변화에 대한 요구사항이다. Adaptee 는 기존의 코드이다. Adapter 는 변화에 대한 요구사항을 구현한 새로운 코드이다. Adaptee 가 가지고 있는 기능을 Adapter 가 주입받아 operation() 을 구현한다. Client 는 인터페이스인 Ta..

프로토타입 패턴 (Prototype Pattern) 이란?

프로토타입 패턴 (Prototype Pattern) 기존의 인스턴스를 복제하여 새로운 인스턴스를 만드는 방법이다. 클래스에 의존하지 않으면서도, 기존 객체를 복제하게 해준다. 실제로 복제되는 객체에 복제 프로세스를 위임한다. 복제를 지원하는 객체를 프로토타입 이라고 하기도 한다. 프로토타입 패턴이 해결하는 문제 객체 복사는 쉬워보이는데 왜 프로토타입 패턴이 필요할까? 비공개 필드가 있는 경우 생각보다 쉽지 않다. 클라이언트 입장에서는 인터페이스만 알고, 구현체에 대해 모를 수도 있어서 생각보다 복사하기 까다로울 수 있다. 많은 상속을 통해 다양한 필드를 늘려온 객체의 경우 필드 값을 복제하는 일이 생각보다 쉽지 않다. 프로토타입 레지스트리를 사용하면, 설정이 복잡하지만 자주 사용되는 객체를 어디 저장해두..

HTTP 쿠키 (HTTP Cookie) 의 생성 옵션

쿠키 생성 옵션 쿠키는 생성할 때 몇가지 옵션을 줄 수 있다. HTTP 헤더에 들어간 쿠키 옵션 예제 Set-Cookie: =; Domain= Set-Cookie: =; Expires= Set-Cookie: =; HttpOnly Set-Cookie: =; Max-Age= Set-Cookie: =; Partitioned Set-Cookie: =; Path= Set-Cookie: =; Secure Set-Cookie: =; SameSite=Strict Set-Cookie: =; SameSite=Lax Set-Cookie: =; SameSite=None; Secure // Multiple attributes are also possible, for example: Set-Cookie: =; Domain=; S..