inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

value 오류 문의

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아래 오류가 자꾸 뜨는데 이유를 모르겠습니다... input 태그에 텍스트도 써지지 않습니다. onchange2 도 이어서 작성하면 오류가 발생하여 지워버렸습니다ㅠㅠ Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue . Otherwise, set either onChange or readOnly .

  • javascript
  • react
  • node.js
suhyunk519 댓글 2 좋아요 0 조회수 373

감정일기장 응용공부

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

마지막 주차에서 감정일기장을 주차별로 된 것으로 만들어보라고 하셔서 만들기를 시도했습니다. 그러나 도저히 어떻게 해야할지 막막해서 감정일기장 코드들을 챗지피티에 복붙하고 주차별로 만들어달라고 했고 완성했습니다(챗지피티가 알려준 코드들은 모두 이해됩니다) 이렇게 학습하는 것이 과연적절할까요?? 또한 감정일기장을 주차별로 만드는것외에 감정일기장을 어떤식으로 변형하면 좋을지 궁금합니다!!

  • javascript
  • react
  • node.js
peter 댓글 1 좋아요 0 조회수 161

강의자료 (보일러플레이트) 다운로드 관련 질문

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 2

강의 커리큘럼을 보면 "강의자료 (완성본)"과 "강의자료 (보일러플레이트)" 다운로드를 구분해 두셨는데, 다운로드는 "강의자료 (완성본)"만 만 받게 되어 있는거 같습니다. 혹시 보일러플레이트 강의자료는 아직 준비가 되지 않은것일까요? 완성본 README.md 에 있는 `git clone https://github.com/fe-ui-study/ui-study.gi t `도 Repository를 찾지 못하고 있습니다.

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
working.zima 댓글 1 좋아요 0 조회수 277

router 이동 질문 드립니다.

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요. 열심히 강의 듣고 있습니다. ... react에서 router 이동에 궁금한거 잇어서 질문 드려요 1 root 의 라우터에는 TodoIndex와 ProductsIndex 2개의 페이지가 있습니다. ............ 생략 .............. { path: "todo", element: ...<TodoIndex/>..., children: todoRouter() }, { path: "products", element: ... <ProductsIndex/>..., children: productsRouter() } 2. TodoIndex의 child은 todoRoter이고 add의 TodoAdd와 mdify의 TodoModify가 있습니다. { path: "add", element: ...<TodoAdd/>... }, { path: "modify/:tno", element: ...<TodoModify/>... } ProductsIndex의 child은 productsRouter이고 add의 ProductList와 mdify의 ProductModify가 있습니다. 현재 ../products/add 에 있다고 했을때 add 페이지에 있는 버튼을 누르면 ../todo/add 로 점프해서 이동 하려면 어떻게 navigate 해야되나요? todo/add에서 todo/modify 이런식의 같은 폴더 레벨이면 쉽게 이동되던데 ...

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
just kim 댓글 1 좋아요 1 조회수 182

Product 컨트롤러 api 결과값 리턴 질문

미해결

코드로 배우는 React 19 with 스프링부트 API서버

상품 등록이나 수정을 하고나서 return Map.of("result", "Success") 이렇게 리턴해주셨는데 실무에서 이런 방식을 많이 사용하나요 아니면 교육목적이기 때문에 조금 러프하게 하신건가요?? 이번 강의를 보고 실무와 가깝게 프로젝트를 진행하고 싶은데 이렇게 Map에 간단하게 리턴할지 아니면 api마다 매번 ResponseEntity에 Http Status Code 담아 리턴해야 할지 기준을 모르겠습니다. 제 목적에 맞게 하려면 어떤 방식으로 api 결과를 리턴해줘야 할까요??

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
현이 댓글 1 좋아요 0 조회수 183

Like 검색으로 구현하려면 어떻게 하면 될까요?

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

강의대로 구현하니 제목과 설명의 full text를 입력했을 때만 검색이 되는데요Like 검색으로 구현하려면 어떻게 하면 될까요?

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
jy.park92 댓글 1 좋아요 0 조회수 285

코드 제공 되나요?

미해결

React Router 완전 정복

코드 제공 됩니까?

  • react
  • spa
  • react-router
  • react-router-dom
Seung Sik Jang 댓글 1 좋아요 0 조회수 140

createRoot도 잘 했는데 에러가 나네요

