본문 바로가기
Frontend/엘리스 SW 엔지니어 트랙

[ 엘리스 SW 엔지니어 트랙 ] 70일차 TL;DR

by YWTechIT 2022. 1. 29.
728x90

📍 70일 차 1.29. 토. 프로젝트 5일 차 TL;DR

  1. firebase로 간단하게 작은 사이즈의 프로토타입을 만들 때 빠르고 쉽게 사용할 수 있는 좋은 스택이지만, 현업에서는 MERN 스택도 사용하는 곳이 많다. 공부하는 입장에서 MERN 스택을 사용한다면 백과 프론트의 전반적인 흐름도 알 수 있고, web framework를 사용하게 될 상황도 많고, 확장성측에서도 MERN 사용하는 것을 추천한다.
  2. 회원 인증, 권한 구현 할 때 cookie를 사용하면 미들웨어에 무조건 cookie-parser를 설치하자.. 이것때문에 2시간 고생함..
  3. 프런트에서 API를 가져다 사용할 경우. 만약에 API가 에러가 나서 정상적인 data를 가져오지 못할 때는 어떻게 처리할 것인가? 404페이지로 이동시킬 수도 있지만 백에 미리 저장되어있는 db에서 값을 내려줘도 된다.
  4. Backend에서 API를 가공한 다음에 처리하자. 화면에서 가공해야 하는 데이터들이 사용하는 API들만으로 가능하지 않은 경우가 있을 수 있어서 필요한 API 내용들을 받아주고, 가공해서 Frontend로 내려주는 것이 좋을 것 같다.
  5. API처리 로직: 클라이언트 -> 서버(커밋 수 요청) -> 서버에서 API요청 -> 받아온 정보로 DB 갱신 -> 클라이언트에게 응답
  6. 인증 / 권한 페이지 로직
1. 권한: `client`에 `JWT` 토큰 값을 `cookie`에 담아 `server`로 보냄. -> 토큰이 만료되었거나 일치하지 않으면 `status(401)`리턴
2. 인증: `GitHub OAuth` -> `db`에서 해당 `id`와 일치하는 `id`를 찾고 없으면 새로 만들어서 저장 -> `cookie`로 `JWT`토큰 값 `browser`로 전송
  1. 서버는 프론트에서 요청한 결과가 올바른지 아닌지를 결괏값으로만 내려준다. 그리고 프런트에서 결괏값을 토대로 다음 로직을 구성한다.
  2. 프론트에 json형태로 값을 내려줄 거면 res.send 대신 res.status(200).json({ isOk: true, postId });와 같은 형태로 내려주자. res.status(200).jsonjson 형태로 내려준다는 의미가 포함되어있으나, res.send는 의미가 불명확하다. 또한, res.send로 전송하게 되면 불필요한 함수를 한번 더 호출하게 된다. 참고(harguri.github.io)
반응형

댓글