사진 상세보기에서 오른쪽 UI에 댓글 달기랑 게시글이 있는데 이 때 게시글 눌렀을 때 단순 도메인만 바뀌고 이동이 안되더라구요. 그래서 아래 코드처럼 PostArticle 컴포넌트 에서 router.refresh() 넣어서 처리했는데 이렇게 해도 될까요? const router = useRouter(); const handleOnClickCapture = () => { router.push(`/${post.User.id}/status/${post.postId}`); router.refresh(); // 추가 } return ( <article onClickCapture={handleOnClickCapture} className={style.post}> { children } </article> )   

위에 코드로 docker-compose up을 해도 data 폴더가 생성되지 않아요. 다른 질문 참가해서 volumes: data:를 넣어봐도 생성되지 않습니다. 밑에 코드는 docker-compose up을 실행했을 때 뜨는 코드 입니다.PostgreSQL Database directory appears to contain a database; Skipping initialization2024-03-15 02:14:21.650 UTC [1] LOG: starting PostgreSQL 16.2 (Debian 16.2-1.pgdg120+2) on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit2024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv4 address "0.0.0.0", port 54322024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv6 address "::", port 54322024-03-15 02:14:21.665 UTC [1] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"2024-03-15 02:14:21.683 UTC [30] LOG: database system was shut down at 2024-03-15 02:13:06 UTC2024-03-15 02:14:21.697 UTC [1] LOG: database system is ready to accept connections 어떻게 해야할까요?

안녕하세요.강의보고 따라하니 https 적용이 잘 됐습니다. 저는 https를 적용하기 전에 3050번 포트에 프론트,3060번 포트에 백,3000번 포트에 관리자 페이지를 각각 배포해놓았습니다. ec2의 한 인스턴스에 이 3개를 배포하는 방법은 있을까요?예를 들어 도메인이 domain.com 일때,프론트는 domain.com에 배포하고관리자는 domain.com:3000에 배포하고백은 domain.com:3060에 배포하는 방법이 있을까요?

현재 강의에서 @modal 컴포넌트에 [photoId] / page.tsx 에서 아래 코드를 작성후 hydrationBoundery로 감싼 후 게시글의 사진을 눌르면 모달이 나와야 하는데 아래의 오류가 발생합니다. 도저히 해결하지 못해서 ch3-2를 클론해서 실행시켜보았는데도 똑같이 이런 에러가 나옵니다. 그래서 "use client"컴포넌트로 만들어 준 후 QueryClientProvider 로 감싸주었더니 해결되었습니다. 근본적인 문제가 뭔지 모르겠네요 ㅠㅠㅠ"use client" import CommentForm from "@/app/(afterLogin)/[username]/status/[id]/_component/CommentForm"; import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons"; import style from './photoModal.module.css'; import PhotoModalCloseButton from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/PhotoModalCloseButton"; import {dehydrate, HydrationBoundary, QueryClient, QueryClientProvider} from "@tanstack/react-query"; import {getSinglePost} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getSinglePost"; import {getComments} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getComments"; import SinglePost from "@/app/(afterLogin)/[username]/status/[id]/_component/SinglePost"; import React from "react"; import Comments from "@/app/(afterLogin)/[username]/status/[id]/_component/Comments"; import ImageZone from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/ImageZone"; type Props = { params: { id: string } } export default async function Default({params}: Props) { const {id} = params; const queryClient = new QueryClient(); await queryClient.prefetchQuery({queryKey: ['posts', id], queryFn: getSinglePost}); await queryClient.prefetchQuery({queryKey: ['posts', id, 'comments'], queryFn: getComments}); const dehydratedState = dehydrate(queryClient); return ( <div className={style.container}> <QueryClientProvider client={queryClient}> <HydrationBoundary state={dehydratedState}> <PhotoModalCloseButton/> <ImageZone id={id} /> <div className={style.commentZone}> <SinglePost id={id} noImage /> <CommentForm/> <Comments id={id} /> </div> </HydrationBoundary> </QueryClientProvider> </div> ); }

안녕하세요 제로초님 강의 잘보았습니다!본론부터 말씀드리자면 2가지 고민이 있습니다. 하나는 msw component가 필요한지 궁금합니다.왜냐하면 현재 express로 하고 있어서 msw component가 없어도 mock 서버(express)를 키면 작동하는데 msw component가 관여하지 않은것 같아서요~ 두번째는 localhost 9090 외에 실제로 사용하는 api를 모킹하고 싶은데 어떻게 해야할지 고민이 됩니다.예를 들어주소가 naver.com이라면 이 백엔드 api를 넣는 방법을 모르겠습니다.~! 감사합니다!

안녕하세요 강사님오픈채팅방 정원이 다 차서 접속이 불가하네요 ㅠㅠ혹시 오픈 채팅방 추가 개설 예정은 없으실까요?

이미지 상세 보기 눌렀을때 모달창이 켜지고, 닫기 버튼 누르면router.back() 으로 처리하셨는데이 때 문제점이 게시글 위치가 다시 맨 위로 올라가게 되더라구요. 만일 닫기 버튼 눌러도 제가 스크롤 해서 봤던 게시글 위치 그대로 보여질려면 어떻게 처리하면 좋은가요?

docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not emptyinitdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.

type Props = { postId: number; userName: string, userId: number; }위 코드처럼 type에서는 끝에 ; 혹은 , 둘 다 섞어서 써도 괜찮은가요?

알려주신대로 어찌어찌 수정을 해서 실행이 됐습니다!그런데 이번엔 암호화 관련해서 다음과 같은 오류가 생겨 질문 드립니다..Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:68:19) at Object.createHash (node:crypto:138:10) at module.exports (C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\NormalModule.js:471:10) at C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\NormalModule.js:503:5 at C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\NormalModule.js:358:12 at C:\Users\User\Documents\boiler-plate\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\Users\User\Documents\boiler-plate\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\Users\User\Documents\boiler-plate\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10) C:\Users\User\Documents\boiler-plate\client\node_modules\react-scripts\scripts\start.js:19 throw err; ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:68:19) at Object.createHash (node:crypto:138:10) at module.exports (C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\NormalModule.js:417:16) at C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\NormalModule.js:452:10 at C:\Users\User\Documents\boiler-plate\client\node_modules\webpack\lib\NormalModule.js:323:13 at C:\Users\User\Documents\boiler-plate\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\Users\User\Documents\boiler-plate\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\Users\User\Documents\boiler-plate\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at C:\Users\User\Documents\boiler-plate\client\node_modules\babel-loader\lib\index.js:59:103 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }

