[TIL] 원티드 프리온보딩 FE 챌린지 day1 & day2 (주제: 로그인 & JWT, localStorage를 이용한 로그인) 후기

📚Day1

로그인의 개념에 대해서 짚어보는 시간을 가졌다. 
서비스 관점에서 로그인의 정의를 생각해보면 된다. 

• 인가, 인증, 권한 부여 

1. 로그인 구현 중 "백엔드"가 하는 것

• 사용자 식별
• 접근 및 동작 제어

2. 로그인 구현 시  "프론트"가 고려해야 할 것 

• 권한이 없는 자원에 접근하지 않는 구조 만들기(e.g. 고객에게 음식점 사장님의 페이지와 데이터가 보여지면 안된다.)
• 만약 버튼을 안보이게 했더라도 권한이 없는 사용자가 url을 통해 접근하려고 한다면, 권한이 없는 자원의 존재를 모르도록 한다(404page를 보여주는 등)

2-1. FE 최소한의 구현 요구사항

• 로그인 페이지 
• 로그인 인증관련 데이터 관리
• 로그인 상태에 따른 화면/ 기능 제어
• 로그아웃

강의 중간에 실습을 하는 시간을 20분정도 갖게 되었는데 로그인 화면을 만들어보았다. 
(vite, react, TS)

• 로그인 목업 API
• 유저 정보 목업 API

추가적으로 구현할 수 있다면 여러 유저의 정보를 만들어서(더미 데이터), 로그인 정보에 맞는 내용을 내려주도록 해보기
인증을 위한 token에 어떤 것들이 들어가야 할지 고려 -> 당연히 구현 과제도 제대로 완성하지 못했다..쭈굴

token: JSON.stringify({ user: user.userInfo, secret: _secret }),

• 예시 코드에서 간단하게 만들었던 token 값에는 아래와 같이 유저정보와 시크릿 키가 담겨있었다. 

3. 실제 서비스의 로그인이 되려면 토큰을 어디에 저장할 것인가? 

• token은 무엇인가? 
• 웹 스토리지(쿠키, 세션스토리지, 로컬스토리지) 어느 것을 활용할 것인가? 
• 매번 요청을 보낼 때마다 토큰을 직접 넣어줘야 하나?

3-1. cookie / session / token 인증 방식 종류 

보통 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있다.
관련 자세한 내용은 링크를 통해 확인-> 3가지 인증 방식

[WEB] 📚 JWT 토큰 인증 이란? - 💯 이해하기 쉽게 정리

4. 브라우저 동작 원리

 브라우저는 HTML, CSS 만을 렌더링한다. 내 생각에는 JS 엔진에 권한을 넘겨서 JS는 따로 파싱하기 때문인 거 같다. "브라우저 동작 원리"는 FE개발자라면 필수적으로 알고 있어야 하는 지식이므로 자세한 내용은 필수적으로 알고 있어야한다. -> 네이버 D2에서 확인해 볼 수 있다. 
 

+ 기타 내용

• JS에서 변수 앞에 _(언더스코어)가 붙은 경우, private 변수나 함수를 지칭한다고 한다. 
• formData활용, JSON.stringify()

📚Day2

5. 실습 위주의 수업 진행( 2023 03 09 )

: 1월 챌린지 (실강에서 이론 & 코드 피드백) vs 3월 챌린지 (실강에서 실습)
 
[1월 챌린지 회고]
이전에 챌린지를 한번 밖에 수행하지 못해서 비교가 될 지 모르겠지만 강사님의 스타일에 따라서 실시간 강의가 다르게 진행되는 거 같다. 1월에 들었던 강사님(개발자님)은 내가 가진 팁들을 최대한 많이 퍼먹여주겠다는 식으로 좋은 내용을 응집해서 알려주셨다. (물론 소화하진 못함) 
그렇기 때문에 노션 역시도 내용이 알차고 딱히 수업을 듣지 않더라도 노션 내용만 보고도 나중에 복습하기 쉬웠다. 물론 실강을 계속 듣는 것이 좋지만 피치못할 사정이 있는 사람들에겐 좋을 것이라고 생각했다.
이때에는 TS로 무조건 프로젝트를 진행하라고 하셨는데 (안해도 되지만 손해는 당신의 선택이다^^라는 느낌이라 부랴부랴 TS를 적용해봤다.) 자주 사용해보진 않았어서 뭐가 그렇게 편한지 전혀 감도 안오고 무섭다는 생각이 막연했다. 
하지만, TS를 사용했을 시 우리가 얻게될 생산성에 대해서 자세하게 알려주신 덕에 꾸역꾸역 사용했고 이번 3월 챌린지에서 편하게 예시 코드를 짤 수 있었다.
 
