next.config.mjs/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, trailingSlash: true, generateBuildId: () => "tranme24", // 아래 주소들만 out 폴더에 만들기 exportPathMap: () => ({ "/": {page: "/"}, "/boards": {page: "/boards"}, "/404": {page: "/404"}, }) }; export default nextConfig; 위와같이 설정 경로에서 아래의 이미지와 같이 파일들이 동일한걸 확인했습니다.왜 안되는걸까요.

<input value={name} onChange={onChangeButton} placeholder={"이름"} />안녕하세요! 이번 강의 내용에서 return되는 부분에서 텍스트 박스를 형성하는 부분에 있는 위에 코드 부분에 대한 질문입니다! value={name}이 들어가는 이유는 무엇인가요?? 이 부분이 없어도 지장이 없는 것 같아 여쭤봅니다!

현재 실무에서 ORM(Prisma)을 채택해서 백엔드를 만들고 있어요.ORM으로 할 수록 Repository패턴과 조합이 좋지않다고 생각이 들고 실제 팀리더도 Repository패턴을 같이 쓰는거에 부정적이고 실제로 사용하지 않아요. 그렇다고 service 하나에 몰아 넣으니 저는 코드 읽기가 점점 힘들어지는거 같아요.대체할만한걸 검색해보니 CQRS패턴이나 Query Object가 나오는데 아니면 서비스파일을 여러개 두거나... 강사님 같은 경우에는 실무에서 어떻게 대처하시는지 궁금합니다.

강의대로 eslint 설정한 후 { "extends" : [ "react-app" ] } npm run dev 하면 아래와 같은 에러가 납니다.  VITE v6.0.3 ready in 354 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help오후 4:41:35 [vite] Internal server error:C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved✖ 1 problem (1 error, 0 warnings) Plugin: vite-plugin-eslint File: C:/Dev/fullstack-app/frontend/src/main.jsx at TransformPluginContext._formatError (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47158:41) at TransformPluginContext.error (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47153:16) at TransformPluginContext.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async EnvironmentPluginContainer.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18) at async loadAndTransform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)오후 4:41:35 [vite] Pre-transform error:C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved 파싱 오류 같은데 어느 설정파일을 수정해야 할까요?   

11:42아래와 같이 for in을 배열에서도 사용이 가능한 것 같습니다!다만 권장되지는 않는 방법이라고 하네요.let arr = [1, 2, 3]; for (let i in arr) { console.log(arr[i]); }권장되는 방법: for...of, 일반 for 루프, forEach() 메서드 등

많은 분들이 memo 기능 관련하여 문의 주신것 같은데 내용이 다 동일하네요.. 영상을 보면 변경 전/후 전부다 하이라이트가 표시가 되어서 리렌더링이 발생하는지 시각적으로 확인이 안됩니다. 문의 남기신 글에는 console.log로 확인을 하라고 하시는데.. 그럴것 같으면 강의 내용 자체가 바껴야 되는거 아닌가요?? 이 부분이랑 context 설명하는 부분도 마찬가지인데요.. context 설명할때 onUpdate, onDelete, onCreate는 useCallback을 사용하여 재생성을 방지하게 이미 설정되어있는데, 왜 memo 기능을 써야하나요?? 이 부분도 설명할때 화면상에 하이라이트가 전과 후 다 발생하는데.. 강사님 혼자 뭐 없어진거 확인하는데..화면상으로 전혀 확인이 안되는데.. 혼자 진행하시니 혼란스럽네요.. 확실하게 딱 표시가 나는게 아니라면 그에 대한 설명이 있어야 하지 않을까 싶습니다.

안녕하세요.컴포넌트 최적화 하는 부분에서 질문있습니다. 10.3강에서 대략 5분 40초쯤에 Header 컴포넌트에 memo 기능을 사용해서 최적화 한 뒤에, 체크박스를 클릭하면서 헤더 컴포넌트가 리렌더링이 일어났는지에 대해 확인하는 부분이 있습니다. 질문사항은 memo 기능을 통해 최적화를 하던 안하던 개발자 도구에서 Header 컴포넌트가 항상 리렌더링이 일어나는것 같은데 어떻게된걸까요? 헤더부분이 계속 노란색으로 뜨면 리렌더링이 일어났다는걸로 보이는데 강의 영상에서도 다른 컴포넌트와 동일하게 노란색으로 변경됩니다. 강의에서 TodoItem을 커스텀한 부분은 강의대로 적용됐습니다.(이부분은 리렌더링이 발생하지 않습니다.)

