묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer설정 중 user 초기값이 undefined로 나오는 에러
안녕하십니까 형님진행하다 보니 궁금한게 생겨서 여쭤보려고 합니다. reducer설정 중 초기값이 undefined로 들어오는 에러가 놔왔었는데욥error - Error: The slice reducer for key "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 에러 났던 부분운 default: state 이 부분이고 코드 보고 아래처럼 수정하니 잘 동작했습니다. export const initialState = { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, } const reducer = (state=initialState, action) => { switch(action.type) { default: { return { ...state } } } }default: state vs default: { return {...state}}문법적으로 똑같은 내용이 아닌지...어떤 차이가 있는지를 모르겠어서 질문드립니다!
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
커리큘럼 관련 문의건
좋은 강의 감사합니다!혹시 테스트코드는 커리큘럼에 없죠...?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 자료 다운 로드 뜨면 에러가 떠용 XML 이랑 에러..!
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
11-29 django-taggit 라이브러리
해당 강의에서 @hook의 AFTER_SAVE를 이용하여 tags를 업데이트 하는 것으로 확인하였습니다. 그렇다면 content의 내용에 수정이 이루어진 Note들은 tags 필드가 업데이트가 되지만 수정을 하지 않은 기존 Note들은 tags 필드가 비어있게 되는 것 같습니다. Content 수정한 Note : tags 필드가 hook에 의하여 업데이트 되어 저장됨Content 수정하지 않은 기존 Note : tags 필드가 업데이트 되어있지 않음혹시 강의 중에 제가 놓치거나 한 부분이 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
css <Link>와 <img>크기 지정
제로초님이 강의 하시다 Link태그 안에 img 태그를 넣는 방식으로 하시다가 사진 두개를 넣는 부분 부터 이작업을 안하셨는데 두번 째 방식까지는 .postImageSection img { border-radius: 16px; height: 100%; width: 100%; }img 태그에 100%를 주는 방법으로 해결했지만그림 3개를 넣는 부분 부터는 크기가 맞지 않습니다 어떻게 해결하면 크기가 정확히 맞을까요? if (post.Images.length === 3) { return ( <div className={cx(style.postImageSection, style.threeImage)}> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[0].imageId}`} style={{ backgroundImage: `url(${post.Images[0]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[1]?.link} alt="" /> </Link> <div> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[1].imageId}`} style={{ backgroundImage: `url(${post.Images[1]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[1]?.link} alt="" /> </Link> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[2].imageId}`} style={{ backgroundImage: `url(${post.Images[2]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[2]?.link} alt="" /> </Link> </div> </div> );
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
display flex 및 link가 제대로 작동 안합니다...ㅠ
안녕하세요! 두 가지 질문이 있어서 글 남깁니다. display flex가 특정 id에 적용이 안됩니다 ㅠㅠapp.js에서 id=header인 부분에 css를 적용시켰는데 딱 header 부분만 적용이 안됩니다. 코드는 아래와 같습니다. app.js 코드import logo from './logo.svg'; import './App.css'; import MainPageComponent from "./main/index.js" import React, { Component } from 'react'; import {Link, Switch, Route, useHistory} from 'react-router-dom' import UploadPage from './upload/index.js'; import ProductPage from './product/index.js'; import { Button } from 'antd'; import {DownloadOutlined} from '@ant-design/icons' function App() { const history = useHistory(); return ( <div> <div id="header"> <div id="header-area"> <Link to="/"> <img src="/images/icons/logo.png" /> </Link> <Button size="large" onClick={function(){ history.push('/upload'); }} icon={<DownloadOutlined />} > 상품 업로드 </Button> </div> </div> <div id="body"> <Switch> <Route exact={true} path="/"> <MainPageComponent /> </Route> <Route exact={true} path="/products/:id"> <ProductPage /> </Route> <Route exact={true} path="/upload"> <UploadPage /> </Route> </Switch> </div> <div id="footer"></div> </div> ); } export default App; app.css* { margin: 0; padding: 0; line-height: normal; } html, body, #root, #root > div { height: 100%; }; #header { height: 64px; /*가운데 정렬하는 방법*/ display: flex; justify-content: center; border-bottom: 1px solid gray; } #header-area { width: 1024px; height: 100%; display: flex; align-items: center; justify-content: space-between; } #header-area img { width: 128px; height: 36px; } #body { height: 100vh; width: 1024px; margin: 0 auto; /*가운데 정렬하는 방법 중 하나*/ padding: 24px; } #footer { height: 200px; background-color: rgb(230,230,230); }이렇게 했을 때 아래와 같이 header만 적용이 안됩니다...(header-area는 css가 잘 적용이 되네요) Link 제대로 작동 안됨Link 태그를 통해 상품 상세페이지로 넘어가는 코드를 구현했는데 잘 안되는 부분이 있습니다 ㅠㅠ 원래라면 상품 카드를 눌렀을 때 자동으로 상품 상세페이지로 넘어가면서 해당 페이지 내용이 나타나야하는데 저는 카드를 누르면 url 주소만 바뀌고 제가 수동으로 새로고침을 해야 해당 페이지로 넘어갑니다...(그랩마켓 로고를 눌렀을 때 메인페이지로 돌아가는 것도 마찬가지입니다) 위 코드에서 잘못된 부분이 어떤거길래 이렇게 되는걸까요...? 감사합니다!
-
미해결처음 만난 리액트(React)
컴포넌트 추출 관련 질문
function Comment(props) { return ( <div className="comment"> <UserInfo user={props.author} /> <div className="comment-text"> {props.text} </div> <div className="comment-date"> {formatDate(props.date)} </div> </div> ); } props = { author: { name: "소플", avatarUrl: "https://..." }, text: "댓글입니다.", date: Date.now() } // Avatar 컴포넌트 추출 function Avatar(props) { return ( <img className="avatar" src={props.user.avatarUrl} alt={props.user.name} /> ); } // UserInfo 추출 function UserInfo(props) { return ( <div className="user-info"> <Avatar user={props.user}/> <div className="user-info-name"> {props.user.name} </div> </div> ); }안녕하세요. 위의 코드는 Component 합성과 추출 수업 때 썼던 코드입니다. 컴포넌트 추출할 때 author 대신 user를 쓴다고 나와있는데 props 객체에서는 author만 있는데도 컴포넌트 추출할 때 user로 바꿔쓸 수 있는 이유가 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[ 오류 NotAuthRoutes ] error 'isAuth' is missing in props validation react/prop-types
ProtectedRoutes & NotAuthRoutes 에서 지속적으로 해당 에러가 뜹니다error 'isAuth' is missing in props validation react/prop-types구글링해서 여러 방법들을 동원햇지만 어떻게 해야될지 모르겟습니다
-
미해결Next + React Query로 SNS 서비스 만들기
강의 활용 방안에 대한 질문 (일단 강의만 쭉 듣는 방향은 어떤지)
제로초님 안녕하세요.강의 활용 방안에 대해서 간단한 질문이 있어서 글 남깁니다. 제가 해당 강의를 듣는 이유는 Next.js에 대한 학습이며이와 더불어 추가적으로 활용하시는 기술 (웹소켓 등) 을 함께 학습하는 것이며, 최대한 빠르게 개념을 잡고 혼자서 사이드 프로젝트 등을 만들며 익숙해지는 것이 목적입니다. 본래는 강의 초반부에 추천해주신 것처럼일정 부분 강의를 수강한 후 올려주시는 예시 코드를 바탕으로직접 코드를 짜며 비교해보는 방식으로 활용해보려 했습니다. 하지만 해당 방식에 다소 불편함이 있어서(ex. 올려주신 예시 코드에서도로그인/아웃 기능이 구현되지 않은 상황이라화면 구현하는데 다소 불편함이 따르는 등) 먼저 강의를 보기만 하는 식으로 완강한 후배운 내용을 바탕으로 혼자서 구현해보는 방식으로 활용해보려 합니다. 관련하여 혹시 보다 추천하시는 방법이 있으신지 궁금해서 질문글 남기게 되었습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
React-query 부분에서 질문이 있습니다.
강의 언제나 잘보고 있습니다.따로 작업하다가 난감한게 있어서 문의드립니다.예를 들어 ["ABC"] 라는 캐시가 있다는 가정하에A페이지, B페이지에서 해당 캐시를 사용합니다.이때 질문이 있습니다. A,B 페이지에서 useQuery로 데이터를 불러올 경우실수로 A와 B가 다른 queryFn이 정의 되어있을 때, InvalidateQueries를 해도 데이터가 미스매칭될 수 있는 가능성이 존재할까요?prefetchQuery 사용 시,A페이지와 B페이지가 ABC라는 데이터가 공통으로 필요할 경우,A페이지에서 prefetchQuery를 읽어서 B로 가면 A의 ABC를 캐시해서 B에서도 사용 가능한 걸로 알고있는데요. 이럴때 만일 B페이지로 바로 접근이 가능할 경우, B 페이지에서도 prefetchQuery를 적용해야 둘다 SSR이 제대로 적용되는걸까요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리랜더링 highLight 질문..
10.3) React.memo와 컴포넌트 렌더링 최적화위 강의를 보다보니, 뭔가 이상해서 질문드립니다...여기서 Header컴포넌트에 memo함수로 감싸서최적화된 컴포넌트를 만드셨다고 했는데, 영상으로만 보면item 컴포넌트 변경시에 리랜더링이 안되야 하는 Header 컴폰넌트에 highLight가 들어가는데요..(4:46 경..)아무리 봐도 하이라이트가 들어가는데, 말씀으로는 하이라이트가 더이상 들어가지 않는다고 하는데, 제가 뭘 잘못 이해한걸까요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 자료 이름을 바꿔 다운받아도 안받아집니다
압축 파일을 받아서 보면 폴더가 비어있습니다.자료 이름을 바꿔서 받아도 똑같은데 해결 방법이 있을까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
input type="radio" 에서 ref의 적절한 사용법
안녕하세요 선생님. 이번 강좌에서 숙제로 내주신 부분(div로 radio버튼 만들기)을 진행하다가 문득 궁금증이 생겼는데요. <input type="radio">가 많을때 useRef을 하나씩 만들어서 일일이 1대1 매칭으로 접근해야 하는건가요?혹은 ref값을 빈배열로 만든 뒤 배열의 값을 radio 버튼의 value로 채워서 해당 배열의 인덱스 값으로 참조해야하는 걸까요?
-
미해결Next + React Query로 SNS 서비스 만들기
use server를 클라이언트 컴포넌트에서 사용시 에러
안녕하세요 섹션3의 3번째 강의 server action을 보고 있는데요const submit에서 에러가 발생해서 질문합니다.const submit에서 서버액션을 사용하기 위해 "use server"를 넣었는데 다음과 같은 에러가 발생합니다../src/app/(beforeLogin)/_component/SignupModal.tsx Error: × It is not allowed to define inline "use server" annotated Server Actions in Client Components. │ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component. │ │ Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components │ ╭─[/home/tpark/SNS/z-com/src/app/(beforeLogin)/_component/SignupModal.tsx:3:1] 3 │ import { redirect } from "next/navigation"; 4 │ 5 │ export default function SignupModal() { 6 │ ╭─▶ const submit = async (formData: FormData) => { 7 │ │ "use server"; 8 │ │ if (!formData.get("id")) { 9 │ │ return "아이디를 입력하세요."; 10 │ │ } 11 │ │ if (!formData.get("name")) { 12 │ │ return "닉네임을 입력하세요."; 13 │ │ } 14 │ │ if (!formData.get("password")) { 15 │ │ return "비밀번호를 입력하세요."; 16 │ │ } 17 │ │ if (!formData.get("image")) { 18 │ │ return "이미지를 업로드하세요."; 19 │ │ } 20 │ │ if (!formData.get("id")) { 21 │ │ return "이미 사용 중인 아이디입니다."; 22 │ │ } 23 │ │ 24 │ │ let shouldRedirect = false; 25 │ │ try { 26 │ │ const response = await fetch( 27 │ │ `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, 28 │ │ { 29 │ │ method: "post", 30 │ │ body: formData, 31 │ │ credentials: "include", 32 │ │ } 33 │ │ ); 34 │ │ console.log(response.status); 35 │ │ if (response.status === 403) { 36 │ │ return { message: "user_exists" }; 37 │ │ } 38 │ │ console.log(await response.json()); 39 │ │ shouldRedirect = true; 40 │ │ } catch (err) { 41 │ │ console.error(err); 42 │ │ } 43 │ │ if (shouldRedirect) { 44 │ │ redirect("/home"); 45 │ │ } 46 │ ╰─▶ }; 47 │ return ( 48 │ <> 49 │ <div className={style.modalBackground}> ╰────서버 액션부분을 다른 컴포넌트로 분리해서 사용해야 하는거 같은데 강의 내용에서는 바로 진행이 되서 제가 어느부분이 잘못되었는지 잘 모르겠습니다.그리고 혹시 최상단에 "use client"를 작성하지 않았기에 이건 서버컴포넌트인줄 알았는데 에러메세지에 클라이언트 컴포넌트에서 사용할 수 없다는건 현재 컴포넌트가 클라이언트 컴포넌트인건가요...? 아래는 제가 작성한 코드입니다. import style from "./signup.module.css"; import BackButton from "./BackButton"; import { redirect } from "next/navigation"; export default function SignupModal() { const submit = async (formData: FormData) => { "use server"; if (!formData.get("id")) { return "아이디를 입력하세요."; } if (!formData.get("name")) { return "닉네임을 입력하세요."; } if (!formData.get("password")) { return "비밀번호를 입력하세요."; } if (!formData.get("image")) { return "이미지를 업로드하세요."; } if (!formData.get("id")) { return "이미 사용 중인 아이디입니다."; } let shouldRedirect = false; try { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", body: formData, credentials: "include", } ); console.log(response.status); if (response.status === 403) { return { message: "user_exists" }; } console.log(await response.json()); shouldRedirect = true; } catch (err) { console.error(err); } if (shouldRedirect) { redirect("/home"); } }; return ( <> <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <BackButton /> <div>계정을 생성하세요.</div> </div> <form action={submit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" name="id" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="name"> 닉네임 </label> <input id="name" name="name" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" name="password" className={style.input} type="password" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="image"> 프로필 </label> <input id="image" name="image" className={style.input} type="file" accept="image/*" required /> </div> </div> <div className={style.modalFooter}> <button type="submit" className={style.actionButton}> 가입하기 </button> </div> </form> </div> </div> </> ); }
-
미해결코드로 배우는 React with 스프링부트 API서버
노란색 경고글을 없애고 싶어요..
프론트 부분에서 ESLint 때문에 계속 에러를 겪고 있는데요,,해결했다 싶으면 신기하게도 다음번 컴퓨터를 키면 또 에러가 생겨있고 그러는데요,빨간색 에러는 없앴는데 노란색 경고글도 없애고 싶습니다.아래 노란색 경고글들도 없앨수 있는 방법이 있을까요...에러때문에 이것저것 시도하다가 뭔가 버전이 안맞는 걸까요...
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작 에러
Failed to parse source map from 'C:\Users\user\Desktop\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\user\Desktop\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map' [1][1] ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)이런 에러가 뜨는데 어떻게 해결하나요...도와주세요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작 에러
ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) 이런 에러가 뜨는데 어떻게 해결하나요...
-
미해결Next + React Query로 SNS 서비스 만들기
next의 확장된 fetch 캐싱에 대해 질문드립니다.
fetch 함수를 사용할 때 next 객체 tags에 태그들을 지정해서 넣는 것으로 배웠습니다. 제가 이해하기로는 그 태그들로 분류되어 next가 캐싱하는 걸로 알고 있는데, 브라우저 쪽에서 작동하는 fetch(예를 들어 onclick에 붙어있는 fetch라든지... )와 next 서버 쪽에서 작동하는 fetch(예를 들어 api 디렉토리의 routes.ts에서 동작하는...)의 태그가 같다면 캐시 공유가 되나요? 브라우저는 브라우저 쪽에 서버 쪽 fetch는 서버 쪽에 저장될 것 같은데 어떻게 동작하는지 질문드립니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
useQuery vs useQueryClient
tanstack query와 next.js 를 함께 사용하면서 의문이 들어 질문합니다!강의의 코드를 보니 같이 prefetch를 해도 유저데이터는 useQueryClient를 사용해서 데이터를 재사용하는듯한데 안에 하위 컴포넌트의 경우 prefetch를하고 useQuery를 사용해서 데이터를 가져오는듯 하더라구요 이 경우도 데이터를 재사용하는건가요? 아니면 새로 가져오는건가요? 그렇다면 똑같이 데이터를 prefetch해도 useQueryClient를 사용해서 가져오는것과 useQuery를 사용해서 가져와야하는 기준이 있을까요? (저의경우 프로젝트 전체를 prefetch후 useQueryClient를해서 데이터를 가져왔더니 데이터를 가져옴과 동시에 fresh가아니라 inactive상태가 되더라구요. ) 좋은강의 감사합니다. 벚꽃같은 제로초 화이팅
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
toLowerCase is not a function 오류
코드를 동일하게 작성했는데 왼쪽과 같은 오류가 발생했습니다. toLoewrCase를 작성하기 전까지는 모두 정상 동작하였습니다.인터넷을 찾아보니 해당 함수가 붙는 변수를 문자열로 변환하면 된다 라는 글이 있기에 console.log, typeof를 통해 todo.content와 search가 문자열이 아닌가?? 하고 보려고 했지만 console.log구문을 어디에 넣어도 오류가 발생하여 확인을 할 수 없었습니다.이 오류에 대한 이유를 알 수 있을까요??