안녕하세요~ 강의 내용 중 궁금한게 있는데요 layout에선 usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다 라고 말씀해주셨는데 이 개념은 단순 서버 컴포넌트와 클라이언트 컴포넌트에 따른 차이점과 동일한 의미 아닌가요?? next.js 자체가 서버컴포넌트 일 경우 usepathname, usesearchparams 와 같은 훅을 사용할 수 없는데 Page.tsx 컴포넌트도 마찬가지 아닌가요?? 'layout에선' usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다. 라는 말씀이 Page.tsx 에서의 사용법과 어떤 차이점이 있는지 잘 이해가 가질 않습니다... 아 참고로 next 클라이언트 페이지 라우팅 시 layout영역은 리렌더링 되지 않고 page.tsx 영역만 렌더링된다라는 partial rendering 개념은 이해했습니다. 강의랑 유튜브 항상 잘 보고있습니다. 양질의 영상 제공해주셔서 감사합니다!
가장 쉽고 깊게 알려주는 MongoDB 완벽 가이드 [ By. 비전공자 & Kakao 개발자 ]
MongoDB 설명에서 "BSON(Binary JSON)이라 효율적이고 더 많은 데이터 타입을 지원한다" 고 언급하신 부분에 대해 질문드립니다. 결국 Redis나 MySQL 같은 RDB도 내부적으로는 데이터를 바이너리 형태로 저장하지 않나요? 모두 바이너리로 저장하는데, 왜 MongoDB만 특별히 "바이너리라서 효율적이고 타입을 많이 지원한다"고 강조하는지 잘 이해가 안 됩니다.
자바 21, 스프링 부트 3.4.5로 하는데 dependencyManagement { imports { mavenBom " org.springframework.cloud :spring-cloud-dependencies:2024.0.1" } } 이 부분이 에러가 나는거 같아요 Execution failed for task ':dependencies'. > Could not resolve all artifacts for configuration ':detachedConfiguration3'. > Cannot resolve external dependency org.springframework.boot:spring-boot-dependencies:3.4.5 because no repositories are defined. Required by: root project : Possible solution: - Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html 빌드가 안되네요 ㅠㅠ
강의 25. [BE] 백엔드 Auth Guard 구현 시작. Auth Guard로 유저 아이디 가져오는 부분 작업 타임라인 19:55 여기까지는 정상적으로 진행됩니다. 쿠키에서 "authjs.session-token" 확인이 가능합니다. import NextAuth from "next-auth"; import { PrismaAdapter } from "@auth/prisma-adapter"; import { prisma } from "@/prisma"; import CredentialsProvider from "next-auth/providers/credentials"; import { comparePassword } from "@/lib/password-utils"; import * as jwt from "jsonwebtoken"; import { JWT } from "next-auth/jwt"; export const { handlers, auth, signIn, signOut } = NextAuth({ useSecureCookies: process.env.NODE_ENV === "production", trustHost: true, adapter: PrismaAdapter(prisma), secret: process.env.AUTH_SECRET, providers: [ CredentialsProvider({ name: "credentials", credentials: { email: { label: "이메일", type: "email", placeholder: "이메일 입력", }, password: { label: "비밀번호", type: "password", }, }, async authorize(credentials) { // 1. 모든 값들이 정상적으로 들어왔는가? if (!credentials || !credentials.email || !credentials.password) { throw new Error("이메일과 비밀번호를 입력해주세요."); } // 2. DB에서 유저를 찾기 const user = await prisma.user.findUnique({ where: { email: credentials.email as string, }, }); if (!user) { throw new Error("존재하지 않는 이메일입니다."); } // 3. 비밀번호 일치 여부 확인 const passwordMatch = comparePassword( credentials.password as string, user.hashedPassword as string ); if (!passwordMatch) { throw new Error("비밀번호가 일치하지 않습니다."); } return user; }, }), ], session: { strategy: "jwt", }, jwt: { encode: async ({ token, secret }) => { return jwt.sign(token as jwt.JwtPayload, secret as string); }, decode: async ({ token, secret }) => { return jwt.verify(token as string, secret as string) as JWT; }, }, pages: {}, callbacks: {}, }); FE 추가분 /frontend/auth.ts // ... 중략 import * as jwt from "jsonwebtoken"; import { JWT } from "next-auth/jwt"; export const { handlers, auth, signIn, signOut } = NextAuth({ // ...중략 jwt: { encode: async ({ token, secret }) => { return jwt.sign(token as jwt.JwtPayload, secret as string); }, decode: async ({ token, secret }) => { return jwt.verify(token as string, secret as string) as JWT; }, }, // ... 중략 }) pnpm add jsonwebtoken pnpm add -D @types/jsonwebtoken GET /api/auth/csrf 200 in 47ms POST /api/auth/callback/credentials? 200 in 114ms [auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror [auth][cause]: Error: The edge runtime does not support Node.js 'crypto' module. Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime at Object.get (C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\_6e5868ec._.js:62:41) at C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\node_modules__pnpm_d2b00409._.js:8647:62 at getSecret (C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\node_modules__pnpm_d2b00409._.js:8630:20) at push.[project]/node_modules/.pnpm/jsonwebtoken@9.0.2/node_modules/jsonwebtoken/verify.js [middleware-edge] (ecmascript).module.exports (C:\Users\svx32\OneDrive\바 탕 화면\v5\frontend\.next\server\edge\chunks\node_modules__pnpm_d2b00409._.js:8633:12) at Object.decode (C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\[root-of-the-server]__273b5c62._.js:137:233) at session (C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\fdcd2_@auth_core_ec592ae5._.js:4516:39) at AuthInternal (C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\fdcd2_@auth_core_ec592ae5._.js:5123:269) at async Auth (C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\fdcd2_@auth_core_ec592ae5._.js:5379:34) at async handleAuth (C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\node_modules__pnpm_d2b00409._.js:3913:29) at async C:\Users\svx32\OneDrive\바탕 화면\v5\frontend\.next\server\edge\chunks\_6e5868ec._.js:12505:20 [auth][details]: {} GET / 200 in 62ms --- 이 오류 메시지는 애플리케이션이 Edge Runtime 환경 에서 Node.js의 crypto 모듈을 사용하려고 시도 할 때 발생하는 JWTSessionError 입니다. 오류 상세 설명 JWTSessionError : 이는 JWT(JSON Web Token) 세션 관리 중에 문제가 발생했음을 나타냅니다. JWT는 웹 애플리케이션에서 사용자 세션을 처리하는 일반적인 방법입니다. The edge runtime does not support Node.js 'crypto' module. : 이 부분이 핵심 문제입니다. Edge Runtime (예: Next.js Edge Functions 또는 Middleware)은 빠르고 가볍게 설계된 환경입니다. 따라서 모든 Node.js API를 지원하지 않으며, 특히 암호화, 해싱, 디지털 서명 등에 사용되는 crypto 모듈을 포함하지 않습니다. JWT 작업은 이 crypto 모듈에 크게 의존합니다. 스택 트레이스 분석 : 오류 스택 트레이스를 보면 jsonwebtoken 패키지(특히 verify 작업 중)에서 crypto 모듈에 접근하려고 시도하며, 이 과정이 @auth/core (일반적으로 Auth.js 라이브러리)에서 호출됩니다. 이는 JWT 유효성 검사 프로세스가 crypto 모듈의 부재로 인해 실패하고 있음을 명확히 보여줍니다. 간단히 말해, 애플리케이션이 Edge Runtime이라는 제한된 서버리스 환경에서 JWT 유효성 검사(보안 관련 작업)를 수행하려고 하지만, 이 환경에는 해당 작업을 위한 필수 도구( crypto 모듈)가 없기 때문에 오류가 발생하는 것입니다. 해결 방법 (일반적인 접근) 이 문제를 해결하기 위해서는 주로 다음 방법들을 고려할 수 있습니다: JWT 관련 작업을 Edge Runtime 외부로 이동 : JWT 유효성 검사와 같이 crypto 모듈이 필요한 작업은 Edge Runtime이 아닌 일반적인 Node.js 서버 환경 (예: Next.js의 표준 API 라우트)에서 수행하도록 변경해야 합니다. 인증 라이브러리 설정 변경 : 사용하고 있는 인증 라이브러리(Auth.js)의 세션 전략을 변경하여 Edge Runtime 컨텍스트에서 crypto 모듈에 의존하지 않도록 구성해야 합니다. 예를 들어, JWT 기반 세션 대신 데이터베이스 세션과 같은 다른 세션 관리 방식을 고려할 수 있습니다. AUTH_SECRET 확인 : 직접적인 원인은 아니지만, AUTH_SECRET 환경 변수가 올바르게 설정되어 있고, 사용 중인 환경에 맞게 JWT를 안전하게 처리하는지 확인하는 것도 중요합니다. 어떻게 해결해야하나요??
무한 스크롤에서 추가 데이터가 load되는 순간, 스크롤 영역이 늘어나게 되는데요. 이 때 유저가 보고 있던 스크롤 위치를 잃고 튀는 현상이 있습니다 당장 생각나는 방법은 이전 scrollY를 갖고 있다가 useLayoutEffect 걸어서 data가 변경될 때 scrollTo 해주는 것인데요, 혹시 더 나은 방법 고민해보셨는지 궁금합니다
강의에서 프로필 페이지 접근을 막기 위해 useEffect + redirect 패턴을 사용해주셨는데요, 특정 페이지 접근을 막는 좀 더 고차원적인 방법을 고민해보신 경험이 있는지 궁금합니다 현재 방식은 useEffect라 해당 페이지 한번은 렌더링되다보니, 접근 자체를 막는게 아니라 한번 갔다가 돌아오는 식이라 아쉬운 부분이 있습니다 최적화 관점 : 해당 페이지 js를 불러와야 함 등 보안 관점 : 명확치 않으나 왠지 hole이 있을 것 같음
createGlobalStyle이 컴포넌트 형태로 적용되다보니 마치 현재 컴포넌트 하위만 적용될 것 같은 느낌이 있는데요 실제 영향범위는 class 수정이므로 페이지 전체에 영향을 끼치다보니 개인적으로 비직관성이 느껴집니다 createGlobalStyle을 실제로 사용하신 경험이 있는지와 사용하셨다면 _app 외에 다른 위치에서도 쓰셨는지 궁금합니다
인라인 스타일 사용 시 style이라는 객체 prop이 매번 달라져 리렌더링이 발생한다고 해주신 부분 관련하여 질문드립니다 부모가 리렌더링되는 상황이라 이와 무관하게 자식의 리렌더링도 유발하게 될텐데요 자식 컴포넌트 자체에 memo를 적용하는 경우가 아니라면, useMemo를 쓰더라도 최적화 효과가 없을 것으로 보이는데 맞을까요?
hello를 출력하는 자바스크립트 코드를 작성해줘 node로 작성해줘 이렇게 입력하니 런버튼은 나왔는데요. 런 버튼을 누르니, 강사님처럼 html을 만드는게 아니고, hello.js 파일이 생성되었고 실행되었습니다. 출력이 콘솔에 표시되어야 합니다. 요렇게 메시지가 나오고 끝납니다. 제 커서 ai는 왜 이렇게 단순하게 끝날가요 제 어떤 옵션이 잘못된걸가요?
open from terminal 에서 인스톨을 누르면 아래와 같은 메시지가 나오고 설치되지 않아요 어떻게 해결할 수 있을가요 [Window Title] Cursor [Content] Unable to update the PATH environment variable to include 'c:\Users\새로운 사용자\AppData\Local\Programs\cursor\resources\app\bin'. [OK]
안녕하세요. 먼저, Next.js 를 입문한지 얼마 되지 않아 질문이 서툴 수 있는 점 양해 부탁드립니다..! 현재 msw 세팅을 완료 했고, Auth.js는 공식문서를 참고하여 5버전과 동일하게 auth.ts 파일을 아래와 같이 작성하였습니다. // auth.ts import NextAuth from "next-auth"; import Credentials from "next-auth/providers/credentials"; export const { handlers, signIn, signOut, auth } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ Credentials({ authorize: async (credentials) => { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", body: JSON.stringify({ username: credentials.username, password: credentials.password, }), headers: { "Content-Type": "application/json" }, }, ); if (!response.ok) { return null; } const user = await response.json(); console.log("로그인 정보", user); return { id: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); // @modal/(.)/i/flow/login/page.tsx const onLogin = async () => { try { await signIn("credentials", { username: id, password, redirect: false, }); router.replace("/home"); } catch (err) { console.error(err); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } }; 문제는 authorize 함수 내 콘솔이 찍히지 않는 것으로 보아, 해당 함수가 아예 실행되지 않는 것 같습니다. 회원가입하지 않은 아이디와 비밀번호를 입력해도 로그인이 되고 /home 으로 이동합니다. home으로 이동 후 session 응답 값은 null이고 쿠키에도 auth 토큰이 저장되지 않습니다. 그리고 터미널에는 첫번째 이미지 처럼 에러 메세지가 뜨고, 브라우저 콘솔에는 두번째 이미지와 같은 메세지가 뜹니다. // handlers.ts http.post(`${baseUrl}/api/login`, () => { console.log("로그인"); return HttpResponse.json(User[1], { headers: { "Set-Cookie": "connect.sid=msw-cookie; HttpOnly; Path=/", }, }); }), 현재는 MSW가 요청을 제대로 가로채지 못하고 있는 것 같다는 의심이 드는데, 어디를 우선적으로 점검해야 할지 잘 모르겠습니다.. 초보라 부족한 점이 많지만, 방향을 잡을 수 있도록 힌트나 조언 주시면 정말 감사하겠습니다 ㅠㅠ
csr에서는 번들링된파일을 받으면 브라우저에서 돔트리를 만들어서 화면에그리는데 7강 8분50초에서 next에서 사전렌더링을 할때에는 서버가 직접 js를 실행해서 렌더링을 한다고 하셨는데 그럼 서버에서 직접 돔트리를 그리는건가요? 질문자체가 이상할수 있는데 헷갈려서 질문드립니다ㅠ
