useState는 componet의 구성요소의 상태값일 관리하고상태변환시에 biz처리 및 관련된 자식 구성요소로 props 전달을 하고자 할때 사용하는 것으로 강의를 이해했습니다.반면 useErrect는 라이프싸이클을 통해 biz 로직을 구현하고자 할때 사용하는 것으로 아래 이했습니다.mount - 초기 실행시 (초기 데이터 설정-db select통한 값을 설정 처리 등)update - state에서 관리되는 상태에 대한 실시간 확인과 처리(useState의 setXXXX는 비동기로 실시간 값이 어려워 useEffect를 활용해 v실시간 alidation을 체크하는데 있을것으로 이해하였습니다.질문)실무에서 useEffect의 어떻게 활용하나요?지금은 hook을 배우는 단계라 실무에서 어떻게사용될지도 많이 궁금합니다. 

터미널에서 npx expo start 하면...아래의 오류가 납니다.휴대폰 화면은 뜨는데요.빨간색오류가 뜨면서 Welcome! 화면이 뜨질 않습니다.무엇일까요?   

터미널에서 npm install -g create-react-app 작성 후에아래와 같은 메세지가 뜹니다.이럴 경우 어떻게 해야 하나요??adminui-MacBook-Pro:grab-market-web admin$ npm install -g create-react-appnpm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.npm warn deprecated uid-number@0.0.6: This package is no longer supported.npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated fstream@1.0.12: This package is no longer supported.npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.changed 64 packages in 968ms4 packages are looking for funding run npm fund for detailsadminui-MacBook-Pro:grab-market-web admin$

function solution(s) { const dic = {} s.split("").forEach((el) => { if (dic[el]) { dic[el]++ } else { dic[el] = 1 } }) const newStr = [...new Set(str.split(""))] return newStr .map((el) => { if (dic[el] && dic[el] !== 1) { return (el += dic[el]) } else { return el } }) .join("") } let str = "KKHSSSSSSSE" console.log(solution(str)) 먼저 오브젝트에 몇 개의 문자가 몇 번 등록되어있는지 저장한 후 set으로 중복을 제거해서 뼈대를 만들었습니다.그 다음으로 반복문을 이용해서 오브젝트를 탐색해 뼈대에 문자열을 합성해주는 방식으로 풀었습니다. 답안에 비해 좀 복잡한 것 같은데 놓치거나 시간,공간복잡성에서 손해가 클까요?

npx eas build --platform android --profile development위의 명령을 치면...장시간 build 작업후에 도스창 같은 것이 2개 뜨다가 오류가 납니다. 그래서 휴대폰 창이 뜨지 않습니다.어떤 상황 일까요?  

투두 리스트 작성 앱 개발에서 다음과 같이 콜백함수에 중괄호를 사용하니 제대로 동작하지 않더군요. 그래서 중괄호를 제거하니 올바르게 작동하는데, 통상적으로는 중괄호를 사용해야 하잖아요. 중괄호를 사용할 때 왜 제대로 작동하지 않는지 그 이유가 궁금합니다. 아래 코드에서 첫 번째 코드는 제대로 동작하지 않는 코드이고, 두 번째 코드는 제대로 동작하는 코드입니다. (아래 코드에서 todos.filter 메서드에 주목해 주세요.) const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => { todo.content.includes(search) }); } const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => todo.content.includes(search) ); }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요  안녕하세요 버튼이 안 떠서 질문드립니다 오타는 없는 것 같은데 버튼이 안 나오네요    

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'을 리스트에 추가하고 체크박스를 누르는 과정에서 체크박스와 삭제 버튼이 작동하지 않습니다. 기존에 있던 리스트들은 체크와 삭제가 다 되는데 추가된 리스트에 대해서만 작동하지 않는데 틀린 부분이 있는지 궁금합니다.

[Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RoutesResolver] CommonController {/common}: +1ms[Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RouterExplorer] Mapped {/common/image, POST} route +0ms[Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RoutesResolver] ChatsController {/chats}: +0ms/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:153 throw new TypeError(`Missing parameter name at ${i}: ${DEBUG_URL}`); ^TypeError: Missing parameter name at 9: https://git.new/pathToRegexpError at name (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:153:13) at lexer (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:171:21) at lexer.next (<anonymous>) at Iter.peek (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:188:32) at Iter.tryConsume (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:195:24) at Iter.text (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:213:26) at consume (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:285:23) at parse (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:320:18) at /Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:503:40 at Array.map (<anonymous>)yarn add하여 위 에러가 발생해서 찾아보니 express 5.0.0일때 나타나는 에러라고 하네요.25년 1월기준 yarn add 커맨드 입력당시 nestjs 10.x.x -> 11.x.x로 되면서 발생한 에러라서 다운그레이드하니 해결되긴 했습니다.다른 수강생들에게 도움이될까 하여 남깁니다.

"devDependencies": { "@nestjs/cli": "^10.4.9", "@nestjs/schematics": "^10.2.3", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/pg": "^8", "@types/supertest": "^6.0.0", "@yarnpkg/pnpify": "^4.1.3", "dotenv": "^16.4.7", "dotenv-cli": "^8.0.0", "jest": "^29.5.0", "source-map-support": "^0.5.21", "supertest": "^7.0.0", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "~5.3", "webpack": "^5.97.1" },dotenv랑 dotenv-cli 설치하고"start:dev": "dotenv -e .env nest start --watch", "start:debug": "dotenv -e .env -- yarn dlx @nestjs/cli start --debug --watch",하면 정상적으로 동작합니다!  

질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 수업 내용에는 없는 질문이긴 한데ㅠㅠSCSS 에서 @keyframes 사용은 어려운건가요? 구글링한 정보로는 적용이 안되서요ㅠㅠ

if (true) { let y = 'hi'; function test() { console.log(y); } } console.log(y); // ReferenceError: y is not defined test(); // hi위 코드 실행 시 console.log(y)는 참조 에러, test()는 'hi'가 출력되어집니다.제가 알기론 자바스크립트는 코드 블럭이 아닌 함수에 의해서 지역 스코프가 생긴다(함수 레벨 스코프)고 알고 있습니다. 따라서 if문(블록문) 내에 정의한 test 함수를 전역에서 호출해도 에러가 발생하지 않는 것이고요.let, const 키워드로 선언한 변수의 경우 블록 레벨 스코프를 가지기 때문에 전역에서 y 변수 참조 시 참조 에러가 발생하는 것도 이해할 수 있습니다.제가 궁금한 것은test 스코프의 상위 스코프는 전역 스코프가 아닌지?test 스코프의 상위 스코프가 if문 블록 스코프라면 전역에서 test함수 호출 시 참조에러가 발생해야하는거 아닌가요?(엄격 모드일 경우 참조에러 발생, 비엄격 모드일 땐 위 처럼 'hi'출력)그렇다면 test 함수 내에서는 y를 참조할 경우 test 함수 내부에 y가 있는지 찾은 후 없기 때문에 스코프 체인에 따라 전역에 y가 있는지 찾고 이 경우에도 없기 때문에 참조에러가 발생해야하는 것이 아닌지? 어떻게 블록 레벨의 'hi'를 찾을 수 있는지?입니다.잘못된 개념이 있다면 알려주시면 감사하겠습니다 ㅜㅜ

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

import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; import prettierPlugin from "eslint-plugin-prettier"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); const eslintConfig = [ ...compat.extends("next/core-web-vitals"), ...compat.extends("plugin:prettier/recommended"), { files: ["**/*.js", "**/*.jsx"], plugins: { prettier: prettierPlugin, }, rules: { "no-undef": "error", "prettier/prettier": [ "error", { singleQuote: true, semi: true, tabWidth: 2, trailingComma: "all", printWidth: 80, bracketSpacing: true, arrowParens: "avoid", }, ], }, }, ]; export default eslintConfig;

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM  위 코드는 만료됬다고 나옵니다.

