inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

실습링크

미해결

실무 중심! FE 입문자를 위한 React

실습 링크 들어가니깐 안됩니다.. 새로운 링크 알려주세요

  • react
  • redux
  • node.js
  • sass
  • swr
댓글 1 좋아요 0 조회수 338

2-6 구구단 배열 넣어서 출력시 질문

미해결

실무 중심! FE 입문자를 위한 React

강사님께서 map으로 출력하시던데 2-4 반복문 강의처럼 배열로 넣어서 출력을 해보고싶었는데 출력이 세로로만 나오거나 가로로만 한줄로 나오던데 줄바꿈을 어떻게 줘야하는건지 궁금해서 작성해봅니다.

  • react
  • redux
  • node.js
  • sass
  • swr
ahl0729 댓글 1 좋아요 0 조회수 167

환불관련 문의 드립니다.

미해결

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate

아직 강의를 시청하지 않았습니다. 사정 상 너무 급하게 결제를 진행한것같아 환불 요청 드리려고 합니다. ㅠㅠ

  • redux
  • react-native
  • firebase
Yoonds 댓글 1 좋아요 0 조회수 176

[2-1] 강의링크 메모용

미해결

실무 중심! FE 입문자를 위한 React

https://codesandbox.io/p/sandbox/2-1-29k09?file=%2Fsrc%2Findex.js%3A9%2C1

  • react
  • redux
  • node.js
  • sass
  • swr
o hell 댓글 1 좋아요 4 조회수 943

[17-3. Redux로 데이터 관리]에서 Store에 슬라이스 리듀서 추가하기 질문합니다.

미해결

실무 중심! FE 입문자를 위한 React

Redux 공식 사이트의 튜토리얼에 따르면, 슬라이스에서 리듀서를 익스포트 하고 스토어에 리듀서를 다음 예제와 같이 등록하는 데.. // surveySlice.js ... 생략 ... export default surveySlice.reducer; // surveySlice 리듀서를 익스포트 하고서.. // /stores/index.js import surveyReducer from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveyReducer // 리듀서 등록 } }) 강사님 같은 경우는 아래와 같이 리듀서 등록에 직접 surveySlice를 추가했는데 리덕스 튜토리얼과 차이가 뭔가요?? import {surveySlice} from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveySlice // 슬라이스 등록 } })

  • react
  • redux
  • node.js
  • swr
Codingbear 댓글 1 좋아요 0 조회수 210

[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다.

해결됨

실무 중심! FE 입문자를 위한 React

[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다. rowKey 속성을 사용하여 key로 지정할 컬럼을 지정합니다. // primary key is id return <Table rowKey="id" />; // or return <Table rowKey={(record) => record.id} />;

  • react
  • redux
  • node.js
  • sass
  • swr
Codingbear 댓글 0 좋아요 0 조회수 109

최신버전 node.js 관련 문의

미해결

실무 중심! FE 입문자를 위한 React

최신 버전 node.js 를 설치 하고 진행하니 create-react-app 에서 자꾸 문제가 생기는거 같습니다. 이부분에 대해 어떻게 진행해야하나요??

  • react
  • redux
  • node.js
  • sass
  • swr
dlwhdgus482 댓글 2 좋아요 0 조회수 416

Ch15-5. 라우터 적용에서 최근 react-router 설정과 달라서 수정했습니다.

해결됨

실무 중심! FE 입문자를 위한 React

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> </> ); }

  • react
  • redux
  • node.js
  • sass
  • swr
Codingbear 댓글 0 좋아요 0 조회수 217

git 명령어를 찾을 수 없다고 하는데 git을 따로 설치해야 하는건가요?

미해결

실무 중심! FE 입문자를 위한 React

PS D:\reactWorkspace\memo-project> git reset --hard git : 'git' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + git reset --hard + ~~~ + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\reactWorkspace\memo-project>

  • react
  • redux
  • node.js
  • sass
  • swr
정혜림 댓글 1 좋아요 0 조회수 1123

4-3 아코디언 컴포넌트 만들기 링크 수정요청

미해결

