짧은코딩

클로저란? 클로저는 난해하기로 유명한 개념 중 하나이다. 클로저는 JS 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 “클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다”라고 말한다. 핵심 키워드는 “함수가 선언된 렉시컬 환경”이다. 일급 객체란? 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 함수를 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); ..

재귀 타입 TS에는 자기 자신을 다시 사용하는 재귀 타입이 있다. type Recursive = { name: string; children: Recursive[]; }; const recur1: Recursive = { name: 'test', children: [{ name: 'test2', children: [] }], }; 이렇게 recur1은 Recursive 객체 속성 타입으로 다시 Recursive를 사용한다. 이런 것을 바로 재귀 타입이라고 부른다. -컨디셔널 타입 type ElementType = T extends any[] ? ElementType : T; 이런식으로 컨디셔널 타입에서도 사용 가능하다. 다만, 이렇게 재귀 타입을 잘못 사용하면 자기 자신을 계속 가져오는 상황에 빠질 수 ..

브랜드 속성 브랜드 속성은 객체를 구별할 수 있는 속성을 하나 추가하는 방법이다. 예시 interface Money { __type: 'money'; amount: number; unit: string; } interface Liter { __type: 'liter'; amount: number; unit: string; } 이 코드에서는 "__type" 이 속성을 브랜드 속성이라고 한다. 속성 이름은 다른 속성과 겹치지 않는 이름이면 다 가능하다. 이렇게 브랜드 속성을 사용하는 것을 브랜딩이라고 한다. 타입 좁히기 TS에서 타입을 구분하는 것은 중요하다. 대부분은 TS가 자체적으로 코드를 파악해서 타입을 추론하는 제어 흐름 분석(Control Flow Analysis)을 한다. 하지만 제어 흐름 분석이..

HMR이란? HMR은 Hot Module Replacement의 줄임말이다. HMR을 활성화하면 모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트할 수 있다. 즉, 브라우저를 새로고침 하지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다. 새로고침을 위한 LiveReload 대신에 사용할 수 있다. 이로 인해서 코드를 수정하고 바로 웹 애플리케이션에 반영이 되게 할 수 있다. 조심할점으로는 HMR은 프로덕션용이 아니고 개발용으로만 사용해야 한다. 동작 방법 애플리케이션은 HMR 런타임에 업데이트된 내용이 있는지 확인 요청 런타임에서 업데이트된 내용을 비동기적으로 다운로드받고 애플리케이션에 알림 애틀리케이션은 런타임에 업데이트 요청 런타임은 업데이트..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/42883 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(number, k) { let arr = []; for (let i = 0; i 0) { k--; arr.pop(); } arr.push(number[i]); } arr.splice(arr.length - k, k); ..

infer란? infer로 타입 추론을 극한으로 활용할 수 있다. 컨디셔널 타입과 같이 사용할 수 있다. 컨디셔널 타입(Conditional Type)이란? type A1 = string; type B1 = A1 extends string ? number : boolean; // number type A2 = number; type B2 = A2 extends string ? number : boolean; // boolean 특정 타입 extends 다른 타입 ? 참일 때 타입 : 거짓일 때 타입 특정 타입이 다른 타입의 부분집합일 때 참이 된다. infer의 예시들 배열의 요소 타입을 얻고 싶은 경우 type El = T extends (infer E) [] ? E : never; type Str =..

이번에 프로젝트를 리팩터링하는 과정에서 로그인에 대한 부분도 수정을 하였다. 기존 방식 기존에는 로컬 스토리지에 accessToken을 저장하는 방식을 사용했었다. 하지만 로컬 스토리지에 있는 데이터는 브라우저가 닫혀도 삭제되지 않기 때문에 보안상 관리가 쉽지 않다. 수정된 방식 JWT 대신에 Cookie에 httponly 옵션을 설정하여 사용하기로 했다. 간단하게 방식을 말하면, httponly 옵션 때문에 브라우저에서 쿠키에 접근할 수 없으니까 새로고침을 하면 쿠키가 존재하는지 확인할 방법이 없다. 그렇기에 쿠키에 다른 값을 넣어서 로그인 확인을 하기로 했다. 로그인 전략 우선 로그인을 하면위 사진처럼 쿠키가 들어오게 설정했다. 위에서 말했듯이 httponly라서 JS로 쿠키에 접근할 수가 없다. ..

사실 쿠키를 자주 사용했었지만 정확하게 알고 있지는 못한 것 같아서 이 글에 정리하려고 한다. 정확이 알고있지 못했던 것에 뭔가 부끄럼을 느끼고 반성한다..! 쿠키 쿠키는 오래전부터 사용해 왔다. HTTP 통신을 한다면 쿠키를 서로 주고받을 수 있다. 특히 같은 도메인이라면 다른 Scheme라도 쿠키를 공유할 수 있다. 쿠키를 중요하게 다뤄야하는 이유는 해커들이 다양한 방법으로 쿠키를 탈취하려고 하기 때문이다. HTTP는 Stateless 프로토콜이라 이런 쿠키를 통해 사용자 식별을 한다. 그렇기에 쿠키가 탈취되면 결국 사용자 개인 정보가 유출될 수 있다. 쿠키 속성들 path path를 설정하면 설정한 URL의 경로를 포함한 하위 경로에서만 쿠키에 접근할 수 있다. 만약 path=/uplog로 했으면,..

어떤 함수는 다른 함수에 대입할 수 있는데, 대입이 불가능한 경우도 있다. 이를 제대로 이해하려면 공변성, 반공변성을 알아야 한다. 공변성: A->B일 때, T -> T 인 경우 반공변성: A->B일 때, T -> T인 경우 이변성: A->B일 때, T -> T도 되고 T -> T도 되는 경우 무공변성: A->B일 때, T -> T도 안 되고 T -> T도 안 되는 경우 TS는 기본적으로 공변성을 갖고 있지만, 함수의 매개변수는 반공변성을 갖는다! 그리고 TS Config에서 strict와 strictFunctionTypes가 모두 체크되어야 함수의 매개변수가 반공변성을 갖는다. 둘 다 체크되지 않으면 이변성을 갖는다. 반환값 a->b인 경우 function a(x: string): number { re..

오버로딩 사용이 필요한 경우 오버로딩은 호출할 수 있는 함수의 타입을 미리 여러 개 타이핑하는 기법이다. function add(x: string | number, y: string | number): string | number { return x + y; } add(1, 2); add('1', '2'); add('1', 2); add(1, '2'); x와 y가 같은 타입일 경우에만 함수를 실행시키고 싶었다면, 이 코드에서는 불가능하다. 서로 다른 타입이어도 코드가 동작할 수 있도록 구현되어 있다. 그렇기에 이런 경우에 오버로딩 기법을 사용할 수 있다. 오버로딩 예시 function add(x: number, y: number): number; function add(x: string, y: strin..