173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
이전 질문글에 답글을 남겼는데, 확인하기 힘드실 것 같아 질문을 새로 작성합니다. 클라이언트 컴포넌트는 기존 Next12처럼 Pre-Rendering으로 제공된다고 알고 있는데, 이는 기본적으로 SSG인가요? 아니면 SSR인가요? 또 둘 중에 선택이 가능한지 궁금합니다!
해결됨
Next + React Query로 SNS 서비스 만들기
fetch 함수가 그냥 web API 같은데 fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요? next 가 내부적으로 fetch 를 새로 만든건가요?
미해결
Next + React Query로 SNS 서비스 만들기
위 사진 처럼 컴파일이 안됩니다. 그리고 이렇게 바꾸고 실행을 시키면 실행은 되는데 코드 상에서 NEXT_PUBLIC_BASE_URL이 undefined로 확인이됩니다. 어떻게 해결할 수 있을까요.
미해결
파이썬으로 영화 예매 오픈 알리미 만들기
python-telegram-bot 20 버전부터는 비동기 프로그래밍이 적용되어 강의와는 다른 코드가 필요합니다. https://github.com/python-telegram-bot/python-telegram-bot/wiki/Introduction-to-the-API 위 깃허브 python-telegram-bot 공식 위키 페이지로 가시면 필수적이고 간단한 용례들을 보실 수 있습니다.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면 SSR은 서버에서 페이지 단위로 정적인 리소스를 생성하지만 RSC는 컴포넌트 단위로 정적인 리소스를 생성할 수 있다는 점입니다. 여기서 RSC의 가장 큰 장점이 나옵니다. 클라이언트로 내려보내는 JavaScript 번들 크기를 줄일 수 있게 되는 것이죠. 라고 하셨는데, RSC가 단순 컴포넌트 단위로 정적인 리소스를 생성한다고 해서 왜 SSR보다 클라이언트로 내려보내는 JS 번들 크기를 줄일 수 있는지가 궁금합니다!
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요 위 사진에는 댓글이 2개 달린 상태입니다. 그런데 스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요! 참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요! >> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요. >> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다. 또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의를 보며 코드를 작성하고 있는데, auth.ts 페이지에서 '{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식의 인수는 'UserCredentialsConfig<Record<string, CredentialInput>>' 형식의 매개 변수에 할당될 수 없습니다. 'credentials' 속성이 '{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식에 없지만 'Pick<CredentialsConfig<Record<string, CredentialInput>>, "credentials" | "authorize">' 형식에서 필수입니다.ts(2345) credentials.d.ts(12, 5): 여기서는 'credentials'이(가) 선언됩니다. (parameter) credentials: Record<string, string> | undefined 이런 에러가 발생했습니다. credentials 속성을 타입과 함께 추가해주고, body에서 사용되고 있는 credentials에 ?. 연산자를 이용해 에러를 해결했는데도 이러한 에러가 발생합니다. 이때 500 에러가 같이 발생하는데 해당 에러도 하단에 첨부합니다. GET http://localhost:3000/api/auth/signin 500 (Internal Server Error) processMessage @ webpack-internal:///…t-dev-client.js:233 eval @ webpack-internal:///…ot-dev-client.js:55 handleMessage @ webpack-internal:///…lay/websocket.js:52 index.js:591 Uncaught TypeError: Cannot read properties of undefined (reading 'GET') at eval (webpack-internal:///(rsc)/./src/auth.ts:14:21) at (rsc)/./src/auth.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:182:1) at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(rsc)/./src/app/api/auth/[...nextauth]/route.ts:6:63) at (rsc)/./src/app/api/auth/[...nextauth]/route.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:172:1) at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!:17:126) at (rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D! (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:162:1) at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43) at __webpack_exec__ (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:192:39) at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:424) at __webpack_require__.X (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:163:21) at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:47) at Object.<anonymous> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:196:3) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Module.require (node:internal/modules/cjs/loader:1143:19) at mod.require (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require-hook.js:65:28) at require (node:internal/modules/cjs/helpers:121:18) at requirePage (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require.js:109:84) at <unknown> (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:84) at async loadComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:26) at async DevServer.findPageComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/next-server.js:671:36) getServerError @ client.js:417 eval @ index.js:591 setTimeout (async) hydrate @ index.js:579 await in hydrate (async) pageBootrap @ page-bootstrap.js:24 eval @ next-dev.js:25 Promise.then (async) eval @ next-dev.js:23 ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1704985593164:192 options.factory @ webpack.js?ts=1704985593164:716 __webpack_require__ @ webpack.js?ts=1704985593164:37 __webpack_exec__ @ main.js?ts=1704985593164:1259 (anonymous) @ main.js?ts=1704985593164:1260 webpackJsonpCallback @ webpack.js?ts=1704985593164:1388 (anonymous) @ main.js?ts=1704985593164:9 Show 6 more frames Show less websocket.js:46 [HMR] connected 확인하시기 쉽게 같은 내용의 사진과 함께 올려드립니다. 그리고 강의 내용 이외의 credentials 관련 코드를 추가하기 전인 auth.ts 파일의 코드도 첨부드립니다. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), ], }); chap3-1의 auth.ts 코드를 복붙해도 에러가 해결되지 않아 무엇이 원인인지 모르겠습니다. 도움을 주신다면 정말 감사하겠습니다...
해결됨
Next.js 풀스택 Github Issue 서비스 만들기
720p 인줄 모르고 듣게 되었는데, 눈이 좀 피로합니다. 개선은 어려울까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
http://storage.goolgeapis.com/codecamp-file-storage/2024/1/10/IMG_9473.jpeg 위에 주소 맞지 않나요? ㅠㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님! 노드버드 섹션5 swr 사용해보기 강의까지 진행한 수강생 입니다! 항상 질문에 답해주셔서 감사합니다. 올려주신 강의도 잘 보고 있습니다! 구글링과 제로초님의 노드버드 깃허브를 꼼꼼히 살펴보았으나 제 지식 부족으로 인하여 질문 올립니다..! swr 라이브러리를 사용 후, 로그인한 다음 프로필 페이지에 가면 콘솔 에러가 발생하며, 팔로잉, 팔로워 목록이 없는 문제가 발생합니다. 때문에 더 보기 버튼을 클릭해도 더 불러오지 못 했습니다! 에러 메시지를 번역하니 다음과 같았습니다. 리덕스 탭과 네트워크 탭에서는 에러를 발견하지 못하였습니다! 리덕스 탭에서는 해당 사용자의 팔로잉, 팔로워 정보가 들어가 있었고, 네트워크 탭에서는 팔로잉, 팔로워 limit이 잘 불러와 집니다. 의심이 들어 백엔드 터미널을 확인해보니 팔로잉, 팔로워 목록 limit이 안되고 있었습니다! GET /user/followers?limit=3 401 GET /user/followings?limit=3 401 에러가 난 코드를 포함해 가장 의심되는 코드를 올립니다! 프로필 페이지 profile.js 팔로워, 팔로잉 불러오기 구조분해 할당 부분의 ${}코드가 자꾸 깨져서 이 부분만 사진으로 올리겠습니다..! // 실제로 주소 가져오기 : 데이터를 가져오는 API를 호출하는 fetcher 함수 const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data ); // 프로필 컴포넌트(사용자 정의 태그) const Profile = () => { // 프로필 페이지에서 로그아웃한 상태일(me가 없을 때)때 메인 페이지로 이동 useEffect(() => { if (!(me && me.id)) { Router.push('/'); } }, [me && me.id]); // 팔로워 목록 더 불러오기 콜백 함수 const loadMoreFollowers = useCallback(() => { setFollowersLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 팔로잉 목록 더 불러오기 콜백 함수 const loadMoreFollowings = useCallback(() => { setFollowingsLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 로그인 하지 않은 상태일(me가 없을)때 프로필 페이지로 이동 막기 if (!me) { return '내 정보 로딩중...'; }; /* 팔로워 에러 or 팔로잉 에러 둘 중 하나가 에러났을 때 에러 콘솔하기 */ // Hook은 항상 모두 다 실행되어야 하기에 return은 Hook보다 위에 위치할 수 없다. if (followerError || followingError) { console.error(followerError || followingError); return <div>팔로워/팔로잉 로딩 중 에러가 발생합니다.</div>; } return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> {/* ---------- 닉네임 수정 폼 ---------- */} <NicknameEditForm /> {/* ---------- 팔로잉 목록 ---------- */} console.log(followingsData); <FollowList header="팔로잉" data={followingsData} onClickMore={loadMoreFollowings} // SWR에서의 로딩 : 팔로잉 데이터와 팔로잉 에러가 없을 때 loading={!followingsData && !followingError} /> {/* ---------- 팔로워 목록 ---------- */} <FollowList header="팔로워" data={followersData} onClickMore={loadMoreFollowers} // SWR에서의 로딩 : 팔로워 데이터와 팔로워 에러가 없을 때 loading={!followersData && !followerError} /> </AppLayout> </> ); }; user.js(백엔드 팔로워, 팔로잉 라우터) // 팔로워 라우터 router.get('/followers', isLoggedIn, async (req, res, next) => { // GET /user/followers try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로워 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followers = await user.getFollowers({ limit: parseInt(req.query.limit, 10), }); /* 팔로워 목록을 프론트로 넘기기 */ res.status(200).json(followers); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } }); // 팔로잉 라우터 router.get('/followings', isLoggedIn, async (req, res, next) => { // GET /user/followings try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로잉 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followings = await user.getFollowings({ limit: parseInt(req.query.limit, 10), }); /* 팔로잉 목록을 프론트로 넘기기 */ res.status(200).json(followings); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } }); FollowList.js // 팔로우 리스트 컴포넌트(사용자 정의 태그) const FollowList = ({ header, data, onClickMore, loading }) => { . . . return ( <List /* 더보기 버튼 */ loadMore={( <div style={{ textAlign: 'center', margin: '10px 0px' }}> <Button onClick={onClickMore} loading={loading}>더 보기</Button> </div> )} . . . /> ); };
미해결
Next + React Query로 SNS 서비스 만들기
백엔드 서버에서는 소켓에서 메시지를 받으면 DB에 따로 저장하는 식으로 관리가 되는걸까요?? 아니면 프론트의 저장 공간에 저장하는 방식으로도 해결하는 방법이 있을까요??
미해결
Next + React Query로 SNS 서비스 만들기
병렬 라우팅과 인터셉팅 라우트를 이용하여 작업중에 있습니다. 예를 들어 /product 라는 페이지에서 생성이라는 버튼을 눌렀을때 /product/write/[id] 로 경로는 이동하며, 병렬 라우팅과 모달이 생성되는것까지는 적용이되었고, 모달을 닫을시에는 closeButton에 router.back()으로 /product로 이동이 되는데 확인라는 버튼을 누를때 원하는것은 /product/[id] 로 경로이동 후 모달이 닫히는걸 예상하였는데 현재는 /product/[id] 로 경로 이동만하고 모달은 그대로 남아있습니다. 이럴경우에는 모달을 boolean 으로 따로 경로 이동후 닫히게 작업을 해줘야할까요? 더 좋은방법이나 제공하는 기능이 있을까해서 질문드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
cd class 이후 react 버전 변경 시 아래와 같은 오류가 진행됩니다. 어떻게 해결해야할까요..ㅠㅠ Usage Error: The nearest package directory (C:\Users\user\Desktop\CodeCamp_Frontend_j\class) doesn't seem to be part of the project declared in C:\Users\user. - If C:\Users\user isn't intended to be a project, remove any yarn.lock and/or package.json file there. - If C:\Users\user is intended to be a project, it might be that you forgot to list Desktop/CodeCamp_Frontend_j/class in its workspace configuration. - Finally, if C:\Users\user is fine and you intend Desktop/CodeCamp_Frontend_j/class to be treated as a completely separate project (not e
미해결
Next + React Query로 SNS 서비스 만들기
상황 : router a-> b-> c-> d-> c 로 이동 했을 때 c에서 뒤로가기 이벤트가 발생하면 (혹은 뒤로가기를 누르면) b 로 이동 하도록 구현하고자 합니다. 다만 d에서 뒤로가기 시에는 c로 이동하길 원합니다. 현재 구현 상태는 c : router.push(d) d : router.replace(c) 이 방법은 c 에서 뒤로가기를 눌러도 c로 가버리는 한계가 있습니다. 따라서, replace(c) 이전에 history에서 직접 c를 제거해 주는 방법을 생각 중인데, (앱 개발할 때 가능했던 기억이 있어서) 검색을 해도 답을 찾지 못하고 있습니다. 답변 주시면 감사하겠습니다 !
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. next-auth 로그인시 해결되지 않는 부분이 있어서 질문드립니다. 로그인을 계속 실패하고 있습니다. next-auth의 버젼 (4였다가 삭제하고 3으로도 시도 해봤습니다.) "dependencies": { "next-auth": "^5.0.0-beta.3", }, 로그인을 시도했을때 뜨는 화면: The Middleware "/src/middleware" must export a middleware or a default function This error happened while generating the page. Any console logs will be displayed in the terminal window. 로그인을 시도했을때 콘솔 화면: 로그인을 시도했을때 네트워크 화면 : middleware.ts code 입니다. import { auth as middleware } from "./auth"; // See "Matching Paths" below to learn more export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; auth.ts code 입니다. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; console.log("-", process.env.AUTH_URL); export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), ], }); handers.ts의 로그인쪽 코드입니다. import { http, HttpResponse, StrictResponse } from "msw"; import { faker } from "@faker-js/faker"; export const handlers = [ http.post("/api/login", () => { console.log("로그인"); return HttpResponse.json({ id: "zerohch0", nickname: "제로초", image: "/5Udwvqim.jpg" },, { headers: { "Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/", }, }); }), ];
미해결
Next + React Query로 SNS 서비스 만들기
// layout.tsx import type { Metadata } from 'next'; import { getServerSession } from 'next-auth'; import { Nunito } from 'next/font/google'; import { authOptions } from './api/auth/[...nextauth]/route'; import ClientOnly from './components/ClientOnly'; import LoginModal from './components/modals/LoginModal'; import RegisterModal from './components/modals/RegisterModal'; import Navbar from './components/navbar/Navbar'; import RQProvider from './components/providers/RQProvider'; import ToasterProvider from './components/providers/ToasterProvider'; import './globals.css'; const font = Nunito({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'SMUING', description: 'SMUING에 오신것을 환영합니다.' }; export default async function RootLayout({ children }: { children: React.ReactNode }) { const session = await getServerSession(authOptions); return ( <html lang="ko"> <body className={`${font.className} dark:bg-medium dark:text-slate-100`}> <ClientOnly> <RQProvider> <ToasterProvider /> <RegisterModal /> <LoginModal /> <Navbar /> <div className="pb-20 pt-28">{children}</div> </RQProvider> </ClientOnly> </body> </html> ); } // page.tsx import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; import Container from './components/Container'; import ListingContainer from './components/listings/ListingContainer'; import { getFilteredPosts } from './lib/getFilteredPosts'; type HomeProps = { searchParams?: { category?: string; }; }; const Home: React.FC<HomeProps> = async ({ searchParams }) => { const queryClient = new QueryClient(); const category = searchParams?.category || ''; // 서버에서 불러온 데이터를 클라이언트의 리액트 쿼리가 물려받음.(하이드레이트) await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', category], queryFn: ({ pageParam = 1 }) => getFilteredPosts(category, { pageParam }), // searchParams 전달 // 커서 값 initialPageParam: 0 }); // hydrate라는 것은 서버에서 온 데이터를 클라이언트에서 그대로, 물려받는 것 이다. const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Container> <ListingContainer /> </Container> </HydrationBoundary> ); }; export default Home; 안녕하세요, 제로초님 강의를 수강하면서 현재 제가 진행하고있는 프로젝트에 Suspense를 도입해보면 좋을 것 같아 진행중입니다.layout.tsx에서 정의한 Header 컴포넌트만 먼저 보여주고, page.tsx에서 보여지는 가운데에 있는 ListingContainer 부분을 Skeleton UI 형식으로 보여주고 싶은게 제가 하고싶은 행동인데, 이 경우에는 Suspense를 어떻게 적용시켜야할지 감이 안와서 질문드립니다. ListingContainer를 ListingContainerSuspense 컴포넌트로 분리하여, searchParams와, 쿼리부분 코드를 옮겨도 제대로 동작하지 않아, 다른 좋은 접근 방식이 있을지 의견을 구하고자 질문을 남기게 되었습니다. 좋은강의 항상 감사합니다!
해결됨
Next + React Query로 SNS 서비스 만들기
디렉토리를 만들고 그 안에 layout.tsx 파일이나 page.tsx 파일을 만들 때 이름을 layout, page로 다 통일하는 것이 일반적인가요? 아니면 내가 만드려는 layout, page 별로 이름을 다르게 하는지 궁금합니다. (예를 들어 explore-page.tsx 이렇게요!)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 현재 MacBook Air 2022( macOS Sonoma | version 14 | Apple M1)으로 수강 중 입니다 yarn 설치시 오류가 발생합니다 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use src/ directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to customize the default import alias (@/*)? … No / Yes Creating a new Next.js app in /Users/namgyukim/Desktop/codecamp-frontend-NGK/class. Using npm. Initializing project with template: default Installing dependencies: - react - react-dom - next added 22 packages, and audited 23 packages in 8s 3 packages are looking for funding run npm fund for details found 0 vulnerabilities Initialized a git repository. Success! Created class at /Users/namgyukim/Desktop/codecamp-frontend-NGK/class npm notice npm notice New patch version of npm available! 10.2.3 -> 10.2.5 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5 npm notice Run npm install -g npm@10.2.5 to update! npm notice namgyukim@NAMui-MacBookAir codecamp-frontend-NGK % cd class namgyukim@NAMui-MacBookAir class % yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact zsh: command not found: yarn namgyukim@NAMui-MacBookAir class % npm install -g yarn npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/yarn npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/yarn' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. npm ERR! A complete log of this run can be found in: /Users/namgyukim/.npm/_logs/2024-01-08T14_45_08_725Z-debug-0.log 어떻게 해야 다음 단계로 넘어갈 수 있을까요?
해결됨
손에 익는 Next.js - 마이그레이션하기
https://github.com/hajoeun/fake-commerce-app 올려주신 예제 코드 github 주소가 404인데 혹시 어디로 들어가야 할까요 ??
