묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
npm run build 시 에러가 발생합니다.
안녕하세요 강의 실습도중에 에러가 발생하였는데 원인을 찾지못해서 질문드립니다..1.3)실습용 백엔드 서버 세팅하기 강의에서 12:11분에 npm run seed 명령어로 시드데이터도 받아지는것을 확인했습니다. (그 이전까지의 실습도 에러없이 정상적으로 실행했습니다.) 이후에 npm run build를 실행해보니 아래와 같은 에러가 발생해서 질문드립니다.=================================C:\study\React\onebite-books-server-main>npm run build> onebite-books-server@0.0.1 build> nest buildsrc/book/book.service.ts:22:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.22 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:28:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.28 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:35:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.35 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:56:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.56 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:70:31 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.70 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:88:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.88 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/util/prisma-client-exception.filter.ts:6:15 - error TS2339: Property 'PrismaClientKnownRequestError' does not exist on type 'typeof Prisma'.6 @Catch(Prisma.PrismaClientKnownRequestError) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~src/util/prisma-client-exception.filter.ts:8:27 - error TS2694: Namespace '"C:/study/React/onebite-books-server-main/node_modules/.prisma/client/default".Prisma' has no exported member 'PrismaClientKnownRequestError'.8 catch(exception: Prisma.PrismaClientKnownRequestError, host: ArgumentsHost) { ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Found 8 error(s).
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이번 section에서 소소한 의문점 질문 남깁니다!
안녕하세요! 늘 강의 잘 듣고 있습니다 (__)이번 section에서 소소한 의문점이 하나 남아서 질문 글 남깁니다. 먼저 강의에서 작성해주신 아래의 코드 블럭 말인데요, // mount가 됐는지 확인 하는 ref 변수 const isMount = useRef(false); // 1. 마운트 : 탄생 useEffect(() => { console.log("mount"); }, []); // 2. 업데이트 : 변화, 리렌더링 useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update!"); });isMount ref 변수가 현재 컴포넌트의 마운트 여부를 체크하는 변수로 만들어졌는데, 그렇다면 마운트 시점에서 true로 갱신해줘야하는게 아닌가 싶어서요. 기본적으로 컴포넌트가 마운트 되면 컴포넌트가 만들어졌다, 즉 변화 했다라고도 할 수 있는거니, update 로직도 같이 실행 되어야 하는게 맞지 않나 라는 의문이 들었습니다. 위 예시는 제가 이해한대로 해석하면 "컴포넌트가 마운트가 되었지만 처음 시점의 update 로직은 패스한다" 라고 생각되는 느낌이라서 살짝 애매하게 느껴집니다. 그래서 아래와 같이 // 1. 마운트 : 탄생 useEffect(() => { console.log("mount"); // mount 시점에서 실행 될 프로세스 start // mount 시점에서 실행 될 프로세스 end // 모두 마무리시 if (!isMount.current) { isMount.current = true; } }, []); // 2. 업데이트 : 변화, 리렌더링 useEffect(() => { // update 프로세스 진행 console.log("update!"); });마운트 시점에서 동작하는 프로세스가 마무리 된 후 isMount를 갱신하고, 그 다음 update 시점은 이미 마운트가 되어야지만 동작하는거니 별도의 mount 체크 필요없이 update 프로세스를 작성하면 되지 않나 싶었습니다. 물론 이렇게 되면 isMount 자체를 현 시점에서 사용 할 이유가 없으니 애매해지긴 하겠지만요.. 글 재주가 없어서 질문이 좀 난해해서 죄송합니다 ㅠㅠ 강사님께서는 이에 대해 어떻게 생각하시는지 질문 드립니다!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.3강 memo(Header) 리렌더링 질문
안녕하세요.컴포넌트 최적화 하는 부분에서 질문있습니다. 10.3강에서 대략 5분 40초쯤에 Header 컴포넌트에 memo 기능을 사용해서 최적화 한 뒤에, 체크박스를 클릭하면서 헤더 컴포넌트가 리렌더링이 일어났는지에 대해 확인하는 부분이 있습니다. 질문사항은 memo 기능을 통해 최적화를 하던 안하던 개발자 도구에서 Header 컴포넌트가 항상 리렌더링이 일어나는것 같은데 어떻게된걸까요? 헤더부분이 계속 노란색으로 뜨면 리렌더링이 일어났다는걸로 보이는데 강의 영상에서도 다른 컴포넌트와 동일하게 노란색으로 변경됩니다. 강의에서 TodoItem을 커스텀한 부분은 강의대로 적용됐습니다.(이부분은 리렌더링이 발생하지 않습니다.)
-
미해결Next + React Query로 SNS 서비스 만들기
usePathname 과 /explore 페이지 부분은 좀 너무 빠르네요...
밑에 수업노트에 주신 링크도 그 파일이 아니라 깃헙 레포로 연결되고, 너무 빠르네요 ㅠㅠ _component 부분 보면 RightSearchZone 컴포넌트도 없어서 좀 헤매게 되는 것 같습니다...css 내용도 갑자기 어디서 튀어나온건지 좀 파악이 어렵네요 ㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
[next15] msw 질문드립니다.
기존에 강의로 msw로 코드만들었던 수강생입니다.여러개의 질문과 에러?라고할만한 사항이 있는데요.기존강의에는 http.js 파일에서 express 기반으로 서버를 만들어서 9090포트를 사용했는데요. 새로 강의하신 내용에서는 express를 배제하고 코드가 간결하게 바꿨는데 이렇게 바꾼 내용의 대해서 조금 설명 부탁드립니다. 간략히 알기로는 기존 MSW는 클라이언트(브라우저)에서 동작하기 때문에 서버에서 html 요청이 발생하기 때문에 요청을 가로챌수 없기 때문에 express썻다고 알고있습니다. 이게 맞을까요? 그리고 바뀐코드는 이런문제가 해결이 된건가요?1번의 문제가 해결되었다면, 기존의 9090 서버포트와 더불어 npm run mock를 실행하여 서버를 동작했던걸로 알고있는데 이기능은 필요한가요?msw 세팅과 .env 강의부분에서 환경변수를 api에 직접 넣도록 수정했는데, 이전꺼랑 차이가 뭔가요? 추가로 클라이언트컴포넌트에서는 환경변수가 콘솔로 읽히고있는데 handler에서는 읽히지 않고있습니다. 코드는 이전강의 코드(백엔드 db연결전까지)와 같고요. 추가로 nextjs나 react를 버전업을 하지는 않았습니다. 이유가뭔지 유추해주실수있을까요?
-
해결됨처음 만난 리액트(React)
React app 설치 시 문제
위와 같이 노드와 npm 이 을 설치하였습니다. 그리고 나서 PS C:\Users\Kim_Seung_Yeon> npx create-react-app my-app Creating a new React app in C:\Users\Kim_Seung_Yeon\my-app. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-debug-0.log `npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
섹션7: gson 오류
강의 설명에 따라 build.gradle에 implementation 'com.google.code.gson:gson:2.10.1' 입력 후 이 오류 때문에 강의를 더 이상 진행할 수가 없습니다. 오류로 인해 ./gradlew clean build --refresh-dependencies 터미널에도 실행해보고configurations.all { resolutionStrategy { force 'com.google.code.gson:gson:2.10.1' } } 이 코드도 추가해서 해결해 보려 했으나, 오류가 해결되지 않았습니다. 도움 부탁드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
section12에서 존재하지 않는다는 얼럿이 뜹니다.
강의 재밌게 잘 들었습니다!다름아니오라 감정 일기장 실습 중 section12에서 궁금한 것이 생겼습니다생성된 일기를 삭제하면 "일기를 정말 삭제할까요? 다시 복구되지 않아요!" 컨펌 다이얼로그가 나타나는 건 잘됩니다.근데 ok 버튼을 클릭하면 바로 home 페이지로 이동하지 않고"존재하지 않는 일기입니다."라는 얼럿 다이얼로그가 그 다음으로 뜨고나서 ok 버튼을 클릭해야 home 페이지로 이동하게 됩니다.올려주신 정환님의 깃헙 소스 파일을 다운받아 실행시키면 이런 문제는 발생하지 않아서 어디를 고쳐야할지 막막합니다.제 소스 코드는 링크에 달아두었습니다.답변해주셔서 감사합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context 분리
안녕하세요! 강의 잘 수강하고 있습니다.강사님 코드를 따라하면서 하고 있는데,사진처럼 eslint에서 context를 따로 파일로 분리하여 관리하는 것을 하는 경고 메시지가 떠서 질문 드립니다.그래서 제가 context를 분리하려고 구글링을 해봤는데 잘 되지 않아서 혹시 분리는 어떻게 하면 될지 질문드립니다!
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
프로젝트 생성 명령어 입력 후 에러
안녕하세요. 강의 따라서 "폴더에 바로~ 타입스크립트 프로젝트 생성하는 명령어"라고 입력 후 명령어 실행했는데 바로 저렇게 에러가 떴는데 이 부분 어떻게 해결해야 하나요? ㅠ저는 D드라이브에 폴더 새로 만든 후 진행했습니다
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
섹션5 - 이미지 없이 업로드 해도 1개 있는 거로 나옵니다.
섹션5에서 상품 이미지가 없는 상태로 add나 modify 를 하면 uplaod 폴더에 uuid 값만 있는 파일이 하나 생성됩니다. 혹시나 하고 CustomFileUtil 파일의 saveFiles 메서드에서 로그를 찍어봤는데 이미지 없이 넘겨도 files.size() 가 1이 나오던데 어떻게 해야 할까요?강사님 자료 받아서 돌려도 같은 결과가 나옵니다.. 아래 이미지는 등록 시 이미지 없이 시도한 결과입니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
초기세팅중 packge.json 에러떠요
폴더에 있는 패키지들이 모두 에러인데 axios쪽인거 같은데 어떻게 해결하면될까요..
-
미해결Next + React Query로 SNS 서비스 만들기
새로 올라온 강의 영상에 문제가 있는거 같습니다.
"섹션4 그런데 백엔드 개발자가 API를 아직 못 만들었다"의 "msw 세팅과 .env" 강좌가 8분 38초까지 영상이 검은 화면으로 나옵니다. 해당 영상에서 검은 화면 중간 중간 노란색 안내 문구는 나오는 것과 다른 영상에서는 해당 증상이 보이지 않은 것으로 보아서 제 환경에서 해결할 수 없는 문제로 보이는데, 확인 한번 부탁드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
1.4 강의에서 코드 작성할때 가이드텍스트 뜨는 확장 프로그램 뭔지 알수있을까요?
제목이 곧 내용입니다
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
섹션 4 목록 처리(1)
강의를 따라가서modify 버튼을 누르니http://localhost:3000/todo/modify/[object%20Object]?page=1&size=10이렇게 나오더라구요그래서 섹션2 맨 마지막 강의를 찾아보니modifyPage.js가 아래와 같았습니다.import React from 'react'; function ModifyPage(props) { return ( <div className={'text-3xl font-extrabold'}> Todo Modify Page </div> ); } export default ModifyPage;2장 pdf의동적페이지 이동: 수정/삭제 처리 후 이동 에는import { useNavigate } from "react-router-dom"; const ModifyPage = ({tno}) => { const navigate = useNavigate() const moveToRead = () => { navigate({pathname:`/todo/read/${tno}`}) } const moveToList = () => { navigate({pathname:`/todo/list`}) } return ( ); <div className="text-3xl font-extrabold"> Todo Modify Page </div> } export default ModifyPage;이렇게 나와있구요어떻게 수정해야될까요?참고로 위에 코드로 수정하면 export 어쩌구 하면서 오류가 나네요.. 참고로 리스트 버튼을 누르면http://localhost:3000/todo/list?page=1&size=10잘 넘어갑니다.. 추가위에 두번째 코드처럼 ModifyPage.js를 수정해도 결과는 동일하게http://localhost:3000/todo/modify/[object%20Object]?page=1&size=10이렇게 나오네요..어떤 부분을 봐야할까요?쳇지피티에 물어보니백틱 문제라고 하는데 백틱도 적용했지만 해결이 안되네요..해결했습니다..onClick={() => moveToModify(todo.tno)}이 부분이 문제였던 것 같습니다.!!!!!!!!!!!!!!!!!!!pdf와 강의가 다른 부분에 대한 답변만 부탁드리겠습니다!
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
[자체 해결]삭제하기 시 경고 alert 출력
안녕하세요. 7.7)리뷰 삭제 기능 구현하기를 하는 중인데, 혹시 바로 삭제하지 않고 중간에 alert 같은 걸로 정말 삭제할지 체크하고 그 다음에 삭제하는 식으로는 어떻게 하면 좋을까요? form 태그에 onsubmit을 달아서 중간에 끼어드는? 방식으로 해볼까 했는데, 뭔가 useActionState랑 호환을 어떻게 해야할지 잘 모르겠네요...아래 코드를 작성해서 해결했습니다! const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const confirmDelete = confirm(`댓글을 정말 삭제하시겠습니까?`); if (confirmDelete) { const form = e.currentTarget; form.requestSubmit(); // 폼을 강제로 제출 } };
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
데이터 패칭 관련 질문 드립니다.
안녕하세요 이정환 강사님.인스타의 위치검색기능과 비슷한 기능을 구현하고 있습니다.조회버튼을 클릭해서 serachParams를 서버컴포넌트로 전달하는 형식이 아니라 검색어가 입력되면 바로 검색해서 결과를 출력해야 하는 페이지인 경우에는 전부 클라이언트 컴포넌트로 구성해야 하나요?어떤식으로 구성해야 Next의 장점을 최대한 살릴 수 있는지 궁금합니다.
-
미해결따라하며 배우는 리액트 네이티브 기초
android studio에서 시뮬레이터를 실행시 cpu 과도 사용 질문
안드로이드 스튜디오에서 시뮬레이터를 실행시키면 cpu와 메모리가 거의 100%프로에서 안떨어지려고 하는데 이거 낮추는 방법 없을까요..?
-
미해결Next + React Query로 SNS 서비스 만들기
게시글 삭제하기
안녕하세요 제로초님! 게시글 삭제하기 기능을 구현하고 있습니다!구현해도 안되길래 스웨거가서 테스트를 하고 서버를 봤더니 오류가 나더라구요혹시 이유를 알 수 있을까요??
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
node init 설치가 안됩니다.
3분 40초node -vnpm -v 은 다 되는데 init y 는 안됩니다 ..