묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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
[자체 해결]삭제하기 시 경고 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
데이터 패칭 관련 질문 드립니다.
안녕하세요 이정환 강사님.인스타의 위치검색기능과 비슷한 기능을 구현하고 있습니다.조회버튼을 클릭해서 serachParams를 서버컴포넌트로 전달하는 형식이 아니라 검색어가 입력되면 바로 검색해서 결과를 출력해야 하는 페이지인 경우에는 전부 클라이언트 컴포넌트로 구성해야 하나요?어떤식으로 구성해야 Next의 장점을 최대한 살릴 수 있는지 궁금합니다.
-
미해결따라하며 배우는 리액트 네이티브 기초
android studio에서 시뮬레이터를 실행시 cpu 과도 사용 질문
안드로이드 스튜디오에서 시뮬레이터를 실행시키면 cpu와 메모리가 거의 100%프로에서 안떨어지려고 하는데 이거 낮추는 방법 없을까요..?
-
미해결Next + React Query로 SNS 서비스 만들기
게시글 삭제하기
안녕하세요 제로초님! 게시글 삭제하기 기능을 구현하고 있습니다!구현해도 안되길래 스웨거가서 테스트를 하고 서버를 봤더니 오류가 나더라구요혹시 이유를 알 수 있을까요??
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
node init 설치가 안됩니다.
3분 40초node -vnpm -v 은 다 되는데 init y 는 안됩니다 ..
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
강의 프로젝트는 Todo리스트 인가요 쇼핑몰 인가요?
안녕하세요 강사님.현재 섹션5를 보고 있는데 프로젝트가 어떤 프로젝트인지 헷갈려서 질문 드립니다. 섹션 1,2,3 을 보면 투두리스트 인것 같은데갑자기 섹션4부터는 product나 상품들도 나오고, 그 뒤 섹션들을 보면 장바구니도 나오고 하던데 최종적으로는 어떤게 만들어지는 건가요?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
popover createPortal 방식에서
portal할 요소를 아래처럼 작성하고 있는데<div id="popoverRoot" /> 저는 이거를 popover를 사용하는 개발자가 신경안쓸 수 있도록 하는 방법이 있지않을까 해서 두 가지 방법을 생각했는데하나는 useLayoutEffect 내부에서 아래와 같은 로직으로 div요소를 만드는 방법하고, useLayoutEffect(() => { if (typeof window !== 'undefined') { const portalElement = document.getElementById(portalId) if (!portalElement) { const newPortalElement = document.createElement('div') newPortalElement.id = portalId document.body.appendChild(newPortalElement) } } }, [])아니면 document.body로 보내는 방법을 생각했는데 return createPortal( ... , document.body )두 방법 중 어느게 적절한지를 잘 모르겠어서..혹은 위 방법처럼 했을 때 어떤 문제가 생기는지도 아직 예상이 안되는데 혹시 강사님의 생각은 어떠신지 궁금합니다!
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
개발 서버가 실행 안 되는 문제
npm install 설치한 뒤 개발 서버 키기 위해서 npm run dev 입력했는데 이런 에러가 뜹니다.인터넷 찾아 본 결과 npm install watchman 이거 해줘야 에러 안 나는 거 알고 있지만, 번번이 프로젝트 생성할 때마다 이런 에러가 꼭 뜹니다. 혹시 해결 방법이 있을까요?