안녕하세요 선생님유저정보를 모달창으로 보여주게 하기위해아래와같이 user를 사용해서 적용했었습니다.처음 만들었을때 메타데이터도 유저정보에 맞게 변경시켜줘야하는데 인터셉팅 라우터를 사용하면 메타데이터를 적용하지 못한다는 걸 어디서 본거같아서 테스트해보고 적용했었습니다. (user 폴더)그리고나서 테스트를 하던중에 ux가 어색한거같아서 다시 검색해보니 인터셉팅라우트에서 메타데이터 적용하는 부분을 했다는 사람도 있는것 같더라구요 그래서 (.)tester 폴더를 만들어서 실험해봤는데 메타데이터가 적용 안되서혹시 선생님은 인터셉트 라우트에서 메타데이터를 적용하는 방법을 아실까해서 여쭤봅니다! 📦@modal ┣ 📂(.)promise ┃ ┗ 📂form ┃ ┃ ┗ 📜page.tsx ┣ 📂(.)tester ┃ ┣ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜default.tsx ┣ 📂user ┃ ┗ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┗ 📜page.tsx ┗ 📜default.tsx시도했던 방법은 1. page.tsx에서 직접 generateMetadata를 사용.layout.tsx를 만들고 거기에 generateMetadata를 사용후 page.tsx를 children으로 받기여유되실때 확인해주시면 정말 감사하겠습니다!

안녕하세요, 강의 잘 보고 있습니다.React Native 프로젝트를 진행할 때 Bun을 사용하여 패키지 매니징을 했을 때 굉장히 개발 경험이 쾌적했던 기억이 있습니다.그리고 비교적 최근 ESLint와 Prettier의 단점을 상쇄해줄 Biome라는 솔루션이 나와서 도입해보려고 하던 상태였습니다.선생님은 Bun, Biome에 대해 어떻게 생각하시는지 궁금합니다!

taliWindcss를 사용해서 클래스네임에 작성을하고 마우스를 가져다 대면 75% 이런식으로 나온다고 하셨는데 아무것도 안나오는데 어떻게 하나요? 이 부분 강사님처럼 모양 바꾸고 싶은데 어떻게 하나요?

Form 컴포넌트를 신규로 만들어서 기존 컴포넌트에서 가져왔는데 강의에서는 오류가 표시가 되지만 저는 오류가 나타나지 않아서 현재, Form.js 파일에는 오류가 없는걸로 나오는데 어떻게 해야 하나요?

제로초님 안녕하세요! 제가 개발중인 프로젝트에서 최신순, 조회순 정렬과 키워드 검색을 통해 도서 목록을 출력하고 있는데요.Infinite scroll을 적용하려다 보니 강의에서 처럼 cursor로 전달할 postId 같은 값이 없고, 도서 데이터의 키 값은 uuid로 되어있습니다.커서 기반으로 개발하려면 백엔드에서 별도 값을 내려준다거나, 조회 SQL을 변경 해야 할까요? 어떤 적절한 방법이 있을지 궁금합니다. 감사합니다!

https://github.com/jaewonhimnae/%20boilerplate-mern-stack  this is not the ~~~~~ 없네요 자료를 다운받을 수 없는 것인가요?

next14에서 배포 시 페이지는 클라이언트 컴포넌트를 명시한 상태에서 next build를 실행시에 fetch 에러가 나오는데 next를 배포시에는 백엔드서버가 항상 켜져있어야되나요?

안녕하세요! 이제 막 강의를 듣고 있는 배정규라고 합니다.  아코디언 강의를 듣고나니 UI 컴포넌트 개발뿐만 아니라 자바스크립트와 프론트엔드 개발의 실무 팁까지 배울 수 있겠다라는 기대감이 생기네요 🙂  질문은 toggleItem 함수를 클로저를 활용해서 개선을 해주셨는데요, 왜 클로저로 개선을 해주셨는지가 궁금합니다. 클로저를 활용했을 때와 이전 함수와 비교했을 때 어떤 이점이 생기는지 크게 와닿지가 않아서요.왜 toggleItem 함수를 클로저를 활용해서 개선해주셨는지 궁금합니다 😃

수업에서 처럼 이렇게 코드를 작성했을 때는 오류가 발생하는데placeholder를 넣으면 에러가 나지않습니다. 왜그런지 알 수 있을까요?!

