import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex, flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; font-weight: bold; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks;style-componets를 install 하고 실습 코드를 실행했을 때, 강의에서 나온 결과 화면과 다른 화면이 나옵니다. 개발자 도구를 켜면 다음과 같이 display: flex; flex-direction: row 스타일이 적용되지 않은 것 같습니다.Wrapper 의 css 속성이 적용되지 않은 것 같은데, 원인을 못찾겠습니다. 답변주시면 감사하겠습니다.

안녕하세요 복습중에 있는데 검색해도 잘모르는내용이라 내용 적어봅니다.넥스트를 배우려는 큰이유중 하나가 SEO 때문인데 넥스트에서 metadata 페이지마다 꼬박꼬박 잘적고 (title ,desc)시맨태그 최대한 이용해서 마크업하면 끝인가요 ?넥스트 내에서 더 해줘야하는 작업이라던가.. 그런게 있을까요 ? (구글 서치콘솔 이런거 말고.. 개발자가 코드 작업시에 놓치면안되는 요구 SEO 작업이 궁금해서요 )

초보적인질문입니다. src기준이니깐 @못쓴다면 public 기준은 ../../../../ 이런식으루 사용해야할까요 ?  

따라하며 배우는 리액트 테스트코드 강의에서 eslint가 적용되었다고 하는 파일자체를 받아 npm install을 헀는데,eslint가 작동되지않습니다.extension에서도 eslint를 받았고, npm install을 한 상태에서test()let test = () => {}와 같은 오류가 발생될 코드를 작성해도 eslint가 반응하지 못하는데 이유가 뭘까요 강의에는 설정이 적용되어있다고 하는데

안녕하세요다이나믹 페이지의 경우 path를 미리 정의해주지 않은 파일들은 빌드가 돼있지 않아 fallback 옵션을 'blocking' 이나 true로 설정해줄 경우 ssr방식으로 사전 렌더링을 하여 html파일을 받아온다고 하셨었는데요빌드 후 npm run start를 하고나서 직접 빌드 되지 않는 파일로 url에 접근해서 들어가면 확인이 가능하나 메인 페이지에서 책을 클릭해서 들어갈 경우 확인이 안되더라구요그래서 네트워크를 보니깐 현재 예제로 쓰이고 있는 프로젝트의 책 리스트들의 경우 Link 컴포넌트로 감싸져있어서 js bundle파일을 프리패칭해서 가지고 오고 있었습니다. 정환님 강의를 봤을 땐 프리패칭이 되고 있지 않는 거 같길래 궁금한데 혹시 어떤 옵션을 적용해주신 걸까요? 추가로 링크 컴포넌트로 감싼 책 리스트의 경우 마우스를 오버시키기만 해도  이렇게 데이터들을 불러오는 거 같은데이건 번들파일이라고 불러야 하나요?? 아님 그냥 요청인 건가요?한번 불러오고나서는 캐싱되지 않고 원래 마우스 오버만 시켜도 왜 계속 불러오는 걸까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

이전에 그냥 ssr방식으로 페이지를 설정한게 더 효율적으로 보 이는데 search 페이지나 동적 경로를 사용하는페이지에 ssg로 하신이유가있을까요? 단순 이런 방법도 있다는 설명을 위해서 보여주신게 아니라면ssg방식으로 바꿔서 html요소만 먼저 가져오고 그후에 클라이언트에서 서버로 요청을 보내서 받는게 어떤 장점이 있는지 잘모르겠습니다~ssg는 보통 404 페이지 약관같은 요청에 대한 응답을 할필요없는 페이지에 적용하는게 좋지않을까싶은데 일반적인 페이지에서도 ssg를 사용해서 클라이언트에서 서버로 요청을 보내고 받는걸 많이 사용하나요??

Chapter 7 (섹션 8) 가장 첫 번째 강의는 보이는데 이후부터는 강의 영상이 나오지가 않네요

안녕하세요 SSR 방식의 사전렌더링을 하기위해 getServerSideProps 함수를 쓴다고 가정을 했을 때 궁금한 게 있습니다.초기 화면에 진입하고나서는 페이지 이동하면서는 CSR 방식으로 렌더링이 된다고 이해하고 있습니다. 그렇다면 현재 예시로 보여주고 계시는 'ONEBITE BOOKS' 프로젝트의 경우 메인 페이지의의 index 파일 말고는 다른 search 페이지나 book 페이지의 경우에는 getServerSideProps 이용하여 SSR방식을 채택할 필요가 없는 게 아닌지 궁금합니다.🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

강의 제목에는 리액트가 들어가있는데 리액트 내용은 좀 부실한거 같아요. 오히려 htmlx가 더 많아요~~~ 리액트로도 다양한 예제를 만들어주셨으면 합니다.

