강의 17분 50초 정도에 말씀하신 얇은 복사중에서 왜 이런식으로 복사해야하는지 이해가 잘 되지 않습니다. const shallow = { ...value }; value.pages = { ...value.pages }; value.pages[pageIndex] = [...value.pages[pageIndex]]; 제가 강의를 보기전 테스트할때는 해당 코드로 작성하였는데 해당 코드는 정상적으로 작동하지 않았습니다 const shallow = { ...value }; shallow.pages = { ...value.pages }; shallow.pages[pageIndex] = [...value.pages[pageIndex]]; 혹시 왜 첫번째 코드블록처럼 코드를 작성해야하는지 간단하게 설명해주시면 감사하겠습니다
예를들어, 이런 소셜 네트워크 서비스같은 경우에는 useSWR보다, react-query가 다양한 기능을 제공해주어, 적합하다고 생각이 되어집니다. 1 . 단순 데이터만 갖고오는 사이트가 아니라면, 대부분 react-query가 더 좋다고 생각하는데, useSWR은 어떤 서비스에서 주로 채택하면 좋은지에 대해 알고싶습니다. react-query와 useSWR을 혼용해서 사용했을때 더 좋아지는 경우가 있을까요? 어떠한 서비스를 만들때, useSWR, react-query를 선택해야한다면, 어떤 기준으로 판별하는 것이 좋은지에 대해서도 알고 싶습니다.
(afterLogin)의 layout.tsx에서 35번째 주석부분 children이요 여기 children에 각 폴더 page.tsx, layout.tsx이 들어가는건가요?? 여기 35번 줄 children 주석풀고 실행해보면 이런 오류 뜨는데 왜 이런지 알 수 있을까요??
안녕하세요 제로초님! 강의 즐겁게 듣고 있습니다. 깃허브의 코드를 보면 main.module.css 에서 container를 잡을 때 width와 heigth로 dvw, dvh단위를 사용하시고 다른 부분( login.module.css 와 signup.module.css )에서는 vw를 사용하시고 있어서요. dvw를 사용하시는 경우와 vw를 사용하시는 경우의 차이가 궁금합니다.
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의 폴더 구조 라우팅 시스템을 활용하지 않고 직접 라우팅 로직을 작성할 것이라는 건가요?
[제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 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같은 걸 써야 한다고 말하고 있어서, 혹시 다른 사용법이 있는 건지 궁금해서 여쭈어봅니다. 답변 기다리겠습니다. 감사합니다:)
Jupyter command jupyter-contrib not found. 지금 이 오류가 떠서 설치가 안되고 있는데요. 어떻게 해결해야 할까요?? 제가 봤을땐, pip install jupyter_contrib_nbextensions 이 부분은 실행이 되는데 jupyter contrib nbextension 이 부분에서 오류가 생기는 것 같습니다. ㅠㅠ
클래스 정의하고 호출하면 42번 줄에 player1에 해당하는 height와 weight의 값이 둘 다 나와야 하는데 저는 한가지 값만 출력이 됩니다. weight를 지우고 height 값만 쓰면 height값이 출력되고 둘다 쓰면 height값은 안나오고 weight값만 출력이 되는데 왜 이런 걸까요?
선생님의 설명 덕분에 클라이언트 컴포넌트에서도 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의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??
