강사님과 같이 했는데 저는 이렇게 빨간 줄이 뜨면서 리액트앱을 실행시키면 이러한 오류가 뜹니다.ㅠㅠ왜이런걸까요..? 어떻게 해결해야 할까요?

chat gpt가 "Next.js에서 라우팅을 설정할 때 pages 폴더는 매우 중요한 역할을 합니다. 이 폴더는 Next.js 프레임워크가 자동으로 URL 경로와 매핑하는 라우팅 시스템의 핵심입니다. 따라서, 기본적으로 라우팅을 위한 파일들은 pages 폴더 내에 위치해야 합니다.그러나, 여러분이 제시한 구조처럼 src/app 디렉토리 안에 페이지 컴포넌트를 배치하는 것도 가능합니다. 이 경우, Next.js의 기본 라우팅 규칙을 따르지 않기 때문에, 명시적으로 라우팅 로직을 정의해야 합니다. 예를 들어, Next.js의 Custom Server 기능을 사용하여 Express.js 또는 다른 Node.js 서버 프레임워크와 함께 라우팅 로직을 직접 작성할 수 있습니다.이렇게 하면, src/app 폴더 내의 파일 구조를 사용하여 원하는 URL 경로와 매핑할 수 있습니다. 하지만 이 방법은 Next.js의 자동 정적 최적화, 파일 기반 라우팅 등과 같은 기본 제공 기능들을 직접 관리해야 하는 추가적인 작업이 필요합니다."라고 하는데 그럼 저희는 이번 강의에서 page폴더를 넣지 않았으니 next.js의 폴더 구조 라우팅 시스템을 활용하지 않고 직접 라우팅 로직을 작성할 것이라는 건가요?

React에서는 React 팀이 직접 만든 Event 타입을 사용하고, Vue에서는 MDN에서 제공하는 범용적 Event 타입을 사용한다고 하시고, React에서 가상 DOM 때문에 React 팀이 만든 Event 타입을 사용한다고 말씀 주셨습니다.하지만, Vue도 마찬가지로 vDOM을 사용하고 있는 것으로 알고 있어요. 🙂 그렇다면, Vue도 vDOM을 사용한다면 Template 문법 내부에서 범용적 Event 타입이 아니라 커스텀 이벤트 타입을 사용해야 맞는 것 아닌가요?굳이 React 에서 커스텀 이벤트 타입을 사용하는 이유와, Vue에서 범용적 이벤트 타입을 사용하는 각각의 이유가 있을 것 같은데, 이에 대한 궁금증이 생겨 질문드립니다! 

[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 안녕하세요 로초님! 강의 잘 보고 있습니다. 다름 아니라 position:fixed;는 뷰포트를 기준으로 레이아웃을 배치하게 만드는 속성값이라서, top, left, bottom, right 중 하나 이상을 써야 레이아웃이 정상적으로 된다고 알고 있는데, (afterLogin)/layout.module.tsx의 .leftSectionFixed와 .search에서는 top같은 거 없이도 의도한 대로(sticky처럼?) 기능하는 이유가 무엇인지 궁금합니다. 옛날에 제가 다른 프로젝트 만들었을 때는 fixed랑 top을 같이 안 써서 헤맨 적이 있어서, 앞으로는 top을 꼭 같이 써야겠다고 알고 있었고,지금 구글링 해서 fixed의 사용법을 찾아봐도 다들 top같은 걸 써야 한다고 말하고 있어서, 혹시 다른 사용법이 있는 건지 궁금해서 여쭈어봅니다. 답변 기다리겠습니다. 감사합니다:)

안녕하세요.본 강의에서 보여주신 회원가입 버튼 비활성화 로직은 다음과 같습니다. useEffect(() => { const isEnabled = Object.values(inputs).every((s) => s.length > 0); setFormDisabled(!isEnabled); }, [inputs]);위의 코드로 실행하면 username과 password를 모두 입력하면 회원가입 버튼이 활성화되고 하나라도 지우면 다시 비활성화 됩니다.   useEffect(() => { if (inputs.username && inputs.password) { setFormDisabled(false); } }, [inputs]);그러나 조금 수정하여(이외의 부분은 모두 동일) 위와 같이 실행해보면, 본래의 코드와 마찬가지로 모두 입력되었을 때 버튼이 활성화 되지만 다시 지워도 비활성화가 되지 않습니다. 두 곳 모두 지워봐도 마찬가지입니다. console.log로 찍어보아도 false 값으로 고정된 채 바뀌지 않습니다.useEffect가 비동기 방식이므로 formDisabled가 업데이트 되는 타이밍 문제도 고려해 보았지만, 그렇다면 본래의 코드에서도 이런 문제가 발생하여야 할 것이라고 판단했습니다.여러모로 분석해 보았지만 이유를 알기가 어렵습니다.

