월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
폼 만들때 실무에선
안녕하세요 제로초님 실무에서 여러 인풋 요소가있는 폼을 만들때 formik이나 react-form-hook 같은 라이브러리를 사용하는 것을 선호하는 편이신가요?? 아니면 라이브러리를 쓰지 않고 직접 코드를 짜는 것을 선호하시나요!!?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
-
-
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
코드 질문이요
10:00분에서 useEffect(() => { if (!(me && me.id) { Router.push('/'); } }, [me &&.id]); if (!me) { return null; }; 이 코드를 if (!me) { Router.push('/'); return null; }; 이렇게 코드 바꿔도 오류는 없던데 밑에 껄로해도 별 차이 없는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이 있습니다.
제 방식대로 이미지 포함해서 수정하기 짜는중인데 질문이 두 개 있습니다. 1. firstImage <button onClick={onRemoveImage(i)}>제거</Button> 클릭시 해당 firstImage 에 있는 i값을 제외하고 filter로 가지고와서 해당 화면의 삭제 이외의 것들을 가지고 올껀데 dispatch 말고 어떻게 filter 된 값이 화면에 뿌려지게 해야할까요? firstImage 는 게시물의 기존 이미지 이고 imageUpdateState 는 firstImage 일때는 dispatch 안보내고 자체적으로 필터처리 해주기 위한 state 값입니다. 필터 처리는 되는데 삭제처리 한 후의 값 들을 이제 화면에 뿌려지면서 해당 화면에 보여줘야하는데 필터는되지만 화면 리렌더링이 안되어서 값이 안바뀌는 것같아요 어떻게 해야 할까요? 그래서 제가 알기론 state값이 바뀌면 리렌더링 되니까 setTest로 test 해보니 리렌더링은 되는 것 같은데 아래 console.log firstImage가 undefine가 나오는데 음.... 2. 이미지 삭제 적용 관련 dispatch 한 후 useSelctor로 받아온 데이터가 수정되어서 리렌더링 되는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이 있습니다.
같은 작업을 또하면 빠르게 렌더링 되는 이유가 무엇인지 한번 작업한 기능은 브라우저에서 캐싱해서(데이터를 가지고있어서) 다음동작을 빠르게 수행한다 정로로 알고있는데 직접 그 저장되는 내용과 동작을 보고싶은데 어디를 봐야하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react-query 관련 질문입니다.
너무 자주 질문드리는거 같아서 죄송스럽네요. 항상 친절하신 답변 감사드립니다. react-query 관련하여 질문드립니다. NicknameEditForm.js 에서 nickname 변경할 때 axios.patch를 사용하기 때문에 저는 useMutation 사용하였는데 제로초님께서는 useQuery를 사용하셨더라구요. 질문1. useMutation 대신 useQuery를 사용하신 이유가 있으신가요? ( C,U,D 의 경우에는 useMutation을 사용한다고 알고 있어서요.. ) 질문2. useQuery를 사용하게 되면 loadMyInfoAPI를 다시 한 번 호출하는 텀 동안에는 화면에서 UserProfile에서는 nickname이 렌더링이 안되지 않나요? 추가로 현재 followers와 followings를 불러오는 profile.js 부분 하고 있는데요.. useInfiniteQuery를 사용하여 똑같이 구현해보았습니다. 이 때 더보기 버튼을 클릭하면 req.query로 { page: 1 }은 들어가는 것이 확인되었고 getNextPageParam에서 pages를 찍어보면 배열이 하나 더 들어온 것을 확인할 수 있는데 빈 배열이 와서 추가적인 followers를 불러오지는 않더라구요.. 이유를 모르겠습니다 ㅠㅠ (총 followers는 5명 입니다.) API 소스입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react-query 사용과 관련하여 질문드립니다 !
안녕하세요 항상 답변 감사드립니다. 현재 redux-saga를 react-query로 바꿔보려고 시도중에 있습니다. git에 올려주신 react-query 브런치 참고하여 login 부분과 loadMyinfo 부분을 바꾸고 있습니다. 이 때 back단에서 user 정보는 response로 넘어오는데 useQuery를 사용하여 이 데이터를 me 에 담아서 userProfile로 보여주려고 하는데 이 부분에서 me가 자꾸 undefined 가 나와서 여기 질문 드립니다.. useMutation을 사용하여 'user' 키에 loginAPI를 호출하여 얻어온 user 정보를 넣으면 useQuery에 'user' 키로 불러서 사용할 수 없어서 이런 에러가 나오는 건가요?? loginAPI를 통해 user 정보를 response 받는데 useQuery를 통해 loadMyinfoAPI를 호출하여 me에 넣으면 자꾸 undefined가 나오네요 ㅠㅠ <LoginForm> < apis / user.js> 위가 각각 LoginForm.js와 apis / user.js 의 코드들이고 이후 AppLayout.js와 UserProfile.js에서 useQuery를 통해 'user', loadMyInfoAPI를 호출하여 me에 담아서 사용하려고 하는데 안됩니다.. /user를 호출하면 백단에서 response는 넘어오는 것으로 확인됩니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문 있습니다.!
DB 쿼리 관련 질문입니다. 예시는 해시태그 검색 관련 시퀄라이즈 쿼리입니다. SELECT `Post`.*, `Hashtags`.`id` AS `Hashtags.id`, `Hashtags`.`content` AS `Hashtags.content`, `Hashtags`.`createdAt` AS `Hashtags.createdAt`, `Hashtags`.`updatedAt` AS `Hashtags.updatedAt`, `Hashtags->PostHashtag`.`createdAt` AS `Hashtags.PostHashtag.createdAt`, `Hashtags->PostHashtag`.`updatedAt` AS `Hashtags.PostHashtag.updatedAt`, `Hashtags->PostHashtag`.`HashtagId` AS `Hashtags.PostHashtag.HashtagId`, `Hashtags->PostHashtag`.`PostId` AS `Hashtags.PostHashtag.PostId`, `User`.`id` AS `User.id`, `User`.`nickname` AS `User.nickname`, `Images`.`id` AS `Images.id`, `Images`.`src` AS `Images.src`, `Images`.`createdAt` AS `Images.createdAt`, `Images`.`updatedAt` AS `Images.updatedAt`, `Images`.`PostId` AS `Images.PostId`, `Comments`.`id` AS `Comments.id`, `Comments`.`content` AS `Comments.content`, `Comments`.`createdAt` AS `Comments.createdAt`, `Comments`.`updatedAt` AS `Comments.updatedAt`, `Comments`.`UserId` AS `Comments.UserId`, `Comments`.`PostId` AS `Comments.PostId`, `Comments->User`.`id` AS `Comments.User.id`, `Comments->User`.`nickname` AS `Comments.User.nickname`, `Likers`.`id` AS `Likers.id`, `Likers->Like`.`createdAt` AS `Likers.Like.createdAt`, `Likers->Like`.`updatedAt` AS `Likers.Like.updatedAt`, `Likers->Like`.`PostId` AS `Likers.Like.PostId`, `Likers->Like`.`UserId` AS `Likers.Like.UserId`, `Retweet`.`id` AS `Retweet.id`, `Retweet`.`content` AS `Retweet.content`, `Retweet`.`createdAt` AS `Retweet.createdAt`, `Retweet`.`updatedAt` AS `Retweet.updatedAt`, `Retweet`.`UserId` AS `Retweet.UserId`, `Retweet`.`RetweetId` AS `Retweet.RetweetId`, `Retweet->User`.`id` AS `Retweet.User.id`, `Retweet->User`.`nickname` AS `Retweet.User.nickname`, `Retweet->Images`.`id` AS `Retweet.Images.id`, `Retweet->Images`.`src` AS `Retweet.Images.src`, `Retweet->Images`.`createdAt` AS `Retweet.Images.createdAt`, `Retweet->Images`.`updatedAt` AS `Retweet.Images.updatedAt`, `Retweet->Images`.`PostId` AS `Retweet.Images.PostId` FROM (SELECT `Post`.`id`, `Post`.`content`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `Post`.`RetweetId` FROM `Posts` AS `Post` WHERE ( SELECT `PostHashtag`.`HashtagId` FROM `PostHashtag` AS `PostHashtag` INNER JOIN `Hashtags` AS `Hashtag` ON `PostHashtag`.`HashtagId` = `Hashtag`.`id` AND `Hashtag`.`content` = '노드' WHERE (`Post`.`id` = `PostHashtag`.`PostId`) LIMIT 1 ) IS NOT NULL ORDER BY `Post`.`createdAt` DESC LIMIT 10) AS `Post` INNER JOIN ( `PostHashtag` AS `Hashtags->PostHashtag` INNER JOIN `Hashtags` AS `Hashtags` ON `Hashtags`.`id` = `Hashtags->PostHashtag`.`HashtagId`) ON `Post`.`id` = `Hashtags->PostHashtag`.`PostId` AND `Hashtags`.`content` = '노드' LEFT OUTER JOIN `Users` AS `User` ON `Post`.`UserId` = `User`.`id` LEFT OUTER JOIN `Images` AS `Images` ON `Post`.`id` = `Images`.`PostId` LEFT OUTER JOIN `Comments` AS `Comments` ON `Post`.`id` = `Comments`.`PostId` LEFT OUTER JOIN `Users` AS `Comments->User` ON `Comments`.`UserId` = `Comments->User`.`id` LEFT OUTER JOIN ( `Like` AS `Likers->Like` INNER JOIN `Users` AS `Likers` ON `Likers`.`id` = `Likers->Like`.`UserId`) ON `Post`.`id` = `Likers->Like`.`PostId` LEFT OUTER JOIN `Posts` AS `Retweet` ON `Post`.`RetweetId` = `Retweet`.`id` LEFT OUTER JOIN `Users` AS `Retweet->User` ON `Retweet`.`UserId` = `Retweet->User`.`id` LEFT OUTER JOIN `Images` AS `Retweet->Images` ON `Retweet`.`id` = `Retweet->Images`.`PostId` ORDER BY `Post`.`createdAt` DESC; << 서버에 찍힌 쿼리 로그인데 -> : 화살표는 무엇을 의미하나요? 낯서네요 뭔가 저 문법은 ... 그리고 그 Retweet.~~ 이 부분 //리트윗을 하고 리트윗된 해시태그를 검색해도 retweet~의 쿼리들은 다 null로 뜨던데? 왜 넣어주신지 알 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
build 에러 질문
build시 에러가 발생하여 질문 남깁니다. eslint 8버전에서 build시 이러한 에러들이 떳는데 eslint를 강의와 같이 7버전으로 낮추어 설치를 하니 build가 되었습니다. 에러의 원인이 단순히 eslint의 버전문제인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux-saga 요즘 추세
안녕하세요. 현 시점에서 redux-saga를 실무에서 많이 쓰는 편인지 궁금합니다. 만약 잘 안쓴다면 어떤 미들웨어를 많이 쓰나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이있습니다.!!!
안녕하세요 질문이 있습니다.!!(늘 감사합니다.. 질문 많이하는데...) 기본적으로 레이아웃을 제가 짤줄을 잘 모릅니다.! 사실 짜기도 싫기도 한데... 그럼에도 불구하고 그래도 어느정도 레이아웃 구색은 짤줄은 알면 좋을 것같아서요. 현 강의 기준 마우스 휠로 레이아웃 비율을 줄이면 가로로 길게 줄어드는데 보통의 레이아웃은 마우스 휠로 줄이면 전체적으로 줄어들잖아요 제로초님 블로그도 마우스 휠로 줄이면 세로 가로로 비율에 맞게 줄어들던데 그 현 강의는 antd 요소테마만 가지고해서 가로로 길게 늘어뜨려지는건가요? 휠로 줄이면 css와 div로 레이아웃 설계를 하고 그 위?안?에 antd 테마를 넣으신건가요? 그렇다면 템플릿을 쓰는게아니면 브라우저 비율을 줄일때 전체적으로 줄어들게하려면 기본 레이아웃틀 위에 antd 테마를 넣어야 겠네용?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이 있습니다.!
게시물 신고하기 관련되어 있는 내용은 유튭에서 볼 수 있는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 시도 시, 에러가 뜨며 진행되지 않습니다 ㅜ
안녕하세요 제로초님 강의 듣던중 해결이 안되는 부분이 있어 질문 드려요ㅜ로그인을 하면 redux tool 에도 LOG_IN_SUCCESS가 잘 뜹니다 또한 network에서 login 200으로 잘 찍히구요 그러나 아래의 에러가 뜨며 진행이 되지 않습니다 ㅜ const fullUserWithoutPassword = await User.findOne({ where: {id: user.id}, attributes: { exclude: ['password'] }, include: [{ model: Post }, { model: User, as: 'Followings' }, { model: User, as: 'Followers' }] }) password만 제외하고 불러오는 코드도 작성했는데 무슨문제인지 몰라서 질문드려요 ㅜ 구글링도 해보고 질문 게시판도 봤는데 무슨 문제인지 모르겠습니다ㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux-toolkit과 swr 사용에 관한 질문입니다.
항상 빠른 답변 감사드립니다. 제로초님의 nodebird 강의를 듣고 이를 기반으로 프로젝트를 진행하려고 하는데요.. 제가 next가 처음이다보니 강의와 완전히 똑같은 기술스택을 가지고 프로젝트를 진행하려고 했습니다. 그런데 검색을 할수록 redux-saga 보다는 redux-toolkit과 swr을 사용해보고 싶다는 욕심이 생기네요.. saga를 떼어내고 toolkit과 swr을 사용하려면 기존에 saga에서 처리하던 비동기를 swr을 통해 요청한다고 생각하면 되나요? toolkit은 기본적으로 비동기를 thunk로 처리한다고 알고 있는데 swr을 사용하면 비동기를 swr로 처리하게 되는 건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 라우트 접근권한 관련해서 질문드려봅니다.
안녕하세요. next에서 serversideprops를 사용한다면 크게 문제될거같진 않지만 react에서는 serversideprops를 사용하지 못하는데 그렇다면 관리자 페이지 접근시에는 스테이트값으로 막는다 하더라도 새로고침시에는 다시 로그인정보를 확인해서 접근 하거나 뒤로 보내야하는데 이런 부분은 어떻게 처리하는게 좋을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ie11
제로초님 안녕하세요, 제로초님 강의를 바탕으로 개인적으로 진행하고 있는 프로젝트가 있는데, ie11에서 접속조차 되지 않아 질문 드립니다.. main.js 디버거 _app.js 디버거 npm run dev로 실행시 위와 같은 에러가 발생했습니다. 혹시나 하는 마음에 _app.js에서 react-app-polyfill까지 import 해봤는데 안되네요ㅠㅠ 제가 어디서 놓치고 있는것이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문 X ,로그인되고 쿠키도 있는데 로그인하라고 에러발생할떄
프론트, 백엔드 서버 홈페이지 둘다 들어가셔서 개발자 도구 -> application -> cookie 삭제하고 다시 로그인해보세요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
req.login 함수 동작에 관한 질문
안녕하세요 강의 듣는 도중 궁금한 점이 생겨 질문 남깁니다. 제가 기초 개념이 부족한 탓인지 req.login이 동작 되는 원리를 모르겠습니다. 제가 알기로는 브라우저에서 api 요청시 요청 정보가 req객체에 담겨서 벡엔드로 가는 걸로 알고 있는데 req 객체는 express에서 제공되는 객체이고 req.login에서 login 메서드는 passport에서 제공되는 것 같은데 혹시 제가 잘못 알고 있는 것이고 1.req객체가 login이라는 메서드를 지원하는 건가요? 그게 아니라면 post('/login', (req, res, next) => { passport 미들웨어 })(req, res, next); 이런 코드에서 2. req객체가 passport 모듈을 상속 받는 건가요..? js를 잘 몰라서 이해가 안가나 싶어서 프로토타입, 클로저 이런 키워드로 좀 찾아 봤는데 그래도 이해가 잘 안되서 질문 남깁니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 !! 존경하는 제로초님 질문이 있습니다!
안녕하세요 제로초님 ! 수업 열심히 듣고 있습니다. 에러에 관한 질문은 아니고 개인적인 질문입니다 ㅜ.ㅜ 원래 리액트를 조금은 공부한 대학생이고, 협업을 하기전 강의로 부족한 부분을 알아가기 위해 듣고 있습니다. next.js도 공부해보고 싶었구요! Q0. 저는 redux에서 액션을 생성할 때 redux-actions를 이용해서 createAction을 사용하고, switch 대신 handleActions를 사용하고 있습니다. 이번 수업에서도 사용해서 진행하고 있습니다. 제 생각에는 취향 혹은 손에 익은 차이가 가장 클 것 같아서 swtich 혹은 return 형식으로 리덕스 액션 생성 함수와 아래 리덕스 타입에 따른 실제 상태 변환을 해주신다고 생각하는데, 그게 맞을까요 ? Q1. 컨테이너를 따로 분리하지 않고 컴포넌트 안에서 바로 액션 디스패치를 넣어주시고 있는데, 강의 도중에 설명도 해주셨지만, 요즈음은 이렇게 바로 컴포넌트에 넣는 것으로 많이 쓰는지 궁금합니다. 저녁에 질문 드려 죄송합니다 !! 초보자라서 질문이 혹시 이상하다면 말씀해주시면 감사하겠습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
타입스크립트와 사가를 같이 사용할때
proptypes 를 사용하지않고 타입 스크립트로 진행하고있는데 take 함수에서 다음과 같은 타입에러가 뜨는데.. 찾아봐도 모르겠어서 질문 드립니다... take 안에 스트링만 들어갔을땐 문제가 없는데 take("LOG_IN_REQUEST", logIn) 이런식으로 들어가면 에러가 납니다.