강의 재밌게 잘 들었습니다!다름아니오라 감정 일기장 실습 중 section12에서 궁금한 것이 생겼습니다생성된 일기를 삭제하면 "일기를 정말 삭제할까요? 다시 복구되지 않아요!" 컨펌 다이얼로그가 나타나는 건 잘됩니다.근데 ok 버튼을 클릭하면 바로 home 페이지로 이동하지 않고"존재하지 않는 일기입니다."라는 얼럿 다이얼로그가 그 다음으로 뜨고나서 ok 버튼을 클릭해야 home 페이지로 이동하게 됩니다.올려주신 정환님의 깃헙 소스 파일을 다운받아 실행시키면 이런 문제는 발생하지 않아서 어디를 고쳐야할지 막막합니다.제 소스 코드는 링크에 달아두었습니다.답변해주셔서 감사합니다!

안녕하세요! 강의 잘 수강하고 있습니다.강사님 코드를 따라하면서 하고 있는데,사진처럼 eslint에서 context를 따로 파일로 분리하여 관리하는 것을 하는 경고 메시지가 떠서 질문 드립니다.그래서 제가 context를 분리하려고 구글링을 해봤는데 잘 되지 않아서 혹시 분리는 어떻게 하면 될지 질문드립니다!

제목이 곧 내용입니다

3분 40초node -vnpm -v 은 다 되는데 init y 는 안됩니다 ..

안녕하세요....강의를 한번 다 듣고 다시 복습을 해보려고 하는데 처음부터 막혀버리네요ㅠㅠnode 를 설치했고, 작업폴더를 만든후 VS CODE 에서 오픈폴더를 했습니다. 터미널창에서 npm init 을 실행해서 엔터를 쳐서 완료했구요,간단하게 문장넣고 확인하는 부분에서부터 나오지를 않아서요 ㅠㅠ아래 질문을 검색해보니 비슷한 질문이 있어서 찾아봤는데요,작업폴더명이 혹시나 한글이면 안되나 싶어서 영문으로도 해봤는데 똑같이 안되구요윈도우계정 이름도 한글이 아니고 영문입니다. 혹시 외장하드에서 하면 안되는걸까요?외장하드에서 한글폴더면이 혹시 안되는건지요....예를들어 외장하드>리액트>1-node 이런식이어서 안되는걸까요?  

현재 투두리스트 렌더링하기 강의에서 List 컴포넌트 부분에서 todos.map을 돌리고 TodoItem 컴포넌트에 {...todo}로 mockData에 있는 객체를 구조분해할당으로 풀어서 키를 props로 전달하는데 전달할때 보통 todo={...todo} 이렇게 보내지 않고 그냥 {...todo} 이렇게 앞에 todo= 이런식으로 작성하지 않은 이유가 뭔지 궁금합니다.

build 할때는 별 문제없이 build 가 되었는데, vercel 에서 배포할때 문제가 발생했습니다. 에러는 import 시 오탈자 문제로, 직접 로그를 분석하여 해결했는데요. 궁금한점은 빌드 시에는 별 문제없었는데, 배포환경에서는 왜 문제가 발생하여 정상적으로 진행이 안되었는지가 궁금합니다.  항상 좋은 강의 감사합니다.

포트폴리오 강의를 보다가 질문이 생겼습니다.defaultValue 와 value 의 차이가 defaultValue 는 기존값이 수정되고, value 는 수정이 안된다는 것 뿐인가요? 그렇다면 value 는 값을 수정할 수 없으므로 readOnly 라는 코드를 빼도 되는것 아닌가요?그리고 아래의 코드는 삼항연산자로 되어 있는데 (props.address !=="" ) 이 거짓일때는 게시물 수정할 때를 의미하는것이 맞나요?제가 정확히 이해하고 있는지 의심이 들어서 질문 올립니다!그리고 BoardCommentWrite.presenter컴포넌트에서 value={props.writer} 라고 되어 있는데 defaultValue={props.writer} 라고 되어도 문제 없는게 맞나요? <S.Input placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.Address readOnly value={ props.address !== "" ? props.address : props.data?.fetchBoard.boardAddress?.address ?? "" } />

