본문 바로가기

전체 글13

JS로 JWT 로그인 구현 (Passport.js 미사용) 🎬 구현한 동작 시나리오 🔶: 사용자 시점 🔷: 서버 시점 🔶 쇼핑몰 사이트에서 사용자가 id를 입력 후 로그인 버튼을 클릭 🔷 userId (사용자가 입력한 id)를 가지고 access token과 refresh token을 발급하여 JWT를 cookie에 저장 🔶 사용자는 로그인을 했으니 자기 계정의 장바구니를 클릭 🔷 클라이언트의 cookie를 받아 JWT의 access token이 만료되지는 않았는지, 서버가 발행한 토큰이 맞는지 검증 🔹 access token이 모두 정상이라면, 자연스레 통과 🔹 access token이 유효하지 않은 토큰이라면, cookie의 jwt를 지우고 사용자에게 재로그인 요청 🔹 access token이 만료되었다면, refresh token을 대상으로 만료되지는 않았.. 2022. 10. 2.
[Node.js] 초간단 Github OAuth 인증 구현 🔥 결과 이렇게 Github로 로그인 버튼을 누르면 인증 과정을 거쳐 사용자의 정보를 가져올 수 있다. 전체 코드는 하단 Github Repository 링크를 첨부했다. 🌠 환경 "dependencies": { "axios": "^0.27.2", "cookie-parser": "~1.4.4", "dotenv": "^16.0.3", "express": "~4.16.1", "pug": "2.0.0-beta11" } Express로 서버 포트를 열고 클라이언트 단에서 axios로 통신하는 매우 간단한 환경이다. 🔹 서버 파일 app.js nodemon으로 가장 먼저 실행되는 파일로, express 미들웨어 설정과 router 호출을 담당 routers/index.js 메인 페이지를 라우팅 routers/oa.. 2022. 10. 2.
웹 개인 프로젝트 회고 1 - ERD 설계 리뷰 설계 방법 일단 필요하겠다 싶은 데이터를 브레인스토밍 형식으로 노트에 적었다. 이때 네이밍과 타입, 외래키에 대해서 전혀 생각하지 않고 그냥 생각이 나오는 대로 작성했다. 그러고 나서 타입을 결정하고 테이블 단위로 묶으며 외래 키를 고려해 스키마를 구성했다. 마지막으로 사용자 시나리오들을 여러 개 작성해서, 어떤 요청이 어디에 들어가는지 데이터의 흐름을 파악하려 노력했다. 이 과정에서 많은 수정이 이루어졌고, 정규화와 비정규화에 대해 많이 고민했다. 또한 JOIN 쿼리가 반드시 필요한 상황인지 비용을 따져가며, 이 요청이 정말 빈번하게 일어나는 요청인가? 에 대해 고려하며 최대한 호출 비용을 줄이는 데에 신경 썼다. NoSQL을 도입하고 싶었지만, 이번 프로젝트 취지상 RDB만 사용하여 이 같은 테이블이.. 2022. 9. 25.
웹 개인 프로젝트 회고 1 나 홀로 KPT 회고 웹 프로젝트 경험이 전무하기 때문에 html과 css도 처음 써보는 상태에서 시작했다. 정말 고독한 과정이었고, 부딪히면서 배운 지식들이 귀하다는 것을 체감했다. 아직 갈 길이 멀지만 3주 전의 자신과 비교했을 때 정말 극적인 성장을 이루어냈다고 생각해서 배움과 생각의 흐름을 곱씹기 위해 회고를 작성하게 되었다. 배움과 생각의 흐름들을 Notion에 그때그때 써두었지만, 다시 보니 너무나 단편적이고 무질서하다는 느낌을 받았다. 그래서 기억해 두고 싶은 배움과 다음 프로젝트 때 적용해 보고 싶은 것들을 KPT 회고 방식을 통해 남기게 되었다. Keep - 이거 잘했다 🔸 scss의 mixin과 inlclude를 적절히 사용해서 writeability와 readability를 둘 다 챙.. 2022. 9. 25.