"use client"; import style from './signup.module.css'; import onSubmit from '../_lib/signup'; import BackButton from "@/app/(beforeLogin)/_component/BackButton"; import { useFormState, useFormStatus } from 'react-dom'; export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, { message: null }); const { pending } = useFormStatus();[섹선3] 클라이언트 컴포넌트에서 Server Actions 사용하기, 3분 const [state, formAction] = useFormState(onSubmit, { message: null });이쪽부분에[이 호출과 일치하는 오버로드가 없습니다.]라는 빨간에러가 뜨는데 혹시 이유를 알 수 있을까요? [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

안녕하세요 제로초님 postgreSQL까지는 설치하고 데이터베이스 설정도 되었는데memurai 는 아래 오류가 뜨면서 설치부터 안됩니다.해결방법을 찾지 못해서 질문 드립니다.. 

이번 강의에서 페이지별 레이아웃을 사용할 때, 레이아웃이 필요한 컴포넌트에 getLayout 메소드를 추가해서 사용합니다// 1 export default function Home() { return <h1 className={style.h1}>인덱스</h1>; } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; };// 2 export default function Home() { return <SearchableLayout> <h1 className={style.h1}>인덱스</h1> </SearchableLayout>; }// _app.tsx // a type NextPageWithLayout = NextPage & { getLayout?: (page: ReactNode) => ReactNode; }; export default function App({ Component, pageProps, }: AppProps & { Component: NextPageWithLayout }) { const getLayout = Component.getLayout ?? ((page: ReactNode) => page); return <GlobalLayout>{getLayout(<Component {...pageProps} />)}</GlobalLayout>; } // b export default function App({ Component, pageProps, }: AppProps) { return <GlobalLayout><Component {...pageProps} /></GlobalLayout>; } 2번째 코드처럼 사용하면 app 컴포넌트(b)와 레이아웃이 필요한 컴포넌트(2) 둘 다 더 짧게 사용할 수 있을 거 같은데, getLayout 메소드를 사용해야 하는건지 질문드립니다 그냥 표준처럼 사용 되는 건지??페이지 컴포넌트와 레이아웃 컴포넌트를 분리하기 위해서인지??레이아웃이 필요한 컴포넌트에서 레이아웃을 부모 컴포넌트로 사용하면 해당 컴포넌트간 상태 유지 관련 문제가 있는건지??질문 드립니다

데이터통신 실습을 위해서 스웨거하고 graphql을 접속하려고하는데 접속이안돼요..

2.4) 프리페칭 강의 6분 44초 경의 화면입니다next js 같은 경우 유저가 이동할 가능성이 있는 페이지의 js bundle파일을 미리 서버로 부터 받아온다고 하셨는데만약 초기화면에서 링크 태그를 통해 페이지 이동이 일어나게 된다면1) 서버로부터 수화되기 전 html 파일을 받아와서 화면에 렌더링2) 프리페칭 받아온 js파일로 수화과정3) 상호 인터렉션 가능제가 이해한 과정이 이게 맞을 까요??만약 그렇다면 페이지 이동 시 html 파일은 서버로부터 기본적으로 매 번 불러오는 걸까요?🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.  

안녕하세요 Redux 수업 다 듣고 이해 되지 않아서 따로 프로젝트를 뽑아서 Redux를 연습 하고 있어요...일단 이해는 다된거 같아요...아래 dispatch 하는 부분에서 오류가 뜨네요..먼저 처리 순서가 ... input에 데이터를 입력하고 로그인 버튼을 클릭하고 다시 input에 데이터를 입력하면 오류가 뜨네요cannot assign to read only property 'current' of object '# object '버튼 클릭하는 부분에 dispatch하는 내용을 넣었구요..구글에는 깊은 복사 뭐 이런거 있던데 그거랑 관련 없는거 같구... ===================================리듀스 기본을 알면 저 문제 해결될꺼라는 어떤분의 답변이 야속하네요 ... 코드 시작=============================import { useState } from "react"; import { useDispatch } from "react-redux"; import {login} from "../slices/loginSlice" const initState = { email:'', password:'' } function LoginComponent(props) { const [loginParam, setLoginParam] = useState({...initState}) const disPatch = useDispatch() const handleChange = (e)=> { loginParam[e.target.name] = e.target.value setLoginParam({...loginParam}) } const handleLoginClick = (e)=>{ console.log(".......") disPatch ( login(loginParam) ) } const handleLogoutClick = (e)=>{ disPatch( login(initState) ) } return ( <div> <div className="flex flex=nowrap gap-x-8 place-content-center "> <div> <div> login </div> <div> <input className="text-base w-300 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="email" type ={'text'} value={loginParam.email} onChange ={handleChange}> </input> </div> <div> <input className="text-base w-300 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="password" type={'password'} value={loginParam.password} onChange={handleChange} > </input> </div> <div> <button className = "rounded p-4 w-36 bg-blue-500 text-xl text-white" onClick={handleLoginClick} > Login.. </button> </div> </div> <button onClick={handleLogoutClick}> logout </button> </div> </div> ) } export default LoginComponent;  =============================

