const onSubmit = () => { if (input.name === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } };위 코드는 강사님께서 알려주신 onSubmit함수인데 콘솔에 하나하나 찍어가면서 공부하다 보니까 inputRef.current가 가리키는 것이 input 태그여서 아래와 같이 조건문의 조건을 바꿔서 돌려봐도 잘 나오는데 input.name과 inputRef.current.value가 같은 것을 가리켜서 그런건지 궁금합니다!  const onSubmit = () => { if (inputRef.current.value === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } }; 혹시 몰라서 input태그도 올립니다!<div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder="이름" /> </div>

특정 요소의 입력검증을 위해 useRef()를 생성하고해당 element tag에 ref={inputRef}를 생성한 이후에onSubmit()에서 강의대로 입력확인 처리를 하였습니다.const onSubmit = (e) => { console.log(input.name, input.birth) if(input.name === "") { console.log(inputRef.current) inputRef.current.focus() return } if(input.birth === "") { console.log(birthRef.current) birthRef.current.focus() return } }질문의 bith에 대한 입력검증을 하고자 하면신규로 birthRef = useRef()를 생성하고element tag에 ref={birthRef}를 추가 /onSubmit에서 해당 로직을 적용해야 하는 건가요? 총 4개 입력항목(이름, 생년월일, 국가, 자소개)이면useRef()를 4개 생성해서 엘리먼트별 입력확인을하는구조로 개발이 되어야 하는건가요?

onChange 이벤트에서 입력값 확인을 console.log에서확인시 아래와 같이 확인이 되어집니다.input(type=date포함), textarea 궁금한 사항은 select 에서 선택된 값은 어떻게 확인해야할까요? 실제 target부분에 아래와 같이 표시가 되어집니다.select와 option의 값이 출력이 되고input의 입력값을 볼수있는 형태가 아닌select tag에서 정의한 값이 보입니다.실제 선택한 값을 어디서 확인할 수 있을까요?  

제가 front를 잘 몰라서 질문을 드립니다.외부모듈에 사용방식이 CJS, ESM 2가지 말씀하셨는데궁금한 내용은CJS(Common Js) 방식은 현재 javascript 기반에서도  node.js기반하고 상관없이 사용이 가능한가요?ESM ( ES 모듈 시스템) - node.js 기반하에서 동작되는  외부모듈 사용방식으로 이해해도 되는지 문의드립니다.     

1 . node 버전 12.4에 맞추기이전까지는 16버전으로 문제 없이 실행되었는데 이번 실습에서는 에러가 발생하여 다른 수강생분들이 남겨주신 질문 참고해서 12.4버전으로 낮추었더니 빌드 에러가 사라졌습니다.이때 맥 실리콘은 node 15 버전 미만은 지원하지 않아 nvm install 시 에러가 나는데요. 터미널에 아래와 같이 입력하면 해결되더라고요. Rosetta2 쉘을 사용하는거라고 합니다.arch -x86_64 zsh nvm install 12.4.0참고 주소 : https://velog.io/@jeb1225/nvm-%EC%97%90%EB%9F%AC-no-such-file-or-directory-CXXc2. sass 설치node-sass 지원이 종료되어 sass 1.83.4 버전으로 설치하였는데 잘 빌드되었습니다.이번 강의에서 유독 에러가 나서 해결하느라 시간이 들었는데 같은 에러 만나시는 분들께 도움이 될까 하여 공유드려요!

안녕하세요 강사님의 인강을 보고 또 혼자 조금씩 코드를 작성하면서 공부하고 있습니다. 공부를 하면서 질문이 있는데 함수부분에서 함수가 비슷한 작업을 할때 이 코드를 묶어서 사용하고 또 재사용도 가능하다라고 문법으로는 알고 있습니다. 하지만 아직 초보여서 그런지 혼자 코드를 작성해보면서 이런상황에서 함수를 사용해야되나? 아니면 함수 생각조차 나지 않을 때가 있는데 혼자 코드를 작성하면서 이럴땐 함수를 이렇게 사용하면 되겠구나라고 스스로 생각이 나게 하려면 어떻게 해야 좋을까요?

"clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.5.2", "mini-css-extract-plugin": "^1.6.2",혹시 찾기 귀찮으신 분들이 있으실까하여 공유드립니다

강의에서는 4가지 뿐인데 vite가 현재일자 기준으로 업데이트가 되었는지 5번째 칸에 React Router v7이 생겼습니다. 혹시 React Router v7를 선택하면 수강하는데에 문제가 있을까요?

