안녕하세요 선생님. 요즘 기업 트렌드에 맞게 tailwind로 진행해보려고 하는데 강의 css 참고하면서 저 만의 방법으로 tailwind로 수정해서 진행해도 상관없겠죠! 혹시 css로 진행한 이유가 있을까요? 요즘 기업에선 tailwind를 더 추구하나요? 저는 tailwind가 더 익숙하더라구요.. 유튜브에서 우연히 제로초 개발자님을 뵙게되어, 제로초의 JS교재와 함께 큰 도움이 되어서 인프런 강의까지 듣게됐네요. 감사합니다!
안녕하세요 개발자님. 백엔드를 만약 구축한다고했을때 구글링해보면 보통 prisma랑 mongoDB를 같이 쓰더라구요 저는 이때까지 mongoDB만 써서 백엔드를 구축했는데 풀스택으로 만든다고 하면 prisma, mongoDB를 같이 쓰는게 좋나요? 둘 사이에 쓰임에 대해서 어떤 다른 목적이 있나요? 아마 목적에 따라 사용하는게 다를 것 같긴한데.. 개발자님께서는 어떻게 생각하시나요?
안녕하세요, next-auth 5 베타를 사용하다가 "r is not a function"이라는 에러 메시지 때문에 next-auth 버전을 "^4.24.5"로 낮추었더니 해결되었습니다. 그런데 vercel에 배포하려하니 자꾸 아래의 사진과 같은 에러 때문에 어려움을 겪고 있습니다...ㅜ 해당 에러 구글에 찾아봐도 해결방법을 모르겠던데 도와주실 수 있으실까요ㅠㅠㅠ
아래와 같은 에러가 발생하는 이유가 제가 처음부터 파일구조를 강사님과 다르게 해서 그런가 싶어서 이미 코드는 짜놓은 상태이지만 src폴더를 만들고 그 안에 app 폴더를 넣어 구조를 똑같이 하니 레이아웃이 깨져서(원인은 아직 못 찾았습니다만 단순 import 위치 문제는 아님은 확실합니다.) 다시 src가 없는 상태로 회귀했습니다. auth.ts 파일을 app 폴더와 같은 위치에 두라고 강의에서 말씀하셔서 그대로 두기도 해보았고 혹시나해서 app 폴더 안에 위치시켰으나 handler를 못찾는 에러는 동일했습니다. 혹시 create next 이후에 다시 src를 만들어서 넣는것이 불가능한가요? 불가능하다면 auth.ts와 middleware.ts의 위치를 현재 제 파일 구조상태에서 어느 위치에 두는 것이 맞나요?
/home 페이지에서 prefetch를 해주지 않고 PostRecommends & followingPosts에서 useQuery로만 데이터를 불러와도 상관없나요 ?? 1번이 맞다고 하면 prefetch를 통해서 dehydrated를 해주는 이유가 궁금합니다. 아니면 서버 컴포넌트에서 react-query를 이렇게도 사용할 수 있다를 보여주신건지 궁금합니다:)
안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다. 기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다. 소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다. /api/auth/[...nextauth]/route.ts const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], callbacks: { async signIn({ account, profile }: any) { if (account.provider === "google") { const response = await fetch( `${process.env.GATEWAY_SERVER_URL}/auth/v1`, { method: "POST", headers: { "Content-Type": "application/json", devicetype: "1", }, body: JSON.stringify({ sns_type: "GOOGLE", key: 인가코드, }), } ); } return true; // Do different verification for other providers that don't have `email_verified` }, }, }; const handler = NextAuth(authOptions); export { handler as GET, handler as POST }; 하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다. 또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!
영상을 3:29 이 부분을 똑같이 하려고하는데, http://localhost:3000/home 로 접속하면 파일이 없다고 합니다.. app 안에 (afterLogin) (beforeLogin)로 나뉘고, home 폴더를 만들어서 layout.tsx 와 page.tsx를 만들어 홈페이지와 홈 레이아웃을 작성하여 루트 레이아웃과 층계별 확인하려고 http://localhost:3000/ 를 들어가면 루트레이아웃은 잘나오는데 http://localhost:3000/home 는 페이지가 없다고 나옵니다.. (afterLogin) 안이 아니라 밖으로 app/home/layout.tsx 와 page.tsx가 있어야만 http://localhost:3000/home 가 잘나오는데 왜이럴까요?
채팅을 계속 올려서 몇개월 치를 사용자가 본다면 위로 채팅 기록이 엄청 쌓일텐데, 실무에서 메모리가 넘치는걸 방지하는 방법으로 사용하시는게 있는지 어떤걸 사용하시는지 궁금합니다. 찾아보니 react-window 같은 라이브러리를 사용해서 실제 랜더링 하는 요소 갯수를 제한하고 스크롤을 유지 시켜서 성능 향상을 하는 글을 봤습니다. 실제로 실무에서 이런 방법을 주로 쓰는지 궁금합니다.
회원가입 페이지 에서 프로필 이미지를 한글이 포함된 이미지명로 업로드했을때 , nextjs의 서버 Formdata에서 한글 파일명이 깨지는 현상 이 있습니다. 해결방법이 있을까요?? Step1. 회원가입 페이지 Step2. 서버 에러 결과 회원가입 페이지 경로 : D:\z-com\src\app\(beforeLogin)\_lib\signup.ts 업로드시 한글 파일명 출력 확인을 위해 아래코드를 추가해봤습니다. formData.getAll("image").map((data, idx) => { console.log(data); }); 업로드 이미지명에 한글이 포함되었을때 출력 -- 한글파일명이 깨져서 출력되고 데이터베이스에 저장됩니다.
NextAuth에서의 session token을 통해 사용자정보랑 세션쿠키를 전달하고있는데요. 만일 access Token이랑 Refresh Token으로 관리를 한다고 한다면, Session Token도 반 강제적으로 사용해야 하는 것같은데 이럴때는 3개의 토큰을 만료일을 컨트롤 해야하는건가요..? 예로 access 30분 session 1시간 refresh 7일 이렇게 가져가서 엑세스와 세션 두가지의 토큰을 다 갱신해주어야 하는건지 아니면 제가 지금 이상한 프로세스를 생각중인지 모르겠네요 .. NextAuth에 리프래시 엑세스토큰을 통상적으로 어떻게쓰는지가 궁금합니다.. session token때문에 너무 혼동이오네요..
만약 새창에서 /compose/tweet을 열었을 때 X버튼을 누르면 back()으로 동작되어 창이 닫히지 않거나, 이 전페이지 (트위터 창이 아닌 다른 창)으로 이동하는 이슈가 발생하여 x.com 은 어떻게 동작되는지 확인했는데, 이미지 처럼 새창에서 /compose/tweet을 열었을 때, history에 home url이 추가가 되어 뒤로가기를 눌렀을 때 홈으로 돌아가는 것 같습니다. 이렇게 hitory url을 제어하는 방법이 있을까요? 구글링해도 정보를 얻을 수 없어 글 올립니다 ㅠ
React Query가 사실 데이터를 불러오고 캐싱하는 이유가 가장 큰 것으로 알고있습니다. 하지만, Next14부터는 fatch에 store 기능이 생기면서 캐싱이 되는걸로 알고 있는데, 그러면 데이터 캐싱만을 사용하며 굳이 React Query를 사용하지 않아도 되는건가요?
안녕하세요! 클론하다가 React에서 Framer로 레이아웃을 이전 이후로 나누어서 페이지 전환을 스무스하게 animation을 줬던 기억이 있어서 반영해봤는데요. 위의 페이지 전환 효과를 next 프로젝트에도 반영해보려고 하는데 App Router의 특성? 때문인지 {children} 으로 라우팅을 전달 받기 때문에 이전, 이후가 아닌 공통적인 레이아웃으로 취급되고 명확한 구분(id)가 없기 때문에 부드러운 전환이 잘 안되는 걸까요.. 유추한 내용이 맞을까요..? 타 라이브러리 질문 안받으신다면 죄송함다 ㅠ const Framer = ({ children }: { children: ReactNode }) => { const pathName = usePathname(); return ( <> <AnimatePresence mode="wait" initial={false}> <motion.div key={pathName} initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} transition={{ duration: 0.5 }} > {children} </motion.div>{" "} </AnimatePresence> </> ); };
안녕하세요 섹션 2 > 레이아웃 클론 강의를 수강 중에 로고에 inline-block 을 사용하신 부분이 있어서요 block 으로 해도 비슷한 노출이 되는 듯해서, 어떤 의도가 있으셨을지 또는 다른 효과가 있는지 궁금합니다 :) .logo { display: inline-block; height: 56px; margin-top: 2px; }
안녕하세요 강의 잘 듣고있습니다. 강의를 듣다가 궁금한 점이, browser.ts와 http.ts 두개를 만든 점 입니다. next는 CSR과 SSR을 둘다 사용하기에, 서버에서도 데이터 처리를 하려고 http.ts를 통해 서버 데이터 처리를 하는 게 맞나요? 아래 코드는 브라우저 환경일 때만 brower.ts를 실행시키고 http.ts를 브라우저 환경이든 아니든 항상 켜져있는건가요? if (typeof window !== 'undefined') { if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') { // eslint-disable-next-line global-require require('@/mocks/browser') } } 그렇다면 만약 react에서 사용하게 되면 CSR만 한다는 가정하에 http.ts는 필요 없게 되는건가요?
