코드편집기에 6, 12번째 줄에 회색 바탕에 context, event, listener로 표시되어있는 확장 프로그램 저도 쓰고싶은데 혹시 vs코드에도 비슷한 프로그램 있을까요?혹시 없다면, 웹스톰의 확장 프로그램은 무엇을 쓰시는지 알 수 있을까요?

만약 환경변수를 비밀저장소를 통해 받아온다면, 비밀 저장소 인증에 대한 환경변수는 어떤 방식으로 가져오는지 궁금합니다.(비밀저장소에 접근하기 위한 인증 정보는 로컬.env 파일에 저장해야 하는건가요?)

 const getEnv = async ()=>{ const response = await axios.get(’/비밀키요청’) return response.data } 강의에서 위 코드를 통해 비밀키를 받아오는 예시를 작성해 주셨는데 ConfigModule.forRoot({isGlobal:true, load: [getEnv]})과정에서getEnv와 같은 비동기 함수를 등록한 경우 forRoot 내부적으로 await을 통해 메서드가 동작을 완료할때까지 기다리는지 궁금합니다.(비동기 함수를 등록해도 forRoot의 내부 동작으로 처리되는지?)  

저도 이전에 미리 구매해놓고 공부하려는데 뒤늦게 확인했습니다.리뉴얼된 버전으로 공부하고 싶은데, 쿠폰을 발급받을 수 있을까요?

import './App.css' import Header from './components/Header'; import Editor from './components/Editor'; import { useState, useRef,useReducer } from 'react'; import List from './components/List'; const mockData=[ { id:0, isDone: false, content : "React 공부하기", date: new Date().getTime(), }, { id:1, isDone: false, content : "빨래하기", date: new Date().getTime(), }, { id:2, isDone: false, content : "노래 연습하기", date: new Date().getTime(), }, ]; function reducer(state,action){ switch(action.type){ case 'CREATE': return [action.data, ...state]; case 'UPDATE': return state.map((item)=>item.id===action.targetId?{...item, isDone: !item.isDone}:item); case "DELETE": return state.filter((item)=>item.id !==action.targetId); default: return state; } } function App() { // const [todos,setTodos]=useState(mockData); const [todos,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); const onCreate=(content)=>{ dispatch({ type:"CREATE", data:{ id:idRef.cureent ++, isDone:false, content: content, date: new Date().getTime(), }, }); }; const onUpdate=(targetId)=>{ dispatch({ type:"UPDATE", targetId:targetId }) }; const onDelete=(targetId)=>{ dispatch({ type:"DELETE", targetId:targetId }); }; return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App 강의 10.2를 보던 중 '123'을 리스트에 추가하고 체크박스를 누르는 과정에서 체크박스와 삭제 버튼이 작동하지 않습니다. 기존에 있던 리스트들은 체크와 삭제가 다 되는데 추가된 리스트에 대해서만 작동하지 않는데 틀린 부분이 있는지 궁금합니다.

  타입 포함된 버전을 설치한 후에도 타입에러가 계속 생기는데버전이슈일까요.."dependencies": { "@ant-design/icons": "^5.5.2", "@apollo/client": "^3.11.9", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "antd": "^5.21.6", "axios": "^1.7.7", "graphql": "^16.9.0", "lodash": "^4.17.21", "next": "12.1.0", "react": "17.0.2", "react-daum-postcode": "^3.2.0", "react-dom": "17.0.2", "react-infinite-scroller": "^1.2.6", "ts-node": "^10.9.2" }, "devDependencies": { "@eslint/js": "^9.18.0", "@graphql-codegen/cli": "^5.0.3", "@graphql-codegen/typescript": "^4.1.2", "@types/node": "17.0.2", "@types/react": "17.0.2", "@types/react-infinite-scroller": "^1.2.5", "eslint": "^9.18.0", "eslint-config-next": "15.1.4", "eslint-config-prettier": "^10.0.1", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.37.4", "globals": "^15.14.0", "prettier": "^3.4.2", "typescript": "^5.7.3", "typescript-eslint": "^8.20.0""react-infinite-scroller": "^1.2.6", 이고"@types/react-infinite-scroller": "^1.2.5", 로 되어있습니다.++ return ( <div style={{ height: '700px', overflow: 'auto' }}> <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={hasMorePosts} loader={ <div className='loader' key='loader'> Loading... </div> } useWindow={false} > {data?.fetchBoards?.map((el) => el ? ( <div key={el._id}> <span style={{ margin: '10px' }}>{el.title}</span> <span style={{ margin: '10px' }}>{el.writer}</span> </div> ) : null, ) ?? []} </InfiniteScroll> </div> );1. InfiniteScroll 'InfiniteScroll' cannot be used as a JSX component. Its instance type 'InfiniteScroll' is not a valid JSX element. Property 'refs' is missing in type 'InfiniteScroll' but required in type 'ElementClass' 3. loader Type 'Element' is not assignable to type ReactElement<unknown, string | JSXElementConstructor<any>> Types of property 'key' are incompatible. TYpe 'Key | null' is not assignable to type 'string | null'. Type 'number' is not assignable to type 'string'. 4. {data?.~</div>;})} Type 'void[] | undefined' is not assignable to type 'ReactNode'.2. {data?.~</div>;})}Type 'void[] | undefined' is not assignable to type 'ReactNode'. (이하 생략)이런 에러였었는데,상단에 타입선언 해주고 모두 해결 되었습니다.import React, { ReactElement } from 'react'; declare module 'react-infinite-scroller' { interface InfiniteScrollProps { pageStart?: number; loadMore: () => void; hasMore?: boolean; loader?: ReactElement | null; useWindow?: boolean; children?: React.ReactNode; } export default function InfiniteScroll(props: InfiniteScrollProps): ReactElement; }모듈이 덜 설치된건지 ㅠㅠ 왜 이런 에러가 생긴지 모르겠네요 ㅠㅠ 

24년 12월에 결제하여 수강 중입니다올해 [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 강의가 오픈 된 것을 보았는데, 강의 간 내용에 많은 차이 점이 있을까요? 신규 강의를 수강하려면 재결제 하는 방법밖에 없을까요..?

안녕하세요! 비슷한 유형의 질문글을 보고 늦었지만 문의드리게 되었습니다. 공지를 늦게 확인하여 쿠폰을 받지 못했는데 혹시 지금이라도 발급이 가능할까요?

코드를 치고 control + s를 눌렀을 때 <button> 내부의 요소들이 정환님의 화면처럼 코드들이 세로 일렬로 되도록 세팅하고 싶은데 저는 가로 일렬로 배치가 돼요. 혹시 이 부분 세팅은 어떻게 하는지 알려주실 수 있으실까요?

안녕하세요. 강의 재밌게 잘 듣고 있습니다. 강의를 따라하는 중 브로드캐스팅 전송이 안 되어 글 남깁니다. [Nest] 41701 - 2025. 01. 21. 오전 10:08:29 ERROR [WsExceptionsHandler] Socket validation failed: userName: Path userName is required.ValidationError: Socket validation failed: userName: Path userName is required.위와 같은 로그가 발생하며 채팅이 다른 브라우저에 전송이 안 됩니다.(* 제 로컬에서는 username을 userName으로 사용중입니다.) 강사님 githup에 있는 내용을 가져와 실행시켜보아도 동일한 현상이 발생합니다.다른 분들은 정상작동하시나요?

리액트 종강으로 얻은 타입스크립트 할인 쿠폰인데 입력하니까 이렇게 뜨는데 그럼 못받는건가요 ㅜㅜ

안녕하세요 강사님! 항상 좋은 강의 감사합니다:)강의를 보던 중 강사님 께서는 update 단계에서 useEffect의 두번째 인수 deps를 생략하라고 하셨는데 아래와 같이 deps에 state값들(count, input)을 주고 변화 시켜도 콘솔에 생략했을 때와 똑같이 update가 출력되는 것을 확인했는데 무슨 차이인지 궁금합니다! <deps 생략 코드> useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }); <deps 추가 코드>useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }, [count, input]);

