서론
하루 키워드 정리하기를 해보려고 한다.
아침에 머리 회전이 제일 잘 되기도 하고 전날 복습하기도 좋고
자투리 시간도 남으니까 ?
프로젝트 이후에 시간이 남으면 차근차근 정리를 할 수도 있고
키워드만 알고있다면 나중에 내용을 까먹지 않고 공부할 수 있어서 좋을 것 같다.
본론
1. portal
Portal 은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법
네비게이션 바의 드롭다운 메뉴가 본문 컨텐츠보다 아래에 있어서 버그 fix를 해야했다.
그런데 z-index를 이리저리 만져봐도 잘 되지 않았다.
그러다가 문득 든 생각이
'혹시 자식 컴포넌트가 모든 고난과 역경을 전부 무시하고 최상단에 우뚝 설 방법은 없을까?'
같은 이상한 상상이었다. 그런데 정말로 있는게 신기했다.
역시 개발자들은 멋져. 하고 감탄했는데..
사실 정작 사용하지는 않았고
컴포넌트를 일일히 다 뜯어서 position:relative 부터 z-index 까지 다시 조정해서 해결했다.
portal은 보통 modal 창을 만들때 주로 사용한다고 한다.
요컨데, 부모-자식 간의 제약을 전부 무시하고
정말로 DOM 트리 한 가운데에 우뚝 설 수 있는 마법같은 키워드 임에는 틀림없다.
2. ProtectedRouter
이건 조금 더 신기하다.
말 그대로 route를 protect 하는 개념인데
해당 페이지로 이동하기 전에 분기를 설정해서
이 조건을 만족시키지 않으면 이 페이지로 넘어갈 수 없어! 하는 개념이다.
간단하게
<Route pate='/main' element={<ProtectedRouter><Main/><ProtectedRouter>}
const ProtectedRouter = ({children}) => {
if(유저가 로그인 중인가요?){
return children;
} else {
return <Navigate to='/'>
}
}이제 로그인을 어떻게 인증할 것인지만 명시해주면 된다.
3. axios interceptors
쉽게 생각해서 axios 의 미들웨어 같은 느낌이라고 생각하면 될 것 같다.
로그인을 해서 토큰을 로컬 스토리지에 저장했는데
내 파트의 경우 그 토큰을 이용해서 유저의 일기를 받아오고, 프로필 사진같은 정보를 받아와야 했다.
그럴 때
'axios 요청을 보내기 전에 토큰을 가져와서 토큰과 같이 요청을 할 수 있도록'
도와준다.
const instance = axios.create({
baseURL: "http://localhost:3001",
timeout: 1000,
});
const getToken = () => {
const token = localStorage.getItem("token");
return token ? `Bearer ${token}` : null;
};
instance.interceptors.request.use(async (config) => {
config.headers["Authorization"] = getToken();
return config;
});이런느낌.
그러면 axios에서 request 요청을 할 때,
interceptors 를 거치게 되는데 거칠 때 몰래 토큰을 가져와서 슥 넣어주는
로직을 사용할 수 있다.
결론
기억한다고 했는데 세개밖에 생각이 나지 않았다.
역시 기록하고 살아야해. 음음