특별한 이유가 있나요?

해당 강의에서 예로 들어주신 부분 코드를 가져와 보면async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(jsonResponse); } getData();위 코드를 예로 들어 주셨는데요 여기서 질문이 있는데async 내부에서 await은 비동기를 동기적으로 실행하게 하는 거라고 해주셨는데요그러면 위 코드에서 async await 자체를 쓸 필요가 없는거 아닌가 하는 궁금증이 들었는데요혹시 말씀해주신 '비동기를 동기적으로 실행하게 한다' 라는게 해당 함수 내부에서만을 말씀해주신 걸까요??제가 이해한게 맞나 확인 부탁드립니다.코드를 실행 하면 차례대로 한줄씩 실행된다.getDate함수를 호출하는 코드가 실행되면 코드의 실행 순서는 getDate함수로 이동한다.getDate함수 내부의 await을 만나면 거기서 getDate함수의 실행은 멈춘다.getDate함수의 await 작업이 끝날 때까지 getDate함수는 실행을 멈추고 실행은 다시 전체 코드에서 getDate함수를 호출한 부분 이후의 코드가 실행된다.await 작업이 끝나면 실행은 다시 getDate함수 내부의 await 이후 코드가 실행되고 getDate 함수의 실행이 끝나면 다시 실행은 이전까지 실행했던 부분이후로 넘어간다라고 이해 했는데요... 이게 맞을까요??아! 그리고 비동기 함수가 넘어가는 부분도 자바스크립트 처럼 싱글쓰레드라 비동기 함수들을 하나씩 처리하나요?? 아니면 비동기 작업을 처리하는 부분은 멀티쓰레드 형식이라 동시에 비동기작업을 처리하는것이 가능한가요??

선생님의 설명 덕분에 클라이언트 컴포넌트에서도 Server Action을 활용하는 방법을 알게 되었습니다. 하지만 몇가지 의문이 있는 상태입니다. ㅜㅜServer Action이라는 것이 클라이언트 컴포넌트에서 직접 DB에 접근하거나 별도의 브라우저에서 요청하지 않더라도 서버에 요청을 보내서 Prerendering 하는 방식이 맞을까요?그러면 보안 상의 장점도 가질 수 있고, 속도에도 개선이 생기는게 맞을까요?클라이언트 컴포넌트에서 Server Action을 사용하게 된다면 기존의 Server Action의 장점이 없어지는 것 같은데 사용하는 이유가 단순히 강의에서의 설명을 위함이신지 아니면 별도의 장점이 있으셔서 강의에 넣으실 계획을 하신 건지 궁금해서 질문남깁니다!

제가 이해한 것이 맞는지 확인차 질문 남기게 되었습니다!MSW의 경우, service worker가 브라우저의 요청을 뺏어서 browser.ts로 요청을 전달하는 게 맞을까요?그렇다면 http.ts같은 경우는 서버 컴포넌트에서 서버로 요청을 보낼 때는 next 서버에서 요청을 보내고 난뒤의 데이터를 가지고 서버에서 미리 렌더링하기 때문에 이 요청을 mocking하기 위해 만들어두신 개념이 맞을까요?

따라하며-배우는-노드-리액트-쇼핑몰 > 쇼핑 카트 페이지 데이터 가져오기 강의를 수강중에 있습니다.17:30 부근에 제품을 배열로 다시 재정리 해주는 걸 설명해주고 계시는데 split 후에 map을 하는 이유가 궁금합니다.값을 map 처리하기 전후로 찍어보니 값이 동일하게 나오는데 map 처리를 해주는 이유가 따로 있나 싶어서 여쭤봅니다.

