짧은코딩

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..

FE 개발자는 API가 만들어질 때까지 마냥 기다리고 있을 수만은 없다. 그렇기에 MSW를 이용해서 Mock 데이터로 미리 테스트를 할 수 있다. 또한 MSW를 이용해서 테스트 코드도 작성할 수 있다는 장점이 있다. 이번 글은 MSW를 설치하는 방법에 대해 정리해 보겠다. 참고로 이 프로젝트는 처음에 제로초님의 인프런 강의 "Sleact 만들기"에서 사용한 폴더를 그대로 가져와서 시작한 것이라 CRA로 만든 것이 아니다. 그래서 설치 중간에 좀 고난이 있었다. MSW 공식 사이트 https://mswjs.io/ Mock Service Worker Seamless API mocking library for browser and Node. mswjs.io 설치하기 msw 설치 npm install msw -..

이번 wayc 이커머스 프로젝트를 리팩터링 하는 과정에서 Redux Toolkit을 적용하기로 했다. 그 과정에서 통신을 어떤 방식으로 할지 많이 고민을 했다. 요즘 유행하는 것이 React Qeury, RTK Query, SWR 등이 있다. React Query는 팀원 모두가 다른 프로젝트에서 사용해 봤고, SWR은 맨 처음에 만드는 과정에서 사용했다. SWR은 Next JS에 좀 더 잘 어울린다는 말이 있기에 이번에는 RTK Query를 사용해 보기로 했다! (이번 글은 https://www.youtube.com/watch?v=pnpO3o8mLBU&t=1626s 생활코딩님의 유튜브 강의를 보고 작성한다. 생활코딩님께 감사드린다!!) 실습 코드 링크 https://codesandbox.io/s/rtk-..

타입스크립트에는 자바스크립트에는 없던 연산자들이 있다. 처음 봤을 땐, 나름 쉬워 보여서 그냥 넘어갈 수도 있지만 타입스크립트를 지속적으로 사용하다 보면 은근히 헷갈릴 때가 있었다. 그렇기에 이 글을 통해 정리하고자 한다. 연산자 유니언(|): 유니언 타입은 OR의 역할을 한다. 즉, 합집합의 역할을 한다. 인터섹션(&): 인터섹션 연산자는 AND의 역할을 한다. 즉, 교집합의 역할을 한다. 공집합(never) type nev = string & number; // never 인터섹션 연산자를 이용하여 위 코드를 작성하면 nev의 타입은 never가 된다. 즉, 타입스크립트에서 가장 좁은 타입이다. 전체집합(unknown) 전체집합은 unknown이며, 타입스크립트에서 가장 넓은 타입이다. 대입 원칙 타..