안녕하세요 책과 강의를 병행하고 있습니다!4장 리액트 앱 만들기, 5장 실습부분을 진행하고 있는데요책에서는 create-react-app 으로 리액트 앱을 만들고, 강의는 vite로 앱을 만들고 있습니다. 또한 책에서는 main.jsx대신 index.js와 bundle.js가 생성된다고 하는데 강의를 따라가면 되는걸까요 ??분명 책과 강의의 차이점에 대해 어딘가에 정리되어있을 것 같은데.. 찾을 수가 없어서 질문드립니다!

안녕하세요 😀 강의 중 프로젝트 1 에서는 npm install 이 정상적으로 진행되었으나, 이번 useEffect 실습을 위해 강의내용처럼 새폴더 생성 후 npm i를 하니 아래와 같은 오류가 발생합니다.구글링해서 여러 방법을 시도했으나 해결되지 않아 어떻게 해야할 지 질문드립니다 😥

안녕하십니까! 해당 강의를 열심히 들으며 리엑트를 공부하고 있는 대학생입니다. 듣다가 막히는 부분이 생겨 질문을 하게 되었습니다.List.jsx 에서 검색 기능을 구현하는 부분에서 궁금한 것이 생겼습니다. 강의에서는 아래 코드처럼 getFilteredData 함수를 작성하셨습니다.const getFilteredData = () => { if(search === ""){ return todos; } return todos.filter((todo) => { todo.content.toLowerCase().includes(search.toLowerCase()) }); };하지만 저는 아무리 오타를 점검하고 수정해도 기능이 구현이 되지 않아서 답답한 마음에 GPT를 통해 질문을 했는데 위 함수에서 return이 빠져있다고 수정해주었습니다. 아래는 GPT가 수정해준 코드입니다.const getFilteredData = () => { if(search === ""){ return todos; } return todos.filter((todo) => { return todo.content.toLowerCase().includes(search.toLowerCase()) }); };위 코드를 보시면 filter() 안에 화살표 함수 내부에 return이 추가된 것을 볼 수 있습니다. 그리고 실제로 이렇게 수정을 하고서야 제 기능이 정상적으로 작동이 되었습니다. 왜 이런 결과가 생겼는지 궁금합니다. 제가 뭘 잘못했길래 강의와는 다르게 return을 추가해야만 기능이 제대로 구현이 되는지 여쭤보고 싶습니다. 혹시나 제가 찾지 못하는 오타가 있을까 해서 강의와 똑같이 따라한 전체 List.jsx 코드도 함께 첨부하겠습니다. 감사합니다!import './List.css'; import TodoItem from "./TodoItem"; import {useState} from "react"; const List = ({todos}) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if(search === ""){ return todos; } return todos.filter((todo) => { todo.content.toLowerCase().includes(search.toLowerCase()) }); }; const filteredTodos = getFilteredData(); return <div className="List"> <h4>Todo List 🌱</h4> <input value={search} onChange={onChangeSearch} placeholder="검색어를 입력하세요" /> <div className = "todos_wrapper"> {filteredTodos.map((todo) => { return <TodoItem key={todo.id} {...todo}/>; })} </div> </div> } export default List;

4월에 구매하여 늦게서야 해당 강의를 수강 중인데 업데이트 된 강의 쿠폰 발급하는걸 몰랐네요ㅠㅠ 혹시 현강의랑 많이 다를까요? 어떤 차이점이 있는지 궁금해요.듣는다고 하면 중간부터 들어야하나요. 현재 eslint부분 듣고있는데 애매하네요. 그리고 듣는다는 가정 하에 쿠폰 재발급이 가능한지 궁금합니다.

안녕하세요 강사님한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강좌 잘듣고 있습니다. 감사합니다.저는 자막을 켜고 보는데,아래 강좌의 자목이 잘못된 것을 발견했습니다.5-3) JSX로 UI 표현하기그리고, 동영상을 보다가, 일시정지하면서, 자막을 다시 확인하면서 보고 있습니다만, 혹시, 학습 편의를 위해서, 동영상 강좌 자막 대본 내용도 같이 올려주실수 없을까요?타입스크립트, Next.js에도 자막 대본 내용도 같이 올려주시면 좋겠습니다. ㅠ

eslint를 설치하면 이전과 달리 esling.config.mjs로 파일이 설정되며 extend나 rules의 활용이 기존과 다른 방식으로 진행되며 충돌이 일어납니다. stackoverflow나 chatGPT의 도움을 받아 동작은 되지만, 이 부분 다시 설명해주셔야 하는게 아닌지요. (기존에 설명된 부분들도 코드나 적용방식이 달라져서, 플러그인을 활용하도록 합니다)이 부분을 스스로 혼자 찾아서 수정할 수 있는 역량이 있다면 이 강의를 듣지 않겠지요. 하루 종일 한단원도 나가지 못하고 .. 해결하려다 포기하게 되네요. 2년전에 산 강의를 시간이 없어 이제 듣는 제 문제도 있겠지만.. 이 부분 상세한 설명을 넣어주셔야 할것 같아요.

