172만명의 커뮤니티!! 함께 토론해봐요.
미해결
제대로 파는 Git & GitHub - by 얄코
섹션5에서 원격저장소사용하기에서요,,, github 에 가입을 하고 토큰까지 강의 보면서 설정하고 원격저장소를 만들고 아래에 있는 3줄의 소스를 복사해서 VSCODE의 터미널창에서 붙인후 실행하면 에러가 나는데 뭐가 잘못된걸까요...혹시나 해서 토큰도 여러번 확인하고 다시 했는데 아래와 같이 에러가 뜨는데 어떻게 해결을 해야 할까요 ㅡㅡ
미해결
포트폴리오 초간단 배포하기
ssl 인증서를 업로드 할때 깃허브에 zip 파일 올려도 보안에 문제가 없는건가요?? 생각했을 때는 개인정보를 ssl 서비스 홈페이지에 입력하는거라 문제는 없어 보이는데..
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다. 로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다.. 정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다.. 보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ
해결됨
손에 익는 Next.js - 마이그레이션하기
안녕하세요. FatalError: error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'. CRA에서 Next.js로 마이그레이션하기에서 강의를 모두 따라한 뒤 'npm run dev'를 실행하면 위 오류가 발생합니다. 찾아본 결과 TypeScript 버전이 5 이상이어야 tsconfig.json의 compilerOptions.moduleResolution에 bundler 값을 사용할 수 있는 것 같습니다. 하지만 react-scripts에 요구되는 typescript의 버전은 "^3.2.1 || ^4"입니다. TypeScript를 5버전으로 올리면 lint 경고가 발생할 테니, compilerOptions.moduleResolution는 node 또는 nodenext로 설정하는 것이 현재 상황에서는 바람직하지 않나요?
해결됨
한 입 크기로 잘라먹는 Next.js
사전렌더링에서 설명해주신 저 일련의 과정들이 SSR, ISR, SSG 모두 공통적으로 동일하게 해당하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
createBoard(createBoardInput: $createBoardInput) { _id } 이 부분에서 _id만 작성하는 이유가 fetchBoard를 할 때 게시글의을 불러오는 기준을 id로 하겠다는 의미인걸까요? 2. apolloclient 를 사용하는 코드들을 안 보고 혼자 힘으로 작성 하는게 너무 어렵습니다.. 다음 수강을 계속 들으면서 계속 사용하게 될텐데 하면서 적응해 나가야 할지, 혼자 작성이 가능할 때 까지 계속 영상 돌려보며 연습을 해야할지 모르겠어요 어떻게 하면 좋을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
초기 접속 요청을 할 때, Next.js에서는 서버 컴포넌트와 클라이언트 컴포넌트 모두 사전 렌더링을 한 후에 html을 제공하고 이후 Hydration 과정이 이루어지는 것으로 알고 있습니다. 만약 클라이언트 컴포넌트에서 useState 와 같은 훅을 호출해서 사용하는 경우, 서버에서 이런 컴포넌트를 어떻게 렌더링하는지 궁금합니다. 최상위 page 컴포넌트가 아래와 같이 있고, // page.tsx import Client from "@/components/client"; export default function Home() { return ( <div> initial html <div> <Client /> </div> </div> ); } page 컴포넌트에서 불러오는 클라이언트 컴포넌트가 아래와 같을 때 "use client"; import { useState } from "react"; export default function Client() { const [count, setCount] = useState(0); const handleClickPlusButton = () => { setCount(count + 1); }; const handleClickMinusButton = () => { setCount(count - 1); }; return ( <div> I am Client Component <div>count: {count}</div> <div> <button onClick={handleClickPlusButton}>+</button> <button onClick={handleClickMinusButton}>-</button> </div> </div> ); } 서버에서 클라이언트 컴포넌트를 렌더링 할 때, useState 와 같은 훅을 무시하고 렌더링을 진행한다고 생각하여 count에 값이 없을 것이라고 예상을 했지만, 서버에서 초기에 응답해준 html 파일을 보면 count가 0이 되어있었습니다. 서버에서 클라이언트 컴포넌트를 렌더링 할 때 이런 훅을 어떻게 처리하는지, 또 만약 브라우저의 window 객체에 접근하게 될 때는 어떻게 처리하는지 궁금합니다!
해결됨
한 입 크기로 잘라먹는 Next.js
사전 렌더링 시 처음에 서버 측에서 리액트 앱을 실행해서 모든 리액트 컴포넌트들을 HTML로 변환한다고 하셨는데 저는 거기에 인터렉션 코드를 포함한 모든 리액트 코드가 들어있는 걸로 이해를 했었습니다. 근데 그 후에 인터렉션 코드를 추가로 보내야 된다고 해서 좀 헷갈렸는데요 그럼 처음에 서버에서 HTML로 변환한 JS 파일에는 인터렉션 코드를 제외한 모든 리액트 코드가 들어있는 걸까요?
해결됨
Next.js 시작하기
안녕하세요. 면접준비에 도움이 될 거 같고 개념적으로도 궁금해서 질문드립니다. 장바구니에서 삭제를 하면 갱신되는데에 동작원리에서 처음엔 router.replace(router.asPath) 때문에 url이 변경되진 않아도 단순하게 /cart 로 이동이란 동작을 해서 페이지를 다시 그린다고 생각했습니다. CartList 는 CartPage 의 자식 컴포넌트이다. CartPage 는 getServerSideProps 로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList 에게 전달해주고 있다. CartList 는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제하고 router.replace 를 통해( router.push 도 동일) 현재 페이지(asPath)인 /cart 로 이동한다. /cart 페이지(즉, CartPage.jsx )가 리렌더링된다. 리액트는 리렌더링되면 컴포넌트의 모든 코드를 다시 실행하게 된다.(고 알고 있습니다.) 그로 인해 getServerSideProps 가 다시 실행되고 갱신된(장바구니에서 상품을 삭제한) 데이터를 다시 CartPage 에게 프롭스로 내려주게 된다. 프롭스가 변경됐으니 자식 컴포넌트인 CartList 도 리렌더링되어 모든 코드가 다시 실행된다. 바뀐 장바구니 데이터로 보여지게 된다. 라고 생각했는데요. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#behavior 공식문서를 살펴보니 사용자가 Link 컴포넌트 또는 router를 통해 페이지를 방문할 때 , Next.js는 서버에 API 요청을 보내 getServerSideProps를 실행 합니다. 라고 되어있습니다. 이러면, 현재 CartList 는 CartPage 의 자식 컴포넌트이다. CartPage 는 getServerSideProps 로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList 에게 전달해주고 있다. CartList 는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제한다. router.replace 를 통해( router.push 도 동일) 현재 페이지(asPath)인 /cart 로 이동한다. router를 통해 페이지를 방문했으므로 CartPage 의 getServerSideProps 가 다시 실행되고 갱신된 데이터를 CartPage 에게 프롭스로 내려주게 된다. 프롭스가 변경됐으니 자식 컴포넌트인 CartList 도 리렌더링되어 모든 코드가 다시 실행된다. 바뀐 장바구니 데이터로 보여지게 된다. 이렇게 이해하면 될까요? 그리고, getServerSideProps 가 있는 페이지 컴포넌트는 getServerSideProps 가 재실행되면 자동으로 리렌더링되게 되는 구조인가요? 설명해주셨는데 제가 놓친거면 죄송합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! NextJS 에 대한 Flow 설명중 질문이 있습니다 9:01 Timeline 유저의 접속요청시 해당 페이지에 대한 내용만 랜더링하여 HTML 을 반환하는 걸까요? 그게 아니고 설명하신 모든 컴포넌트에 대한 렌더링이 이루어지는 것이라면 CSR 방식과 마찬가지로 HTML 반환이 늦어지지 않나 싶습니다 또한 사전 렌더링이 NextJS 서버가 부팅시 이루어지는 행위인지 궁금합니다! (서버 부팅시 랜더링된 HTML 이 생성되는지)
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
m1 pro 사용 중이고 docker desktop 설치되어 있습니다. 찾아보니 docker desktop 설치 시 docker compose 도 같이 설치된다고 하던데.. 커맨드 자체가 없는거보니 뭔가 바뀐것 같네요. 아래처럼 수동으로 설치도 잘 안돼서 진행을 못하고 있습니다..
미해결
Next + React Query로 SNS 서비스 만들기
▲ Next.js 14.2.8 - Local: http://localhost:3000 - Environments: .env ✓ Starting... ✓ Ready in 4.2s ○ Compiling / ... ✓ Compiled / in 3.5s (1022 modules) GET / 200 in 4384ms GET / 200 in 81ms ✓ Compiled /api/auth/[...nextauth] in 364ms (493 modules) GET /api/auth/session 200 in 2386ms ○ Compiling /login ... ✓ Compiled /login in 1020ms (1035 modules) GET /api/auth/session 200 in 1561ms GET /login?_rsc=1pqm1 200 in 126ms ○ Compiling /(.)i/flow/login ... ✓ Compiled /(.)i/flow/login in 731ms (1050 modules) GET /api/auth/providers 200 in 44ms GET /api/auth/csrf 200 in 19ms [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: TypeError: Failed to parse URL from undefined/api/login at node:internal/deps/undici/undici:13178:13 [auth][details]: { "code": "ERR_INVALID_URL", "input": "undefined/api/login", "provider": "credentials" } POST /api/auth/callback/credentials? 200 in 40ms GET /api/auth/session 200 in 26ms 윈도우 인데 memurai설치가 도저히 안 되어서 그냥 redis 설치했습니다. 백엔드 코드 실행시키면 redis connected라고도 뜨고, service에도 실행중도 뜨고, hello world도 잘 뜹니다. REDIS_URL=redis://127.0.0.1:6379 //백엔드 env NEXT_PUBLIC_BASE_URL=http://localhost:3000 //z-com 에 있는 .env 이거로도 고쳐봤습니다. localhost:3000/login 여기로 넘어는 가는데 로그인이 안 됩니다. 깃허브에서 코드 잘 가져왔고, 회원가입도 잘 되는데 로그인만 안 됩니다. 뭐가 문제일까요 ㅠㅠ
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요. 우선 소개부터 드리자면 저는 FE 개발자나 그쪽을 지망하는 것은 아니고 백엔드를 업으로 하고 있고 집에서 홈서버에 제 개인 서비스를 배포할 목적으로 해당 강의를 수강하게 되었습니다. 사실 제가 프론트의 세계는 잘 몰라서 질문 드립니다. 혹시 페이지 로드 속도 & 검색 엔진 노출도가 배포 플랫폼에 영향을 받을까요? 다른 말로는, versel 을 통해 프론트를 배포하는 것이 배포가 쉬운 것 이외에 서비스의 퀄리티에도 도움을 주는 장점이 있을까요 ?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
회원가입과 로그인 기능에서 이메일 형식과 비밀번호 최소 길이 등에 대한 유효성 검사를 추가해 주실 수 있는지 궁금합니다. 현재 학습 중인데, 이 부분에 대한 자료를 추가로 올려주시면 감사드리겠습니다.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
npm run dev 접속이 안되는데 무슨 오류인지 모르겠습니다 전체 코드 따라했는데 이렇게 뜹니다 layout? middleware? 이쪽 같아서 계속 건드려보다가 안되서 질문 남깁니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요? 바탕화면에 codecamp-frontend 라는 폴더를 만들고, 그 아래에 class 라는 폴더를 만들어서 리액트 첫 보일러플레이트를 만들었습니다. section01 폴더도 만들고, 차근차근 하고 있습니다. 그런데, 깃허브로 바탕화면에 있는 codecamp-frontend 라는 폴더를 관리해주고 싶은데, 배운 대로 git init 을 하고 git add . 을 하니, 터미널에서, 이 폴더의 하위에 있는 class 라는 폴더가 서브모듈이 된다고 경고가 뜹니다. 그래서 검색을 해서 어찌어찌 되돌리고, 하위에 있는 class 폴더만 깃허브 리포지토리로서 관리하게 되었습니다. 그런데 class라는 이름의 리포지토리가 있는 것이 마음에 안 들고, 몇 가지 질문이 생겼습니다. 리액트 앱은 그 자체를 단독으로, 하나의 리포지토리로서 관리해주는 것이 맞나요? class 라는 이름의 리포지토리가 있는 것이 알아보기 어렵고 중복이 쉬워 이름을 바꾸고 싶습니다. 바꿔주어도 상관없을까요? 깃이 꼬이지 않을까요? 깃과 깃허브로 리액트 앱들을 하나의 폴더(리포지토리(저장소))로 모아서 관리하려면 어떻게 관리해 주어야 하는 건지 궁금합니다. 감사합니다.
미해결
포트폴리오 초간단 배포하기
안녕하세요. 강의 잘 듣고 있습니다 🙂 클라우드 서비스는 GCP 사용하고 있습니다. 문제점 크롬에서 8080 접속 시 접속이 안 되는 문제입니다. 그래서 먼저 방화벽 문제인가 싶어 방화벽 설정을 했습니다. 설정 후 접속하면 응답이 너무 오래 걸려서 연결할 수 없다고 합니다. 제가 이쪽에 지식이 없어서 어떻게 해결해야 할지 감이 안 옵니다. 혹시 해결하기 위한 키워드를 알려주실 수 있으신가요?
미해결
Next + React Query로 SNS 서비스 만들기
flex 컨테이너 안에 rightSectionWrapper,leftSectionWrapper 에 각각 flex-grow:1을 주어 컨테이너의 남은 여백을 똑같이 가져가고 leftWrapper에는 flex-end, rightWrapper에는 flex-start를 주어 중앙정렬 처럼 보이게 나타내는 것까지는 이해 하였습니다. 그런데 직접 코드를 작성하여 로컬에서 실행해보니 flex-grow가 적용이 되질 않습니다. . 개발자 도구를 확인해보면 분명 적용돼있는데 오른쪽 끝에 덩그러니 여백이 남아있습니다. 깃허브의 코드와 비교해보니 다른게 없어 ch2-1의 코드를 복붙해서 로컬에서 돌려봤더니 똑같이 flex-grow가 적용되지 않았습니다. 어떤 문제가 있어서 그런 것일까요 .. ? 코드는 문제가 없어 보이긴하는데 .. import { ReactNode } from "react"; import style from "@/app/(afterLogin)/layout.module.css"; import Link from "next/link"; import Image from "next/image"; import ZLogo from "../../../public/zlogo.png"; export default function AfterLoginLayout({ children, }: { children: ReactNode; }) { return ( <div className={style.container}> <header className={style.leftSectionWrapper}> <section className={style.leftSection}></section> </header> <div className={style.rightSectionWrapper}> <div className={style.rightSectionInner}> <main className={style.main}>{children}</main> <section className={style.rightSection}></section> </div> </div> </div> ); } .container { display: flex; align-items: stretch; background-color: #fff; } .leftSectionWrapper { display: flex; align-items: flex-end; flex-direction: column; flex-grow: 1; } .leftSection { background-color: orange; height: 100dvh; width: 275px; padding: 0 8px; } .rightSectionWrapper { display: flex; align-items: flex-start; height: 100dvh; flex-direction: column; flex-grow: 1; } .rightSectionInner { display: flex; flex-direction: row; background-color: aqua; width: 990px; height: 100%; } .rightSection { background-color: aquamarine; height: 100%; }
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의를 듣고 next-auth를 활용하여 개발 중에 궁금한 점이 생겨 질문 드립니다. 프로젝트에서 일반 로그인과 소셜 로그인을 모두 사용하고 있어 next-auth의 signin callback에서 로그인일 경우 자체 서버에 요청하여 accessToken과 refreshToken을 발급 받고 jwt callback에서 엑세스 토큰의 만료 시간을 체크하여 만료 시에 재발급 요청이 되도록 구현하고 있습니다. 이렇게 구현했을 경우 간헐적으로 서버 시간과의 타이밍 이슈 때문인지 api 요청 시에 401 토큰 만료 에러가 발생하는 순간이 존재합니다. 따라서 401 상태코드일 경우에 refreshToken 토큰 재발급 요청을 하려고 하는데 refreshToken이 현재 next-auth에서 jwt 콜백에서 리턴되어 jwt토큰으로 생성되어 있습니다. 이 401일 경우 재발급 요청 처리를 클라이언트 단에서 할 경우 refreshToken이 노출되어 보안상 이슈가 있을 것으로 예상이 되는데 서버단에서 처리를 하려면 next에서 어디서 처리를 하면 좋을 지 문의드립니다. async signIn({ account, user, credentials }) { const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const action = authorizationParams.action; user.platform = authorizationParams.platform; if (!account?.provider || !sns_type_map[account.provider]) { throw new Error("Unsupported provider"); } user.snsType = sns_type_map[account.provider]; if (action === auth_action_type.signin) { return handleSignIn(user); // getAccessToken } if (action === auth_action_type.signup) { return handleSignUp(); } return false; }, async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { ...token, ...user, accessToken: user.refreshToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: "refreshtoken", }; } // Return previous token if the access token has not expired yet if (new Date() < new Date(token.expiresAt as string)) { console.log("@@@@@@valid"); return token; } else { // Access token has expired, try to update it console.log("@@@@@@expired"); const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const body = { .... }; const tokenData = await authApi.reissueAccessToken(body); // reissue token return { ...token, ...user, accessToken: tokenData.accessToken, expiresAt: new Date( Date.now() + (tokenData.expiresIn ?? 0) ).toISOString(), refreshToken: tokenData.refreshToken, }; } }, 미들웨어에서 401 상태 코드 처리하는 것도 알아보았으나 일반적인 방식인지 궁금합니다. 미들웨어에서 401일때 재발급 요청 시 새로운 엑세스 토큰으로 재요청이 정상적으로 되는 것은 확인했으나 다시 next-auth의 jwt토큰에 재발급된 값을 세팅해줘야 하는데 어떻게 해야할지도 궁금합니다. import { NextResponse } from 'next/server'; import { getToken } from 'next-auth/jwt'; export async function middleware(request) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET }); if (request.nextUrl.pathname.startsWith('/gateway')) { const accessToken = token?.accessToken; const headers = new Headers(request.headers); if (response.status === 401) { const refreshToken = token?.refreshToken; const refreshResponse = await fetch("/reissueToken") const refreshData = await refreshResponse.json(); if (refreshResponse.ok) { const newAccessToken = refreshData.accessToken; headers.set('Authorization', `Bearer ${newAccessToken}`); const newResponse = NextResponse.next({ request: { headers: request.headers, }, }); } // 토큰 재발급 실패 시 처리 return NextResponse.redirect('/login'); } return NextResponse.next(response); } return NextResponse.next(); }
해결됨
한 입 크기로 잘라먹는 Next.js
link component 에 prefect 을 false 로 넘겨줄때, 직접 이동하진 않지만 마우스 hover시 js 를 받아오네요 그런데 프로그래미틱한 방법으로 /test 로 이동시에는 왜 해당 페이지로 이동하고 나서 받아오나요 ?
