44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프로젝트로 배우는 React.js
설명이 부족 한 듯..
router 영상을 보고 있는데..browserRouter 가 뭔지.. router가 뭔지..이런 기초적인 개념 설명도 없고..그냥 불러다 쓰라고 하면..이건 좀 아니지 않나?
- 미해결프로젝트로 배우는 React.js
pagination nav가 안보여요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.BlogList에 limit은 1로하고 Pagination의 default props limit값은 5로 했을때,페이지의 값과 default props limit의 값이 같으면 네비게이션이 생성되지가 않아요..
- 미해결프로젝트로 배우는 React.js
블로그 낫 파운드 ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이렇게 하면, 블로그 낫 파운드가 뜹니다. ㅠㅠ_order : 'desc' 가 없으면 블로그가 잘 떠요 axios.get(`http://localhost:3001/posts`, { params : { _page: page, _limit: 5, _sort: 'id', _order: 'desc', }
- 미해결프로젝트로 배우는 React.js
return (<div></div>)
return <LoadingSpinner />어떤 경우에는 () 괄호를 치고 return 을 하고,어떤 경우에는 < /> 태그만 치고 return 을 하는데 그 차이가 뭔가요?
- 미해결프로젝트로 배우는 React.js
useState 에 대해
3:20모델 값이 갱신이 안되서 그런건가요?모델이 원웨이로 돼어있나요?useState 를 쓰면 모델이 투웨이로 바뀌는건가요?
- 미해결프로젝트로 배우는 React.js
에러떠요..
41 수정 페이지 폼 1하는데막혀서 진도를 못나가고 있습니다. BlogForm.js const {id} = useParams(); useEffect((id) => { axios.get(`http://localhost:3001/posts/${id}`).then(res =>{ console.log(res) setTitle(res.data.title); setBody(res.data.body); }) }, [id]);강의대로 넣었는데폼입력 페이지에서 아래와 같은 에러가 뜹니다. axios가 문제인건가요?서버는 재기동해도 이상없는거 같습니다.ListPage.js(/blogs) 폴더내의 리스트와ShowPage.js(/blogs/1)는 정상적으로 보입니다.
- 미해결프로젝트로 배우는 React.js
useCallback 의존성 배열
const getPosts = useCallback((page = 1) => { let params = { _page: page, _limit: limit, _sort: 'id', _order: 'desc', title_like: searchText, } if (!isAdmin) { params = {...params, publish: true} } axios.get('http://localhost:3001/posts', { params }).then((res) => { setNumberOfPosts(res.headers['x-total-count']) setPosts(res.data); setLoading(false); }) },[isAdmin, searchText]) const onSearch = (e) => { if(e.key === 'Enter') { history.push(`${location.pathname}?page=1`) setCurrentPage(1); getPosts(1); } }getPosts 함수에 의존성 배열로 searchText가 들어가야 하는 이유는 뭔가요? 검색하려면 onSearch 함수가 실행될 때 getPost가 실행되는데 searchText 하나하나 바뀔 때마다 getPosts가 미리 새로 만들어질 필요는 없지 않나요?
- 미해결프로젝트로 배우는 React.js
인자가 필수로 들어가야 하는지 궁금합니다
안녕하세요! 강의에서는 const getPost = (id) => {} 이거나 getPost(id) 이렇게 작성하셨던데 아래 제 코드랑 문법적으로 어떤 차이가 생기는지, 제 코드로 인해 문제가 발생할 일은 없는지 궁금합니다!const ShowPage = () => { const { id } = useParams(); const [post, setPost] = useState({}); const getPost = () => { axios.get(`http://localhost:3001/posts/${id}`).then((res) => { setPost(res.data); }) } useEffect(()=>{ getPost(); },[]) return ( <div> <div>{post.title}</div> <div>{post.body}</div> </div> ) };
- 미해결프로젝트로 배우는 React.js
AxiosError: Network Error가 뜹니다
13강에서 DB에 데이터를 저장할때 타이틀과 바디에 글을 쓴 뒤에 포스트 버튼을 누르면콘솔창과 화면에 이렇게 뜹니다..ㅠㅠ왜이럴까요..?
- 미해결프로젝트로 배우는 React.js
리액트 설치하려고 하니 에러가 뜹니다
안녕하세요.강의 그대로 리액트를 설치하는데 에러가 뜨네요무슨 문제일까요..?
- 미해결프로젝트로 배우는 React.js
23강 localhost 질문드립니다!!
23강 수업중에 초반부터 오류가 생기더라구요 한번 확인해주시면 감사하겠습니다
- 미해결프로젝트로 배우는 React.js
renderBlogList 함수는 순수함수가 아니어도 괜찮은가요?
React 진영에서 functional component나 hook 등은 순수 함수로 작성하도록 권장되는 것으로 알고 있는데요,renderBlogList 함수는 외부 스코프에 있는 loading, posts값에 의존성을 가지기 때문에 순수함수가 될 수 없는 것으로 보이는데이를 순수함수로 변경하는 것이 더 나은 코드를 작성하는 방법일까요? 아니면 굳이 그렇게 할 필요까지는 없을지 궁금합니다.
- 미해결프로젝트로 배우는 React.js
페이지네이션 버그 있습니다.
변수 명은 편한대로 변경했습니다.numberOfPageForGroup = currentGroup === lastGroup ? totalPages % limit : limit;처음 알려주신 코드 로직 그대로 사용하면totalPages가 limit으로 나누어 떨어져서 나머지가 0인 경우 버그가 발생합니다. const numberOfPageForGroup = currentGroup === lastGroup && totalPages % limit !== 0 ? totalPages % limit : limit;나누어 떨어지는 경우도 처리해줘야 정상 작동합니다.
- 미해결프로젝트로 배우는 React.js
글 삭제 기능 구현 방법
강사님께서 작성해주신대로 안하고function deletePost(e, id) { e.stopPropagation(); axios.delete(`http://localhost:3001/posts/${id}`); } useEffect(() => { getPosts(); }, [posts]); useEffect deps에 posts를 넣어주는 형식으로 구현하면 좋지 않은 방식인가요? 개발자 도구 Network보면 요청이 계속 가서 좋지 않은 방법 같긴 한데, 생각해보면 useEffect 사용 시 deps에 무언가를 바라보게 하는 방법을 많이 쓰는 것 같기도 해서요.
- 해결됨프로젝트로 배우는 React.js
react-router-dom 버전 업그레이드에 따른 문제
더이상 switch를 사용할 수 없다고 해서 routes, route로 바꿨더니history.ts:480 Uncaught Error: [div] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 위 오류가 나옵니다.제 코드는 아래와 같습니다.return ( <Router> <div> <Link to="/">Home</Link> <Link to="/blogs">Blogs</Link> </div> <Routes> <Route path='/'><div>Home Page</div></Route> <Route path='/blogs' element={ <div className='container'> <div className='mb-3'> <label className='form-label'>Title</label> <input className='form-control' value={title} onChange={(e) => setTitle(e.target.value)}/> </div> <div className='mb-3'> <label className='form-label'>Body</label> <textarea className='form-control' value={body} onChange={(e) => setBody(e.target.value)} rows='20'/> </div> <button className='btn btn-primary' onClick={onSubmit}>Post</button> </div> }> </Route> </Routes> </Router> )
- 해결됨프로젝트로 배우는 React.js
state가 업데이트되는 기준이 궁금합니다.
리렌더링하기 전에 state를 한번에 업데이트 시켜준다고 하셨는데 const [number, setNumber] = useState(1); const double = () => { setNumber(number * 2); console.log(number); };여기서 state는 number 하나밖에 없는데 double을 실행했을 때 왜 2배가 된 number값이 찍히지 않는거죠? state를 한번에 업데이트시켜주는데 어차피 state가 하나니까 number값이 업데이트되고, 그게 콘솔에 찍힐 것 같은데 말이죠.. 그리고 만약 const [number1, setNumber1] = useState(1);도 있다고 가정하면 setNumber(number * 2); setNumber1(number1 * 2); console.log(number);위와 같은 경우에 코드는 위에서부터 실행되니까 number와 number1 둘다 업데이트가 된 다음에 콘솔이 찍히는거라 number가 2배된 값일 것 같은데 아닌 이유는 뭐죠? console.log가 set함수보다 먼저 찍히는건가요? 답변 미리 감사드립니다!
- 미해결프로젝트로 배우는 React.js
id가 두번 찍혀요
import { useParams } from "react-router-dom"; const ShowPage = () =>{ const {id} = useParams(); console.log(id); return <div>Show Page</div>; }; export default ShowPage;
- 미해결프로젝트로 배우는 React.js
error handling 2 => ShowPage.js, BlogForm.js에서 에러가 납니다.
BlogList.js까지는 강의와 동일하게 에러처리가 되었으나 ShowPage.js에서 에러 처리 후 확인을 하면글 수정후 => DB끄고 => edit버튼을 누른 상태입니다. 깃 허브에서 ShowPage.js파일 소스를 그대로 복사 붙이기 해도 그렇습니다. 제가 어느 부분을 놓쳐서 이런건지? 어디가 잘못된 것인지? ... 잘 모르겠습니다.^^ ㅠㅠ
- 해결됨프로젝트로 배우는 React.js
에러 핸들링에서 토스트가 2개씩 뜹니다..
강의를 보면서 적용을 했는데toast가 2개씩 뜨고 2개씩 사라집니다..이 경우 어떻게 해야할까요?? .then(() => { addToast({ type: "success", text: "Successfully created", }); history.push("/admin"); }) .catch((e) => { addToast({ text: "We could not create blog", type: "danger", }); });
- 미해결프로젝트로 배우는 React.js
36 블로그 db에서 받아와서 화면에 보여주기 에서
const[post,setPost]=useState([]); null이아니라 []을넣으니 잘 되네요