안녕하세요, 김당쿽🥕입니다! 원티드 프리온보딩 프론트엔드 과정에 참여하게 되었고, 3회차 수업을 들은 후 남기는 기록입니다!
세션기반 로그인 구현과 JWT와의 비교 및 인프라스트럭쳐
세션이란?
jwt에 비하면 추상적인 토큰. 로그인을 했을 때 세션을 보내고, 다시 요청을 보내게 되면 세션을 다시 돌려보낸다.
사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 시간, 사용자 로그인이 유효한 시간 동안 서버에서 세션 아이디를 기록해 두고 인증에 사용하는 방식을 세션 로그인 방식이라고 한다.
쿠키란?
HHTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. 서버가 페이지와 쿠키를 전송하고, 브라우저가 같은 서버의 다른 페이지(및 API) 등을 요청한다.
참고 자료
쿠키 관련 정책
- SameSite: None, Lax, Strict
- httpOnly: JS에서 접근할 수 없다.
- Secure
CORS 오류?
다른 경로에서 온 인증은 받지 않는다.
CORS 관련 이슈를 무시하는 방법은?
- 백엔드에서 해 주어야 될 일
js에서 작성된 코드 기준
app.enableCors({
origin: /^(http:\/\/localhost:[0-*9]{4})|(http:\/\/127.0.01:[0-9]{4})$/,
methods: ['GET', 'POST', 'OPTIONS'],
credentials: true
})명령 프롬포트에 작성하면 CORS를 무시하는 크롬을 켜 준다. chrome 저장된 경로가 다르다면 경로에 맡게 실행하면 됩ㄴ다.
- windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chrome"- MacOS
$ open -n -a /Applications/Google\Chrome.app/Cotents/MacOS/Google\Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security로그인 유무로 라우터 분기처리 해 주기
const routerData = [
{
id: 0,
path: "/",
label: "Home",
element: <Home />,
withAuth: false,
},
{
id: 1,
path: "/login",
label: "Login",
element: <Login />,
withAuth: false
},
{
id: 2,
path: "/page-a",
label: "페이지 A",
element: <PageA />,
withAuth: true
}
]
const routers = createBrowserRouter(
routerData.map(router => {
if (router.withAuth) {
return {
path: router.path,
element: <GeneralLayout>{router.element}</GeneralLayout>
}
} else {
return {
path: router.path,
element: router.element
}
}
})
)GeneralLayout 컴포넌트에 페이지 이동마다 로그인 여부를 확인하는 함수를 작성해 주면 된다.
JWT vs 세션
진리의 케바케. 상황에 따라서 사용한다.
- 동시 접속자 수
- 서비스 규모
- 앱 / 웹 동시 운용 여부
- 팀 내 인력 구성
- 일정 등등...
JWT
- 서버 / 백엔드 비용 감소
- 프론트엔드 복잡도 높아진다
- 보안상 세션보다 조금 더 위험
세션
- 서버 / 백엔드 비용 대폭 증가
- 프론트엔드 인증 쉬워짐
- 보안상 약간의 향상
이상적인 폴더 구조?
이번 실습의 폴더 구조는 이렇다! 성환 멘토님의 추천 디렉토리 구조.
📦src
┣ 📂api
┃ ┣ 📜const.ts
┃ ┗ 📜login.ts
┣ 📂components
┃ ┗ 📜Sidebar.tsx
┣ 📂hooks
┃ ┗ 📜useRouter.ts
┣ 📂layout
┃ ┗ 📜GeneralLayout.tsx
┣ 📂pages
┃ ┣ 📜Home.tsx
┃ ┣ 📜Login.tsx
┃ ┣ 📜PageA.tsx
┃ ┣ 📜PageB.tsx
┃ ┗ 📜PageC.tsx
┣ 📂types
┃ ┣ 📜sidebar.ts
┃ ┗ 📜user.ts
┣ 📜App.css
┣ 📜App.tsx
┣ 📜main.tsx
┣ 📜router.tsx
┗ 📜vite-env.d.ts 물론 다양한 방법이 있겠지만 왜 이렇게 디렉토리 구조를 짜고 있는지 고민해 보고, 같이 작업하는 사람과 고민을 나눠 보는 게 좋은 방법!
생산성을 위하여, 필요한 파일을 잘 찾을 수 있도록 하기.
수업에서 나온 Q&A
1. 사이드 프로젝트 중 세션 방식으로 로그인 기능을 구현 중인데 application 탭 쿠키 부분에선 보이지 않지만 request, response 헤더에서는 주고받는 게 보이는 상황입니다! 계속 이렇게 해도 될까요?
넵, 당연한.
2. 프로젝트 어떤 걸 해 봐야 할까요?
지원하는 회사와 비슷한 걸 해 보는 게 가장 좋다. 투두 리스트... 너무 많아요.
3. 전역 상태와 useState 상태를 어떤 기준으로 나누시나요?
이 데이터를 가지고 있어야 하는 게 컴포넌트인지, 이 앱의 전체인지 고민해 보기.
4. rtk-query? react-query?
fetch를 자주 사용하고, 캐시를 관리해야 하면 써 보는 걸 추천한다.
5. 컴포넌트 구현 시 api 호출과 같은 로직을 어디에 두시는 편인가요? ui와 분리하는 게 좋을까요?
분리하는 편이 좋지만 간단한 애플리케이션이라면 분리하지 않아도 된다. 그치만 분리하는 게 좋다!
6. asset 파일을 pubilc에 넣어야 한다고 하셨는데, 리액트에서 public 폴더에 asset을 넣으면 import 해서 불러오지 못 한다고 알고 있습니다.
import를 못 하고, 안 해야 한다. import로 가지고 오면 모듈로 가지고 온다. 이미지 같은 것을 import 해 오면 <img /> 태그가 아닌 <div> 태그가 생성되고 js가 실행되어 브라우저가 캐싱 하지 않는다.