안녕하세요 선생님배포테스트할때 클라이언트에서 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:---------------------------- U8DRuillNv2DBRmexmO1mZZ7fGJeWXCw0|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에러는 발생하지 않고있습니다. 혹시 수정해야할 코드나, 참고해야할 부분이 있다면 알려주시면 감사하겠습니다.   

안녕하세요 제로초님 저는 react app 개발만 조금 해봤는데, next 강의에서 server action을 처음 접하면서 헷갈려서 질문 드립니다.예를 들어서 게시판 목록을 불러올 때 server fetch를 통해 화면에 출력하고 있고, 무한스크롤이나 add, edit, delete 동작 등을 server action으로 할 수 있다는 것을 알았는데요.그렇다면 next app을 개발할 때는 client fetch는 전혀 필요가 없는 건가요? 아니면 어떤 필요에 따라 client fetch와 server fetch를 혼용해서 사용해야 하는 건지.. 궁금합니다. 감사합니다!

<저장 전><저장 후> <저장 전><저장 후> <저장 전><저장 후>파일 저장을 하면 prettier가 실행되면서 의도적으로 줄 바꿈 했던 것을 한 줄로 합쳐버립니다. 그렇다고 format on save를 끄거나 prettier를 끄고 싶지는 않습니다. 한 줄로 합쳐지지만 않게 하고 싶은데 어떻게 해야 할까요?

수업 내용을 따라 작성 하는데..이상한 점이 있어서 문의 드립니다.eslint, prettier 등 처음 부터 셋팅을 그대로 따라 했는데요.저는 그림 처러 저런 오류가 생깁니다. problem 을 보면이런게 생기고요.. 그런데 상단에 /* eslint-disable prettier/prettier */라는 것을 넣으면 오류가 사라지는데요.. 왜 그럴까요?제가 셋팅을 잘못 한게 있을까요?? 

안녕하세요 제로초님.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를 렌더링하는지 궁금합니다.해당 강의에서 설명해주신 것 같아 여러번 보았지만 저의 이해력이 안좋아 질문드립니다. ㅜㅜ 항상 좋은강의 감사드립니다! 

강사님의 컴포넌트를 나눌 때의 기준이 궁금한데요. 지금까지 제가 이해한 내용으로는반복되는 부분은 컴포넌트 화 시켜서 공통컴포넌트 _component폴더에 두시는것 같습니다.  제가 궁금한 것은 (afterLogin)/home/page.tsx 내부 구조가 컴포넌트만 있는데 (사진첨부)(afterLogin)/layout.tsx파일의 내부구조는 컴포넌트화 되어있는 부분이 섞여있습니다page는 모두 컴포넌트화 시키셨는데 layout은 왜 모두 컴포넌트화를 시키지 않으셨을까요? 따로 컴포넌트화 하시는 기준이 있을까요?

강의를 들으면서 이해하기 어려운 부분강의를 따라하는데 에러가 발생하는 부분강의에는 없지만 스토리북에 대해 궁금한 부분들을 자유롭게 질문으로 올려주세요!확인하는대로 최대한 빠르게 답변드리겠습니다 이런것도 여기 질문해도 되나요? 강사님 VS Code 테마가 예뻐서 어떤거 쓰시는지 궁금합니다 ☺ 찾아봤는데 비슷한게 안보여서 질문드렸어요

처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..

Material--icons_4.0.0.woff2 는 리소스 크기가 3mb인데 해당 폰트는 font-display:block으로 하지 않는이상 폰트 다운드로 전에 영어를 출력시키거나 안보이도록 해야하는되 이 부분 레이아웃 시프트 발생하지 않도록 cls 잡는 방법이 무엇이 존재할까요???

안녕하세요리액트를 사용해서 웹 페이지를 배포 후 반응형 테스트를 위해 여러 기종에서 테스트 중인데요안드로이드 핸드폰에선 기종 상관 없이 전부 잘 보이는데아이폰에서는 아무것도 보이지 않고 하얀 화면만 보이는 문제가 생겼습니다혹시 리액트로 배포 후 ios 기기 호환성을 위해 따로 해줘야하는 작업이 있을까요?

첫번째 사진은 터미널창에서 yarn dev를 하니 리엑트 버전을18.2.0 버전으로 해야 한다고 합니다. .전에 eslint 설치중에 오류가 나서 node_modules, eslintrc.js , yarm.lock 을 지웠다가 재설치를 했습니다.이때문에 오류가 난것 같은데 구글링해도 해결방법을 모르겠어서 질문남깁니다 ㅜ