질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 =>vue 설치 수강 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지=> terminal에 npm~을 입력했는데 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오 라고 표기됨 작성하신 코드 및 오류 스크린샷 npm i -g @vue/cli 을 함께 첨부해주시면 좋아요!

제가 1번 일기 수정을 누르고 수정 페이지에 들어가면1번일기의 오늘의 일기 기본값으로 "1번 일기 내용"(원본 content) 있어야 하잖아요? 근데 content 표기는 안되고 placeholder만 보입니다.. 아래는 코드입니다import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Button from "./Button"; import "./Editor.css"; import EmotionItem from "./EmotionItem"; const emotionList = [ { emotionId: 1, emotionName: "완전 좋음" }, { emotionId: 2, emotionName: "좋음" }, { emotionId: 3, emotionName: "그럭저럭" }, { emotionId: 4, emotionName: "나쁨" }, { emotionId: 5, emotionName: "끔찍함" }, ]; const getStringedDate = (targetDate) => { // 날짜 -> YYYY-MM-DD let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if (month < 10) { month = `0${month}`; } if (date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; }; const Editor = ({ initData, onSubmit }) => { const [input, setInput] = useState({ createdDate: new Date(), emotionId: 3, content: "", }); const nav = useNavigate(); useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, []); const onChangeInput = (e) => { let name = e.target.name; let value = e.target.value; if (name === "createdDate") { value = new Date(value); } setInput({ ...input, [name]: value, }); }; const onClickSubmitButton = () => { onSubmit(input); }; return ( <div className="Editor"> <section className="date_section"> <h4>오늘의 날짜</h4> <input name="createdDate" onChange={onChangeInput} value={getStringedDate(input.createdDate)} type="date" /> </section> <section className="emotion_section"> <h4>오늘의 감정</h4> <div className="emotion_list_wrapper"> {emotionList.map((item) => ( <EmotionItem onClick={() => onChangeInput({ target: { name: "emotionId", value: item.emotionId, }, }) } key={item.emotionId} {...item} isSelected={item.emotionId === input.emotionId} /> ))} </div> </section> <section className="content_section"> <h4>오늘의 일기</h4> <textarea name="content" value={input.content} onChange={onChangeInput} placeholder="오늘은 어땠나요?" ></textarea> </section> <section className="button_section"> <Button onClick={() => nav(-1)} text={"취소하기"} /> <Button onClick={onClickSubmitButton} text={"작성완료"} type={"POSITIVE"} /> </section> </div> ); }; export default Editor;

https://codesandbox.io/p/sandbox/2-1-29k09?file=%2Fsrc%2Findex.js%3A9%2C1

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 버전으로 설치하였는데 잘 빌드되었습니다.이번 강의에서 유독 에러가 나서 해결하느라 시간이 들었는데 같은 에러 만나시는 분들께 도움이 될까 하여 공유드려요!