묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨실무 중심! FE 입문자를 위한 React
Ch15-5. 라우터 적용에서 최근 react-router 설정과 달라서 수정했습니다.
react-router v7을 설치하고 다음과 같이 수정하여 처리하였습니다.function MainLayout() { return ( <Layout style={{ minHeight: '100vh' }}> <Layout> <Sider collapsible> <div className="logo" style={logoStyle} /> <Menu theme="dark" mode="inline" defaultSelectedKeys={['m1']}> <Menu.Item key="m1">설문조사관리</Menu.Item> </Menu> </Sider> <Layout> <Header style={{ padding: 0, background: 'white' }}>HEADER</Header> <Content> <Outlet /> {/* chidren 대신 아울렛 사용 */} </Content> </Layout> </Layout> </Layout> ); } function App() { return ( <> <Routes> <Route path="/" element={<MainLayout />}> <Route index element={<h1>Home Page</h1>} /> <Route path="list" element={<ListPage />} /> <Route path="builder" element={<BuilderPage />} /> </Route> </Routes> </> ); }
-
미해결실무 중심! FE 입문자를 위한 React
git 명령어를 찾을 수 없다고 하는데 git을 따로 설치해야 하는건가요?
PS D:\reactWorkspace\memo-project> git reset --hardgit : 'git' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1+ git reset --hard+ ~~~ + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundExceptionPS D:\reactWorkspace\memo-project>
-
미해결실무 중심! FE 입문자를 위한 React
4-3 아코디언 컴포넌트 만들기 링크 수정요청
4-3 아코디언 실습코드 링크가4-2 렌더링 과정 실습코드 링크랑 같습니다.pdf 파일 내 4-3 실습 링크변경 요청드리며, 변경된 링크 공유 부탁드립니다.
-
미해결실무 중심! FE 입문자를 위한 React
[10-2] react-router 강의에서 BrowserRouter 를 감싸지 않고 페이지가 나오는 게 맞나요?
10-2 강의 내용에서 BrowserRouter 를 임포트 하고 나서 사용 안하고 Route를 구성하였습니다. 강의 내용대로 페이지 화면이 나와야 되는 데 에러가 발생합니다. BrowserRouter를 감싸지 않고서도 페이지 화면이 나오는 게 맞나요?<div className="App"> <Routes> <Route path="/" element={<PageA />} /> <Route path="/2" element={<PageB />} /> </Routes> </div>
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
useEffect로 사용을 해도 되나요?
useEffect(() => { localStorage.setItem('todoData', JSON.stringify(todoData)); }, [todoData]); 이렇게 작성을 하고, 나머지는 다 주석을 처리했는데도 정상 작동하는 것 같더라구요. 하지만 의문인게 setTodoData((prev) => [...prev, newTodo]); localStorage.setItem('todoData', JSON.stringify([...todoData, newTodo]));여기도 주석처리를 했는데, 여기는 조금 작성하는 게 다르지 않나요? handleRemoveClick = () => { setTodoData([]) }여기도 그렇구요. 그런데 그냥 다 정상 작동 하네요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
eslint 설정 후 오류가 납니다.
강의대로 eslint 설정한 후 { "extends" : [ "react-app" ] } npm run dev 하면 아래와 같은 에러가 납니다. VITE v6.0.3 ready in 354 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help오후 4:41:35 [vite] Internal server error:C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved✖ 1 problem (1 error, 0 warnings) Plugin: vite-plugin-eslint File: C:/Dev/fullstack-app/frontend/src/main.jsx at TransformPluginContext._formatError (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47158:41) at TransformPluginContext.error (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47153:16) at TransformPluginContext.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async EnvironmentPluginContainer.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18) at async loadAndTransform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)오후 4:41:35 [vite] Pre-transform error:C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved 파싱 오류 같은데 어느 설정파일을 수정해야 할까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
오버로드 오류
강사님. 강의를 따라하다가 App.js에 오버로드오류가 나타나는데 어떻게 해결할 수 있난요?
-
미해결실무 중심! FE 입문자를 위한 React
Chapter 4-2 React랜더링과정 설명중 자료가 틀리게 적어져있네요..
Chapter 4-2 React랜더링과정 설명중 강의자료 코드 이미지가 잘못되있어요..강의자료 (처음부터 ~ 2분까지나오는 내용)const [value, setValue] = useState(0);........중간생략 setValue((state) => state +1) 로 되어있는데.. => 틀린부분onClick 이벤트를 실행할때마다 value값이 1씩 증가하도록 setValue 값을 설정했다고 하는데.. setValue((value) => value +1) 로 되야하는건 아닌가요??
-
미해결(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
전체 소스코드는 어디서 받을 수 있나요?
전체 소스코드는 어디서 받을 수 있나요?
-
미해결처음 만난 리덕스(Redux)
redux 상태와 관련하여 질문드립니다
function counter(state,action){ if(typeof state ==="undefined"){ return 0; } switch (action.type){ case "INCREMENT" return state +1; case "DECREMENT" return state -1; default : return state; } } var store = Redux.createStore(counter); var calueELem = document.getElementById("value") function render(){ valueElem.innerHTML = store.getState().toString() } render(); store.subscribe(render);여기 코드에서 궁금한 부분이 있어서 질문드립니다!처음에 상태를 설정하지 않았는데 강사님은 왜 초기 상태 count 가 0이라고 하신건가요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.
<Row title="Netflix ORIGINALS" id="NO" fetchUrl={requests.fetchNetflixOriginals} isLargeRow > </Row> <Row title="Trending Now" id="NO" fetchUrl={requests.fetchTrending} > </Row> return ( <section className="row"> <h2>{title}</h2> <div className="slider"> <div className="slider__arrow-left"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft -= window.innerWidth - 80 }}>{"<"}</span> </div> <div id={id} className="row__posters"> {movies.map((movie) => ( <img key={movie.id} className ={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name} > </img> ))} </div> <div className="slider__arrow-right"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft += window.innerWidth - 80 }}>{">"}</span> </div> </div> </section> ) 넷플릭스 오리지널에서는 슬라이드가 제대로 동작합니다. 그런데 아래 row들의 화살표를 클릭했을때 넷플릭스 오리지널 포스터의 슬라이드가 동작하는데 이유를 모르겠습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
VSCode에서 save를 할 때, landingpage의 useEffect가 실행되는 문제에 대하여
landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까?근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제
dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제가 발생하고 있는데 원인을 잘 모르겠습니다.
-
미해결처음 만난 리덕스(Redux)
render 함수에 관해 질문있습니다.
state 변화에 따른 ui를 렌더링 할 때 render 함수 내부 코드가 매우 방대할 경우 보편적으로 어떤 로직 처리를 하는지 궁금합니다.(memo만 추가했지만, memo 렌더링 코드외의 다른 관련없는 렌더링 코드들이 방대할 경우입니다.) 강사님 좋은 강의 감사합니다!! 많이 배우고 있습니다 :)
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?handleLogout function에서 local storage의 accessToken을 삭제시키고, store의 user 정보만 initial state, 그리고 isAuth 등을 false로 바꾸면 그만일텐데, 왜 server에 요청을 보내는 과정이 필요할까요!?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
webkit-text-size-adjust 오류
왜 이러는지 알 수 있을까요? 찾아봐도 모르겠습니다... '-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
does not provide an export named 'userReducer'
does not provide an export named 'userReducer'라는 에러가 뜹니다.맞게 작성한거 같은데...설정을 잘못했을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
빌드 배포
안녕하세요 강사님 !쇼핑몰 만들기 강의 빌드 배포과정에서 헤매는 수강생들이(저 포함) 많은 것 같은데 혹시 빌드 배포과정까지 영상으로 올려주실 계획은 없으실까요??
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다
공식문서 내용입니다. 더이상 pending관련 값은 return해주지 않네요 공유차 전달드려요
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
ERROR in ./node_modules/antd/es/version/index.js 2:15-22
비디오 업로드 FORM 만들기 (1)에서 npm run dev를 하고 페이지를 확인하면 이러한 에러가 발생합니다. 어떻게 해결하면 좋을까요? 이외 기타에러 1.[1] WARNING in ./node_modules/mutationobserver-shim/dist/mutationobserver.min.js[1] Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):[1] Failed to parse source map from 'C:\Users\iokl3\OneDrive\문서\0. git\John_Ahn\John_Ahn_Youtube_React\1. Dev\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\iokl3\OneDrive\문서\0. git\John_Ahn\John_Ahn_Youtube_React\1. Dev\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map'[1] @ ./node_modules/rc-menu/es/DOMWrap.js 166:2-34 이외 기타에러 2.[1] ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)[1] @ ./node_modules/antd/es/index.js 65:0-47 65:0-47[1] @ ./src/components/views/Footer/Footer.js 5:0-28 18:57-61[1] @ ./src/components/App.js 12:0-43 71:35-41[1] @ ./src/index.js 86:0-35 99:35-38