묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
name을 넣지 않을 경우 input에 입력되지 않는 이유
안녕하세요 강사님수업 도중에 input 태그에 name을 넣지 않을 경우 아무런 입력이 되지 않는걸 확인했습니다.그래서 onChange 함수에서 에러가 발생해서 이벤트가 도중에 끊겼을 것이라고 예상하고 try catch로 감았는데도 exception이 발생하지 않더라구요.혹시 왜 입력이 되지 않는 것인지 알 수 있을까요?감사합니다~~! import { useState } from "react"; const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "" }) const onChange = (e) => { try { setInput({ ...input, [e.target.name]: e.target.value }) } catch (err) { console.log(err); } // setInput({ // ...input, // [e.target.name]: e.target.value // }) } //const onChangeName = (e) => { // setInput({ // ...input, // name: e.target.value // }) //}; //const onChangeBirth = (e) => { // setInput({ // ...input, // birth: e.target.value // }) //}; //const onChangeCountry = (e) => { // setInput({ // ...input, // country: e.target.value // }) //}; //const onChangeBio = (e) => { // setInput({ // ...input, // bio: e.target.value // }) //}; return ( <div> <div> <input // name="name" value={input.name} //onChange={onChangeName} onChange={onChange} placeholder={"이름"} /> {input.name} </div> <div> <input name="birth" value={input.birth} //onChange={onChangeBirth} onChange={onChange} type="date" /> {input.birth} </div> <div> {/* <select value={input.country} onChange={onChangeCountry}> */} <select value={input.country} name="country" onChange={onChange}> <option value=""></option> <option value="kr">한국</option> <option value="us">미국</option> <option value="uk">영국</option> </select> {input.country} </div> <div> {/* <textarea value={input.bio} onChange={onChangeBio} /> */} <textarea value={input.bio} name="bio" onChange={onChange} /> {input.bio} </div> </div> ); }; export default Register;
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
만약 구현해야 할 페이지가 많아지면 Router를 효율적으로 사용하는 방법이 있나요?
안녕하세요. 좋은 강의 공유해주셔서 감사합니다. 덕분에 실무에 잘 활용하고 있습니다. 12.4) 페이지 라우팅 강의를 듣던 중 궁금한 점이 생겨 질문 드립니다. 예시 프로젝트엔 페이지가 3개로 비교적 적은 페이지수라서 App 컴포넌트 밑에 Router 로 경로를 지정해줄 수 있지만 몇 십개씩 혹은 몇 백개씩 넘어가는 페이지를 만들어야 할 때는 Router를 어떻게 활용해야 하나요? Router가 아닌 다른 방법이 있나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
web APIs 랑 web API랑 혹시 다른 말일까요?
뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인, 로그아웃, 토근 작동 안 함
강의가 오래되어 현재 버전과 맞지 않는 코드가 있습니다. 혹시 저처럼 25년에 수강 중인분들은 참고 해주세요.강의 따라 코드가 작동안되어 챗GPT에 물어보면서 찾은 해결법입니다.로그인/ 로그아웃/ 토큰 삭제 및 생성 관련 코드가 콜백 방식으로되어 있어 최선 버전과 맞지 않다고 합니다.then/catch 또는 amsyc/await 방식으로 기능과 미들웨어 부분을 수정하시면 코드 작동합니다.긴 글 읽어주셔서 감사합니다.필요하시면 깃 공유 하겠습니다
-
미해결실무 중심! FE 입문자를 위한 React
4-3 아코디언 컴포넌트 만들기 링크 수정요청
4-3 아코디언 실습코드 링크가4-2 렌더링 과정 실습코드 링크랑 같습니다.pdf 파일 내 4-3 실습 링크변경 요청드리며, 변경된 링크 공유 부탁드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
하이라이트 변경이 없는데요?
메모를 적용 하기 전의 화면(대략 1분55초 정도) 에서의 하이라이트와 적용한 후(대략 4분45초 정도)의 하이라이트에 무슨 차이가 있나요? 저만 그런가요? 테스트 작성한 로컬에서도 하이라이트 변화는 없는데요?
-
미해결실무 중심! FE 입문자를 위한 React
[10-2] react-router 강의에서 BrowserRouter 를 감싸지 않고 페이지가 나오는 게 맞나요?
10-2 강의 내용에서 BrowserRouter 를 임포트 하고 나서 사용 안하고 Route를 구성하였습니다. 강의 내용대로 페이지 화면이 나와야 되는 데 에러가 발생합니다. BrowserRouter를 감싸지 않고서도 페이지 화면이 나오는 게 맞나요?<div className="App"> <Routes> <Route path="/" element={<PageA />} /> <Route path="/2" element={<PageB />} /> </Routes> </div>
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
create-react-app my app 실행 시 에러
create-react-app my app 실행 시 아래와 같은 에러가 뜹니다. Installing template dependencies using npm...npm error code ERESOLVEnpm error ERESOLVE unable to resolve dependency treenpm errornpm error While resolving: my-app@0.1.0npm error Found: react@19.0.0npm error node_modules/reactnpm error react@"^19.0.0" from the root projectnpm errornpm error Could not resolve dependency:npm error peer react@"^18.0.0" from @testing-library/react@13.4.0npm error node_modules/@testing-library/reactnpm error @testing-library/react@"^13.0.0" from the root projectnpm errornpm error Fix the upstream dependency conflict, or retrynpm error this command with --force or --legacy-peer-depsnpm error to accept an incorrect (and potentially broken) dependency resolution.npm errornpm errornpm error For a full report see:npm error C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-eresolve-report.txtnpm error A complete log of this run can be found in: C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-debug-0.lognpm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의 쿠폰 관련 문의드립니다!
아랫분들처럼 강의를 사두고 이제야 수강하다가 쿠폰 관련한 공지를 늦게 보게 되었는데요.혹시 아직 쿠폰 발급이 가능할까요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
줄바꿈 단축기 질문 _4분 20초
4분 20초에 input 태그에 줄바꿈되는 단축키가 뭔가요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정다이어리 edit 컴포넌트 만들때
12.8강) edit 컴포넌트 작성할때 저는 diary 컴포넌트처럼edit 컴포넌트 안에useParams 훅 호출해서import { useParams } from "react-router-dom"; const Edit = () => { const params = useParams(); return <div>{params.id}Edit</div>; }; export default Edit; 이렇게 설정해줘야route 설정할때도 id에 따른 페이지가 잘 보이던데저만 그런가요 아니면 강의에선 스킵이 된건가여
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수업 노트 링크 오류 제보
링크는 chapter16으로 되어있는데 클릭하면 chapter14 입니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
1.8 연산자 2_null 병합 연산자 (강의 진행 2분 00초) 질문이 생겼습니다!
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님강의 잘 듣고 있습니다! 1.8 연산자 2 에서 수업을 듣고 저 혼자 해보는 중에 선생님께서 작성하신 문법과 다르게 작성한 식에서 정답이 출력 되었습니다.제가 적은 문법이 추후에 다른 문법이나 개발을 하는데 충돌이 나거나 에러가 날 수 있는 경우가 생길 지 여쭤보고 싶어서 문의 남깁니다! 제가 적은 식은 아래와 같습니다. console 에 찍힌 값 : 10 입니다.var1 = null; var2 = 10; var3 = 30; console.log((var4 = var1 ?? var2));
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
모듈이 더 이상 지원하지 않는답니다
@types/bcrypt는 다운 가능 합니다
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의 쿠폰 관련 질문
안녕하세요, 비슷한 유형의 질문이 이미 있어 저도 글을 남겨봅니다. 미리 구매해둔 후 이제 듣기 시작하려 하니, 새로운 교육과정으로 리뉴얼 되었다고 하는데, 시기를 놓쳐 쿠폰 혜택을 받지 못했습니다. 해당 강의에 기대를 많이 하고 있었는데, 리뉴얼된 버전으로 듣지 못한다는 사실이 안타까워 혹시 쿠폰을 받을 다른 방법이 없을지 문의드립니다. 감사합니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
오류가 있습니다
이 코드를 실행하면이렇게 data가 undefind가 나오는데 이유가 뭔가요(data:body하면 정상적인 결과가 도출됩니다)
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Header 컴포넌트 부분에 대해 질문있습니다.
안녕하세요 공부를 하다가 궁금한 점이 생겨 질문을 드립니다. Header 컴포넌트에서 화살표 버튼을 각각 클릭하면 날짜가 증가되었다 감소되는 기능에서 이 부분의 state인 pivotDate를 Header컴포넌트가 아닌 Home컴포넌트에 작성된 이유는 날짜가 바뀌면 아래 리스트도 해당날짜에 작성된 리스트를 보여 줘야하니 전체를 관리하는 Home컴포넌트에 작성이 된 것인가요? 그리고 마지막으로 혼자 공부를 하다가 위 내용처럼 이 코드가 부모컴포넌트에 관리를 하는 것인지 그냥 Header처럼 해당기능을 해당 컴포넌트에 작성을 해야되는 것인지 감이 조금 잡히지 않는데 조금 쉽게 이해할 수 있는 방법이 혹시 있는지 궁금합니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
import 에서 오류가 납니다
깃허브에서 배꼇는데 오류가 발생합니다
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
이런 오류가 나옵니다
이런 오류가 나옵니다
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
에러가 발생합니다
이것 외에는 단서가 없습니다