묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실무 중심! FE 입문자를 위한 React
[17-3. Redux로 데이터 관리]에서 Store에 슬라이스 리듀서 추가하기 질문합니다.
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 / VanillaJS] UI 요소 직접 만들기 Part 2
제네릭을 사용하실 때 콤마
제네릭을 사용하실 때 콤마는제네릭과 JSX의 혼동방지제네릭 구문을 명확히 해서 코드의 가독성 높임TSX 파일에서 사용할 때 하는 일반적인 관례로 인한 이유가 맞을까요?
-
해결됨실무 중심! FE 입문자를 위한 React
[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다.
[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다.rowKey 속성을 사용하여 key로 지정할 컬럼을 지정합니다. // primary key is id return <Table rowKey="id" />; // or return <Table rowKey={(record) => record.id} />;
-
미해결실무 중심! FE 입문자를 위한 React
최신버전 node.js 관련 문의
최신 버전 node.js 를 설치 하고 진행하니 create-react-app 에서 자꾸 문제가 생기는거 같습니다. 이부분에 대해 어떻게 진행해야하나요??
-
해결됨실무 중심! 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> </> ); }
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
iTerm으로 폴더 만드는 부분에 대해 질문이 있습니다.
안녕하세요 현재 맥북을 사용중이고 강의영상처럼 iTerm으로 명령어를 작성해서 폴더를 만들고 비주얼스튜디오까지 열기부분에서 저는 외장하드를 연결해서 배경화면에 있는 외장하드폴더 안에 짐코딩강의라는 폴더 안에 react-test 라는 폴더를 만들어 사용할려고 하는데 이렇게 되면 명령어를 어떻게 작성하면 되는지 궁금합니다.
-
미해결실무 중심! 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>
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
npx create-react-app mall 에러가 납니다
호환성 문제라고 본거같아서 이것저것 google에있는거 해보고 밀고 해보고 밀고 해봤는데도 안됩니다...
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
오류
아직 사용하기 전에 변수들이 있는 경우 아래 사진과 같이 표시되는데 오류가 발생하지 않도록 설정은 어떻게 하나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
name을 넣지 않을 경우 input에 입력되지 않는 이유
안녕하세요 강사님수업 도중에 input 태그에 name을 넣지 않을 경우 아무런 입력이 되지 않는걸 확인했습니다.그래서 onChange 함수에서 에러가 발생해서 이벤트가 도중에 끊겼을 것이라고 예상하고 try catch로 감았는데도 exception이 발생하지 않더라구요.혹시 왜 입력이 되지 않는 것인지 알 수 있을까요?감사합니다~~! import { useState } from "react"; const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "" }) const onChange = (e) => { try { setInput({ ...input, [e.target.name]: e.target.value }) } catch (err) { console.log(err); } // setInput({ // ...input, // [e.target.name]: e.target.value // }) } //const onChangeName = (e) => { // setInput({ // ...input, // name: e.target.value // }) //}; //const onChangeBirth = (e) => { // setInput({ // ...input, // birth: e.target.value // }) //}; //const onChangeCountry = (e) => { // setInput({ // ...input, // country: e.target.value // }) //}; //const onChangeBio = (e) => { // setInput({ // ...input, // bio: e.target.value // }) //}; return ( <div> <div> <input // name="name" value={input.name} //onChange={onChangeName} onChange={onChange} placeholder={"이름"} /> {input.name} </div> <div> <input name="birth" value={input.birth} //onChange={onChangeBirth} onChange={onChange} type="date" /> {input.birth} </div> <div> {/* <select value={input.country} onChange={onChangeCountry}> */} <select value={input.country} name="country" onChange={onChange}> <option value=""></option> <option value="kr">한국</option> <option value="us">미국</option> <option value="uk">영국</option> </select> {input.country} </div> <div> {/* <textarea value={input.bio} onChange={onChangeBio} /> */} <textarea value={input.bio} name="bio" onChange={onChange} /> {input.bio} </div> </div> ); }; export default Register;
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
만약 구현해야 할 페이지가 많아지면 Router를 효율적으로 사용하는 방법이 있나요?
안녕하세요. 좋은 강의 공유해주셔서 감사합니다. 덕분에 실무에 잘 활용하고 있습니다. 12.4) 페이지 라우팅 강의를 듣던 중 궁금한 점이 생겨 질문 드립니다. 예시 프로젝트엔 페이지가 3개로 비교적 적은 페이지수라서 App 컴포넌트 밑에 Router 로 경로를 지정해줄 수 있지만 몇 십개씩 혹은 몇 백개씩 넘어가는 페이지를 만들어야 할 때는 Router를 어떻게 활용해야 하나요? Router가 아닌 다른 방법이 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
03-02 회원가입 질문
왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
03-02 회원가입 피그마에 나온거 처럼 만드는문제
섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
django-crispy-form에서 {% include 와 with %}
django-crispy-form에서 {% include 와 with %} 다음과 같이 에러가 나타나고, {% include "_crispy_form.html" %}with 절을 제외하니 정상 동작합니다.정확한 이유는 모르겠으나, 문법이 그 사이에 바뀐 것일 수도 있고 해서 일단 공유하는 마음으로 질문드립니다. 감사합니다.
-
미해결손에 익는 Next.js - 블로그 만들기
PPR 적용 후 여전히 SSG로 배포되는 이슈
안녕하세요 조은님!! 😀 강의 너무 잘봤고 완강 후 질문 남깁니다!마지막 기능인 PPR와 Suspense를 적용한 이후에 html에서 확인해봤을 때 동적인 요소로 채워지고 있는 것을 확인할 수 있었습니다.그런데 Vercel에서 Build Logs를 확인해보면◐ (Partial Prerender) 으로 뜨는 것이 아니라 여전히 ● (SSG) prerendered as static HTML 으로 뜨는데요, PPR 적용이 잘 된게 맞을까요?Suspense가 적용이 잘 되는데 PPR은 적용이 안된걸까요? 코드 작업 후 적용결과 첨부하겠습니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
web APIs 랑 web API랑 혹시 다른 말일까요?
뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.
-
미해결만들면서 배우는 리액트 : 기초
강의노트
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안 보이는데 어디서 찾을 . 수있나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인, 로그아웃, 토근 작동 안 함
강의가 오래되어 현재 버전과 맞지 않는 코드가 있습니다. 혹시 저처럼 25년에 수강 중인분들은 참고 해주세요.강의 따라 코드가 작동안되어 챗GPT에 물어보면서 찾은 해결법입니다.로그인/ 로그아웃/ 토큰 삭제 및 생성 관련 코드가 콜백 방식으로되어 있어 최선 버전과 맞지 않다고 합니다.then/catch 또는 amsyc/await 방식으로 기능과 미들웨어 부분을 수정하시면 코드 작동합니다.긴 글 읽어주셔서 감사합니다.필요하시면 깃 공유 하겠습니다
-
미해결처음 만난 리액트(React)
npx create-react-app my-app
npx create-react-app 까지는 잘 되는데 그 밑으로는 이런 오류가 뜨면서 되지가 않습니다..
-
미해결처음 만난 리액트(React)
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
ERROR in ./src/chapter_03/Library.jsx 5:0-24Module not found: Error: Can't resolve 'Book' in '/../my-react1/src/chapter_03'Did you mean './Book'?Requests that should resolve in the current directory need to start with './'.Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /../my-react1/node_modules).If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.어떻게 해야 할까요?