실무 중심! FE 입문자를 위한 React

4-3 아코디언 실습코드 링크가 4-2 렌더링 과정 실습코드 링크랑 같습니다. pdf 파일 내 4-3 실습 링크변경 요청드리며, 변경된 링크 공유 부탁드립니다.

  • react
  • redux
  • node.js
  • sass
  • swr
dlwhdgus482 댓글 2 좋아요 4 조회수 379

[10-2] react-router 강의에서 BrowserRouter 를 감싸지 않고 페이지가 나오는 게 맞나요?

미해결

실무 중심! FE 입문자를 위한 React

10-2 강의 내용에서 BrowserRouter 를 임포트 하고 나서 사용 안하고 Route를 구성하였습니다. 강의 내용대로 페이지 화면이 나와야 되는 데 에러가 발생합니다. BrowserRouter를 감싸지 않고서도 페이지 화면이 나오는 게 맞나요? <div className="App"> <Routes> <Route path="/" element={<PageA />} /> <Route path="/2" element={<PageB />} /> </Routes> </div>

  • react
  • redux
  • node.js
  • sass
  • swr
  • router
Codingbear 댓글 2 좋아요 1 조회수 223

useEffect로 사용을 해도 되나요?

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

useEffect(() => { localStorage.setItem('todoData', JSON.stringify(todoData)); }, [todoData]); 이렇게 작성을 하고, 나머지는 다 주석을 처리했는데도 정상 작동하는 것 같더라구요. 하지만 의문인게 setTodoData((prev) => [...prev, newTodo]); localStorage.setItem('todoData', JSON.stringify([...todoData, newTodo])); 여기도 주석처리를 했는데, 여기는 조금 작성하는 게 다르 지 않나요? handleRemoveClick = () => { setTodoData([]) } 여기도 그렇구요. 그런데 그냥 다 정상 작동 하네요?

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
gusn9719 댓글 1 좋아요 0 조회수 223

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 파싱 오류 같은데 어느 설정파일을 수정해야 할까요?

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
CNTTECH 댓글 1 좋아요 0 조회수 259

오버로드 오류

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

강사님. 강의를 따라하다가 App.js에 오버로드오류가 나타나는데 어떻게 해결할 수 있난요?

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
박민한 댓글 1 좋아요 0 조회수 184

Chapter 4-2 React랜더링과정 설명중 자료가 틀리게 적어져있네요..

미해결

실무 중심! FE 입문자를 위한 React

Chapter 4-2 React랜더링과정 설명중 강의자료 코드 이미지가 잘못되있어요.. 강의자료 (처음부터 ~ 2분까지나오는 내용) const [value, setValue] = useState(0); ........중간생략 setValue((state) => state +1) 로 되어있는데.. => 틀린부분 onClick 이벤트를 실행할때마다 value값이 1씩 증가하도록 setValue 값을 설정했다고 하는데.. setValue((value) => value +1) 로 되야하는건 아닌가요??

  • react
  • redux
  • node.js
  • sass
  • swr
김현종 댓글 3 좋아요 0 조회수 367

전체 소스코드는 어디서 받을 수 있나요?

미해결

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

전체 소스코드는 어디서 받을 수 있나요?

  • react
  • redux
  • web-api
osakapark 댓글 1 좋아요 0 조회수 280

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이라고 하신건가요?

  • react
  • redux
  • redux-thunk
  • redux-toolkit
  • redux-saga
ccccssung 댓글 2 좋아요 1 조회수 154

넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

미해결

따라하며 배우는 리액트 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들의 화살표를 클릭했을때 넷플릭스 오리지널 포스터의 슬라이드가 동작하는데 이유를 모르겠습니다.

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
samkookji12 댓글 1 좋아요 0 조회수 213

VSCode에서 save를 할 때, landingpage의 useEffect가 실행되는 문제에 대하여

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까? 근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
문주영 댓글 1 좋아요 0 조회수 198

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제가 발생하고 있는데 원인을 잘 모르겠습니다.

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
문주영 댓글 2 좋아요 0 조회수 257

인기 태그

인프런 TOP Writers

주간 인기글