안녕하세요.투두리스트 렌더링하기에서 TodoItem에 key를 넣지 않았을때 웹브라우저에서 에러가 발생하고, 강의 화면에 vscode에서도 보면 해당 소스코드 위치에 Missing "key" prop for element in... 이라고 나오는데, 제 경우에는 소스코드 위치에 Missing "key" prop for element in... 이라는 내용이 나오지 않습니다. Eslint 플러그인도 설치했고,아래와 같이 설정 했는데, 무슨 차이 때문에 이런 현상이 생기는 걸까요? rules: { "no-unused-vars": "off", "react/prop-types": "off", },그래서, 검색을 좀 해보았고 rules에 아래와 같이 내용을 추가해 봤는데도, Missing "key" prop for element in... 이 내용이 나오지 않습니다. rules: { "no-unused-vars": "off", "react/prop-types": "off", "react/jsx-key": "true", },참고로 저의 package.json은 아래와 같습니다.{ "name": "section08", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^19.1.1", "react-dom": "^19.1.1" }, "devDependencies": { "@eslint/js": "^9.33.0", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", "vite": "^7.1.2" } }

저 이 화면에서 open with live server 를 눌렀는데이 화면이 떠요.. 저 그러고 혹시 강의 마지막 부분만 보고도 앱을 만들 수 있나요?

깃 권한 신청했는데 처리가 안된거 같습니다

좋은 강의 잘 듣고 있습니다.다름이아니라, 이전 강의들에 에러들을 다 해결해서 80강을 듣기 전 까지 상품 상세 페이지 구현 후,상품 상세 페이지 보기까지 에러 없이 잘 되던 것이80강을 듣고 코드를 작성 후 부터 '상품 상세 페이지 ' 가 뜨지를 않고 있습니다.아래 사진 첨부 합니다. 사진 1. 아래 사진으로 DB Browser for SQLITE에서 이미지를 작성 해 준 뒤 일단 이미지는 잘 받아 옵니다. 위에 사진 1에서 가장 마지막인 4번째의 축구공을 누르면, 위와 그리고 아래와 같은 에러가 발생하며 상품 정보 상세 페이지.즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것이 불러올 수 없게 되어질문을 남깁니다. 즉 상품 정보 상세 페이지가 잘 만들어져서 그대로 에러 없이 잘 해왔는데, 에러가 나서 여쭈어봅니다.어떻게 해야 이 에러를 해결 할 수 있을까요? 

App.js의 App 생성자 함수 안에서 호출하는 init()은 비동기 함수인데 앞에 await을 붙이지 않아도 되나요?

안녕하세요, 좋은 강의 감사합니다.실행 컨텍스트 부분에서 궁금한 점이 있어서 질문드립니다. 강의에서 Variable Object를 설명해주셨는데, 제가 개인적으로 찾아본 자료들에서는 ES2015부터 실행 컨텍스트가 Lexical Environment, Variable Environment, this binding으로 구성된다고 나와 있더라고요.Variable Object는 그 이전 스펙에서 사용되던 용어인 것 같은데, 혹시 강의에서 이 개념을 선택해서 설명하신 특별한 교육적 의도가 있으셨을까요?제가 아직 깊이 이해하지 못해서 그런데, 두 방식 중 어떤 것이 JavaScript 동작 원리를 학습하는 데 더 도움이 되는지, 또는 어떤 차이점들이 있는지 알려주시면 감사하겠습니다.

15강 몽고DB설정하기 영상의 6분경security 밑에 quickstart 메뉴가 안보이는데아이디와 비밀번호 설정을 어떻게 해야하나요?

안녕하세요 e2e 테스트는 비용이 많이 들어서 어떻게 관리를 하는지 궁금합니다. - 파이프라인에서 매번 CI 에서 돌리기에는 서버나, 시간이 개발 생산성을 잡아 먹을 것 같은데요. 점점 e2e 테스트가 쌓여 나갈떄 어떤 전략을 취할 수 있는지 궁금해요. GPT로 리서치하니까 보통 2가지를 병행해서 스케줄러 + 온디맨드 실행 같이 관리 한다고 하는데, 실제 현업에서는 어떻게 활용하고 계신지, 제가 리서치한 내용 말고 더 효율적이거나, 추천할만한 전략 , 이외의 고려사항 소개해주실 수 있으면 알려주시면 감사하겠습니다.스케줄 실행 (Nightly/주말 풀스윗)EventBridge → ECS Fargate RunTask(Spot 가능) → Playwright 러너대상: 스테이징(or PR 프리뷰 URL)b. 산출물: 트레이스/비디오/리포트 S3 업로드, Slack에 요약/링크온디맨드 실행 (PR 코멘트/수동 트리거)Bitbucket Pipeline에서 aws ecs run-task 호출(또는 ChatOps 슬래시 커맨드)태그/폴더/샤드 인자 넘김 → 필요한 부분만

mouseenter 마우스 이벤트를 할때 pulse.start(); 대신 pulse.restart();로 처음시작하게 하는것처럼  실습 때 mouseleave 마우스가 벗어날 때 자연스럽게 하려면pulse.pause();gsap.to('button',{scale:0.8,duration:0.4})두개를 사용해서 어색하지 않게 구현했는데요, pulse.pause();gsap.to('button',{scale:0.8,duration:0.4})대신 pulse.reverse();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.  

권한 요청드렸습니다.확인부탁드립니다!

안녕하세요. CodeSandbox에 Vanilla가 보이질 않습니다. 그래서 인프런 내부에 올라온 여러 해결방법을 찾아서 따라하려 했으나 잘 되지는 않는 것 같습니다. 혹시 그냥 자바스크립트를 사용해도 이상없을까요? 

