안녕하세요 제로초님 저는 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 을 지웠다가 재설치를 했습니다. 이때문에 오류가 난것 같은데 구글링해도 해결방법을 모르겠어서 질문남깁니다 ㅜ
await updateProfile(auth.currentUser, { displayName: data.name, photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon` }) realtime db와는 아무런 연관이 없는데요?? db에서 변화가 되면 프로필상에도 바뀌어야되는데 원칙이 아닌가요??
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로 최신버전입니다.
강의 1분쯤에 jest.config.cjs로 쓰는 것과 package.json에서 작성하는 법 2가지를 알려주셨을 때 전자대로 적용해 실행하니 아래와 같은 에러가 발생했습니다! 이후에 package.json에 작성해서 실행하는 방법으로 변경하니 정상적으로 작동했는데 혹시 이 원인을 알 수 있을까요? modules를 import하지 못한 이유를 잘 모르겠습니다!
안녕하세요 제로초님! 제로초님의 강의를 듣고 난 이후로 여러가지 프로젝트를 진행하다가 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가 실행 되지 않는건가요..?
최소 최대 가격을 수정할 때 최소 금액이 0보다 작을 때 최대 금액이 최소 금액보다 작을 때 위 같은 조건을 처리할 때 관련 질문입니다 describe 사용 여부 // 1 describe('최소 최대 가격 확인 테스트', () => { it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {}) }) // 2 it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {}) 위 같은 조건 테스트를 작성 하는게 좋은지 아니면 아예 입력 처리를 해서 작성 안하는게 좋은지 확인 (0보다 작은수는 입력되지 않고, 최대 금액은 최소 금액보다 무조건 크게 작성하도록 처리 등)
