안녕하세요. 강의 잘 듣고 업무에 활용 중 입니다. 감사합니다. 업무에 활용 중 문의사항이 있어서 질문 드립니다. next.js 문서를 참고하여 docker 이미지로 next.js application을 배포 했습니다. https://nextjs.org/docs/app/building-your-application/deploying#docker-image 프로젝트 특성 때문에 하나의 docker 이미지가 phase마다 동일하게 사용이 되는데요. phase별로 환경설정 값들이 달라서 . evn.dev , .env.beta, .env.real등으로 사용을 하고 싶은데요. server가 로드될때 .env.[phase] 를 로드하는 방법에 대해 알고 싶습니다. 가능하면 next.js가 지원하는 방법으로 구현을 했으면 싶은데요. 가이드를 읽어봐도 이해가 잘 안되어서 문의 남깁니다. https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables 감사합니다.
next.js에서 서버컴포넌트에 데이터 패칭할 때 13버전 이후부터는 const fetchPosts = async () => { const response = await fetch("URL", { cache: "no-store", }); return response.json(); }; cache설정으로, ssr, ssg를 한다고 들었습니다. 이때, 궁금한게 있어요. 1. get방식, post방식 등, 어떻게 구별하나요? 2. 만약 보낼때, header에 토큰값을 보내거나 할 때, 서버컴포넌트에서 어떻게 처리하나요? 그때도 cache설정만 해주면, ssr이 적용 되나요??
msw로 Front에서 미리 만들때 요령이 있나요? 백앤드개발자와 api로 전달 될 값을 json으로 주겠다, 배열로 주겠다, 스트링값으로 주겠다 확정을 짓고 msw를 만들어서 작업해야 하는건가요? msw에서 json으로 만들때 데이터의 구성요소들을 제가 작업한것과 다르게 배열로 준다거나 json안에 데이터의 구조가 예상과 다르게 주면 그에따라 수정이 너무 많이 생길 거 같은데 제가 너무 쓸데없는 걱정하는건가요?
https://www.inflearn.com/questions/949944 위 질문 올리신 분과 완전 똑같은 상황인데 멘토님 댓글 보고 수정해봤는데도 해결되지 않네요ㅠㅠ.. 수업과 코드가 똑같은데 왜 저만 이런 에러가 발생하는지 원인이 궁금하고 해결법도 알고 싶습니다!!
기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데, const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends}); const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.
안녕하세요 강의 잘 보고있습니다 /api/postRecommends API 호출로 데이터를 부를시에 mock data의 content 부분에 한글이 입력이 될 경우 PostRecommends 파일의 useQuery data 부분이 undefined로 나옵니다 그래서 확인을 해보니 msw의 HttpResponse.json에서 한글이 입력될 경우 Syntax Error 뜨는 것 같은데요 하지만 영어로 작성할 경우 정상적으로 데이터를 받아 옵니다 network 탭을 보아도 한글을 입력하든 영어가 입력되던 response에는 정상적으로 데이터가 보이지만, React-Query Dev Tool에서는 data: null 처리가 되고 실제로 받아오는 data 또한 없습니다 아래는 그에 따른 이미지 입니다 content에 한글이 들어갈 경우 content에 한글이 들어가지 않을 경우 한글만 들어가면 Syntax Error가 뜹니다 특정 버전에 대한 버그인지 원인을 모르겠습니다 ,,
개인 프로필 상세 페이지가 하나가 아니라 여러개인 것이기 때문이겠죠? [username]/status/[id]에서 id 값이 왜 필요한지 제가 트위터? X? 를 한번도 안써봐서 프로필 페이지가 사용자 이름 외에 또 id가 왜 필요한지 뜬금없이 궁금해져서 질문남기네요... 앞의 내용 제대로 들었으면 당연한 소리를 질문 하는거 같습니다만...개발 강의랑 크게 관련 없는 질문일 수 있는데 혹시나 해서 남깁니다.
강의 10:09에서 해당 에러가 나온 경우는 인터셉트 라우트에 해당하는 폴더와 패러렐라우트 경로에 해당하는 폴더가 동시에 존재해서 나타날 수 있다고 하였는데, 생각해보니 그렇다면 이 부분이 패러렐라우트 기능 구현할 때 주의해야 할 부분인 것 같아서 질문 드립니다. 혹시 어떤 경우에 지금 이런 에러가 발생하고 이런 에러를 추후에 방지하거나 오류를 수정하려면 어떤 부분부터 확인해야 하는지 미리 조언 얻고 싶습니다.
강의를 위해 준비된 코드 붙여넣고 그 유용함은 이해하였습니다. 그거랑 별개로 혼자서 구상해서 만들어보려고 할 때 미리 스타일을 눈으로 보면서 넣는게 아니다보니 무엇부터 배치해서 넣을지 좀 생각하기 까다로운 부분이 있더라고요. 그림 크기나 박스 크기나 아무래도 다르다보니 좌측위에서부터 우측아래로 차례대로 입력하려고 해도 배치 순서를 정하는게 조금 까다로운 부분이 있고요. 그리고 막상 넣다 보면 기존 스타일이 생각한 대로 맞아 들어가지 않아서 스타일 방식을 수정하다보면 간섭도 생겨서 배치를 수정하고서 다시 정렬 시키기도 하고요. 이와 관련해서 클론코딩이 아니라 실제 디자인을 구상한다고 할 때 style이랑 컴포넌트 배치를 어떻게 구상하는지 시행착오를 줄일 노하우를 알고 싶습니다. 예를 들면 화면의 큰 부분부터 채워 넣어 가는게 맞는지 전체적으로 구상을 하고 좌측위부터 아래로 쭉 진행하는게 맞는지... 일단 클론코딩 강의 여기까지 보면서 느낀 바로는 큰 부분부터 채워 넣는게 유리하다는 느낌은 받았지만 그것만으로는 어렵다라고 느끼는데 그냥 경험으로 쌓이는 것일지 알고 싶습니다.
안녕하세요 제로초님 강의 잘 보고 있습니다. 다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다. 0. 콘솔에 확인한 결과 처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다. 감사합니다
질문1) bgColor에 값을 입력하면 바로 그 색상이 무엇인지 표시 되는데 어떻게 해야 하나요? 질문2) leftIcon에 img src 항목에 영상과 다르게, </img> 로 닫아야 하던데 문법이 바뀐 건가요? react v18(v17에서는 typescript error로 실행을 못했습니다) 기준으로 설치되어 있습니다. *제 수준은 자바스크립트 기본 문법정도 이해하고 있고, 현재 그냥 따라해 보는 수준입니다.
로그아웃&로그인 여부에 따라 화면 다르게 하기 강의까지 듣고 프로젝트에 적용 중입니다. 로그인을 하고 홈페이지로 이동하는데, me data 에 null 값이 들어와서 로그아웃 버튼이 보이지 않습니다. 그런데 새로고침을 하면 다시 원하는 화면이 그려지더라구요. 아래에 비슷한 질문이 있어서 확인해봤는데 해결이 안됐습니다. //LogoutButton.tsx 'use client' import { signOut, useSession } from 'next-auth/react' import { useRouter } from 'next/navigation' export default function LogoutButton() { const router = useRouter() const { data: me } = useSession() const onLogout = () => { signOut({ redirect: false }).then(() => { router.replace('/') }) } // 내 정보 없으면 로그아웃 버튼 안 보여주기 if (!me?.user) { return null } return ( <button onClick={onLogout}> <div> <div>🔙로그아웃🔙</div> <img src={me.user?.image!} alt={me.user?.email as string} /> </div> <div> <div>{me.user?.name}</div> <div>@{me.user?.email}</div> </div> </button> ) }
몇주간 계속 공부하면서 고민을 해봤는데... 결과적으로 서버 컴포넌트에서 데이터를 가져왔을때 좋은 상황이 어떤 경우인지 모르겠습니다. 서버 컴포넌트에서 데이터를 가져왔을때, 그 데이터는 SEO에 반영이 되나요? NEXTJS의 공식문서에서는 서버 컴포넌트가 유리한 상황이 'data fetch' 라고 되어 있습니다. 하지만 지난번에 질문했을때 클라이언트 컴포넌트에서 데이터를 가져오는게 보통 더 좋다는 답변을 받았었습니다. 클라이언트에서 데이터를 가져오는게 좋은 상황과, 서버에서 데이터를 가져오는게 좋은 상황을 구분을 못하겠어서 조언을 구하고자 질문 드립니다.
관련된 질문이 있나 찾아보고 혼자 코드 비교해보며 고군분투했지만 이유를 알 수가 없어 질문을 남깁니다! 질문 (afterLogin) > _component > LogoutButton.tsx 파일에서 useSession() 훅을 통하여 받아오는 data가 없어 if(!me?.user) 문에서 return 처리가 되어 로그아웃 버튼이 렌더링 되지 않습니다 -> 로그인이 제대로 되지 않는 것 같습니다 관련되서 추적을 해보니 터미널 창에 아래와 같은 에러가 뜹니다 네트워크 탭에서 session의 경우 response가 null로 넘어옵니다 application의 cookie또한 담기지 않습니다 아래는 관련된 파일들의 코드입니다.. mocks > handlers.ts auth.ts middleware.ts [...nextauth] > route.ts package.json 혹시나 다른분들도 저 같은 경우가 있으신 분들은 답변 한번 부탁드리겠습니다
영상 중 해당 위치에서 left와 right를 둘이 같이 그대로 다른 곳에 쓰여진 코드를 가져오는 기능이 있는 듯이 보이는데요. 혹시 vscode에서도 해당 기능 사용할 수 있나요? 커서 올려두면 하나씩은 보이는데 저렇게 한번에 붙이는 기능이 있으면 좋겠네요. 강의 내용과 크게 상관없는 내용인데... 편리해보이는데 찾아볼 때 바로 원하는게 안나와서요.
