이건 어떻게 해야할까요..? ㅠㅠ

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

- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.)- 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~- 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요. <meta http-equiv="X-UA-Compatible" content="ie-edge">인터넷 익스플로러가 사라진 지금도 쓰이나요?

오늘 카운터앱 강의를 들으면서 새로운 파일 (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 파일을 실행시켜 보았더니 어제는 잘 되던 파일이 오늘은 똑같은 오류가 뜨며 실행이 되지 않더라구요. 무슨 오류일까요 ㅠㅠ 제발 도와주세요 엉엉엉엉엉엉엉엉

let currentItem; function activate(elem){ // 활성화 : 문열기 elem.classList.add('door-open'); currentItem = elem; } function inactivate(elem){ // 비활성화 : 문닫기 elem.classList.remove('door-open'); }이 부분에서요, let, const 변수는 범위가 {} 기준이라고알고있습니다.그런데, activate()에서 currentItem에 elem값을 넣어주면서 {} 범위가 끝났는데, inactivate()에서 currentItem의 값을 확인하고 실행한다는게 이해가 잘 안됩니다.

섹션 4. DOM API-1 강의 6:30초 쯤 변수명을 다음과 같이 작성해주셨는데, 이는 미리 소개하신 2가지 방법의 예시를 모두 보여주기 위함인가요?let $animalInfo = document.querySelector('div.animal-info'); let ageElement = document.querySelector('div#age'); 실제 프로젝트에서는 2가지 방법 중 하나를 사용해 통일성을 주는게 좋을 것 같은데 혹시 다른 이유가 있으신지 궁금합니다!

#heapify(index) { // 특정 값 수정, 삭제 const leftIndex = index * 2 + 1; const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0 )> (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[bigger]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; this.#heapify(bigger); } } bigger 삼항연산자에서 this.arr[leftIndex]의 값이 0 이고 this.arr[rightIndex]의 값이 undefined이면 조건이 false가 되면서 bigger에 rightIndex값이 들어가면서 오류가 생기는거 같습니다!

3-2에서 css코드 작성 완료후, 3-3에서 js코드 작성하시는데 js 앞부분이 잘린거 같아요.

안녕하세요강사님 목소리가 귀에 쏙쏙박혀 잘듣고있습니다.강의 내용이 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 호출 시 

// 중복 문자제거 function solution(my_string) { return [... new Set(my_string)].join("") } // 중복단어 제거 function solution(str) { return [...new Set(str)] } let str = ['good', 'time', 'good', 'time', 'student'] console.log(solution(str))

플러그인과 웹에서 Live Server를 검색해도 나오지않고 five server만 뜹니다. 깃에 올려져있는 링크로 들어가면 오류가 뜨는데 어떻게 해야하나요? 

 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>   

.category-item에서 width를 24%로 해야 4등분이 되고 25%로 하면 3등분이 됩니다. 이건 제가 질문하려는 내용과 뭔가 관련이 있는 것 같아서 말씀드리는거고 css #map에서 height를 픽셀로 안하면 지도가 나오지도 않고 픽셀로 해도 지도가 일부분만 나옵니다. 지도자체를 인용하는거는 문제가 없어보이는데 왜 안나올까요?@font-face { font-family: 'ChosunCentennial'; src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2'); font-weight: normal; font-style: normal; } *{ padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: 'ChosunCentennial'; } nav{ background-color: white; } .nav-container{ padding: 1rem 0; display: flex; flex-direction: row; justify-content:space-between; align-items: center; } .nav-title{ font-size: 3rem; } .nav-contact{ font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title{ font-size: 3.5rem; } .category-item{ width: 24%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner{ padding: 0 1.5rem; } @media all and (min-width: 1024px){ .inner{ max-width: 1024px; margin: 0 auto; } } /*카카오맵 css*/ body{ height: 100vh; } nav{ height: 59px; } main{ padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map{ flex-wrap: 1; width: 100%; height: 100px; }

안녕하세요 강사님수업 도중에 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가 아닌 다른 방법이 있나요?

.

perspective : 800px을 .stage에 넣으면, 다르게 회전이 되어야 하는데저는 .door에 넣은 것처럼 똑같이 일정하게 회전 됩니다.이유를 모르겠어요~