하아 너무 답답하네요레거시나 베타버전 다 설치해봤고,충돌일까싶어서 한개씩만 설치도 해봤는데안됩니다...강의의 반만 따라가는 것 같아서 참 답답합니다...어떻게 해결방법이 없을까요?

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

안녕하세요, 선배님. 저는 현재 서버 개발 경력 1년, 클라이언트 개발 경력 6개월 나머지 유지 보수 경력들을 포함해 약 3년 차에 접어든 주니어 개발자입니다. 지금은 주로 서버 개발자로 활동하고 있지만,최근 진로와 관련된 고민이 많아 선배님께 조언을 구하고자 이렇게 글을 드립니다.제 성향은 백엔드 개발이 잘 맞는다고 느끼고 있지만, 프론트엔드 개발에 대한 관심이 점점 커지고 있습니다. 특히 서비스중이신 강의들을 들으면서 프론트엔드를 바라보는 시각이 완전히 달라졌고, 점점 더 매력을 느끼고 있는 상황입니다. 이제는 어느 정도 마음의 결정을 내려야 할 시점이라는 생각이 들어,전문적으로 어떤 커리어를 선택해야 할지 고민하고 있습니다.프론트엔드와 백엔드 모두 매력적인 분야이지만, 새로운 도전을 선택하는 것이 맞는지, 아니면 제가 잘 맞고 경험이 더 많은 백엔드에 집중하는 것이 맞는지 아직 명확히 판단하기 어렵습니다.선배님의 경력을 살펴보니 주로 자바스크립트를 중심으로 다양한 개발 작업을 해오신 것으로 알고 있습니다. 서버 개발도 분명 경험하셨을 것 같고, 저와 비슷한 고민을 해보셨을 것 같아 더욱 궁금해졌습니다.혹시 선배님께서도 과거에 프론트엔드와 백엔드, 혹은 특정 기술 스택 사이에서 고민하셨던 적이 있으셨나요?  그리고 그러한 고민 끝에 무엇이 선배님을 자바스크립트라는 언어로 전문성을 갖추고 커리어를 쌓게 만든 결정적인 요인이었는지 궁금합니다.  선배님의 선택 과정이나 기준이 저에게도 많은 영감을 줄 수 있을 것 같습니다.혹시 선배님께서 제가 이런 결정을 내리는 데 참고할 수 있는 조언이나 방향성을 제시해 주실 수 있을까요? 선배님의 경험과 지혜를 조금이라도 나눠주신다면 큰 힘이 될 것 같습니다.긴 글 읽어주셔서 감사드리고, 좋은 하루 보내시길 바랍니다. 감사합니다!

const workA = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workA`); }, 5000); }); }; const workB = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workB`); }, 3000); }); }; const workC = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workC`); }, 10000); }); }; const start = async () => { try { let results = await Promise.all([workA(), workB(), workC()]); console.log(results); results.forEach((res) => console.log(res)); } catch (err) { console.log(err); } };[10:01] 강의 내용 보면 workA가 5초 workB가 3초, workC가 10초인데, 결국 출력 되는 값을 보면 동시에 출력이 됩니다.그리고 순서도 A, B, C 순입니다.let resultA = await workA(); let resultB = await workB(); let resultC = await workC(); console.log(resultA); console.log(resultB); console.log(resultC);물론 실행시간의 차이는 있지만, 실직적으로 프로그램에 표기 되는 값은 바로 위에 있는 코드예제에서 보여주신 A, B, C랑 같은데, 병령처리라면 시간이 짧은 B가 실행되고 그 다음에 A, 그 다음 C가 아웃풋으로 나와야 하는거 아닌가요??

안녕하세요 강사님! 항상 좋은 강의 감사합니다:)강의를 보던 중 강사님 께서는 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]);