오늘 카운터앱 강의를 들으면서 새로운 파일 (section06)을 만들었는데요. 가장 기본 세팅을 하고 화면에 카운터앱 이라는 단어를 렌더링 하려고 npm run dev를 한 후 ctrl shift p 를 눌러 페이지에 들어갔는데 글자가 렌더링 되지 않길래 개발자 도구를 켜 보았더니 Failed to load module script : Expected a JavaScript module script but the server responed with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTMl spec. 라는 오류가 뜨네요. 오류 해결을 위해 업데이트도 해보고, 파일을 지웠다 새로 만들어도 보고, 지피티에 물어보거나 인터넷에 검색도 해봤는데 도저히 오류가 고쳐지지 않습니다. 혹시나 해서 이번에 새로 만든 파일 말고 section05 파일을 실행시켜 보았더니 어제는 잘 되던 파일이 오늘은 똑같은 오류가 뜨며 실행이 되지 않더라구요. 무슨 오류일까요 ㅠㅠ 제발 도와주세요 엉엉엉엉엉엉엉엉

안녕하세요강사님 목소리가 귀에 쏙쏙박혀 잘듣고있습니다.강의 내용이 2024년 초 기준이라 1년이 지난 현재시점 node LTS 버전이 20.xx.x 버전에서 지금은 22.xx.x 버전으로 올랐습니다.버전에 따른 이슈가 있을수도있을것같은데 강의 버전에 맞춰서 진행해야하나요? 아니면 최신버전으로 진행해도 문제없을까요?

안녕하세요 강사님해당 7.3 섹션의 깃헙은 업데이트가 안되이어있는 것 같습니다.소소한 제보 드립니다... https://github.com/winterlood/onebite-react-v2/tree/main/section07/chapter03

안녕하세요.npm create vite@lastest 명령어 입력시 아래와 같이 오류가 발생하고 있습니다. 어떻게 해결해야 하는지 알수있을까요? => 노드 버전 (v22. 12. 0)=> 사용자 계정명 영어오류 발생했을 때 확인 부분1. npm 버전이 낮아 현재 11버전으로 업데이트 진행2. npm chche clean --force 진행 후 명령어 재실행 발생한 에러 메세지C:\Users\dwkim\Desktop\study\React\oneBite-React>npm create vite@lastestnpm error code ETARGETnpm error notarget No matching version found for create-vite@lastest.npm error notarget In most cases you or one of your dependencies are requestingnpm error notarget a package version that doesn't exist.npm error A complete log of this run can be found in: C:\Users\dwkim\AppData\Local\npm-cache\_logs\2025-01-11T02_29_00_002Z-debug-0.log

안녕하세요 강사님조건문, 반복문에서 또는커스텀 훅을 사용하기 전에 Hook을 사용하였을 때는함수 컴포넌트 외부에서 호출했을 때 오류가 발생하는 것 처럼 별다른 오류가 발생하지 않는데 말씀하신 내용으로는 권장사항인걸까요?조건문, 반복만에서 Hook 호출 시import { useState } from "react"; const HookExam = () => { //const state = useState(); if (true) { const state = useState(); console.log(state); } for (let i=0; i<1; i++) { const state = useState(); console.log(state); } return <div>HookExam</div> }; export default HookExam; 커스텀 훅 만들기 전에 Hook 호출 시import { useState } from "react"; function getInput() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); console.log(e.target.value); }; return [input, onChange]; } const HookExam = () => { const [input, onChange] = getInput(); return ( <div> <input value={input} onChange={onChange}/> </div> ); }; export default HookExam;함수 컴포넌트 외부에서 Hook 호출 시 

Redux 공식 사이트의 튜토리얼에 따르면, 슬라이스에서 리듀서를 익스포트 하고 스토어에 리듀서를 다음 예제와 같이 등록하는 데..// surveySlice.js ... 생략 ... export default surveySlice.reducer; // surveySlice 리듀서를 익스포트 하고서.. // /stores/index.js import surveyReducer from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveyReducer // 리듀서 등록 } }) 강사님 같은 경우는 아래와 같이 리듀서 등록에 직접 surveySlice를 추가했는데 리덕스 튜토리얼과 차이가 뭔가요??import {surveySlice} from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveySlice // 슬라이스 등록 } })