안녕하세요, 김당쿽🥕입니다! 원티드 프리온보딩 프론트엔드
과정에 참여하게 되었고, 3회차 수업을 들은 후 남기는 기록입니다!
jwt에 비하면 추상적인 토큰. 로그인을 했을 때 세션을 보내고, 다시 요청을 보내게 되면 세션을 다시 돌려보낸다.
사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 시간, 사용자 로그인이 유효한 시간 동안 서버에서 세션 아이디를 기록해 두고 인증에 사용하는 방식을 세션 로그인 방식이라고 한다.
HHTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. 서버가 페이지와 쿠키를 전송하고, 브라우저가 같은 서버의 다른 페이지(및 API) 등을 요청한다.
참고 자료
다른 경로에서 온 인증은 받지 않는다.
app.enableCors({
origin: /^(http:\/\/localhost:[0-*9]{4})|(http:\/\/127.0.01:[0-9]{4})$/,
methods: ['GET', 'POST', 'OPTIONS'],
credentials: true
})
명령 프롬포트에 작성하면 CORS를 무시하는 크롬을 켜 준다. chrome 저장된 경로가 다르다면 경로에 맡게 실행하면 됩ㄴ다.
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chrome"
$ 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
컴포넌트에 페이지 이동마다 로그인 여부를 확인하는 함수를 작성해 주면 된다.
진리의 케바케. 상황에 따라서 사용한다.
이번 실습의 폴더 구조는 이렇다! 성환 멘토님의 추천 디렉토리 구조.
📦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
물론 다양한 방법이 있겠지만 왜 이렇게 디렉토리 구조를 짜고 있는지 고민해 보고, 같이 작업하는 사람과 고민을 나눠 보는 게 좋은 방법!
생산성을 위하여, 필요한 파일을 잘 찾을 수 있도록 하기.
넵, 당연한.
지원하는 회사와 비슷한 걸 해 보는 게 가장 좋다. 투두 리스트... 너무 많아요.
이 데이터를 가지고 있어야 하는 게 컴포넌트인지, 이 앱의 전체인지 고민해 보기.
fetch를 자주 사용하고, 캐시를 관리해야 하면 써 보는 걸 추천한다.
분리하는 편이 좋지만 간단한 애플리케이션이라면 분리하지 않아도 된다. 그치만 분리하는 게 좋다!
import를 못 하고, 안 해야 한다. import로 가지고 오면 모듈로 가지고 온다. 이미지 같은 것을 import 해 오면 <img />
태그가 아닌 <div>
태그가 생성되고 js가 실행되어 브라우저가 캐싱 하지 않는다.