loadUserByUsername 메서드에서 username 으로 조회잘되고 조회된 MemberDto는 log 출력도 잘되는데 다음 단계에서 "Encoded password does not look like BCrypt" 라는 warn 과 함꼐 "Failed to process authentication request" 로 자격증명에 실패했다고 합니다.DB의 패스워드는 암호화 되어 잘 저장된거 확인됩니다제가 무언가를 잘못 작성한건지파라미터로 보낸 password 는 어디서 encode해야 하는건지 아니면 다른 문제가 있는건가요?

어제까진 잘 실행이 되었는데 갑자기 이러니까 당황스러워요..먼저Error: Cannot find module 'C:\Users\User\Documents\boiler-plate\index.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15) at Module._load (node:internal/modules/cjs/loader:901:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) at node:internal/main/run_main_module:23:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } Node.js v20.9.0 [nodemon] app crashed - waiting for file changes before starting...이런 에러가 떠서 package.json의 backend 쪽을"backend": "nodemon server/index.js"이렇게 수정했더니 이번엔Error: Cannot find module '../server/models/User' Require stack: - C:\Users\User\Documents\boiler-plate\server\middleware\auth.js - C:\Users\User\Documents\boiler-plate\server\index.js at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15) at Module._load (node:internal/modules/cjs/loader:901:27) at Module.require (node:internal/modules/cjs/loader:1115:19) at require (node:internal/modules/helpers:130:18) at Object.<anonymous> (C:\Users\User\Documents\boiler-plate\server\middleware\auth.js:1:18) at Module._compile (node:internal/modules/cjs/loader:1241:14) at Module._extensions..js (node:internal/modules/cjs/loader:1295:10) at Module.load (node:internal/modules/cjs/loader:1091:32) at Module._load (node:internal/modules/cjs/loader:938:12) at Module.require (node:internal/modules/cjs/loader:1115:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\User\\Documents\\boiler-plate\\server\\middleware\\auth.js', 'C:\\Users\\User\\Documents\\boiler-plate\\server\\index.js' ] }이런 오류가 뜨네요.. 계속 찾아보는데 경로도 다 맞는 것 같은데 어디서 문제가 발생하고 어떻게 해결해야 하는 지를 모르겠어요..우선 혹시 몰라 package.json 전체 첨부 해놓겠습니다!그리고 강의는 21강 까지 들었습니다!{ "name": "boiler-plate", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node index.js", "backend": "nodemon server/index.js", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "in-sik", "license": "ISC", "dependencies": { "bcrypt": "^5.1.1", "body-parser": "^1.20.2", "cookie-parser": "^1.4.6", "express": "^4.18.3", "index.js": "^0.0.3", "jsonwebtoken": "^9.0.2", "mongoose": "^8.2.1" }, "devDependencies": { "nodemon": "^3.1.0" } }

강의에서 컴퍼넌트 이벤트 콜백에 Bind 해주는 내용이 나옵니다.함수 내에서 사용하는 this 스코프를 정하기 위해 bind를 하는 거로 알고 있는데요. 괄호로 설명하는건 맞지 않는것 같습니다.

질문하기 창피한데 그래도 할게요..1분16초쯤에 파이참 프로에서 더블클릭하라고하셧는데어딜 더블클릭하라는거죠? ㅠㅠㅠ  그리고 main02를 만들어서 멜론데이터 저파일을 만드는건가요?영상에서는 main02 안만들고해서...

ex) src/components/commons/apollo/index.tsx// ... const uploadLink = createUploadLink({ uri: "...", headers: { Authorization: `Bearer ${accessToken}` }, }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: GLOBAL_STATE, }); // ...이전 강의에서 createUploadLink 함수를 이미지같은 파일을 업로드 설정을 위해 불러왔었는데 이 안에 accessToken을 넣어주는 게 이해가 가지 않았습니다. 지금 제 머릿속에는 자동으로 headers에 accessToken을 담아서 인가를 해주는 설정을 왜 이미지업로드를 위한 설정함수에 accessToken을 넣어주는 거지?라는 생각이 들어서 혼란스럽습니다.. 이 부분에 대해서 제가 잘못 이해하고 있거나 이렇게 해주는 이유에 대해서 알려주신다면 감사드리겠습니다!

