172만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요 강사님. 현재 섹션5를 보고 있는데 프로젝트가 어떤 프로젝트인지 헷갈려서 질문 드립니다. 섹션 1,2,3 을 보면 투두리스트 인것 같은데 갑자기 섹션4부터는 product나 상품들도 나오고, 그 뒤 섹션들을 보면 장바구니도 나오고 하던데 최종적으로는 어떤게 만들어지는 건가요?
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 2
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 이거 해줘야 에러 안 나는 거 알고 있지만, 번번이 프로젝트 생성할 때마다 이런 에러가 꼭 뜹니다. 혹시 해결 방법이 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요....강의를 한번 다 듣고 다시 복습을 해보려고 하는데 처음부터 막혀버리네요ㅠㅠ node 를 설치했고, 작업폴더를 만든후 VS CODE 에서 오픈폴더를 했습니다. 터미널창에서 npm init 을 실행해서 엔터를 쳐서 완료했구요, 간단하게 문장넣고 확인하는 부분에서부터 나오지를 않아서요 ㅠㅠ 아래 질문을 검색해보니 비슷한 질문이 있어서 찾아봤는데요, 작업폴더명이 혹시나 한글이면 안되나 싶어서 영문으로도 해봤는데 똑같이 안되구요 윈도우계정 이름도 한글이 아니고 영문입니다. 혹시 외장하드에서 하면 안되는걸까요? 외장하드에서 한글폴더면이 혹시 안되는건지요.... 예를들어 외장하드>리액트>1-node 이런식이어서 안되는걸까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 강의 애청자(?) 입니다. React Server Component가 도입된 후에 interaction이 필요한 component(Client component)만 JS Bundle에 포함시켜서 Browser로 보냄으로써 JS Bundle의 불필요한 계산(용량)을 줄일 수 있다고 말씀하셨습니다. 그렇다면 여기서 궁금한것이 React Server Component를 설명해주시기 전에 Pre Fetching에서 JS Bundle에는 사실 현재 Page에 필요한 JS Bundle만 전달된다. 이유는 용량이 커지면 hydration이 지연되기 때문. 그 후에 Pre fetching으로 나머지 연결된 모든 Page의 JS Bundle을 불러온다고 설명해주신 개념은 여전히 유지가 되는건가요? 즉, 아래의 순서가 맞는지 궁금합니다. (Brower) 접속요청 (Server) JS 실행-Rendering (Server to Browser) Rendering 된 HTML (Browser to User) 화면에 Rendering (Server to Browser) JS Bundle ( 단, '현재 Page에 필요한', 'Client component') (Browser) Hydration (Browser to User) Interaction 가능 - TTI (Server to Browser) Pre Fetching/JS Bundle (단, '연결된 모든 Page의', 'Client component') 이 순서가 맞을까요? 아니라면.. Pre fetching 개념이 React Server Component 도입이후 없어진건가요?(이건 아닌거같긴한데 ㅎ) 어떻게 동작하는지 궁금합니다. 항상 잘 듣고있습니다. 감사합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 제로초님! 게시글 삭제하기 기능을 구현하고 있습니다! 구현해도 안되길래 스웨거가서 테스트를 하고 서버를 봤더니 오류가 나더라구요 혹시 이유를 알 수 있을까요??
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"] } }, "types": ["node"] } import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import ShowRoom from "@components/three/ShowRoom"; export default function Home() { return ( <> <Canvas> <axesHelper args={[5]} /> <gridHelper /> <OrbitControls /> <directionalLight position={[3, 3, 3]} /> <ShowRoom /> </Canvas> </> ); } //vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@src", replacement: path.resolve(__dirname, "src"), }, { find: "@components", replacement: path.resolve(__dirname, "src/components"), }, ], }, }); vite config, tsconfig.json을 바꿨는데 home.tsx에서 i mport ShowRoom from "@components/three/ShowRoom"; 불러오는데 Cannot find module '@components/three/ShowRoom' or its corresponding type declarations.ts(2307) 못찾는다는 에러가 생깁니다 뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ
미해결
Next.js 시작하기(feat. 지도 서비스 개발)
궁금합니다
미해결
처음 만난 리액트(React)
최신버전에서는 ReactDom의 Render가 더 이상 사용되지 않는군요.. 기존의 ReactDom으로 만든 root를 이용해서 render를 하도록 수업 내용이 변경되어야겠습니다.
미해결
한 입 크기로 잘라먹는 Next.js
유저가 웹 앱에 진입을 하면서 서버에 요청을 보낼 때, 서버에서 JS를 실행하여 html을 채워준 뒤 에 클라이언트로 보낸다고 이해하였습니다. 질문 1) 그렇다면, 서버에서는 node와 같은 자바스크립트 런타임 환경이 갖춰져 있어야 한다는 이야기일까요?? 질문 2) 더 나아가서, 넥스트 프로젝트의 배포 방법이 리액트의 배포 방법과 차이가 많이 날까요??(vercel을 사용하지 않는다는 전제하에)
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 투두리스트 렌더링하기 강의에서 List 컴포넌트 부분에서 todos.map을 돌리고 TodoItem 컴포넌트에 {...todo}로 mockData에 있는 객체를 구조분해할당으로 풀어서 키를 props로 전달하는데 전달할때 보통 todo={...todo} 이렇게 보내지 않고 그냥 {...todo} 이렇게 앞에 todo= 이런식으로 작성하지 않은 이유가 뭔지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님! 완강하고 지금 구글 로그인 구현중입니다. 구글로 로그인하다가 마지막에 인가토큰받는 부분에서 404 에러가나는데 이유를 모르겠습니다... 도와주세요 ㅠ_ㅠ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
build 할때는 별 문제없이 build 가 되었는데, vercel 에서 배포할때 문제가 발생했습니다. 에러는 import 시 오탈자 문제로, 직접 로그를 분석하여 해결했는데요. 궁금한점은 빌드 시에는 별 문제없었는데, 배포환경에서는 왜 문제가 발생하여 정상적으로 진행이 안되었는지가 궁금합니다. 항상 좋은 강의 감사합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 네스트 서버에서 아래와 같은 에러가 발생해서 보니 커넥션 관리가 안되고 있더라고요 prisma disconnect 추가하시면 좋을 거 같습니다. 강의 잘 보았습니다 감사합니다. PrismaClientInitializationError: Invalid prisma.review.findMany() invocation: Can't reach database server at aws-0-ap-northeast-2.pooler.supabase.com:5432 Please make sure your database server is running at aws-0-ap-northeast-2.pooler.supabase.com:5432. at In.handleRequestError (/var/task/node_modules/@prisma/client/runtime/library.js:122:7154) at In.handleAndLogRequestError (/var/task/node_modules/@prisma/client/runtime/library.js:122:6188) at In.request (/var/task/node_modules/@prisma/client/runtime/library.js:122:5896) at async l (/var/task/node_modules/@prisma/client/runtime/library.js:127:11167) at async ReviewService.findBookReviews (/var/task/dist/src/review/review.service.js:32:16) at async /var/task/node_modules/@nestjs/core/router/router-execution-context.js:46:28 at async /var/task/node_modules/@nestjs/core/router/router-proxy.js:9:17
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
assets에 있는 파일이 번들링이 된다면 assets에 이미지같은것들을 넣으면 될까요??? public에있는 파일들은 '최종번들에 복사되어진다'고 하셨는데 이말이 무슨뜻인지 잘이해가 안가서그러는데 부가설명해주시면 감사하겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 강의를 보다가 질문이 생겼습니다. 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 ?? "" } />
미해결
코드로 배우는 React 19 with 스프링부트 API서버
목록처리(2) 에서 refresh 까지 다 하고 하단에 페이지 넘버를 클릭하면 어떨때는 두번 눌러야 화면이 넘어가는 경우가 있습니다. 브라우저 개발자 도구의 콘솔탭에서 확인해보니 아래 이미지처럼 current가 각기 다르게 두번 불러오는데요(현재 2페이지에서 1페이지를 눌렀을때의 결과 입니다.) 리액트에서 두번 불러오는거에 대해서 언급하신게 있었는데 제가 놓친부분이 있는건지... 이렇게 되는 이유를 모르겠습니다. 혹시 몰라 압축파일로 제 구글 드라이브에 올려놓았습니다. ( https://drive.google.com/drive/folders/1TQxdqkRD8xvXIHzVoI5fp2hm_HZaE0aT ) 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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.0 eslint@8.0.1 버전 경고 설치된 eslint 버전 8.0.1은 더 이상 지원되지 않는 버전입니다. 최신 버전으로 업그레이드하세요. 해결책 yarn add eslint@latest 의존성 중 사용 중단된 모듈 예를 들어, glob@7.2.3 과 inflight@1.0.6 이 더 이상 지원되지 않습니다. 이는 주로 간접 의존성에서 발생하며, 해당 모듈의 최신 버전으로 업데이트하거나, 의존성을 최신으로 맞춰야 할 수 있습니다. 이런식으로 알려주는데 뭐 아무거나 못건들겠어요 잘못될 것같아서 뭐가 잘못된걸까요 ?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 궁금한 게 있는데 알려주신 react loading skeleton 라이브러리는 리액트 19와 호환되지 않아서 react 18을 써야하는데,next 15는 리액트 19 rc 버전을 사용하고 있는데요. next 15 + react18로 사용을 해도 앱 라우터가 동작은 하던데, next 15 + react18로 사용하면서 라이브러리 들을 쓰는 게 좋을까요? next 15 + react19 rc로 쓰는 게 좋을까요? 관련해서 검색해보면 next 15 + react18은 앱라우터를 못 쓴다고만 되어있더라고요. 강사님의 개인적인 의견이 궁금해서 여쭤봅니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 리액트 부분에 대해 강의를 듣다가 vite라는 내용이 나오던데 이 vite를 설치하니 src나 index.html 등등 여러 파일들이 설치가 되고 src폴더에서는 App.tsx 파일명으로 나오더라구요. 여기서 조금 헷갈리는 것이 npx create-react-app 설치와 비슷한데 이 vite는 정확히 무엇이고 또 npx create-react-app 이 부분과 다른건지도 궁금합니다.