앞에 질문에 답변을 받았지만 링크로 참조하라는 답변이었는데 저는 그걸로는 해결을 할 수 없었습니다. 혹시 괜찮으시면 직관적인 해결법을 알려주실 수 없나요?send를 누르면 터미널에 이렇게 뜹니다. Server Running at 5000 C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193 throw new Error('The incoming JSON object does not contain a client_email field'); ^ Error: The incoming JSON object does not contain a client_email field at JWT.fromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193:19) at GoogleAuth._cacheClientFromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:313:16) at ReadStream.<anonymous> (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:347:36) at ReadStream.emit (node:events:519:28) at endReadableNT (node:internal/streams/readable:1696:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) Node.js v20.16.0 PS C:\project\vswork\chatbot-app-master> 아래와 같이 값이 입력이되어있는데도말입니다. 루트파일에다가 구글 인증json을 위치를 끌어다 넣어도 그렇습니다. 가르쳐줘서 고맙습니다. 근데 이렇게 문제가 생겨서 이 구간을 벗어나고 싶습니다 ㅠㅠ

 import { useEffect } from "react"; declare const window: typeof globalThis & { kakao: any; }; export default function KakaoMapPage(): JSX.Element { useEffect(() => { const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new window.kakao.maps.Map(container, options); console.log(map); }, []); return ( <> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키" ></script> <div id="map" style={{ width: 500, height: 400 }}></div> </> ); }  Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <div>.See more info here: https://nextjs.org/docs/messages/react-hydration-error 카카오 맵 하는데 오류 왜 뜨는건가요??

auth LoginView/LogoutView에 success_url_allowed_hosts 설정 추가하여, 로그인/로그아웃 후에 지정 호스트로의 이동 허용현재 로그인/로그아웃후 지정 호스트로 이동을 허용하는 부분을 실습하고 있는데 막히는부분이 있어서 질문 드립니다. 이부분 코드를 붙여넣고 실행하였더니 로그아웃 부분에서 아래와 같은 에러가 발생하였습니다. (프로필 페이지로 이동은 잘 됩니다.)찾아보니 GET 메서드가 거절된 것같은데, 이전 강의에서 장고에서 과거에는 GET으로 받았으나, 이제는 POST 요청만 허용한다는 내용을 들은적이 있었던것같은데, 그것과 관련된 것인지 궁금합니다. 다른 분들은 잘되셔서 넘어가셨을텐데, 저가 잘못된것 같긴한데 혹시나해서 여쭈어봅니다.아래는 로그아웃 구현된 부분입니다. 

질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요.질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다.시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다.오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.  11-15 강의에서 구현한 프로필 수정 폼에서 이미지를 올린 경우, 다시 프로필 수정 페이지에 들어가면 정상적으로 이전에 등록된 이미지가 현재란에 보여집니다. 이렇게 구현된 모델은 문제가 몇 가지 있는데요.수정하지 않고 저장을 누를 경우 이전 강의에서 교육하신 내용처럼 접미사가 계속 바뀌어가면서 같은 내용의 파일이 spamming 되는 문제가 발생합니다.우리가 만약 프로필에 다른 항목이 추가된다면, 다른 항목만 수정하지 않고 나가는 유저가 있을텐데 해당 문제를 해결하려면 어떻게 해야할까요?수정 혹은 취소 체크 박스를 선택하여 삭제를 할 경우 여전히 경로 안에 파일이 남아 있습니다. signal을 이용하면 될 것 같은데, 하기와 같은 방법을 생각해 볼 수 있을까요?@receiver(pre_save, sender=Profile) def edit_delete_on_profile(instance=Profile, **kwargs): instance.avatar.delete(save=False)수업 내용과는 상관없지만, 기본 제공되는 이미지 업로드 양식이 어색합니다. 특히 취소 체크 박스를 체크하여 제거하는 방식은 너무 어색한데요. 더 좋은게 없을까요? 예를들어 아래는 네이버 '치지직' 에서 프로필 수정 양식입니다.

포트폴리오 과제중 BoardDetail 작성글 페이지에서 패치보드가 안불러와져서 계속 코드 고쳐보다가결국 강사님이 올려주시는 포트폴리오리뷰 파일 불러와서 코드보고 똑같이 따라쳐도 제 파일에서만 패치보드가 안불러와져서 오류가 계속나네요..혹시 좀 봐주실수 있을까요?(_app.js에서 아폴로 주소 확인도 했습니다)아래는 패치보드 로드 실패로 나오는 창입니다