묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
Router 궁금증
<BrowserRouter> <Routes> <Route path="home" element={<AdminHome />} /> <Route path="post" element={<AdminPost />} /> <Route path="update/:id" element={<AdminUpdate />} /> </Route> </BrowserRouter>Q1. 저는 항상 app.js 위에 코드와 같이 작성하는 편인데 강의에서는 주로 CreateBrowserRouter를 따로 이용하시는데 특별한 이유가 있나요?Q2. 간혹 프로젝트 중간중간 Header나 Footer 컴포넌트를 몇몇 페이지에서는 안보이거나 다른 header, footer 컴포넌트가 보이게끔 하고 싶은데 이런 경우 주로 어떻게 하실지 생각(?) 아이디어(?) 가 궁금합니다. 저는 안보이게 하고 싶은 페이지를 url로 구분하는 편인데 다른 좋은 방법이 있을까요?
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
미션 예제코드
SECTION18 > 08-18(MISSION) > quiz.md 예제코드가 어디 있을까요?
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
260. 카카오 로그인 구현하기 - 2 에서 백엔드 시작시 경고 메시지
[MONGOOSE] Warning: Duplicate schema index on {"email":1} found. This is often due to declaring an index using both "index: true" and "schema.index()". Please remove the duplicate index definition. 백엔드 시작 시 위와 같은 경고 메시지가 나옵니다. 작동은 문제가 없습니다.
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
218. Post Browser 에서 처음 실행 시 CanceledError 발생
useEffect(() => { const controller = new AbortController(); const fetchPosts = async () => { try { setIsLoading(true); const { data } = await axiosInstance.get( `/posts?_page=${currentPage}&_limit=${limit}&q=${encodeURIComponent(searchText)}`, { signal: controller.signal, }, ); setPosts(data); } catch (e) { console.log(e); if (e instanceof Error && e.name !== "CanceledError") { if (e.message.includes("timeout")) { setError("timeout 오류 발생"); } else { setError(e.message); } } } finally { if (!controller.signal.aborted) setIsLoading(false); } }; fetchPosts(); return () => { controller.abort(); }; }, [currentPage, limit, searchText]);처음 실행 시(새로고침) console.log(e)에서 CanceledError {message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED', config: {…}, request: XMLHttpRequest, …}이렇게 무조건 잡히는데 왜 그럴 까요? 물론 프로그램 실행 에는 문제가 없습니다.
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
혹시 배포 후 카카오로그인 하면 왜 404가 뜰까요
404: NOT_FOUNDCode: NOT_FOUNDID: kix1::bdzhw-1757478315191-5d49459abd35
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
카카오로그인구현 -2
혹시 강의를 그대로 따라했는데 계속 리다이렉션중이 떠있는 이유를 어디서 찾아야할까요?
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
특정 범위 선택 및 일괄 변경
강의 중 혹시 특정 범위 선택 및 일괄 변경하는 윈도우환경에서 방법이 뭔지 알수있을까요?
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
줄바꿈 질문
혹시 강의에서처럼 프리티어설정이나 다른설정 다똑같은데 왜 계속 길게유지가 될까요 가독성이 너무 불편한데
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
useState() 초기값에 대한 질문
안녕하세요. useState의 초기값으로 함수를 넣는 경우를 처음 접해서 질문드립니다. 제가 따로 찾아본 결과useState() 초기값으로 값이 아닌 함수를 넣어주게되면 -> 리랜더링시에 값이 평가되지않고 -> 쓸때없이 uuid가 생성되지 않아서 강의(86강 5분대)와 같이 useState 초기값으로 함수를 넣어주신게 맞나요??그리고 이를 lazy-initialization이라 명명하는게 맞을까요??좋은 강의 감사드립니다.
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
Post 상태 관리
서버로부터 받아오는 Posts를 <PostList/> 컴포넌트에서 상태로 관리하는데, 이것은 전역 상태로 관리하지 않는 이유가 있을까요?postStore에서 getTotalPages를 할때, 고정된 값 100을 사용했는데, 실제 서비스라면 어떻게 처리해야하나요?postStore에서 posts.length와 같은 전체 개수를 알아야할것같은데.
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
tailwindcss 부분적용 문제
참 신기하게도 tailwindcss 공식문서에 나온대로 그대로~~~ 했는데 아이러니 하게도<h2 className="text-8xl font-bold underline">hello world</h2>해당 코드에서 font-bold랑 underlilne은 잘만 적용되는데 text-8xl만 적용이 안되네요 왜 이러는건지 전 이해가 안되네요 따로 styled-component에서 globalStyle을 적용해서 작업중이라서 예상은 되는데 어떻게 수정해도 답이 안보이네요
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
vscode 셋팅질문
안녕하세요 강의 잘듣고있습니다 선생님 다름이 아니라 제 화변 볼때보다 선생님 화면볼때가 뭔가 눈이 편안하고 폰트도 눈에 잘들어오는 느낌인데 어떤 테마와 폰트인지 여쭤봐도될까요...
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
section8 93강 [해설] 복합 상태 버튼 그룹 스타일링 및 관리에 관련 궁금증
해설 강의를 보다가 궁금한 점이 생겨 글 남겨봅니다. <button key={btn.id} className={cx("button", { active: activeStates[btn.id], disabled: btn.isDisabled, highlight: btn.id === 2, })} onClick={() => handleToggle(btn.id, btn.isDisabled)} // disabled={btn.isDisabled} <- 따로 안쓰신 특별한 이유가 있는걸까? > {btn.icon} {btn.label} </button> // 토글 함수 const handleToggle = (id: number, isDisabled: boolean) => { if (isDisabled) return; setActiveStates((active) => ({ ...active, [id]: !active[id], })); };disabled처리를 해도 스타일과 상태값이 변경되는 문제로 토글함수에 값을 전달해서 isDisabled가 true이면 return되게 작성하셨는데 button에 disabled 속성을 사용하지 않으시고 따로 isDisabled를 전달해 매개변수로 받아 처리하신 이유가 있나요?
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
vscode 호버힌트 툴팁
redux slice 생성 강의(1:37)에 호버하면 뜨는 툴팁에서 위에 간략한 설명은 똑같이 뜨는데 강사님처럼 아래 Error 로 더 자세히 뜨는 부분도 보고 싶은데 안 보입니다. 어떻게 설정해야 하나요?
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
객체 상태 다루기 정리에서
불변성을 유지하기 위해 깊은 복사를 해야 한다고 설명하셨는데 스프레드 연산자는 얕은 복사아닌가요??왜 깊은 복사라는 표현을 사용하셨는지 궁금합니다!
-
미해결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 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠㅠ