안녕하세요 강사님한 입 크기로 잘라 먹는 리액트(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 // 슬라이스 등록 } }) 

 https://github.com/expressjs/cors?tab=readme-ov-file#enable-cors-for-a-single-route참고하여작성 해 보았습니다.* 제일 하단부에는 전체 코드 첨부 하였습니다. *문제는 2가지 입니다.1. 단일 경로에 CORS 활성화를 구현하고 싶었으며corsOptions 에 methods 를 'POST, OPTIONS'만 추가하였음에도 get은 호출시 허용이 되었습니다.app.get('/users/', cors(corsOptions), function (req, res) {제가 구현하고 싶었던 코드의 의도는 특정 IP만 사용 허용 이기 때문에 위와 같이 구현하고 싶었습니다.하지만 아래와 같이 호출하여도 허용이 되었습니다.app.get('/users/', (req, res) => {나머지 문제는위와 반대로 POST의 경우에는 app.post('/token/phone', cors(corsOptions), (req, res) => {위처럼 작성 옵션도 적용되었음에도 불구하고 CORS 가 계속 발생합니다.아래는 작성한 node 코드입니다.import express from 'express' import { createTokenOfPhone } from '../../../section01/01-03-token-api-facade/index.js' import { swaggerUi, specs } from "./swagger/swagger.config.js"; import cors from 'cors' const app = express() app.use(express.json()) // Swagger API app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(specs, { explorer: true })); // 허용할 IP WhiteList const whitelist = [ 'http://127.0.0.1:5500' ]; const corsOptions = { origin: (origin, callback) => { if (whitelist.indexOf(origin) !== -1 || !origin) { // !origin은 로컬 요청을 허용 callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, origin: whitelist, methods: 'POST, OPTIONS', }; //CORS 설정 // app.use(cors()) // app.use(cors(corsOptions)) // 특정 IP 허용 app.get('/users/', cors(corsOptions), function (req, res) { // app.get('/users/', (req, res) => { res.json({msg: 'getdms 왜 됨?'}) }) // OPTIONS 요청에 대한 응답 처리 app.options('/users/', cors(corsOptions), (req, res) => { res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.setHeader('Access-Control-Allow-Credentials', 'true'); res.sendStatus(204); // No Content }); // app.post('/token/phone', (req, res) => { app.post('/token/phone', cors(corsOptions), (req, res) => { const {phoneNo} = req.body; console.log(`phoneNo ${phoneNo}`) const requestToken = createTokenOfPhone(phoneNo); const resultData = { data: requestToken }; res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.send(resultData); }); app.listen(3000); // 포트번호아래는 get , options, post 를 호출하는데 사용한 코드입니다.주석 되어있는 get 호출시에는 호출안되게 옵션 설정해도 호출되고주석 안한 post 호출시에는 정상 호출되어야 할 것 같은데 안됩니다....<script> let resultToken = ''; const certification = () => { let myPhoneNo = document.getElementById("phoneNo").value; // let api = axios.options("http://localhost:3000/users"); // let api = axios.get("http://localhost:3000/users"); let api = axios.post("http://localhost:3000/token/phone", {phoneNo: myPhoneNo}); }; </script> <body> <div>휴대폰번호: <input type="text" id="phoneNo"> <button onclick="certification()">인증하기</button> <br/> <div>인증상태</div> <button>회원가입하기</button> </div> </body>   

[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다.rowKey 속성을 사용하여 key로 지정할 컬럼을 지정합니다. // primary key is id return <Table rowKey="id" />; // or return <Table rowKey={(record) => record.id} />; 

최신 버전 node.js 를 설치 하고 진행하니 create-react-app 에서 자꾸 문제가 생기는거 같습니다. 이부분에 대해 어떻게 진행해야하나요??

react-router v7을 설치하고 다음과 같이 수정하여 처리하였습니다.function MainLayout() { return ( <Layout style={{ minHeight: '100vh' }}> <Layout> <Sider collapsible> <div className="logo" style={logoStyle} /> <Menu theme="dark" mode="inline" defaultSelectedKeys={['m1']}> <Menu.Item key="m1">설문조사관리</Menu.Item> </Menu> </Sider> <Layout> <Header style={{ padding: 0, background: 'white' }}>HEADER</Header> <Content> <Outlet /> {/* chidren 대신 아울렛 사용 */} </Content> </Layout> </Layout> </Layout> ); } function App() { return ( <> <Routes> <Route path="/" element={<MainLayout />}> <Route index element={<h1>Home Page</h1>} /> <Route path="list" element={<ListPage />} /> <Route path="builder" element={<BuilderPage />} /> </Route> </Routes> </> ); }

PS D:\reactWorkspace\memo-project> git reset --hardgit : 'git' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1+ git reset --hard+ ~~~ + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundExceptionPS D:\reactWorkspace\memo-project>

안녕하세요 강사님수업 도중에 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;

안녕하세요. 좋은 강의 공유해주셔서 감사합니다. 덕분에 실무에 잘 활용하고 있습니다.  12.4) 페이지 라우팅 강의를 듣던 중 궁금한 점이 생겨 질문 드립니다. 예시 프로젝트엔 페이지가 3개로 비교적 적은 페이지수라서 App 컴포넌트 밑에 Router 로 경로를 지정해줄 수 있지만 몇 십개씩 혹은 몇 백개씩 넘어가는 페이지를 만들어야 할 때는 Router를 어떻게 활용해야 하나요? Router가 아닌 다른 방법이 있나요?

뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.

강의가 오래되어 현재 버전과 맞지 않는 코드가 있습니다. 혹시 저처럼 25년에 수강 중인분들은 참고 해주세요.강의 따라 코드가 작동안되어 챗GPT에 물어보면서 찾은 해결법입니다.로그인/ 로그아웃/ 토큰 삭제 및 생성 관련 코드가 콜백 방식으로되어 있어 최선 버전과 맞지 않다고 합니다.then/catch 또는 amsyc/await 방식으로 기능과 미들웨어 부분을 수정하시면 코드 작동합니다.긴 글 읽어주셔서 감사합니다.필요하시면 깃 공유 하겠습니다

4-3 아코디언 실습코드 링크가4-2 렌더링 과정 실습코드 링크랑 같습니다.pdf 파일 내 4-3 실습 링크변경 요청드리며, 변경된 링크 공유 부탁드립니다.

메모를 적용 하기 전의 화면(대략 1분55초 정도) 에서의 하이라이트와 적용한 후(대략 4분45초 정도)의 하이라이트에 무슨 차이가 있나요? 저만 그런가요? 테스트 작성한 로컬에서도 하이라이트 변화는 없는데요?

10-2 강의 내용에서 BrowserRouter 를 임포트 하고 나서 사용 안하고 Route를 구성하였습니다. 강의 내용대로 페이지 화면이 나와야 되는 데 에러가 발생합니다. BrowserRouter를 감싸지 않고서도 페이지 화면이 나오는 게 맞나요?<div className="App"> <Routes> <Route path="/" element={<PageA />} /> <Route path="/2" element={<PageB />} /> </Routes> </div>