eslint 설치할 때 3개 중에 마지막 3번째 선택지가 없어서 수업질문 참고해서 yarn add eslint@8.0.1 설치를 하였습니다. 그다음에 npx eslint --init를 했는데 마지막에 강사님화면에서는 Would you like to install them now? · No / Yes 이렇게 되어있고 여기서 yes하면 Which package manager do you want to use? npm yarn pnpm 이런식으로 뜨는데 저는 Would you like to install them now with npm? · No / Yes 이렇게 바로 떠서 yes를 누르면 바로 설치가 됩니다.(no 눌려도 그냥 설치돼요) 근데 설치하고 나면 이런 사진과 같은 오류가 떠요 안되는 경우 방법으로 1. yarn.lock, node_modules, .eslintrc.js 파일을 지워주시고,2. 다시 한 번 위의 순서로 eslint를 설치해 주세요! 이것도 다 따라했는데 계속 똑같아요  지피티한테 물어보니까주요 경고 및 문제:package-lock.json 감지 경고프로젝트에 yarn.lock과 package-lock.json이 동시에 존재합니다. Yarn과 npm을 섞어 사용하면 의존성 문제나 충돌이 발생할 수 있으므로, 하나의 패키지 매니저만 사용하는 것이 좋습니다.해결책: package-lock.json 파일을 삭제하고 Yarn을 계속 사용하거나, 반대로 Yarn을 포기하고 npm을 사용하세요.의존성 경고 (peer dependency 불일치)예를 들어, @typescript-eslint/eslint-plugin이 eslint 버전 8.57.0 이상을 요구하지만 현재 설치된 버전은 8.0.1입니다.해결책: 경고를 무시하지 않고, 요구 사항에 맞는 최신 버전을 설치하세요 yarn add eslint@^8.57.0eslint@8.0.1 버전 경고설치된 eslint 버전 8.0.1은 더 이상 지원되지 않는 버전입니다. 최신 버전으로 업그레이드하세요.해결책yarn add eslint@latest의존성 중 사용 중단된 모듈예를 들어, glob@7.2.3과 inflight@1.0.6이 더 이상 지원되지 않습니다.이는 주로 간접 의존성에서 발생하며, 해당 모듈의 최신 버전으로 업데이트하거나, 의존성을 최신으로 맞춰야 할 수 있습니다.이런식으로 알려주는데 뭐 아무거나 못건들겠어요 잘못될 것같아서 뭐가 잘못된걸까요 ?

안녕하세요 리액트 부분에 대해 강의를 듣다가 vite라는 내용이 나오던데 이 vite를 설치하니 src나 index.html 등등 여러 파일들이 설치가 되고 src폴더에서는 App.tsx 파일명으로 나오더라구요. 여기서 조금 헷갈리는 것이 npx create-react-app 설치와 비슷한데 이 vite는 정확히 무엇이고 또 npx create-react-app 이 부분과 다른건지도 궁금합니다.

PS C:\Users\jjoob\myfirstmap\myfirstmap> nodemon ./bin/www[nodemon] 3.1.7[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: js,mjs,cjs,json[nodemon] starting node ./bin/wwwnode:internal/modules/cjs/loader:1252 throw err; ^Error: Cannot find module 'morgan'Require stack:- C:\Users\jjoob\myfirstmap\myfirstmap\app.js- C:\Users\jjoob\myfirstmap\myfirstmap\bin\www at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15) at Function._load (node:internal/modules/cjs/loader:1075:27) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:218:24) at Module.require (node:internal/modules/cjs/loader:1340:12) at require (node:internal/modules/helpers:141:16) at Object.<anonymous> (C:\Users\jjoob\myfirstmap\myfirstmap\app.js:5:14) at Module._compile (node:internal/modules/cjs/loader:1546:14) at Object..js (node:internal/modules/cjs/loader:1689:10) at Module.load (node:internal/modules/cjs/loader:1318:32) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\jjoob\\myfirstmap\\myfirstmap\\app.js', 'C:\\Users\\jjoob\\myfirstmap\\myfirstmap\\bin\\www' ]}Node.js v22.11.0[nodemon] app crashed - waiting for file changes before starting...PS C:\Users\jjoob\myfirstmap\myfirstmap>  다 지우고 처음부터 다시 실행해봐도 계속 같은 오류이고localhost:3000 실행하면 흠… 이 페이지에 연결할 수 없습니다.localhost이(가) 연결을 거부했습니다. 이렇게 나오네요 ㅠ (nodemon ./bin/www 입력 시 오류)

안녕하세요 피그마 접속 하려고 하는데 이런 팝업창이 뜨면서 안열립니다..구글검색 후 webGL 설정하는 것 까지 해보았는데 안열리네요 ㅠㅠ

yarn add --dev husky 명령어를 사용후,npx husky install 명령어를 사용했는데 husky - install command is DEPRECATED 라는 오류가 계속해서 발생합니다. .git도 생성되어 있는데 어떻게 해결해야할지 모르겠어서 질문합니다