172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
next14에서 배포 시 페이지는 클라이언트 컴포넌트를 명시한 상태에서 next build를 실행시에 fetch 에러가 나오는데 next를 배포시에는 백엔드서버가 항상 켜져있어야되나요?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 배포테스트할때 클라이언트에서 api호출하면 쿠키가 전달되지 않고있습니다. 클라이언트에서는 credentials: 'include'를 적용했고 const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/setting`, { method: 'PATCH', credentials: 'include', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userSettingObj), }); if (response.ok) { const sessionUpdateInfo = await response.json(); await updateSession(sessionUpdateInfo); router.push('/'); } 서버에서는 const express = require('express'); const cors = require('cors'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const morgan = require('morgan'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const usersRouter = require('./routes/users'); const db = require('./models'); const passportConfig = require('./passport'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('db 연결 성공') }) .catch(console.error); passportConfig(); if (process.env.NODE_ENV === 'production') { app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); } else { app.use(morgan('dev')); } app.use( cors({ origin: ['http://localhost:3000', 'whatisyourmbti.com', 'http://43.201.56.221'], // true or * // access-control-allow-origin가 true된다. --> 다른 도메인끼리 api 요청 credentials: true, // access-control-allow-credential가 true된다. --> 다른 도메인끼리 쿠키 전달 method: '*', }) ); // 프론트에서 보낸 정보를 req.body에 넣어준다. 순서 중요! app.use(express.json()); // json 형식으로 보냈을때 데이터 처리해줌 app.use(express.urlencoded({ extended: true })); // form submit으로 보냈을 때 데이터 처리해줌 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, } })); app.use(passport.initialize()); app.use(passport.session()); app.use((req, res, next) => { console.log('Session ID:', req.sessionID); console.log('Cookies:', req.cookies); console.log('Signed Cookies:', req.signedCookies); next(); }); app.get('/', (req, res) => { res.send('hello express'); }); app.get('/api', (req, res) => { res.send('hello api'); }); app.use('/post', postRouter); app.use('/posts', postsRouter); app.use('/user', userRouter); app.use('/users', usersRouter); app.listen(80, () => { console.log('서버 실행 중!'); }); credentials: true, 쿠키옵션을 설정해주었는데 0|app | Session ID:---------------------------- U8DRuillNv2DBRmexmO1mZZ7fGJeWXCw 0|app | Cookies:------------------------------- [Object: null prototype] {} 0|app | Signed Cookies:------------------------ [Object: null prototype] {} 이런식으로 쿠키값이 전달되고 있지 않아서 유저 정보가 필요한(로그인 확인)로직에서 401에러가 떨어지게 됩니다. app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, } })); 위부분들을 검색해보고 바꿔보기도 했는데, 잘안되더라구요. 클라이언트의 ip는 http://43.201.56.221입니다. 쿠키는 로그인 후 프론트서버에서 브라우저에 삽입해주고 있습니다. console.log(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login ---------------------login api`); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ...credentials }), } ); // 프론트서버에서 백엔드서버의 로그인 토큰을 받아온것. 토큰은 문자열이라서 // cookie라이브러리로 객체로 만들어준다. let setCookie = authResponse.headers.get('Set-Cookie'); console.log('set-cookie', setCookie); if (setCookie) { const parsed = cookie.parse(setCookie); console.log(parsed, '---------------parsed cookie'); // 브론트서버에서 브라우저에 쿠키를 심어준다. // 프론트서버에 쿠키를 심으면 안된다! 왜냐하면 프론트서버는 서버라서 공용이다. // 여러 브라우저가 전부 프론트서버르 바라본다. 개인정보 유출 문제 발생할 수 있다. cookies().set('connect.sid', parsed['connect.sid'], parsed); // parsed = 나머지 옵션들 } console.log(authResponse, '--------------------------------authResponse'); let user = await authResponse.json(); console.log(user, '--------------------------------user'); // console.lo(authResponse); if (!authResponse.ok) { return null; } // return user object with the their profile data return { ...user, email: user.email, name: user.nickname, image: user.image, id: user.id, } } catch (err) { console.error('로그인 에러', err); } 그리고 cors에러는 발생하지 않고있습니다. 혹시 수정해야할 코드나, 참고해야할 부분이 있다면 알려주시면 감사하겠습니다.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 저는 react app 개발만 조금 해봤는데, next 강의에서 server action을 처음 접하면서 헷갈려서 질문 드립니다. 예를 들어서 게시판 목록을 불러올 때 server fetch를 통해 화면에 출력하고 있고, 무한스크롤이나 add, edit, delete 동작 등을 server action으로 할 수 있다는 것을 알았는데요. 그렇다면 next app을 개발할 때는 client fetch는 전혀 필요가 없는 건가요? 아니면 어떤 필요에 따라 client fetch와 server fetch를 혼용해서 사용해야 하는 건지.. 궁금합니다. 감사합니다!
해결됨
Next.js 시작하기
수업 내용을 따라 작성 하는데..이상한 점이 있어서 문의 드립니다. eslint, prettier 등 처음 부터 셋팅을 그대로 따라 했는데요. 저는 그림 처러 저런 오류가 생깁니다. problem 을 보면 이런게 생기고요.. 그런데 상단에 /* eslint-disable prettier/prettier */ 라는 것을 넣으면 오류가 사라지는데요.. 왜 그럴까요? 제가 셋팅을 잘못 한게 있을까요??
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님. Parallel Routes에 대하여 질문있습니다 (공식문서 폴더구조) 우선 공식문서대로 위와같은 폴더구조로 한 후 export default function Layout({ children, team, analytics, }: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( <> {children} {team} {analytics} </> ) } Layout에 team과 analytics를 props로 주게되면 team과 analytics에 있는 page.js 가 잘 렌더링 되는 것을 확인하였습니다. 그래서 이것을 강의에 응용해보려고 했습니다. (강의 폴더구조 및 응용) src/app/(afterLogin)/@team (afterLogin)폴더에 @team 폴더를 만들고 그 안에 default.tsx 랑 page.tsx 파일을 만들었습니다. default.tsx 파일이 없으면 404 not found 가 뜹니다. 그 후 AfterLoginLayout에 team을 props로 두어 렌더링하였습니다. 결과는 default.tsx가 렌더링 되었습니다. src/app/(afterLogin)/layout.tsx type Props = { children: ReactNode; team: ReactNode}; export default async function AfterLoginLayout({ children, team }: Props) { return ( <> {children} {team} </> ); } 공식문서에서 default.tsx 는 "초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 폴백으로 렌더링할 default.js 파일을 정의할 수 있습니다." 즉 파일을 찾지 못하여 default.tsx를 렌더링 한다는 말이라고 이해했습니다. 즉 궁금한 것은 공식문서 폴더구조에서는 @team폴더의 page.tsx를 렌더링하는 반면 강의 폴더구조에서는 page.tsx를 렌더링하지 않고 default.tsx를 렌더링하는지 궁금합니다. 해당 강의에서 설명해주신 것 같아 여러번 보았지만 저의 이해력이 안좋아 질문드립니다. ㅜㅜ 항상 좋은강의 감사드립니다!
해결됨
Next + React Query로 SNS 서비스 만들기
강사님의 컴포넌트를 나눌 때의 기준이 궁금한데요. 지금까지 제가 이해한 내용으로는 반복되는 부분은 컴포넌트 화 시켜서 공통컴포넌트 _component폴더에 두시는것 같습니다. 제가 궁금한 것은 (afterLogin)/home/page.tsx 내부 구조가 컴포넌트만 있는데 (사진첨부) (afterLogin)/layout.tsx 파일의 내부구조는 컴포넌트화 되어있는 부분이 섞여있습니다 page는 모두 컴포넌트화 시키셨는데 layout은 왜 모두 컴포넌트화를 시키지 않으셨을까요? 따로 컴포넌트화 하시는 기준이 있을까요?
해결됨
빠르게 git - 핵심만 골라 배우는 Git/Github
pr을 날린 후, 마지막에 브랜치를 지워주면 좋다고 설명해주셨는데요, 이때 브랜치를 지우는게 로컬의 브랜치를 지우는건지, 아니면 원격의 브랜치를 지우는 건지 궁금합니다 수업에서 보여주셨던 git branch -D 브랜치이름 는 로컬의 브랜치를 강제 삭제하는 명령어로 알고 있습니다 ! 그럼 로컬의 브랜치만 지우고, 원격의 브랜치는 지우지 않는 건가요 ?!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
첫번째 사진은 터미널창에서 yarn dev를 하니 리엑트 버전을 18.2.0 버전으로 해야 한다고 합니다. . 전에 eslint 설치중에 오류가 나서 node_modules, eslintrc.js , yarm.lock 을 지웠다가 재설치를 했습니다. 이때문에 오류가 난것 같은데 구글링해도 해결방법을 모르겠어서 질문남깁니다 ㅜ
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
shadcn는 next.js에서만 사용가능한 라이브러리 인가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn add --dev husky과 npx husky install 하니 .husky 폴더가 생겼는데 강의와는 다른 폴더들이 많이 있구요 이후에 npx husky add .husky/pre-commit "yarn lint" 실행하니 add 명령어를 권장하지 않는다고 뜹니다 이 경우에 어떻게 해야할까요??
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
5-2강의 내용은 문제 없이 잘 됐고, 그 다음부터 5-5까지도 문제가 없었습니다. 에러가 다음과 같이 나옵니다. 어떤 게 문제일지 잘 모르겠습니다. 도움을 구합니다. <콘솔로그 상 오류 메시지> Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'from') npm으로 설치를 진행하였으며, npx create-next-app@latest로 최신버전입니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님! 제로초님의 강의를 듣고 난 이후로 여러가지 프로젝트를 진행하다가 middleware.ts 와 NextRequest 에 대해 궁금한게 생겼고 공식문서를 찾아봐도 관련 내용을 제가 못 찾는 것 같아서 이렇게 질문드리게 되었습니다. NextRequest NextRequest는 제가 보내는 요청(페이지에 대한 요청, api에 대한 요청 등)의 정보를 가지고 있는 것으로 알고 있습니다. 만약 클라이언트 컴포넌트 에서 (route handler가 아닌)외부 백엔드 api 로 요청을 보냈을 때, 그 "요청의 헤더에 담긴 쿠키를 제거하고 싶다 " 라는 요구사항이 있을 때 다음과 같이 구현을 했습니다. import { NextRequest, NextResponse } from 'next/server'; export async function middleware(request: NextRequest) { request.cookies.delete('accessToken'); request.cookies.delete('refreshToken'); console.log(request.cookies.getAll()); // 쿠키가 삭제된게 확인됨 } 이렇게 한다면 요청을 보내고 -> middleware에서 받은 뒤, 쿠키를 지우고 -> 이어서 요청을 진행 이렇게 되는 것으로 알고 있는데, 실제로는 401이 발생하지 않고 브라우저 network탭을 보면 헤더에 여전히 쿠키가 담겨 있습니다. 이걸 보고 NextRequest에서 삭제 및 수정한 쿠키는, 그 요청이 처리되는 동안만 (=Next.js 서버 내에서 처리될 때만) 유효하고 외부 백엔드 api로 나가는 요청엔 적용되지 않는건가? 라는 생각이 드는데 이게 맞는건가요? middleware 정확히 middleware가 동작하는 시점이 궁금합니다. 저는 웹에서 진행되는 모든 요청 ( '페이지가 요청될 때' , 'api가 호출될 때' 등) 마다 미들웨어가 작동하는 것으로 알고 있습니다. 근데, 서버 컴포넌트(page.tsx)를 실행했을 경우에 다음과 같은 순서로 진행됩니다. page.tsx에 해당하는 URL 요청 - middleware 실행 이후, page.tsx에 존재하는 데이터 패칭 진행 - middleware 실행 x 클라이언트 컴포넌트에서는 url요청과 데이터 패칭 2가지 경우 모두 middleware가 실행 됐었는데, 왜 서버 컴포넌트에서의 데이터 패칭을 할 때는 middleware가 실행 되지 않는건가요..?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 여쭤보고 싶은 부분이 있습니다. 유저정보 수정 후 서버세션을 업데이트하려는데 검색해도 생각처럼 잘 되지 않더라구요. 혹시 업데이트 방법을 아실까해서 문의드립니다.
미해결
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
타임존을 서울로 설정했을 때 다음과 같은 에러가 뜨는데 왜그런걸까요~?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
데이터를 bbb 같은 데이터에 담고 그걸 presenter에 담으면 presenter에서 데이터를 알아보기 어려우니까 3번과 같이 map 자체를 <div> 에 담아서 렌더링 한다고 말씀하셨는데요, 그렇다면 3번과 같은 렌더링은 컨테이너의 return에 적는걸까요 아니면 presneter의 return에 적는걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. beforeLogin과 afterLogin 둘다 layout.tsx를 가지고 있는데, localhost:3000 에서 beforeLogin의 layout.tsx를 렌더하는 이유가 궁금합니다. page.tsx가 있으면 그쪽을 인식하는 건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 css까지 다 완성했는데 비교해보니 비슷한 느낌은 나는것 같습니다. 혹시 코드 예제? 라던지 대표적인 완성코드를 볼 수 있는건 없나요?? 한번 비교해보고 싶어서요.. 추가로 남성/여성 부분 radio 동그라미가 피그마 원본? 상에는 크고 회색으로 칠해져 있는데 저건 어떻게 적용하나요?? 가입하기 버튼 위 구분선도 제게 사라졌는데 원인을 알수있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel = "stylesheet"> </head> <body> <div id="tBox"> <h2 id="title">회원 가입을 위해 <br/> 정보를 입력해주세요</h2> <input class = "underline" type="text" placeholder="*이메일"><br><br> <input class = "underline" type="text" placeholder="*이름"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호 확인"><br><br> <!-- <select> <option disabled="true" selected="true">지역을 선택하세요</option> <option>서울</option> <option>경기</option> <option>인천</option> <option>부산</option> <option>울산</option> <option>김해</option> </select> --> <div id = "gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="checkbox-container"> <input type="checkbox" id="terms"> <label for="terms">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</label> </div> <br> <div class = "register"> <button class = "button">가입하기</button> </div> <!-- <input type="button" value="가입하기"> --> </div> </body> </html> * { box-sizing: border-box; } #title { width: 466px; height: 94px; color: #0068ff; font-size: 32px; font-family: Noto Sans CJK KR; text-align: justify; } #tBox { width: 670px; height: 960px; border: 1px solid #aacdff; margin-top: 60px; margin-left: 625px; padding: 100px; box-shadow: 7px 7px 39px 0px #0068ff; border-radius: 20px; display: flex; flex-direction: column; align-items: center; } input[type="text"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } input[type="pw"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } button { padding: 10px 20px; color: #fff; background-color: #0068ff; border: none; border-radius: 5px; cursor: pointer; } input.underline { border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1px; } #gender { width : 140px; height: 23.94px; border : 1px solid #fff; display: flex; justify-content: space-between; } .checkbox-container { width: 466px; height: 21.06px; border: 1px solid #fff; border-radius: 3px; align-items: center; display : flex; } .checkbox-container input[type="checkbox"] { margin-right: 10px; } .register { border-top : 1px solid #e6e6e6; width: 470px; height: 1px; } .button { background-color: #FFFFFF; border :1px solid #0068FF; width: 470px; height: 75px; border-radius: 10px; font-size : 18px; color : #0068FF; text-align: center; font-weight: 400; line-height: 26.64px; font-family: Noto Sans CJK KR; }
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
5강까지는 문제없이 보였는데 6강부터 수파베이스 관련된 마지막 강의까지 화면이 검정색으로 아무것도 안보이는데 혹시 저만그런건가요?? 이런적이 처음이라 어떻게 해야할지 모르겠어요 수파베이스 다음 강의부터는 또 잘 나오는거 같아요 지금 그냥 건너뛰고 뒤에 강의 듣고있는데 또 비슷한 현상이 나타나네요 ;;;;;;;; 화면이 까맣게 안나오고 목소리만 들려요,,,
미해결
Next + React Query로 SNS 서비스 만들기
Next.js는 라이브러리에서 보내는 요청까지 캐싱해버리는데, export const dynamic = 'force-dynamic' 해당 문구를 page.tsx에 넣어주면 해당 페이지에서 보내는 모든 요청을 캐싱하지 않음 . => export const dynamic = 'force-dynamic'를 적용한 page.tsx 는 써드파티 라이브러리의 백엔드 요청 캐싱을 무시한다. 또한, 모든 요청을 캐싱하지 않기 때문에 react query나 fetch 함수의 요청도 모두 캐싱을 하지 않는다. 라고 이해했는데 잘 이해한 것인지 모르겠어서 질문 올리게 되었습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
페이지 이동후 url에 상품 id도 잘출력되고 graphql에 조회해봐도 제대로 조회가되는데 vscode로 실행하면 variables에서 null값이 출력되는데 아무리 찾아봐도 어디가 문제인지 몰라서 질문드립니다 ㅠㅠ
