173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next + React Query로 SNS 서비스 만들기
강의 10:09에서 해당 에러가 나온 경우는 인터셉트 라우트에 해당하는 폴더와 패러렐라우트 경로에 해당하는 폴더가 동시에 존재해서 나타날 수 있다고 하였는데, 생각해보니 그렇다면 이 부분이 패러렐라우트 기능 구현할 때 주의해야 할 부분인 것 같아서 질문 드립니다. 혹시 어떤 경우에 지금 이런 에러가 발생하고 이런 에러를 추후에 방지하거나 오류를 수정하려면 어떤 부분부터 확인해야 하는지 미리 조언 얻고 싶습니다.
해결됨
Next + React Query로 SNS 서비스 만들기
강의를 위해 준비된 코드 붙여넣고 그 유용함은 이해하였습니다. 그거랑 별개로 혼자서 구상해서 만들어보려고 할 때 미리 스타일을 눈으로 보면서 넣는게 아니다보니 무엇부터 배치해서 넣을지 좀 생각하기 까다로운 부분이 있더라고요. 그림 크기나 박스 크기나 아무래도 다르다보니 좌측위에서부터 우측아래로 차례대로 입력하려고 해도 배치 순서를 정하는게 조금 까다로운 부분이 있고요. 그리고 막상 넣다 보면 기존 스타일이 생각한 대로 맞아 들어가지 않아서 스타일 방식을 수정하다보면 간섭도 생겨서 배치를 수정하고서 다시 정렬 시키기도 하고요. 이와 관련해서 클론코딩이 아니라 실제 디자인을 구상한다고 할 때 style이랑 컴포넌트 배치를 어떻게 구상하는지 시행착오를 줄일 노하우를 알고 싶습니다. 예를 들면 화면의 큰 부분부터 채워 넣어 가는게 맞는지 전체적으로 구상을 하고 좌측위부터 아래로 쭉 진행하는게 맞는지... 일단 클론코딩 강의 여기까지 보면서 느낀 바로는 큰 부분부터 채워 넣는게 유리하다는 느낌은 받았지만 그것만으로는 어렵다라고 느끼는데 그냥 경험으로 쌓이는 것일지 알고 싶습니다.
해결됨
Next + React Query로 SNS 서비스 만들기
inlay hints를 얘기하는 것일까요? 영상제목에 있는 만큼 해당 개념을 인지해두고 넘어가려는데, PostForm 만드는 과정 중에 해당 개념이 어떤 기능의 무엇인지 영상을 봤을 때 잘 모르겠네요.
미해결
Next + React Query로 SNS 서비스 만들기
page.tsx에서 props로 받은 params 또는 searchParams를 console.log()로 확인해보고 싶은데 찍히지가 않아서요. 원래 그런건가요...?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 강의 잘 보고 있습니다. 다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다. 0. 콘솔에 확인한 결과 처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다. 감사합니다
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. FrontEnd 수업, "섹션 3. 훈훈한 Javascript > JS로 HTML, CSS조작" 강의 중 문의 드립니다.(Visual Studio Code사용) script.js 실습 중, const messageContainer = document.querySelector('#d-day-message'); const container = document.querySelector('#d-day-container'); container.style.display = 'none'; messageContainer.style.color = 'red'; container.style 작성시 style속성 팝업이 안됩니다. 그냥, key-in하면 적용은 됩니다. style 속성을 팝업되게 할려면, 어떻게 해야할까요? 실습 중 궁금하여 문의 드립니다.
해결됨
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
질문1) bgColor에 값을 입력하면 바로 그 색상이 무엇인지 표시 되는데 어떻게 해야 하나요? 질문2) leftIcon에 img src 항목에 영상과 다르게, </img> 로 닫아야 하던데 문법이 바뀐 건가요? react v18(v17에서는 typescript error로 실행을 못했습니다) 기준으로 설치되어 있습니다. *제 수준은 자바스크립트 기본 문법정도 이해하고 있고, 현재 그냥 따라해 보는 수준입니다.
해결됨
Next + React Query로 SNS 서비스 만들기
로그아웃&로그인 여부에 따라 화면 다르게 하기 강의까지 듣고 프로젝트에 적용 중입니다. 로그인을 하고 홈페이지로 이동하는데, 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> ) }
미해결
Next + React Query로 SNS 서비스 만들기
몇주간 계속 공부하면서 고민을 해봤는데... 결과적으로 서버 컴포넌트에서 데이터를 가져왔을때 좋은 상황이 어떤 경우인지 모르겠습니다. 서버 컴포넌트에서 데이터를 가져왔을때, 그 데이터는 SEO에 반영이 되나요? NEXTJS의 공식문서에서는 서버 컴포넌트가 유리한 상황이 'data fetch' 라고 되어 있습니다. 하지만 지난번에 질문했을때 클라이언트 컴포넌트에서 데이터를 가져오는게 보통 더 좋다는 답변을 받았었습니다. 클라이언트에서 데이터를 가져오는게 좋은 상황과, 서버에서 데이터를 가져오는게 좋은 상황을 구분을 못하겠어서 조언을 구하고자 질문 드립니다.
해결됨
Next + React Query로 SNS 서비스 만들기
관련된 질문이 있나 찾아보고 혼자 코드 비교해보며 고군분투했지만 이유를 알 수가 없어 질문을 남깁니다! 질문 (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 혹시나 다른분들도 저 같은 경우가 있으신 분들은 답변 한번 부탁드리겠습니다
해결됨
Next + React Query로 SNS 서비스 만들기
영상 중 해당 위치에서 left와 right를 둘이 같이 그대로 다른 곳에 쓰여진 코드를 가져오는 기능이 있는 듯이 보이는데요. 혹시 vscode에서도 해당 기능 사용할 수 있나요? 커서 올려두면 하나씩은 보이는데 저렇게 한번에 붙이는 기능이 있으면 좋겠네요. 강의 내용과 크게 상관없는 내용인데... 편리해보이는데 찾아볼 때 바로 원하는게 안나와서요.
미해결
Next + React Query로 SNS 서비스 만들기
search 페이지의 Tab 컴포넌트에서 질문이 있습니다. searchParams에 hot과 new가 전달되는 부분이 어딘지 모르겠어서 질문드립니다.. 제 생각으로는 Tab 컴포넌트에서 인기, 최신 div를 클릭해서 값을 전달해야 할 것 같은데 해당 부분에서는 current useState만 변경하고 다른 변경은 없는 것 같습니다. 어느 부분에서 searchParams에 값을 전달해서, searchParams.get('q')로 값을 받아올수있는지 궁금합니다.. 아래 코드 첨부드립니다! "use client"; import style from "../search.module.css"; import { useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; export default function Tab() { const [current, setCurrent] = useState("hot"); const router = useRouter(); const searchParams = useSearchParams(); const onClickHot = () => { setCurrent("hot"); router.replace(`/search?q=${searchParams.get("q")}`); }; const onClickNew = () => { setCurrent("new"); router.replace(`/search?${searchParams.toString()}&f=live`); }; return ( <div className={style.homeFixed}> <div className={style.homeTab}> <div onClick={onClickHot}> 인기 <div className={style.tabIndicator} hidden={current === "new"}></div> </div> <div onClick={onClickNew}> 최신 <div className={style.tabIndicator} hidden={current === "hot"}></div> </div> </div> </div> ); }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
figma devmode가 24년 2월부로 유료화 되었다고 하는데 이제는 더이상 css속성을 확인할수 없나요? 회원가입 폼 만들어보려고 하는데 css가 안보이네요ㅠ
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의 잘 보고 있습니다 문득 궁금한점이 생겨 여쭤보고 싶은게 있는데요 ! api/auth/[...nextauth]/route.ts 파일 안에 NextAuth가 제공해주는 GET과 POST를 export해놓으면 api/auth/...something 경로로 타고 들어오는 api 요청은 export한 GET과 POST로 사용이 된다라고 말씀해주셨는데 그 GET과 POST는 어디서 호출을 하는걸까요 ? 마찬가지로 middleware.ts 파일에도 NextAuth에서 제공하는 auth를 middleware로 네이밍을 변경하여 사용한다고 하셨는데 그 middleware도 어디서 호출을 해서 사용하고 있는걸까요 ? 내보냈다는건(export) 어디선가 받아와서(import) 해서 사용하는게 아닌가 싶어서 질문 드려봅니다 초보적인 질문이지만 해결하고 가고 싶어서 질문 드려봅니다
해결됨
Next + React Query로 SNS 서비스 만들기
Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx) 강의를 듣던 중 헷갈리는 부분이 있어서 질문 남깁니다. atferLogin > page.tsx 에서 Suspense를 사용해서 TabDeciderSuspense 를 감싸주고 있는데 TabDeciderSuspense 내부 코드를 보면 위와 같이 prefetch를 통해 postsRecommends관련 데이터를 서버에서 그려서 클라이언트로 하이드레이션 해주고 있습니다. 제가 이해한 바로는 이 장점이 사용자가 해당 페이지를 빠르게 볼 수 있다. 그래서 서스팬스를 사용하지 않았을 땐 로딩바가 뜰 새도 없이 페이지가 잘 보여지게 되는데, 지금은 프리패치로 데이터를 먼저 받아오는것과 서스팬스 풀백을 통해 로딩에 관한 부분을 둘 다 사용하고 있는 걸로 보여서 좀 헷갈려서 질문드려요. 서스팬스로 로딩을 보여주고 싶으면 TabDeciderSuspense에서 프리패치를 사용하는 의미가 없는 거 아닌가요?
해결됨
Next + React Query로 SNS 서비스 만들기
지금 영상에서 @modal 폴더 내의 login 모듈css와 page.tsx 코드를 붙여넣기 전까지는 (beforeLogin) 폴더 내의 layout.tsx와 page.tsx에 의해 동작할 때 같은 화면에 패러렐 모달이 동작하였는데 해당 css 붙여넣는 순간 새로운 창이 팝업되면서 패러렐 모달이 로그인 창으로서 뜨는 것이 어떻게 구현되는 것인지 설명이 안되어서 그 부분이 궁금해 지길래, 코드를 다운받아 하나씩 뜯어보면서 비교해보려 했는데요... 코드 다운을 하려 보니 1챕터가 다 끝난 이후에 코드가 정리되어 있어서 해당 폴더에 이 강의에서 설명하는 코드 파일이 없네요. 강의 후기에서 정리가 잘 안되어 있다고 후기 남긴 일부는 이런 것을 얘기한 것 같네요... 해당 팝업 기능은 어떤 부분에서 구현되는 것인지, 단순히 css 붙여넣기 만으로 구현이 안될 것 같은데, 그런 기능이 따로 있는 것인지 알려주시면 감사하겠습니다. 뒤의 강의 계속 보다 보면 나올지 모르기에 일단 여기다 질문 넘기고 다음 강의 듣겠습니다. 혹시 뒤에서 설명을 해주시는게 맞더라도, 이 영상 보고서 그런 고민을 하고 있는 분들이 생길 수 있으니, 지금 영상 수업 질문에 간단히라도 알려주시면 감사하겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
랜더링 되는 layout.tsx에도 metadata를 명시하고, page.tsx에도 metadata를 명시한다면 page.tsx의 메타 데이터로 오버라이딩 되는 것인가요?
미해결
[React 1부] 만들고 비교하며 학습하는 React
package.json에서 "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack" }, 를 추가해주면 open-ssl 관련 에러가 사라집니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 회원가입을 하려고 할 때 이상한 점이 몇 가지 있어 질문을 남겨봅니다. 삽질을 하다가 다른 분의 질문을 보고 npm i next-auth@5.0.0-beta.3 이건 적용을 해본 상태입니다. [auth][error] UnknownAction: Cannot parse action at /api/auth/session localhost:3000 으로 접속하고 나면 잠시 뒤에 콘솔에 이런 에러가 뜹니다. 회원가입이 되지 않는 문제 아이디, 닉네임, 비밀번호, 이미지를 넣고 회원가입을 하면 [auth][error] UnknownAction: Cannot parse action at //callback/credentials .Read more at https://errors.authjs.dev#unknownaction at parseActionAndProviderId (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:87:27) at toInternalRequest (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:32:40) at Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:82:103) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:55:71) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/index.js:82:75) at $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:60) at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406 at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773) at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636) at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28) at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24) at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32) at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17) TypeError: Invalid URL at new URL (node:internal/url:775:36) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:61:19) at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:9) at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406 at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773) at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636) at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28) at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24) at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32) at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17) { code: 'ERR_INVALID_URL', input: 'undefined' } 이런 에러가 뜨며 회원가입이 되지 않습니다. 그런데 npm i next-auth@5.0.0-beta.3 이걸 적용하기 전에는 1번에서 언급한 에러는 떠 있어도 회원가입은 정상적으로 됐었는데 beta.3 버전을 설치한 이후에는 회원가입이 아예 안 되네요. 회원가입 후 로그아웃 버튼이 보이지 않는 문제 이건 회원가입이 정상적으로 됐을 때 궁금했던 부분입니다.회원가입이 되면 /home으로 리다이렉트가 됐었는데 그런데 전 로그아웃 버튼이 보이지가 않더라구요. useSession() 으로 데이터를 받아오지 못 해 null 을 리턴해서 그랬던 것이 맞을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
해시태그를 가져오려 include: [{ model: Hashtag, attributes: ["hashtag"], through: { attributes: [] } }], 이런식으로 코드를 짯는데 프론트로 데이터를 보내는게 Hashtags: [ 1:{hashtag: "ㅁㄴㄴ"} 2: {hashtag: "ㅇㅇㅇ"} 3: {hashtag: "ㅂㅂㅂ"} 4: {hashtag: "ㅁㅁㅋㅋ"}] 이런식으로 데이터가 가더라구요 여기서 hashtag 라는 이름 없이 Hashtags: [ 1 : "ㅁㄴㄴ" 2:"ㅇㅇㅇ" 3:"ㅂㅂㅂ" ] 이런식으로 보내고 싶은데 방법 없을까요...