[3월 챌린지 ~ing]
이번 3월 챌린지의 강사님은 실습 위주로 수업을 꾸려나가신다. 첫 날 피피티를 보고 "어? 이렇게만 주신다고?" 라고 생각했다. 수업을 직접들으면 이해되는 부분이지만 만약에 수업에 참여하지 못한다면 자세한 내용을 듣기 어렵다. 개인적으로 나는 시간적 여유가 있어서 좋았지만 재직자들은 참여하려면 좀 피곤할 거 같다고 생각했다. 
실습위주 수업이라 그런지 덕분에 수업 참여도가 좋다. 직접 만들어보는 것이 역시 이해하기에 직빵이었다. 그렇다고 개념을 안 짚어주시는 것은 아니다. 기본적으로 개념을 최대한 설명해주신 다음 직접 코드를 짤 수 있게 시간을 주고 실시간 강의 동안에 직접 풀이를 한다. 이런 참여도가 디스코드 방에서 질문을 서로 논의하기에도 비교적 편한 분위기를 제공하는 거 같았다. 이번 수업의 주제인 로그인, JWT 를 현업 개발자님이 풀어서 설명해주니 평소에 이해가 되지 않던 부분도, 미처 생각하지 못한 부분도 긁어주는 느낌이 들었다. 그래서 뭐가 왜 JWT가 만능이 아니라는 건지 뭐가 그렇게 문제고 어디서 보안적인 맹점이 있고 등등.. 마지막에 무물 시간을 갖는데 TS가 익숙하지 않은 분들이 꽤 많아 JS프로젝트를 브랜치로 분기해서 예시 코드를 올려주신다.(하지만 난 이미 털린 뒤였으므로 괜찮았죠)
 

6. JWT 와 access token & refresh token

• token은 무엇인지 
• JWT는 정확히 무엇인지, 어떻게 구성되어 있는 지
• 해싱은 무엇인지
• access token 과 refresh token은 어떤 용도로, 어떻게 사용되는 지 -> 지금은 완전히 이해가 되지 않아서 복습하며 이해할 생각이다. 
• 백엔드와 어떻게 상호작용하는 지
• 보안을 위해서 프론트가 할 수 있는 것? - 우선 단독으로 할 수 있는 건 없다.

6-1. 엑세스 토큰은 메모리에 발급한다?

• 엑세스 토큰은 API 호출 할 때 사용된다. 
• 엑세스 토큰은 짧은 유효시간을 가지고 있다. (짧으면 5분 정도?)

처음 들었을 때는 감이 잘 안왔지만, 간단히 말하자면 변수에 저장하거나 전역 상태관리(e.g. redux)에 넣고 사용한다는 소리이다. 이렇게 되면 외부로부터 탈취가 불가능하다(보안상 장점). 하지만, 매번 새로 발급받아야 하기 때문에 매우 불편하다. (= 유저는 모든 요청마다 로그인을 계속해야 한다.)   

6-2. 리프레쉬 토큰은 HttpOnly Cookie로 발급한다?

• 리프레쉬 토큰은 "엑세스 토큰"을 재발급할 때 사용되는 토큰이다. 
• HttpOnly Cookie*로 발급한다

HttpOnly Cookie?
이 쿠키는 서버에서 set 해주는 cookie이다. JS로는 접근이 불가능하다. 클라이언트에서 접근이 불가능하며 대신 쿠키를 다시 서버에 보내줄 수는 있다.

7. HTTP Request 

• 상대적으로 가벼운 주제이지만 필수적이고 꼭 이해하고 있어야 한다. 

+ 기타 내용

• 로컬 스토리지에서 있는 값을 가져올 때, 직접 호출한 값을 넘기면 해당 값이 제대로 넘어오지 않는 경우가 있다고 하셨다. 이 부분이 아마 내가 과거 글에 썼던 궁금증과 관련된 내용이었던 거 같은데 JS 라이프사이클에 대해서 공부해보면 될 거 같다. 그래서 예시 코드에서는 직접호출이 아니라 getAccessTokenFromLocalStorage()를 호출한다.