44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프로젝트로 배우는 React.js
13번째 DB에 저장을 따라하고 있습니다.
수업을 따라하면서 json-server는 -g 옵션을 넣어서 설치를 했습니다.npm install -g json-serverjson-server --watch db.json --port 3001npm i axios를 하고 npm start를 한 후 input과 textarea에 내용을 입력한 후 submit버튼을 눌렀는데 console 옆옆에 있는 network를 보니name 첫 부분에 빨간색으로 posts가 뜨면서 status가 404가 됩니다.무엇을 잘 못했을까요?https://github.com/yabosu02/cozi
- 미해결프로젝트로 배우는 React.js
useParams 가 동작하지 않습니다.
안녕하세요.useParams 으로 파라미터 값을 보낸 뒤,console.log() 로 값을 출력해 보고 싶은데요.자꾸 undefined 만 출력 됩니다.대체 이유가 뭘까요??? ㅠㅠㅠㅠㅠㅠ// App.js import './App.css'; import { Routes, Route } from 'react-router-dom'; import Navbar from './components/Navbar'; import routes from './routes'; function App() { return ( <div> <Navbar></Navbar> <div className='container mt-3'> <Routes> {routes.map((item, i) => { return ( <Route path={item.path} element={item.component()} key={i} ></Route> ); })} </Routes> </div> </div> ); } export default App; // routes.js import HomePage from './pages/HomePage'; import ListPage from './pages/ListPage'; import CreatePage from './pages/CreatePage'; import EditPage from './pages/EditPage'; import ShowPage from './pages/ShowPage'; const routes = [ { path: '/', component: HomePage, }, { path: '/blog', component: ListPage, }, { path: '/blog/create', component: CreatePage, }, { path: '/blog/edit', component: EditPage, }, { path: '/blog/:id', component: ShowPage, }, ]; export default routes;// ShowPage.js import { useParams } from 'react-router-dom'; const ShowPage = () => { let { id } = useParams(); console.log(id); // undefined 출력 return <div>Show Pages</div>; }; export default ShowPage;
- 미해결프로젝트로 배우는 React.js
toastSlice를 store에등록할 때 질문있습니다.
안녕하세요~ 강의 71강 5분 20초쯤toastSlice에서 export default toastSlice.reducer; 로 내보냈는데요.이걸 store에 등록할때, import toastReducer from './toastSlice' toastSlice가 아닌 toastReducer로 이름이 변경된것인가요? 강의처럼 이름을 마음대로 변경해서 가져오고 경로만 맞으면 되는건가여?
- 미해결프로젝트로 배우는 React.js
PropTypes 설정
PropTypes를 사용하실 때BlogList.propTypes = { isAdmin: bool }; 이런식으로 하단에 PropTypes 키워드를 사용 안하실 때도있고상단에 PropTypes를 import안하실때도 있으시고..BlogList.propTypes = { isAdmin: propTypes.bool, }; PropTypes를 소문자 p 로 propTypes라고 적용하실때도 있는데 이 경우는 그렇게 엄격하지 않은가요?
- 미해결프로젝트로 배우는 React.js
Cancel 버튼
안녕하세요. 수정페이지 폼 4 강의에서Cancel 버튼 클릭 시 goBack 함수에서 사용하신const goBack = () => { if (editing) { navigate(`/blogs/${id}`); } else { navigate('/blogs'); } };대신에const goBack = () => {navigate(-1);}-1 로 뒤로가기를 하면 문제점이 있을까요?
- 미해결프로젝트로 배우는 React.js
prePosts는 어디서 받아 오는 건가요?
const deleteBlog = (event, id) => { event.stopPropagation(); console.log("delete"); axios.delete(`http://localhost:3001/posts/${id}`).then(() => { setPosts((prevPosts) => { console.log(prevPosts); return prevPosts.filter((post) => { return post.id !== id; }); }); }); }; prevPosts는 delete후에 api에서 넘겨 주는 것인가요? 아니면 기존 posts값인가요>
- 미해결프로젝트로 배우는 React.js
31 블로그 게시글 삭제하기 filter 질문
안녕하세요~삭제된걸 blogs 페이지에 보여주기 위해서filter 메서드를 쓰셨는데 혹시 왜 이 메서드를 쓰셨는지 알수있을까요? 아래처럼 새로고침 하는 코드를 넣으면 더 간편하지 않을까 싶어서요! filter를 쓰는게 성능적으로나 혹은 어떤 이유에서 더 유리할까용??혹은 성능적인 이슈보다는 단순히 새로고침(?) 되는 과정없이 자연스럽게 화면에 보여주기 위해서 하신건가용?!?window.location.reload();
- 미해결프로젝트로 배우는 React.js
편집
72번째 강의 초반부 편집오류 있습니다.
- 미해결프로젝트로 배우는 React.js
비동기문제
강의에서는 toast가 비동기적으로 실행되는것을 해결하기 위해 useRef를 활용했는데 혹시 async나 promise로도 해결이 가능한건가요?
- 미해결프로젝트로 배우는 React.js
useState 사용 오류
코드는 영상과 똑같이 작성하고 useState를 사용하니 컴파일은 성공했지만 브라우저에선 아래와 같은 오류가 발생하면서 흰 화면만 보입니다ㅠㅠ 해결할 수 있도록 도와주세요!Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- 미해결프로젝트로 배우는 React.js
npm i react-router-dom@6 오류
안녕하세요.버전 5->6로 업데이트 후에 문법 오류가 발생하지 않았고 영상을 보고 코드를 수정해보니 수정한 화면에서만 문법 오류가 발생합니다.서버도 재시작해보고 업데이트도 여러번 해보았는데 안되는 이유를 알고 싶습니다.package.json{ "name": "nodefolder", "version": "0.0.0", "private": true, "scripts": { "client": "cd client && yarn start", "server": "nodemon server.js", "db": "json-server --watch db.json --port 3001", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" \"yarn db\"" }, "dependencies": { "@babel/core": "^7.9.0", "@babel/preset-react": "^7.9.0", "@reduxjs/toolkit": "^1.9.1", "axios": "^1.2.2", "bcrypt": "^5.1.0", "body-parser": "^1.20.1", "bootstrap": "^5.3.0-alpha1", "concurrently": "^7.6.0", "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "^4.16.4", "fs": "0.0.1-security", "http-errors": "~1.6.3", "jade": "~1.11.0", "jsonwebtoken": "^8.5.1", "moment": "^2.29.4", "morgan": "~1.9.1", "multer": "^1.4.5-lts.1", "mybatis-mapper": "^0.6.8", "mysql": "^2.18.1", "node-cron": "^3.0.2", "nodemailer": "^6.8.0", "oracledb": "^5.5.0", "payload-react": "^0.2.1", "prop-types": "^15.8.1", "react": "^17.0.0", "react-cookies": "^0.1.1", "react-dom": "^17.0.0", "react-moment": "^1.1.2", "react-redux": "^8.0.5", "react-router": "^6.6.1", "react-router-dom": "^6.6.2", "react-scripts": "^4.0.0", "redux": "^4.2.0", "save": "^2.9.0", "styled-components": "^5.3.6", "uuid": "^9.0.0", "webpack": "^5.0.0-rc.6" } } 오류화면깃 주소https://github.com/selim0915/react-studyhttps://github.com/selim0915/react-study/tree/main/client/src/components/Nobd
- 미해결프로젝트로 배우는 React.js
리액트 18을 사용하는 수강생들에게
리액트18v를 사용하시는 분들은 강의에 나온코드를 그대로 따라하시면 버그가 발생합니다.이유는 index.js에서 더 이상 ReactDOM.render를 지원하지 않기 때문입니다.https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis위 링크를 참고하셔서 수정하시면 문제가 해결됩니다.
- 미해결프로젝트로 배우는 React.js
useParams
useParams hook을 사용할때 import를 react-router 에서 하시는데 react-router-dom에서 하든 react-router에서 하든 별 상관 없는건가요?강의에서는 react-router-dom을 사용하고 있는걸로 있는데 react-router와의 차이와 import할 때 이 둘을 구분하지 않아도 되는지 궁금합니다.
- 미해결프로젝트로 배우는 React.js
검색에서 title_like 중에
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 검색에서 title_like 중에 같은 부분만 색상을 바꿀수있나요~?!nflinflearn <- 이런식으로 결과값에 같은 부분을요 지금은 볼드지만 색상으로... 가능할까요?
- 미해결프로젝트로 배우는 React.js
json-server 용어가 cmdlet, 함수 ~~ 인식되지 않습니다.(npm i json-server -g 로 하면 해결됨)
json-server를 설치하여 사용할 때 다음과 같은 에러메시지가 떠서 구글링을 통해 여러가지 방법들을 시도해봤습니다.그 중 install 을 글로벌로 하면 해결된다고 해서 해결은 했는데에러메시지가 표출된 원인과 왜 global로 설치하면 해결되는지가 궁금합니다.답변부탁드립니다
- 미해결프로젝트로 배우는 React.js
새로고침을 해야하는 기준
안녕하세요 코지코더님 강의 수강중인 수강생입니다.가끔 보면 새로고침을 하지 않아도 local 에 바로 업데이트가 되는게 있고 이번 강의처럼 새로고침을 한번 누르시는게 있는데 그 기준이 있을까요?
- 미해결프로젝트로 배우는 React.js
코지코더님 안녕하세요. 강의 열심히 잘듣고 있습니다
코지코더님 안녕하세요. 강의 열심히 잘듣고 있습니다.강의를 보면서 client(리액트), server(mongoose) 로 작업중입니다.create/delete/read는 잘 구현이 되었으며,TodoList 목록중 목록1개를 클릭하면, 나오는 상세User페이지가 좀 힘드네요 ^^;클라이언트에서 보내는 값은1,2,3..... 이런 숫자이고요. server로 넘어가면 string 타입으로 넘어옵니다.mongoose에 생성된건 objectId 타입이라서, 서로 매칭이 안되네요. 잘몰라서 여쭤봅니다. 방법이 없을까요?아래는 제 코드 입니다. userRouter.get('/board/:userId',async(req,res)=>{ try{ const {userId} = req.params; const user = await User.findOne({_id:userId}) return res.status(200).json({success:true, user}) }catch(err){ console.log(err); return res.status(500).send({err: err.message}) } })const getPost=(id)=>{ axios.get(`/users/board/${id}`).then((response)=>{ setPost(response.data.user); }) } useEffect(()=>{ getPost(id) },[])
- 해결됨프로젝트로 배우는 React.js
소스코드 공유해주세요.
깃헙주소가 없네요..;
- 해결됨프로젝트로 배우는 React.js
db.json posts 는 import 별도로 하지 않아도 됩니까?
안녕하세요. 리액트가 처음입니다.밑에 처럼 작성했는데 이게 맞느지 모르겠습니다.import {posts} from '../../db.json'
- 미해결프로젝트로 배우는 React.js
axios.get 2번 불러오는데
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.const getPost = () => { axios.get('http://localhost:3001/posts').then((res) => { console.log(res); }) } axios.get 하면 개발자도구에서 네트워크-> posts 2번 불러오는데 이유를 알고싶습니다.