다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.6강 마지막 화면이랑 7강 첫화면 코드가 달라져서 이 부분은 어떻게 해결하면 될까요??(안녕하세요->환영합니다)(console.log->alert)크게 이 두 부분이 다른 것 같습니다. 그냥 이대로 진행하면 될까요?2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!

안녕하세요 이전에 장기효님 강의 vue2 버전으로 초중급 듣고 온 상태입니다. 근데 오래전부터 이미 뷰2는 지원 끊어져서 많은 회사들도 현재 뷰3를 이용하고 있는 걸로 압니다. 여기서 지금 재가 고민인게 중급 이후의 뷰2 강의를 들어야할지, 뷰3 강의를 처음부터 들어야할지 고민입니다. 근데 또 뷰3 강의 초급을 구매해서 커리큘럼만 살짝봤는데 뷰2 초급이랑 거의 비슷한것 같더라구요? 제가 이후에 들어야할 강의는 뭘로 해야할까요??

안녕하세요 강의를 잘 듣고있습니다.하지만 개념이 잘 이해가 되지 않은 부분들이 있어서 질문드립니다.context 분리하기 강의 부분입니다!!!이부분에서 이미 전 시간에 만들었던 useCallback으로 선언했던 함수들이 있습니다. 하지만 왜 app컴포넌트의 렌더링으로 인해 또 함수 선언이 되어 usememo를 써야한다고 하셨는지 문의드려요. const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []);const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []);그동안 다른 컴포넌트에 props를 줄때는 color={color}식으로 주고, 이는 객체형태라고 합니다. 받는 자식 컴포넌트에서는 {color} 이런식으로 구조분해할당을 합니다. 하지만 createContext로 만든 provider value ={} 는 기본적으로 객체형태가 아닌걸까요? 기본적으로 구조분해할당을 하지 않는거같아서 뭐지싶었습니다<TodoDispatchContext.Provider value={memoizedDispatch}>useEffect, useMemo의 차이점은 무엇인가요? 기본적으로 의존성 배열을 []로 둘때는 처음으로 컴포넌트가 mount 될때만 실행하고 , [todos]를 넣으면 이 변수 state가 바뀔때만 실행하는거같아서 똑같은거같아요 

안녕하세요. 웹사이트 요소들을 선택하고 찾는 과정에서 크롬 콘솔창에서 코딩을 알려주시고 있는데. 혹시.. 해당 웹사이트의 서버에 피해를 끼친다거나 그런 것들이 있을 수도 있는지 여쭤봅니다.

해당 이벤트에서 클릭 시 useNavigate 함수를 호출하라 인데 이 둘의 동작에서 차이가 발생했습니다.그 이유를 설명해주실 수 있으신가요?

안녕하세요.1.7) 복합대입 연산자 관련 질문입니다.예제) num7 -= 20; 부분입니다.바로 위에 있는 num7 += 20;은 num7에 할당 되어 있는 값에 20만큼 더해서 console result 값은 30이 반환이 될 것이었고, 반환이 되었습니다.그런 논리라면 num7 -= 20; 이면단순 수식으로 생각을 하였을 때, 10 -20 = -10이 되어야 하는게 아닌가 싶습니다.num7 -= 20; 에서 20; 이 부분이 앞에 오게 되는 이유가 있을까요?기본 연산자에서는 정수만 취급하기 때문에 앞뒤의 순서가 바뀐 것일까요? 단순 JS의 구조적인 문제일까요?이에, 설명하셨던 부분과 약간 상이 한 내용인 거 같아서 질문 남겨드립니다.

// 2. 콜백함수의 활용 function repeat(count, callback){ for(idx=0; idx<count; idx++){ callback(idx); } } repeat(4, function callback(){ console.log(idx * 2)}); repeat(4,(idx)=>{ console.log(idx * 4); }) repeat(5,()=>{ console.log(idx * 5); })repeat()으로 호출할 때 콜백함수까지 같이 불러오는 부분에 대해 궁금증이 생겼습니다. repeat(인수, 콜백함수)=> 이 부분에서 콜백함수에 매개변수로 idx를 안 넣어도 콘솔창에 결과가 잘 나옵니다. 그런데도 콜백함수 인수를 작성할 때 idx를 꼭 적어줘야 하나요? repeat(4, (idx) // idx를 넣고 메인 함수 콜백 호출 부분인 callback(idx); 에서 idx를 뺏더니 출력결과가 Nan이 나옵니다. repeat(4, () => 이렇게 idx가 없는 호출문? 에서는 정상적으로 값이 잘 나오는데 저 부분은 왜 안나오는지 궁금합니다.

// 함수선언 함수를 생성하는 것 function greeting(){ console.log("안녕하세요"); } greeting(); let area1 = getArea(20, 30); console.log(area1); getArea(40, 200000); // 함수 호이스팅 // -> 끌어올리다 라는 뜻. //함수가 선언되는 순서는 중요하지 않다! function getArea(width, height){ function another(){ //증첩함수 console.log('another'); } another(); let area = width*height; // console.log(area); return area; <------------------------- 여기 return이 반환값이라고 하셨잖아요. getArea(40, 200000) = area 와 같다고 생각하면 되는거죠? 그리고 그걸 화면에 출력하기 위해서는 꼭 변수에 담아야 하는거죠? 그건 알겠는데 왜 변수에 담아야 나오는 건지 궁금합니다!! }

ch-7-2에서포스트 상세 조회 router 안에서 ipify.org api를 호출하는데포스트 상세 조회 API를 클라이언트에서 호출할 경우서버에서 ipify.org api를 호출하기 때문에 의도한바와 다르게 서버 ip 주소가 나오고 클라이언트 IP는 req.ip를 통해서만 얻을 수 있지않나요??const response = await axios.get("https://api.ipify.org?format=json"); ip = response.data.ip;