해결됨

처음 만난 리액트(React)

createRoot도 잘 되어있고 하는데도 이 에러가 뜹니다.. import Clock from "./chapter_04/Clock"; const root = ReactDOM.createRoot(document.getElementById("root")); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000); reportWebVitals(); ERROR react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function at http://localhost:3000/static/js/bundle.js:114:49

  • HTML/CSS
  • javascript
  • react
leeso4567 댓글 2 좋아요 1 조회수 439

9.1 강의에서 생긴 servercomponent 변수

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

9.1장에서 user.action.ts의 getUser 함수에 serverComponent라는 속성이 갑자기 생겨났는데 이거에 대한 설명이 필요한 것 같습니다.

  • react
  • 클론코딩
  • next.js
  • supabase
Malik KIM 댓글 2 좋아요 2 조회수 303

메인글자수정...

해결됨

만들면서 배우는 리액트 : 기초

MainCard에 처음 나오는 이미지에 써지는 글자의 스타일은 어디서 수정을 해줘야 하는걸까요? 찾아서 나름 해봤는데 전혀 변경이 안되어서요 input에 넣은 글자가 이미지 위에 나올때 ...그 글자의 크기,색상,폰트 등의스타일은 어디서 바꾸어야 하는지...

  • javascript
  • react
gangsugi 댓글 3 좋아요 1 조회수 302

파일 업로드 관련 질문

미해결

코드로 배우는 React 19 with 스프링부트 API서버

[파일 업로드 설정과 확인] 강의에서 DB에 아주 중요한게 아니라면 성능적인 부분때문에 DB에 파일을 저장하면 안된다고 하셨습니다. 클라우드를 이용하는게 일반적이라고 생각합니다만 한가지 궁금한게 있습니다. 만약 게시글이라는 엔티티에 대표 사진이 딱 한장 들어갈 수 있다고 한다면 아래와 같은 순서로 구현할 수 있겠다는 생각이 들었습니다. 이런 방법에 대해 어떻게 생각하시나요?? 애플리케이션 단에서 이미지 등록 -> 이미지 base64 인코딩 -> 인코딩 된 긴 문자열을 압축 -> 압축된 문자열을 RDB(MYSQL) 게시글 테이블에 게시물 대표이미지 (longtext 형)에 저장. 조회할때는 애플리케이션 단에서 별도로 압축된 문자를 원래 인코딩 된 문자열로 디코딩하는 로직 필요하겠지만 비용이 크지 않다고 생각했습니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
현이 댓글 1 좋아요 0 조회수 248

Presigned URL 사용시 데이터베이스 저장 시점

미해결

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

데이터베이스 저장 시점 현재 이미지 업로드 관련해서 프로젝트를 진행하고있는데, 이미지를 불러오기 위해 별도의 데이터베이스 저장이 필요해서 클라이언트에서 presigned URL을 사용하여 이미지 업로드가 완료된 후, 서버에 이미지 이름과 부가적인 정보를 보내주면 서버가 이를 데이터베이스에 저장하는 방식으로 구현하는게 맞을까요??

  • react
  • node.js
  • aws
  • mongodb
  • express
  • lambda
지원 댓글 1 좋아요 0 조회수 348

Github Actions 배포 이후 ReadMe만 보이는 에러

해결됨

React 기반 Gatsby로 기술 블로그 개발하기 v2

깃허브 액션으로 배포하는 강의 자료부분 하는 중인데 build가 완료돼도 배포된 사이트에선 리드미 파일만 보이는데 무슨 문제인지 잘 모르겠습니다ㅠ https://github.com/jihun-24k/jihun-24k.github.io

  • react
  • typescript
  • 블로그
  • gatsby
김지훈 댓글 1 좋아요 0 조회수 389

섹션12의 09-04-boards 수정 2편의 내용이 이상합니다.(사실상 이건 반쪽 짜리 게시글 수정입니다.)

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