투두 리스트 실습하고 있는데, 입력폼을 통해 입력한 항목이 State에 저장되지 않고, SyntheticBaseEvent가 저장되어 있네요84) Create - 투두 추가하기 7:21 부분에서 INPUT에 항목을 입력하고 [추가] 버튼을 누르면 content 부분에 입력 텍스트가 아닌 합성이벤트 객체가 저장되는데 무슨 문제인지 궁금합니다. 덧. 다시한번 작성해보니 OnCreate 함수를 전달받아 추가 버튼을 눌러 onSubmit 할때 파라미터로 content 스테이트값을 전달했네요 -_-);; 해결되었습니다만, 이 과정에서 어떤 문제가 있었나 보네요, content를 다시한번 참조하는 상태가 된건가요? 값을 전달한게 아니라 참조가 전달된거라고 보면 될려나요.. [ -------SyntheticBaseEvent가 생성된 코드-------]const onSubmit = (content) => {onCreate(content);}

auth.ts 관련 코드입니다. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/login", }, events: { // signOut(data) { // console.log(data); // }, }, callbacks: { session: async ({ session }) => { console.log("session", session); return session; }, }, providers: [ CredentialsProvider({ name: "credentials", async authorize(credentials) { const { email, password } = credentials; const res = await axios.post( `${process.env.NEXT_PUBLIC_LOCAL_API_URL}/api/login`, // `${process.env.NEXTAUTH_URL}/api/login`, { email, password, } ); let setCookie = res.headers["set-cookie"]; let stringCookie; setCookie && setCookie.map((item) => (stringCookie = item)); if (setCookie && stringCookie) { const parsed = cookie.parse(stringCookie); cookies().set("connect.sid", parsed["connect.sid"], parsed); // 브라우저에 쿠키 심기 } if (!res.data) { return null; } const data = res.data; if (data) { return { email: data.email, nickName: data.nickName, area: data.area, location: data.location, distance: data.distance, ...data, }; } else { return null; } }, }), GitHubProvider({}), NaverProvider({}), GoogleProvider({}), ], secret: process.env.NEXTAUTH_URL, });auth.ts에서 log를 찍어보았을 때는 auth.ts를 아예 타지 않습니다. (로그인 submit 을 했을 시 ) 또한 현재 오류 Network에서 이와 같은 오류가 계속 발견되어서 그리고 쿠키에는 아무것도 담기지 않습니다. 분명 몇 일 전까지만 해도 잘되던 녀석이었는데 갑자기... 이러한 오류로 안됩니다. package의 버전은 아래와 같습니다. "@auth/core": "0.19.0", "next-auth": "^5.0.0-beta.3", 이러한 부분은 왜 계속 오류가 나는 것인지 궁금합니다.   

