Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| function JoinPage({ searchParams }: { searchParams: { type: string } }) { | ||
| const { type } = searchParams; | ||
|
|
||
| return type === 'google' ? <GoogleJoinForm /> : <JoinForm />; |
There was a problem hiding this comment.
구글 로그인은 회원가입 플로우가 단축돼서 별도 컴포넌트로 만들었어요
| const handleGoogleAuth = async (code: string) => { | ||
| handleGoogleSignIn({ authorization_code: code }); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const code = urlParams.get('code'); | ||
|
|
||
| if (code) { | ||
| handleGoogleAuth(code); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
여기서만 사용되는데 handleGoogleAuth라고 한번 더 감싸야 하는 이유가 있나요?
There was a problem hiding this comment.
그렇긴 하네요 바로 handleGoogleSignIn 해도 될듯
| <button | ||
| type='button' | ||
| onClick={() => handleClick('남성')} | ||
| className={`${buttonStyle} ${(watch('personal_infos.gender.value') === '남성' || typeof window === 'undefined') && selected}`} |
There was a problem hiding this comment.
흠 이것도 ssr 때문에 넣어놓은 걸로 기억하는데
There was a problem hiding this comment.
생각해보니까 이건 지워도 될거같아요, 성별 선택이 required로 변경되면서 서버사이드에서 미리 선택할 필요 없다고 생각.
그런데 이거랑 별개로 이 컴포넌트 자체가 'use client' 인데 서버사이드 렌더링이 되나요 ?
There was a problem hiding this comment.
저번에도 남긴 것처럼 next는 기본적으로 모든 컴포넌트는 ssr로 동작하고, hydration이 클라이언트에서 이뤄지는 걸로 알고 있어요. 'use client' 라는 지시자가 이 컴포넌트를 완전히 클라이언트에서 렌더링 한다는 의미는 아닙니다
There was a problem hiding this comment.
예전에 과제리뷰할때 서버에서 초기 데이터 패칭하고 클라이언트 컴포넌트로 초기데이터 prop 넘겨주는 방식으로 ssr 챙긴다고 했다가, next dev tools로 확인해 봤는데 초기데이터로 prop 받은 컴포넌트가 빈 html로 오고 있다고 ssr이 안되고 있다고 리뷰를 받은적이 있어서 뭐가 맞아요 ?
There was a problem hiding this comment.
클라이언트 컴포넌트는 직렬화된 Json 같은 형태로 내려온다고 알고 있는데, 이것도 ssr이에요 ?
There was a problem hiding this comment.
저는 next.js 클라이언트 컴포넌트를 dynamic으로 불러오지 않는 이상 완전히 csr 되는게 아닌 걸로 알고 있고, html 뼈대 같은 정적인 틀은 ssr 되는 걸로 알고 있어요. 직렬화된 json으로 전달된다는 건 클라이언트 컴포넌트만 적용되는게 아니라 server + client component 조합의 react tree입니다
참고..
https://stackoverflow.com/questions/75692116/next-js-13-window-is-not-defined
There was a problem hiding this comment.
지민님이 보내주신 링크에도 클라이언트 사이드 상태 업데이트는 useEffect 나 useState를 사용하라는데, 이걸 지피티 한테 물어보니까 서버사이드에서 window === undefined로 선택한 상태와, 렌더링이 되면서 watch로 선택한 상태가 서로 불일치하는 하이드레이션 에러가 발생할 수 있다고 해요.
여기서는 해당되지 않는거 같은데 다른데에서 이런 방식 사용처가 있을경우 한번더 고민해보는게 좋을듯 합니다 ~
There was a problem hiding this comment.
음 그런데 실제로는 우리가 이 폼의 값을 실시간으로 저장해놓지 않기 때문에(step 넘어가면 저장하는 걸로 알고 있음) 새로고침하면 클라이언트 상태가 초기화되어서 hydration 에러는 일어나지 않습니다. 그래서 초기값을 서버 = 클라이언트가 같은 값을 가지도록 설정한거구요
| @@ -1,4 +1,5 @@ | |||
| export const JOBS = [ | |||
| { id: 0, value: '선택' }, | |||
There was a problem hiding this comment.
이거 가입 시에 포함 안되게 필터링 하신거죠?
There was a problem hiding this comment.
jobs 선택이 필수여서 초기값을 변경했어요
| '/feed', | ||
| '/search', | ||
| '/memo', | ||
| '/review', | ||
| '/explore', | ||
| '/book', | ||
| '/search-home', | ||
| '/mission', |
There was a problem hiding this comment.
'/explore', '/mission'
이 두가지 제외하고는 로그인 전에도 접근 가능한 페이지들입니다
접근 제한해야하는 페이지들 제외하고는 추가 안해도 돼요
There was a problem hiding this comment.
요게 무슨말씀이실까요 ? 이해를 못했어요
회원가입 스프린트 기획에서 로그인하기 전에는 다른 페이지 접근 막자는 요구사항 있어서 추가한거긴 한데 지민님 말씀대로 해도 이 요구사항 만족할까요 ?
There was a problem hiding this comment.
로그인하기 전에 모든 페이지 접근을 다 막는 거였나요?
이 말대로라면 우리가 원래 웹으로 만들기로 한 목적이랑 너무 달라지고 저희가 얻을 수 있는 게 없다고 생각하는데..!
src/middleware.ts
Outdated
|
|
||
| if (pathname === '/') { | ||
| if (!sessionToken) { | ||
| console.log('home'); |
2 participants
📍 작업 내용
📍 구현 결과 (선택)
📍 기타 사항