위의 내용은 강의 캡쳐본입니다. 이렇게 코드짜면 기존 값에서 변경된 부분은 수정이 반영이 되겠지만 기존값 삭제에 대해서는 반영이 안됩니다. if(writer) ~ 이런식으로 코드를 작성하셨는데 writer의 값이 존재해야만 myvariables의 writer에 값이 들어가고 해당 배열이 updateBoard로 들어가서 업데이트 뮤테이션이 실행되는 구조입니다. 수정 기능이라면 빈값 수정도 가능해야하는데 이런식으로 코드를 짜지는 않겠죠. 인프런에서도 가격대가 있는 강의 인데 내용이 너무나 부실합니다. 차라리 디폴트값을 undefined로 셋팅하고 이런식으로 조건문 작성하는게 맞지 않나 싶습니다. 빈값에 대해서도 반영이 되는 더 좋은 방식이 있다면 알려주셨으면 좋겠습니다. (추가로 onChange는 드래그 삭제에 대해서는 아예 감지가 안되는 부분이라 onInput을 이용하였습니다.) 위의 내용 관련해서 노원두 강사님의 입장이 궁금합니다. 강의가 부실한건지 뭔지 모르겠네요. 추가로 https://www.inflearn.com/questions/1324853/section11-%ED%8F%AC%ED%8F%B4%EB%A6%AC%EB%B7%B0-%EB%82%B4%EC%9A%A9-%EB%B6%80%EC%8B%A4%ED%95%9C%EB%93%AF-%ED%95%A9%EB%8B%88%EB%8B%A4-github%EC%97%90-%EC%82%AD%EC%A0%9C%EC%BF%BC%EB%A6%AC-%EC%A1%B0%EC%B0%A8-%EC%97%86%EC%9D%8C 해당 글의 답변은 회피하시고 다른 질문에 대해서만 답변하시던데 어디로 연락드려야 소통이 가능할까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
ten 댓글 2 좋아요 0 조회수 379

강의가 아주 좋네요

미해결

리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트

설명 잘하십니다.

  • HTML/CSS
  • javascript
  • react
  • youtube-api
댓글 2 좋아요 0 조회수 199

alias 경로 설정 오류

해결됨

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요 제로초님 components 의 alias 경로가 오류가 나서요 질문 드립니다 저는 src 폴더를 추가해서 한번 더 감싼 구조에서 이에 맞게 alias 경로를 세팅했는데요 import { TextField, Button } from '@components'; 이렇게 불러오면 components 폴더의 index 파일이 자동으로 인식되는 걸로 알고 있는데, 에러가 뜨더라구요 그래서 import { TextField, Button } from '@components/index'; 로 해야 정상적으로 불러오던데 왜 index를 별도로 입력해야 하는지 모르겠어서요 반면 @assets alias 경로에 있는 icons는 index 입력 없이 index 파일을 잘 불러와서 문제가 없더라구요 // webpack.config.ts alias: { '@assets': path.resolve(__dirname, './src/assets'), '@hooks': path.resolve(__dirname, './src/hooks'), '@components': path.resolve(__dirname, './src/components'), '@layouts': path.resolve(__dirname, './src/layouts'), '@pages': path.resolve(__dirname, './src/pages'), '@utils': path.resolve(__dirname, './src/utils'), '@typings': path.resolve(__dirname, './src/typings'), }, // tsconfig.json "paths": { "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@components/*": ["./src/components/*"], "@layouts/*": ["./src/layouts/*"], "@pages/*": ["./src/pages/*"], "@utils/*": ["./src/utils/*"], "@typings/*": ["./src/typings/*"] }

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
루룸 댓글 2 좋아요 0 조회수 486

Pagination 페이지 별 데이터 불러오기 오류

미해결

프로젝트로 배우는 React.js

Pagination 6 강의까지 들었을 때 페이지 별로 클릭했을 때 params의 page값은 제대로 바껴서 getPost 함수로 들어가는 거까진 확인 되는데 다른 page값이 들어가도 항상 똑같은 data 5개만 가져오는데 따로 페이지별로 데이터를 슬라이싱하는 부분을 구현해야 하는 건가요? ++ json-server 문서에 _limit 대신 _per_page를 사용하면 Network 탭에서 정상적으로 페이지별로 데이터를 불러오는데 이렇게 하면 console 창에서 ' posts.map is not a function'이라는 오류가 뜨네요 ㅠ

  • react
  • redux
  • es6
김현수 댓글 1 좋아요 0 조회수 274

fetcher 함수의 data 값이 두번 찍히는 이유

미해결

Slack 클론 코딩[실시간 채팅 with React]