안녕하세요 강의 정말 잘 듣고 있습니다.해당 강의를 듣는중 궁금한점이 생겨서 질문 드립니다.제가 원래 java/spring을 공부하다가 이번에 프론트 엔드쪽에 관심이 생겨서 React를 학습중인데ide에서는 .js 파일을 Import할때 뒤에 왜 자동으로 .js가 안붙도록 되어있나요?저는 강사님과 다른 ide를 사용중인데도 여기서도 .js가 자동으로 붙지 않습니다.import React from "react"; import Header from "./components/Header.js"; import KeywordList from "./components/KeywordList.js"; import SearchForm from "./components/SearchForm.js"; import SearchResult from "./components/SearchResult.js"; import Tabs, { TabType } from "./components/Tabs.js"; import store from "./Store.js";제가 추측한건데 React를 import 하는 경우에는 react 파일이 typeScript로 되어있고 나머지 경우는 전부 javaScript로 되어있습니다. 따라서 기본이 .ts로 설정 되어 있어서 javascript파일은 별로로 명시해줘야 찾을 수 있게 되어 있다고 생각이 듭니다.별로 의미없는 질문이지만 궁금해서 질문 드립니다.감사합니다.

안녕하세요! 강의 중간에 generateMetadata 를 사용하는 부분에서 왜 서버 api로 분리를 했는지에 대해 의문이 생겨서 질문드립니다.generateMetadata 에 사용할 getSinglePost 함수는 원래 아래와 같은 코드로 작성되어있었습니다.  여기서 generateMetadata 를 구현하실때, 기존의 getSinglePost 를 사용하시지 않고, getSinglePostServer 를 사용하셨는데 혹시 왜 이렇게 서버 API로 분리를 하셨는지 알 수 있을 까요?  처음에는generateMetadata 는 서버 환경에서 진행이 되기 때문에 서버에서 돌아가는 api를 작성해야 한다그렇기 때문에 credentials: 'include 를 사용하는 부분이 있다면 이는 클라이언트 환경에서만 적용이 되는 것이므로 headers: { Cookie: cookies().toString() } 를 사용해야 한다라고 저는 이해를 했었기 때문에 getSinglePost 대신 getSinglePostServer 로 분리를 하신거라고 생각했습니다.   근데 기존의 getSinglePost 는 애초에 인증 여부가 필요한 부분이 아니어서 credentials: 'include 는 없었는데 왜 강의에서getSinglePostServer로 따로 분리하시고 headers: { Cookie: cookies().toString() } 를 추가로 적용하셨는지 궁금합니다!

서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요??클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요??클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다.강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??

안녕하세요. 온라인강의 수강하는 학생입니다. 주중엔 짬짬이 강의만, 코딩학습은 주말만.. 학습 진도가 늦지만.장기간 걸쳐. 열심히 해 보겠습니다.ㅎ 회원가입 과제 아래와 같이 해 보았습니다.(1) vector 부분을 어떻게 적용해야 하나요? figma에서 제공하는 svg소스를 복사,붙여 넣기만 했는데...(2) ellipse 부분을 어떻게 적용해야 하나요? checkbox나 radio 부분에 svg 소스 활용방법이 궁금합니다.(3) 과제에 대한 멘토님의 소스를 보고싶은데 , 제가 못 찾는 것인지 멘토님 소스 보는 방법을 가르쳐 주셨으면 합니다.멘토님의 의견 감사합니다.

안녕하세요! 항상 좋은 강의 만들어주셔서 감사합니다ㅎㅎㅎ 이번에 새로 업데이트 된 강의를 들으면서 redux 강의 부분을 듣고 있다 이전 john ahn님의 로그인 강의 예제에서 질문이 생겼습니다.john ahn님의 로그인 강의에서export function loginUser(dataToSubmit) { const request = axios.post('/api/users/login', dataToSubmit) .then(response => response.data) return { type: LOGIN_USER, payload: request } } 이런식으로 로그인을 한 적이 있습니다! 이 때는 이 방법이 redux-thunk를 사용한 방법인 줄 알았는데, 강의를 들어보니 이것은 redux-thunk를 이용하지 않은 방법이라는 것을 알게되었습니다. 근데, axios를 사용해서 비동기로 처리했는데도 제 기억에 login 강의는 잘 동작했었습니다.왜 잘 동작했는지 chat GPT를 통해 질문하니 답변으로 이것은 잘 동작하지 않는 코드이고 "이 코드에서 axios.post는 비동기 함수이고, .then(response => response.data)를 통해 HTTP 요청의 결과를 처리하고 있습니다. request 변수는 이제 비동기 요청이 성공적으로 완료되었을 때 응답 데이터를 갖게 됩니다. 그러나 여전히 request는 프로미스입니다. 프로미스는 비동기 작업이 완료될 때까지 "미래의 값"을 나타내는 객체입니다." 이런 답변을 해주었습니다. 제가 생각해도 이것이 맞는 말 같은데 redux-thunk를 사용하지 않아도 왜 잘 동작한걸까요?? 굳이 redux-thunk를 사용하지 않아도 돼는 건가요?? 아니면 이번이 특별한 경우인가요?? 

