Conversation
|
수고 하셨습니다 ! 위클리 미션 하시느라 정말 수고 많으셨어요. |
There was a problem hiding this comment.
오호 ! 프리티어를 적용하셨군요? 😊👍
코드가 정렬된 모습이 보기 좋습니다 !!
| handleUserInfo(); | ||
| setIsHideHeader(hidePages.includes(pathname)); | ||
| setIsFixed(noHeaderFixed.includes(pathname)); |
There was a problem hiding this comment.
오호. 조건부 렌더링을 통해서 레이아웃을 감추고 있군요?
| setFixed(false); | ||
| } | ||
| handleUserInfo(); | ||
| setIsHideHeader(hidePages.includes(pathname)); |
There was a problem hiding this comment.
pathname의 특정 경로 체크는 startsWith로 정확하게 할 수 있어요.
| setIsHideHeader(hidePages.includes(pathname)); | |
| setIsHideHeader(hidePages.some(page => pathname.startsWith(page))); |
경로의 포함 여부를 체크할 때 includes 메서드는 문자열의 부분 일치를 검사하므로, 정확한 경로 매칭이 필요하다면 startsWith를 사용하는 것이 더 좋습니다. startsWith는 문자열이 특정 문자열로 시작하는지 확인할 수 있어서 의도한 대로 정확한 경로를 확인할 수 있습니다.
includes란?: 문자열이 특정 문자열을 포함하고 있는지를 검사합니다. 부분 일치를 확인할 때 사용됩니다.
const pathname = '/signin/extra';
console.log(pathname.includes('/signin'));
// true
startsWith란?: 문자열이 특정 문자열로 시작하는지를 검사합니다. 정확한 시작을 확인할 때 사용됩니다.
const pathname = '/signin/extra';
console.log(pathname.startsWith('/signin'));
// true| const [fixed, setFixed] = useState(true); | ||
| const handleUserInfo = async () => { | ||
| const res = await joinInstance.get(`/sample/user`); | ||
| setUserInfo(JSON.parse(JSON.stringify(res.data))); |
There was a problem hiding this comment.
혹시 JSON 임베드 모듈을 사용하게 된 이유가 있으실까요? 🤔
| const {pathname} = useRouter(); | ||
| const [fixed, setFixed] = useState(true); | ||
| const handleUserInfo = async () => { | ||
| const res = await joinInstance.get(`/sample/user`); |
There was a problem hiding this comment.
다음과 같이 구조분해할당을 할 수 있습니다 !
| const res = await joinInstance.get(`/sample/user`); | |
| const { data } = await joinInstance.get(`/sample/user`); |
| handleLogout: () => {}, | ||
| }); | ||
|
|
||
| export default function AuthProvider({ children }: { children: React.ReactNode }) { |
There was a problem hiding this comment.
컨텍스트를 실천하셨군요 !! 뿌듯합니다 😊😊😊😊
이렇게 금방 잘 실천하시다니.. 강의한 보람이 느껴지는군요 !! 👍👍
| export const instance = axios.create({ | ||
| baseURL: 'https://bootcamp-api.codeit.kr/api/users/1', |
There was a problem hiding this comment.
혹시 joinInstance이 필요할까요?:
| export const instance = axios.create({ | |
| baseURL: 'https://bootcamp-api.codeit.kr/api/users/1', | |
| export const instance = axios.create({ | |
| baseURL: 'https://bootcamp-api.codeit.kr/api', |
위와 같이 설정하여 사용하시고 필요하실 때에 /users/1를 붙이는게 어떨까요? 🤔
| $title = resTitle.data; | ||
| $content = resContent.data; | ||
| if(!$title.data[0]) { | ||
| const [resTitle, resContent] = await Promise.all([instance.get(`/folders/${query.id}`), instance.get(`/links?folderId=${query.id}`)]); |
| } catch (error) { | ||
| console.log('ERROR IN SERVER FETCHING DATA: ', error); |
There was a problem hiding this comment.
console은 생각보다 다양한 메서드가 있어요.
| console.log('ERROR IN SERVER FETCHING DATA: ', error); | |
| console.error(error); |
console.log 말고도 console.error, console.dir, console.count 등 console은 개발자들이 모르는 많은 메써드들이 있어요 !
| export async function getServerSideProps(context: GetServerSidePropsContext) { | ||
| const { req, resolvedUrl } = context; | ||
| if (!req) return { props: {} }; | ||
|
|
||
| const isSigninPage = resolvedUrl === SIGNIN_PAGE_URL; | ||
|
|
||
| if (req.headers.referer) { | ||
| // 내부 접속 | ||
| if (req.headers.cookie) { | ||
| return { | ||
| redirect: { | ||
| destination: req.headers.referer, | ||
| permanent: false, | ||
| }, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| if (!req.headers.referer) { | ||
| //외부 접속 | ||
| if (req.headers.cookie) { | ||
| return { | ||
| redirect: { | ||
| destination: BASE_PAGE_URL, | ||
| permanent: false, | ||
| }, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| if (!req.headers.cookie && !isSigninPage) { | ||
| return { | ||
| redirect: { | ||
| destination: SIGNIN_PAGE_URL, | ||
| permanent: false, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| return { props: {} }; | ||
| } |
There was a problem hiding this comment.
너무 훌륭합니다 😂😂
서버사이드로 인증인가 처리를 해내셨군요 😂👍
|
와아.. 미소님 정말 즐겁게 리뷰했어요. 다음 코드도 기대할게요 ! 궁금한 점 있으시면 지금처럼 적극적으로 물어보세요 😊😊😊 |
요구사항
기본
심화
주요 변경사항
스크린샷
미션디자인
멘토에게