Login.tsx에서 swr로 호출한 users의 data 값을 return 직전에 console 로그로 찍어봤는데요 네트워크 탭에서는 users 요청은 한번 밖에 없었는데 undefined와 false가 연달아서 찍히더라구요 다른 질문에서 답변해주신 내용을 보니 데이터 로딩중엔 undefined라고 말씀해주셨는데, 맨 처음 컴포넌트가 렌더링될 때 useSWR이 api를 호출하게 되고 이때 console.log(data)는 아직 데이터가 로딩 중이라서 undefined가 찍히게 되고, 이후 데이터 로딩이 완료되면 useSWR이 다시 호출되어? false가 찍히는 프로세스로 이해했는데 맞는걸까요 그렇다면 useSWR로 api호출 시 무조건 최소 2번 렌더링될 수 밖에 없는걸까요? // Login.tsx import React, { useState, useCallback, useEffect } from 'react'; import { TextField, Button } from '@components/index'; import { Link, Navigate } from 'react-router-dom'; import { useInput } from '@hooks/useInput'; import { LogoSlack } from '@assets/icons/'; import axios from 'axios'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; const Login = () => { // useSWR은 get으로 요청한 데이터를 받아와서 저장한다. // mutate : 내가 원할 때 SWR 호출하기 const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher, { dedupingInterval: 5000, // 주기적으로 호출하지만, dedupingInterval 기간 내에는 캐시에서 불러온다 }); const [logInError, setLogInError] = useState(false); const [email, setEmail, onChangeEmail] = useInput(''); const [password, setPassword] = useInput<string>(''); const onChangePassword = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { setPassword(e.target.value); }, [email, password, data], ); const onSubmit = useCallback( (e) => { setLogInError(false); axios .post( 'http://localhost:3095/api/users/login', { email, password }, { withCredentials: true, }, ) .then(() => { mutate(); }) .catch((error) => { setLogInError(error.response?.status === 401); }); }, [email, password], ); console.log(data); // if (data) return <Navigate to="/workspace/channel" />; return ( <div className="max-w-[400px] mx-auto px-[20px]"> <h1 className="flex justify-center pt-[60px] pb-[20px]"> <LogoSlack /> <span className="blind">Slack</span> </h1> <TextField label="이메일 주소" type="email" value={email} onChange={onChangeEmail} /> <TextField label="비밀번호" type="password" value={password} onChange={onChangePassword} /> {logInError && <p className="mb-[20px] mt-[-10px] text-red-500 font-normal">로그인 실패</p>} <Button text="로그인" onClick={onSubmit} /> <p className="mt-[10px] text-center"> Slack을 처음 사용하시나요? <Link to="/sign" className="ml-[4px] text-blue-600"> 회원가입 </Link> </p> </div> ); }; export default Login;

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
루룸 댓글 1 좋아요 0 조회수 304

next 버전 관련하여 궁금해요!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 강사님! 우선 훌륭한 강의, 진짜 감사드립니다! 완강 후 필요한 부분은 다시 찾아보고 있는데, 처음 봤을 때도, 다시 볼 때도 이해가 쉽게 될 수 있도록 알려주시려는 게 느껴져요. 그래서 도움이 많이 되었습니다! 강사님 덕분에 자신감이 엄청 생겨서, 개발에 더 큰 흥미가 생겼어요! 늘 감사합니다. 제가 이번에 복습 겸 학습에 활용되었던 프로젝트를 다시 만들어보려고 하는데, next버전 관련하여 질문이 있습니다. 강의에는 next 12버전으로 실습했는데, 실무에서 12버전이 많이 쓰이나요? 버전 12에서 더 공부를 해야 할지, (강의를 듣는 동안 못 따라간 부분은 거의 없으나, 익숙하진 않은 것 같아서 학습이 더 필요한 것 같아요! ) 아니면 현재 강사님께 배운 것을 토대로 앞으로 진행하는 프로젝트는 버전을 높여야 할지 고민이 됩니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
맙소사 댓글 2 좋아요 1 조회수 262

versel 배포 후 id : null

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요! 선생님 배포하고 난 후 id가 null 이라고 뜹니다.. 코드 바꾼 거 없는데 local에서는 잘 작동 하는데 왜 배포후만 그럴까욥..

  • javascript
  • react
  • node.js
리액트어려워오요오아오아이아오어아용 댓글 1 좋아요 0 조회수 193

인기 태그

인프런 TOP Writers

주간 인기글