안녕하세요~ 양질의 강의 잘 수강중입니다.https://github.com/mswjs/msw/issues/1801 종종 발생하는 이슈 같은데 (제로초님 코멘트도 있네요!) 저도 제로초님 코드 그대로 따라해보았지만 해당 이슈가 계속 발생하네요ㅠㅠ어떤 문제 때문인지 감이 잘 잡히지 않는데 MSW를 다운그레이드 하는 방법 밖에 없을까요? 조언 부탁드립니다ㅠ

강의 너무 잘 보고 배우고 있습니다!! 감사합니다 🙂 카드를 한장이 아니라 여러 장이 나오게 만들고 싶어서 혼자 코드를 수정해봤는데요 key 값이 없어서 오류가 난다고 하는데요 1-1.이 상태에서는 어떻게 key값을 넣어줘야 할까요?1-2. 다른 방법은 없을까요? import Card from "./Card"; const names = [ { id: 1, name: "학생 1", comment: "리액트 공부중입니다" }, { id:2, name: "학생 2", comment: "리액트 공부중임니댜" } ] function ProfileCard(props) { <div> {names.map((name) => { return ( <Card title={name.name} backgroundColor="#B57EDC" comment={name.comment} /> ) })}; </div> } export default ProfileCard;

git init 후에 .gitignore 파일을 작성해서 git rm --cached node_modules 명령어를 입력했는데fatal: pathspec 'node_modules' did not match any files이런 오류가 뜹니다!

안녕하세요! React로 NodeBird SNS 만들기섹션4 팔로우/언팔로우 강의를 끝까지 수강한 수강생입니다!항상 강의 잘 보고 있습니다! 제로초님 감사합니다! 김블루 계정으로 핑크공주 계정을 팔로우 했을 때팔로잉, 팔로워 사용자의 이름과 금지 표시 아이콘이 목록 화면에 보이지 않습니다!(아이콘이 들어가는 위치에 다른 아이콘을 넣었을 때도 아이콘이 표시되지 않았습니다!)리덕스와 네트워크 탭을 확인했을 때 팔로워, 팔로잉 목록 불러오기는 성공했습니다.vsCode 터미널, 콘솔, 리덕스, 네트워크 항목에도 에러가 없으며앤트 디자인 아이콘 버전도 아이콘에 맞게 수정하고, item도 추가했지만 해결되지 않았습니다!구글 검색 및 제로초님 강의와 트위터 클론 깃허브를 확인 후에도 원인을 알 수 없어 질문 글 올립니다! [김블루 계정의 팔로잉 목록][핑크공주 계정의 팔로워 목록]FollowList.js// Ant Design 아이콘 불러오기 import { StopOutlined } from '@ant-design/icons'; ... return ( <List style={{ marginBottom: '20px' }} /* 격자 모양 */ grid={{ gutter: 4, xs: 2, md: 3 }} /* 목록 크기 */ size="small" /* 팔로잉 목록, 팔로워 목록 헤더 */ header={<div>{header}</div>} /* 더보기 버튼 */ loadMore={ <div style={{ textAlign: 'center', margin: '10px 0px' }}> <Button>더 보기</Button> </div> } /* 팔로잉 목록, 팔로워 목록 전체 테두리 */ bordered /* 목록용 데이터소스 : 팔로잉 목록, 팔로워 목록 더미데이터 배열 전달 */ dataSource={data} renderItem={(item) => { <List.Item style={{ marginTop: '20px' }}> <Card actions={[<StopOutlined key="stop" onClick={onCancel(item.id)} />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> }} />/* List 닫음 */ ); };

백엔드소스 받아 로컬에 서버 가동시켰고, 레디스 서버도 켜두었고강사님이 올려주신 클라이언트 ch4소스에서 실행시켜, 회원가입 도중 에러가 발생합니다. postresql 디비에는 정상적으로 회원정보가 등록되긴 하였습니다만, 프론트에서 아래와 같은 에러가 있는데요원인이 무엇일까요? Error: CredentialsSignin at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:62:22) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:9) at async /Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:489 at async tX (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:37:5313) at async rl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:23339) at async doRender (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1406:30) at async cacheEntry.responseCache.get.routeKind (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1567:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1475:28) at async DevServer.renderPageComponent (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1852:24) at async DevServer.renderToResponseImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1890:32) at async DevServer.pipeImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:902:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:798:17)