묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
린캔버스 기능 구현은 왜 못하나요.... 구현하고 싶습니다...
왜 배포전에 기능 다 구현하고 했는데, 배포하면 이런 기능을 못 쓰고, 추가로 파이어베이스 등을 사용해야만 가능한가요....정 방법이 없나요?아니면 파이어 베이스 까지 활용해서 기능을 성공적으로 구현하는 걸 보고 싶은데 안될까요?? 추가 강의로든, 이 질문에 대한 답변으로든, 꼭 이번 프로젝트의 끝을 보고 싶습니다..!!
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
notes 없음 읽기 오류
제가 본 바로는, 원래 notes 속성으로 db.json에 사전에 기입해둔 데이터가 있어서 실습하는 과정에서 해당 린캔버스는 오류가 없었는데, 다른 린캔버스 들어가면서 이런식으로 에러가 뜨네요. 전 짐코딩님 강좌 처음부터끝까지 다 스킵 안하고 보고 있는데, 저만 이런 오류가 뜨나 해서요.혹시, 강좌에서 코드에 이런 오류는 반영이 안된걸까요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
Object.assign 문법
function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: baseURL, baseURL, // key 와 값이 같으면 생략 가능 }), options, ); return instance; }제가 사용한 코드입니다.(강의 내용 그대로 담았습니다. 주석 빼고 보면 강의 시 사용한 코드와 동일합니다.제가 궁금한 것은, 인터넷으로 관련 문법을 찾아 본 결과 Object.assign(A,B,C)같은 형식으로 하여, A,B,C 각각의 객체를 merge한다고 알고 있는데,강의에서는 Object.assign({baseURL}),options으로 options객체를 object.assign 함수 바깥에 위치하더라구요?이러면 아무 의미 없는 코드가 되어 버리는것 아닌가요?Object.assign({baseURL,},options)를 해야 되는거 같은데,제가 놓친 부분이 있는걸까요?(코딩이 전공이 아니라 제가 잘 모르는 걸수도 있습니다. 알려주시면 감사하겠습니다)
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
react-router 전혀 기능 안함
lean-canvas 프로젝트 생성부터 react-router-dom 설치하기까지 중간중간 보이는 package.json 을 보고 전부 버전을 맞췄는데,react-router 를 통해 home 에서 about, contact 가는 그게 전혀 작동하지 않습니다. 버전에 맞춰서 새로 영상을 찍어주시거나 가능할까요?버전을 맞춰도, 작동이 안돼서 어렵네요.. ㅠㅠ아래는 영상의 package.json 을 보고 버전을 맞춘 코드 입니다.{ "name": "lean-canvas-make-downversion", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix", "preview": "vite preview", "format": "prettier --write --cache ." }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.57.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-react": "^7.34.3", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "prettier": "3.6.2", "vite": "^5.3.4" } }
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
react-router-dom@6.25.1
제목과 같이 npm i react-router-dom@6.25.1로 해서 package.json 에도 "react-router-dom": "^6.25.1", 라고 뜨는데,레이아웃을 만들수가 없습니다 ㅠㅠ처음의 App 컴포넌트는 나오는데, home, about, contact 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠㅠ
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
React Router 최신 스펙
react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다.여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다. 제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만,router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도,data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다.ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다. 이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다.일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다.그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요?혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
Immer 에서 filter, map 사용
지난강의에서 useImmer에서 활용한 update함수에서는 push, splice와 같은 현재의 객체를 변환시키는 api를 활용했었습니다.그래서 immer 가 적용된 상황에서는, 현재 객체를 변환시키는 것만이 답일것이라 생각해서,오히려 filter api를 써야 코드가 더 간단해지는 상황에서는 useState를 따로 분리해서 써야 고민하고 있었습니다. 그런데 이번 강의에서 useImmerReducer에서 활용하는 것을 보아하니, State가 아니라 Immer 이 적용된 케이스더라도, return으로 새로운 객체를 반환하거나, 직접 객체에 변화를 주거나 하는 방법이 둘다 적용이 되는것으로도 보이는것 같더라구요?case 'deleted':에서도draft.filter에 return 이 적용되면, immerReducer라도 잘 작동하고,return을 없애고, break로 나오게 하면, 변화가 아무래도 적용이 안되더라구요(당연하겠죠... 원래 객체에 변화를 준것이 아니니) 그래서 immer나 immerReducer를 활용한다는 것은 useState을 확장시키는 느낌인건가요? 직접객체에 변화를 주는것 뿐만아니라, useState에서 했던것처럼 새로운 객체를 만들어 return하는 것 '까지' 가능한건가요?만약 immer가 적용된 상황에서, 직접 객체를 변환하는 코드와, 새로운 객체를 만들어 return 하는 코드가 하나에 전부 적용되어 있다면 어떻게 작용하나요?다시 말해, draft.push로 '변경사항이 immer에 반영되고', 동시에return으로 draft.filter한 값을 보내면, 어떻게 작용하며, 어떤 로직이 적용되나요?감사합니다
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
vite 설치에 대해 질문있습니다.
안녕하세요 vite를 설치해서 리액트를 잘 사용하다가 최근 vite를 설치하고 npm run dev로 실행을 하니 아래 이미지와 같은 에러가 계속 나더라구요. 찾아보니 버전과 관련이 되어 있는거 같은데 아무리 찾아봐도 해결이 되지 않더라구요. 현재 vite는 사용하지 못하는건가요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
라이브러리 버전 일치 이슈
npm init vite@5.2.3 를 통해 설치 후 npm i를 통해 필요한 라이브러리를 다운 받을시에, 터미널 창을 통해 각종 경고 안내가 나옵니다.예를 들어 하나만 보여드리자면, npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported입니다.이처럼 온갖 라이브러리들이 '더 이상 지원하지 않는 버전임'을 명시하고 있는데, 최신 버전을 사용해서 수업을 따라가야 하나요, 아니면 '더이상 지원하지 않는 버전'의 라이브러리를 사용해서 코드를 짜도 이상이 없을까요? 안내해주신 것처럼 라이브러리 버전을 맞춰서 수업을 따라가고 싶은데, 터미널에서 이러한 경고를 보여주니, 버전을 맞출시에 '지원하지 않는 버전'문제로 인한 추가적인 오류가 생길까 걱정됩니다. 요약1.터미널에서 말하는 '더 이상 지원하지 않는 버전' 안내를 무시하고, 짐코딩님 강의의 라이브러리 버전을 사용해도 문제가 없을까요?2.최신 버전을 사용하고, 달라진 문법등의 오류를 감당하는게 나을까요?2번 질문의 문제에 대한 기술적인 지원을, 짐코딩님을 통해 받을 수 있을까요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한 줄이 더 입력됩니다
추가할 todo에 공백이 포함된 상태로 엔터를 입력하면 위와 같이 추가가 되는데 제가 잘못한 부분이 있을까요?https://github.com/juan-rybczinski/learn-react/commit/dba6aab43a96601fed941edfa652e4508f6a88e9
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
TotalCounter을 작성할때
저는 처음에 과제를 할때 setTotal을 직접 prop으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요??차이점과 장단점에 대해서가 궁금합니다. import Counter from "./Counter"; import React, { useState } from "react"; function Main() { const [Total, setTotal] = useState(0); return ( <main> <h2>Main Component</h2> <h1>{Total}</h1> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> </main> ); } export default Main;
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
gitHub 레파지토리 보면
왜 39강까지지만 push하구 그 이후 회차들은 push안했나요? 강의 수강회차별로 소스 싱크맞추어서 학습하면 도움이 많이 될텐데 강의별로 확인해셔서 소스 동기화 요청드립니다. 80강이면 80강 까자끝난 소스가 올라오면 되겠죠 ? 79강에서 80강 갔는데 ui가 바뀌어서 어떻게 환경을 잡아야할지 당황스럽습니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
80강 수강중인데
80강 3분 08초에서 > 3분 09초로 넘어갈때 메모UI로 어떻게 바뀐건가요? 강의교안에 수정해야 될게 있으면 추가해주세요 / 이런사소한것도 신경안쓰고 강의를 올리십니까 ? 리액을 익히는게 목적인데 환경 잡느라 시간 다 날립니다. 추가영상 촬영해서 올려주시고 교안도 수정해주세요
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
79 타이틀수정 강의중
78 삭제 강의 이후 79 타이틀 수정 으로 넘어 갈떄 home.jsx UI가 바뀌는데 그거에 대해 설명이 없네요 . 강의교안에 home.jsx 파일 올려주시고 / 영상에도 home.jsx 변경 하는거 추가해서 촬영 부탁드립니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
tailwindCss 강의중
공식 사이트에 가니 npm tailwindcss init -p명령어가 사라졌는데 버전이 올라가서 그런건가요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
git hub 브렌치 강의내용 21~24쪽의 내용이 없네요
20.update-object받으니 컴포넌트의 기억저장서 부터이고 21조건부 랜터링부터 ~ 24이벤트전파까지의 소스 브랜치가 없네요
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
강의교안 노션에 접속이 안되요
무한로딩 되면서 접속이 안되요 ㅠㅠ
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
인텔레리제이 세팅환경도 알려주세요
인텔레리제이 세팅환경도 알려주세요
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
린캔버스 수정 시 CanvasDetail 컴포넌트 리랜더링 질문
안녕하세요. 린캔버스 수정 수업 관련해서 질문이 있어서 문의 드립니다. const handleCanvasChange = async updatedCanvas => { try { await updateCanvas(id, updatedCanvas); setCanvas(updatedCanvas); } catch (err) { alert(err.message); } };addNote, deleteNote, updateNote 등의 이벤트가 발생할 경우 setCanvas를 통해 useState에 선언된 canvas 값을 바꾸는데 그렇게 되면 CanvasDetail과 그 하위에 선언된 자식 컴포넌트들이 전부 리랜더링되는 것 같은데 강의에서는 그렇게 보이지 않아서 문의 드립니다.const [canvas, setCanvas] = useState();canvas가 setCanvas 메서드를 통해서 상태가 변하면 리랜더링 되면서 하위 컴포넌트인 Note의 isEditing 값이 다시 false로 초기화되는데 강의에서는 여전히 true값이 남아있는 것 같습니다. 전체적인 코드를 동일하게 작성한 것 같은데 차이점이 발생하는 이유가 무엇일까요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
데이터 캐싱 부분에 대해 질문있습니다.
안녕하세요 현재 고급- 데이터캐싱 부분의 강의를 보고 있는데 Fresh 상태에서는 데이터를 가져온 후 저장되어 있어 이 저장된 데이터를 사용하다 Stale상태가 되면 자동으로 다시 데이터가 요청되어 가져온다 라고 이해하고 있는데 맞는걸까요?