profile
프론트엔드 꿈나무, 탐구자.
post-thumbnail

CORS의 Cookie

서론 서버와 클라이언트의 통신을 이용한 로그인 기능을 구현하는 것에 쿠키를 사용하기로 했다. 왜냐하면 httpOnly 쿠키 헤더를 활성화하면 XSS 공격은 어느 정도 방어가 가능하고, 쿠키는 클라이언트에서 코드로 조작하는 등의 수고로움이 없기 때문이다. 그런데 CORS의 세계는 너무나 냉혹했다. CORS 정책을 따르지 않는 쿠키는 HTTP 통신을 할 수 ...

2021년 7월 27일
·
0개의 댓글

JWT 사용하기

서론 이전 포스트에선 JWT를 왜 쓰는지, 뭐하는 친구인지, 어떻게 쓸지에 대해 이야기했다. 이번 포스트에선 실제로 express 서버에 적용해보는 시간을 가져보려고 한다. 구현 로그인 클라이언트가 Token을 발급받기 위해서는 인증을 해야한다. 여기서는 인증 수단으로 ID와 Password를 입력받는 로그인을 사용하겠다. /login Endpoint...

2021년 7월 22일
·
0개의 댓글

JWT 이해하기

서론 이전 포스트에서는 회원가입과 로그인 API를 만들었다. 이제 유저가 로그인이 필요한 API를 요청할 때에, 해당 유저가 로그인이 되었는지 안 되었는지를 확인하는 기능이 필요하다. 인증과 인가 우선 다루고 있는 것이 인증 과 인가 에 대한 부분이니만큼 둘의 차이에 대해 인지하고 있어야한다. 회원가입 / 로그인은 인증에 관한 기능을 한다. 유저는 회...

2021년 7월 16일
·
0개의 댓글

회원가입 / 로그인 API 만들기

서론 1년 전에 CRUD 기능을 가진 게시판 웹의 Front와 Back을 만들어서 배포한 적이 있다. 그 때에는 로그인 기능을 넣지 않았는데, "어짜피 만들 줄 알아!" 라는 생각과 "이 웹에는 로그인 기능이 필요없다." 라는 생각이었다. 근데 이제 와서 냉정히 생각해보면 그냥 만들기 어렵고 귀찮으니 자기합리화를 했던 것 뿐이었다. 요 근래에 SWR이라는...

2021년 7월 10일
·
0개의 댓글

Github - merge / squash merge / rebase merge

이 글의 목적 최근 Github의 Branch 분기와 Pull request merge를 배우고 활용하면서 Merge의 종류가 다양하다는 걸 알게 되어 이번 포스팅에서 알아보려고 한다. merge의 모든 속성을 알아볼 것은 아니고, Pull request를 할 때에 Github가 권장하는 merge 세 가지(merge, sqaush merge, reba...

2021년 7월 1일
·
0개의 댓글
post-thumbnail

Github / Issue Tracker와 Project Board

Github가 제공하는 Issue, Project, Milestone에 대해 알아보자.

2021년 6월 27일
·
0개의 댓글
post-thumbnail

vue3에서 전역 변수 선언하기

최근에 vue3으로 채팅 기능이 있는 웹을 만들고 있다. main.js에서 선언된 socket 인스턴스를 다른 컴포넌트에서도 쓸 수 있게 전역 변수로 두려고 했는데, 잘 안 되는 것이다. vue2에서 vue3으로 넘어가면서 워낙 업데이트가 잦다 보니 한참 구글링 하고 나서야 찾았다. vue3에서 전역 변수 선언하기 이 글에서의 vue 버전은 3.0.0이...

2021년 6월 25일
·
0개의 댓글

eject 없이 CRA의 webpack.config 수정하기

이번 포스팅에선 eject 없이 CRA의 webpack.config를 수정하는 기능을 지원하는 라이브러리에 대해 알아본다.

2021년 6월 10일
·
0개의 댓글

dynamic import와 React.lazy

React 환경에서의 동적 불러오기에 대해 알아보자.

2021년 6월 9일
·
0개의 댓글

useReducer + useContext에서의 비동기 작업에 대해 알아보자

지난 시간엔 useReducer + useContext를 이용한 Redux 패턴 구현에 대해 알아보았다. 이번 포스트에선 그에 더해 API를 요청하고, 요청의 성공과 실패 여부에 따라 상태를 어떻게 관리할 것인지에 대해 알아볼 것이다.

2021년 6월 9일
·
0개의 댓글

useReducer와 useContext에 대해 알아보자

useReducer와 useContext를 사용한 redux 패턴 만들기

2021년 6월 8일
·
0개의 댓글

quicktype - TypeScript의 매우 유용한 도우미

TypeScript의 interface를 자동으로 만들어주는 도구 quictype

2021년 1월 24일
·
0개의 댓글

Promise와 async, await

catch/then 과 async/await

2021년 1월 23일
·
0개의 댓글

TypeScript와 ESLint와 Prettier

ESLint와 Prettier

2021년 1월 7일
·
0개의 댓글

Webpack과 같이 TypeScript와 React

Webpack에 TS와 React를 싸서 드셔보세요

2021년 1월 5일
·
0개의 댓글

babel과 Webpack

babel을 Webpack에 싸서 드셔보세요

2021년 1월 1일
·
0개의 댓글

Front에서 API Key를 숨기는 법

API Key를 숨기기 위한 삽질

2020년 11월 19일
·
0개의 댓글

내가 겪은 이슈 #5 - webpack-dev-server module not found error

webpack-dev-server 사용중에 발생한 이슈

2020년 11월 18일
·
2개의 댓글

내가 겪은 이슈 #4 - TS2739 이슈

TS의 interface와 type에 대해서 진정 이해하게 된 계기

2020년 11월 2일
·
0개의 댓글

내가 겪은 이슈 #3.1 - tsconfig 덮어쓰기 이슈

이것은 이전 글인 TS 컴파일 에러와 이어진다. 이전에 나는 tsc 명령어로 tsx파일을 컴파일했을 때 컴파일 결과 파일이 나오지 않아 이유를 탐색한 결과 tsconfig의 noEmit이 true로 설정되어 있어 일어난 일임을 알아냈었다. 근데 나는 noEmit: ture를 설정한 적이 없었는데, TS를 React에 적용하는 법을 알려주는 블로그에서 복사...

2020년 11월 1일
·
0개의 댓글