Node.js 뉴스피드 프로젝트 [마지막날] 뉴스피드 프로젝트를 받은지 정확히 일주일 째 되는날이다. 다행히 기간 내에 원하던 기능들을 모두 완성했고 세부적인 부분들을 많이 신경쓰지는 못했지만 나름 만족스럽다고 생각한다. 프로젝트 기간동안 정말 바빠서 TIL 을 제대로 작성하지 못했기 때문에 전체적인 프로젝트에 대해 적어보려고 한다. 이번 프로젝트의 기본 구상은 다음과 같았다.(Sequelize, My SQL 사용) [군것질 추천 웹페이지] 1. 커뮤니티 기능 : 군것질 추천 게시글을 올릴 수 있게 만들어 유저들 간 군것질을 추천할 수 있는 기능 1-1. 이미지를 포함해서 게시글을 만들 수 있게 하기 (aws s3 사용) 1-2. 로그인에 따른 수정 / 삭제 / 글쓰기 기능 1-3. (미완) 게시글 추천..
전체 글
상황 쿠키에 토큰 값을 담아 백엔드 코드에서 res.cookies를 이용해 프론트엔드로 쿠키를 보내려는데 프론트엔드에서 cookie 값이 확인되지 않는 상황이 발생했다. 여러 블로그들을 확인해보며 set cookie, get cookie등 쿠키를 보내고 받는 여러가지 방법들이 있었지만 왜인지 적용이 안되는 상황이었다. 해결 일반적으로, (backend) res.cookies => (middleware) cookie-parser => (frontend) req.cookie 의 과정을 통해 req.cookie에 쿠키 값이 확인된다. 하지만 이런 과정으로만 쿠키를 보내게 되면 req.cookie에 쿠키 값이 들어가지 않는 것을 확인할 수 있다. 현재, (backend) cookie => CORS 설정 => (..
Node.js 뉴스피드 프로젝트 [3일차] 지금까지의 상황을 말해보자면 sequelize model / migration 기본 세팅, 회원가입 API, 로그인API, 미들웨어 기능 구현까지 했다. 오늘은 Access Token과 Refresh Token을 사용하여 로그아웃을 기능을 구현했다. Refresh 토큰을 생성하고 DB에 저장하는 과정에서 새로운 Table 생성이 필요했고 User와 연결해주기 위해 Table join했다. 또한 Refresh Token을 만들고 사용해주다보니 전반적으로 회원가입 API, 로그인 API , DB, Table, model 부분의 대대적인수정이 필요했고 오늘 내내 했다. 쉽게 만드려면 local storage나 cookie에 담아 토큰을 관리하는 것이 만들기 편하지만 ..
Access Token & Refresh Token JWT(jsonwebtoken) 모듈을 이용해 만들 수 있는 토큰이다. Access Token은 인증을 위한 JWT이며 보안을 위해 유효기간이 매우 짧다. 반면 Refresh Token 은 유효기간이 짧은 Access Token을 보완하기 위한 JWT로서 Access Token에 비해 유효기간이 상대적으로 길다. Access Token의 유효기간이 매우 짧기 때문에 Access Token을 매번 client가 발급받게 된다면 사용자 만족도가 매우 떨어질 것이고 반대로 유효기간이 너무 길게 된다면 보안에 취약해질 것이다. 이 단점을 방지하기 위해 Refresh 토큰을 함께 만들어주면 좋다. Access Token의 기간이 만료되었을 때 Refresh To..
4문제상황 로그인, 로그아웃 API 구현, 기능 구현 후 Thunder Client와 rest Client로 테스트 해보던 중 send request를 눌렀는데도 성공 혹은 실패 메세지가 반환되지 않고 계속 waiting.. 만 계속될 뿐이었다. 생각을 해봤을 때 request로 무언가를 보내면 성공이나 실패가 무조건 떠야한다고 생각했는데 아예 아무런 문구, 오류도 뜨지 않아 생각조차 할 수 없는 부분이어서 너무 막막했다. 해결 문제는 라우터가 진입하기 전에 걸려있던 cookie parser 때문이었다. 심지어 제대로 사용하지도 못했다. Client에서 호출했던 경로는 localhost:3000/api/auth/signin 이었는데 authRouter 앞부분에서 오류가 걸려 계속 무한 루프를 돌고 있는 ..
Node 뉴스피드 프로젝트 [2일차] 어제까지 프로젝트 기본 설정들을 마치고 오늘은 회원가입 API와 로그인 API 및 미들웨어를 완성했다. 회원가입 API : router연결, API 유효성검사, 비밀번호 Hash값 변경, API 생성, 민감한 정보 env작업. 로그인 API : 토큰 발급, router 연결, API 유효성검사 미들웨어: 생성 깃허브 : https://github.com/IMCORIN2/SnackSpotter 노션 페이지: https://teamsparta.notion.site/4-bba5fe88f3cd4f7b932a8e9680e15625 새로 배운 내용 Optional chaining : https://yoonchan1121.tistory.com/87 Optional chaining..
Optional chaining Optional chaining이란? ?. 을 사용하여 프로퍼티가 없는 중첩 객체를 안전하게 접근할 수 있도록 도와주는 문법이다. 예전에는 중첩된 객체 속성에 접근할 때, 중간에 있는 속성이 null 또는 undefined인 경우 에러가 발생했었는데 Optional chaining 문법을 사용하면 이런 에러를 방지할 수 있다. (Optional chaining 연산자는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.) 사용법 객체 뒤에 .?이라는 문법을 사용하는데 객체의 값이 null 이거나 undefined 인 경우에는 에러가 뜨지않고 undefined값이 반환된다. 반면 값이 있을 경우에는 '.' 뒤..
문제 상황 회원가입 기능을 완료한 뒤 로그인 기능을 구현하고 테스트 해보던 중 다음과 같은 오류가 떴다. 이런 부류의 에러가 났을 때 해결하는 것이 제일 힘들다. 보면 알겠지만 내가 만든 파일의 어느 부분에서 오류가 났는지 표시되는 부분이 하나도 없다. 어느 지점에서 문제가 생겼는지 파악하기 위해 console.log를 찍어보기도 하고 정상적으로 작동했던 부분 뒤에 작성했던 코드들을 부분적으로, 혹은 전체적으로 지워보기도 했다. 하지만 터미널에 찍히는 콘솔은 없었고 여전히 에러메세지는 나왔다. 해결 SyntaxError: Unexpected token * in JSON * 과 같은 오류는 API를 구축하고 프론트 부분을 client를 사용할 때 많이 발생하는 오류인 것 같다. 실제로 저번에도 비슷한 오류..
Node.js 뉴스피드 프로젝트 [1일차] 사실 TIL을 일기처럼 쓰고 싶지 않지만 오늘도 역시나 일기다. 새로 알게된 사실이 너무 많고 배운 사실을 적용해보는데 하루 종일이 걸려 노션에는 내가 알아볼 수 있게만 적었기 때문에 티스토리까지 적을 시간은 없을 것 같다.(시간 없더라도 꼭 적자....) 일단 오늘 한 일을 나열해보면 알고리즘 코드카타 - 뉴스피드 프로젝트 발제 - Standard반 수업 - 팀 회의 - 팀 Project 관련 API명세서 작성, ERD 작성, 와이어프레임 작성 - 지난 과제 해설 영상 보며 만들어보기 정도를 했다. 오늘 특히나 인상 깊었던 부분은 과제 해설 영상을 보며 지난 과제에서 commonJS로 만들었던 부분을 ES6문법을 사용해서 만드는데 sequelize 모듈이 co..