Link 수업 듣는 중에 아래 질문과 같이 동일한 문제가 발생했는데요(상품 클릭 시, 링크 변경은 되는데 페이지 이동이 안되는 현상)https://www.inflearn.com/questions/645148/link-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B4%80%EB%A0%A8%EC%A7%88%EB%AC%B8 질문 확인하고<React.StrictMode> 을 제거하기 전에는 상품카드를 클릭했을때 url만 변경되고 페이지가 새로고침되지 않았습니다.<React.StrictMode> 제거해야지만 클릭시 url변경 + 페이지 새로고침까지 되었습니다강의와 동일하게 작성하였는데 왜 <React.StrictMode> 제거 후 문제가 해결된걸까요? 

제로초님 안녕하세요. 강의 잘 보고 있습니다.강의를 보는 도중 궁금한점이 생겨 질문을 남깁니다 (강의 후반부에 설명해 주셨을지도 있지만...) 저는 React, Next13 버전으로만 개발을 해보았고, Next14를 배우기 위해 강의를 듣고 있는데 Next13에서는 기본이 클라이언트 컴포넌트이고 필요한 경우에만 'use server' 를 사용해 ssr을 구현했던 것으로 기억합니다. 그런데 Next 14에서는 기본이 서버 컴포넌트이고 필요한 경우에만 'use client'를 사용하시는 것 같습니다. 어떤 경우에 use client를 적용해야하는지 기준을 잘 모르겠어서 제로초님은 어떤경우에 use client를 사용하시는지 궁금합니다. 제가 생각하기에는 상태관리가 필요하거나 hook을 사용해야하는 컴포넌트의 경우 'use client'를 적용해서 사용하는 것 같은데 그런 특별한 경우를 제외하고는 모두 서버 컴포넌트를 쓰는게 맞나요??  

delete, modify 버튼 클릭 시오류가 생기는데 선생님 자료에서ModifyComponent.jsModifyPage.jsResultModal.js 복사해서 사용해도 오류가 생깁니다cmd에는 오류가 잡히지 않고 콘솔창에서만 오류가 있다고 뜹니다