Typescript의 Infer 키워드는 복잡한 타입에서 특정 부분을 추출하거나 추론할 때 사용하는 키워드이다.Infer 키워드는 조건부 타입 내에서만 사용할 수 있고 Typescript 컴파일러가 타입을 자동으로 추론하게 한다.먼저 조건부 타입에 대해 알아보고자 한다

Discriminated Union 타입이란?

자바스크립트로 웹 페이지의 요소를 조작할 땐 DOM API를 활용한다. 이를 통해 DOM을 조작해서 해당 요소의 내용이나 스타일을 변경하는 것이다.DOM을 조작하게 되면 브라우저는 다음과 같은 과정을 거친다.DOM트리 수정스타일 재계산레이아웃(reflow)페인트합성이러

나는 CSRF 공격 방지를 위해 CSRF 토큰 기능을 구현했다. 내가 클라이언트 단에서 사용하는 CSRF 토큰 기능은 다음과 같다.Request의 쿠키에서 CSRF 토큰을 가져온다.=> Request의 헤더에서 x-csrf-token을 가져온다.=> 둘이 일치하지 않거

프론트엔드에서 알림을 표시하기 위해 위의 이미지처럼 토스트를 사용하고 있다.useToaster로 toast를 선언한 다음 toast(알림 종류,메시지)를 하면 토스트가 표시된다.그런데 한가지 문제가 생겼다. OAuth로 로그인할 때 문제가 생기면 로그인 페이지로 리다이

OAuth를 구현하던 중 Callback API 엔드포인트의 쿼리에 state를 추가했는데 이게 CSRF 공격을 방어하기 위한 것임을 알게 됐다. CSRF에 대해 이해하게 된 과정과 이해한 내용을 정리해보려 한다. 이해하는 과정 먼저 내가 OAuth에서 CSRF 공격

OAuth란 로그인/회원가입과 같은 권한 인증 작업을 구글,카카오,네이버 등과 같은 신뢰할 수 있는 대형 서비스가 대행해주는 시스템이다. 구글이나 네이버와 같이 OAuth 서비스에 로그인이 되어있는 상태라면 사용자가 직접 아이디,비밀번호 등을 입력하지 않고 로그인/회원

오늘은 개발 면접 관련 영상을 보다가 새롭게 알게 된 개념과 기술이 있어서 정리해보려 한다. 아키텍처 구조를 설명하는 부분에서 나온 내용이었는데 처음 이 구조를 봤을 때 admin 서버군과 worker서버군이라 설명하는데 왜 서버가 여러 개인지 궁금했다.이와 관련해서

Next.js 미들웨어는 특정 페이지로 이동하거나 API Route를 호출하는 것과 같이 클라이언트에서 next.js 서버로 요청할 때 중간에 실행되는 함수다.나는 특정 페이지에 접근할 때 로그인 여부를 체크할 때 미들웨어를 활용했다.먼저 회원 인증 시스템은 로그인 시

24년 9월 5일부터 25년 4월 11일까지 진행한 스프린트 풀스택 과정이 드디어 끝이 났다. 그냥 막연히 생각해봐도 처음 시작했을 때와 비교했을 때 정말 많이 성장했다는 것을 느낀다. 더 구체적으로 어떤 부분이 성장했는지 회고해보는 시간을 가지려 한다. 계기 나는

나는 액세스 토큰 존재 여부를 통해 권한을 체크하는 미들웨어를 구현하고 있다. 만약 액세스 토큰이 있는데 로그인/회원가입 페이지로 이동한다면 다른 페이지로 이동시키고 액세스 토큰이 없는 상태로 로그인이 필요한 페이지로 이동한다면 로그인/회원가입 페이지로 이동시키는 것이

Route53은 하나의 도메인으로 다양한 서비스를 통합 관리하고 연결하는 역할을 한다.나는 프론트엔드와 백엔드에 하나의 도메인을 연결하기 위해 사용하게 됐는데,프론트엔드는 Amplify에서 기본으로 제공되는 도메인을 사용했었고 백엔드에는 가비아에서 구매한 도메인을 연결

팀프로젝트를 진행하면서 S3에서 파일 업로드를 위한 presigned URL을 발급하는 API를 추가했다. 이 API는 기존에 내 개인 프로젝트에서 사용했던 코드를 가져왔는데 동일한 코드인데도 개인 프로젝트에선 발생하지 않던 문제가 발생했다.S3 client를 생성할

dotenv-cli는 환경에 따라 환경변수 파일을 선택해서 명령어를 실행할 수 있도록 해주는 도구이다.나는 express로 개발한 서버에서 jest를 통해 DB의 CRUD 기능을 테스트하는 과정에서 사용하게 됐다.이때 실제 DB를 가지고 테스트할 경우 기존 사용자의 데

EC2 인스턴스 생성 먼저 EC2인스턴스의 이름을 설정하고 운영 체제를 선택한다. 나는 Amazon Linux를 사용했다. 인스턴스 유형은 프리 티어로 사용할 수 있는 t2.micro로 설정하고 로그인에 사용할 키페어를 선택하거나 생성해야 한다. 이때 생성한 키페어

상품 좋아요를 저장하는 데이터베이스 모델이 있을 때, @@unique를 통해 userId와 productId 쌍이 중복되지 않도록 설정했다.@@unique를 설정하고 prisma generate를 할 경우 복합키가 함께 생성되는데 unique에 입력된 순서대로 \_를

Javascript에는 변수를 선언하는 방법이 세가지가 있다. var와 let,const가 있는데 let,const는 ES6에 처음 나온 변수 선언 키워드로 기존의 var 키워드가 가지고 있는 몇가지 문제점들을 해결하기 위해 등장했다. 어떤 문제점과 차이가 있는지 알아

nth-of-type과 nth-child 속성은 반복해서 사용된 동일한 태그에 대해서 몇번째 태그에 대해 스타일을 적용하고 싶을 때 사용한다. 이때 두가지 속성의 공통점은, 속성 앞에 오는 요소의 부모태그 내에서 속성에 해당되는 요소를 선택한다는 점이다. nth-of

우리가 웹사이트를 방문할 때 사용하는 브라우저는 어떤 원리로 작동할까? 요청과 응답 우선 사용자가 브라우저의 주소창에 URL을 입력하면 DNS를 통해 IP주소로 변환하고 이 IP주소에 해당하는 서버에 요청을 전송한다. 이때 URL이 www.naver.com과 같이 스

Storybook을 작성하던 중 recoil,react-router-dom,tanstack-query와 같이 provider component로 감싸야하는 컴포넌트의 스토리를 작성하게 됐다. 처음엔 각 스토리의 decorators에서 필요한 프로바이더 컴포넌트로 St