월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리듀서 콘솔
일단 로그인 로그아웃은 문제 없이 잘 되는데 문제점이 1. 사가 콘솔만 찍히고 리듀서 콘솔은 아예 찍히지 않습니다. 2. 로그아웃 할떄는 1초동안 뱅글 돌아가는게 되는데 로그인 할때는 1초동안 뱅글 돌아가는게 안되는데 이런건 리듀서 로그인쪽 문제일까요...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
_app.js 랑 _documnet.js 정확히 이해가 안갑니다.
강의 _app.js 와 Head 부분 듣고 있는데 이해가 안가서 멈추고 구글링하다가 질문글 남깁니다. 제가 이해한 내용을 이렇습니다. _app.js은 next.js에서 내부적으로 인식하는 컴포넌트 입니다. pages폴더 내부에 _app.js 파일을 작성하면 가장먼저 _app.js를 호출하게 됩니다. _app.js는 자체에서 라우팅이 적용되고 초기에 localhost:3000으로 들어갈 경우 경로가 '/' 이니까 index.js 의 retrun 값을 Component라는 props로 받습니다. localhost:3000/profile 로 라우팅 될 경우 profile.js의 리턴값을 Component라는 props로 받습니다. 즉, _app.js는 공통적으로 페이지에 레이아웃을 적용할 때 사용 합니다. ----- _document.js 역시 next에서 인식하는 컴포넌트로 _document.js => _app.js순서로 동작하고 pages 내부의 모든 페이지 컴포넌트의 html의 공통적으로 적용되는 부분을 커스텀한다. _document.js가 리액트에서 index.html 같은 역할이고 _app.js는 client.jsx 하는 부분이랑 비슷한 것 같은데 _document.js에 _app.js를 렌더링한다? 이렇게 이해하는게 맞나요 정확히 이해가 잘 안가는데 혹시 제가 틀린 부분 있거나 보충설명 해주실 수 있으면 부탁 드립니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그인 토큰으로 구현시 질문..
안녕하세요 제로초님 jwt토큰으로 로그인을 구현할때 a. 클라이언트에서 매 요청 마다 액세스토큰 만료기한 검사를해서 만료됬거나 만료시간이 가까워지면 리프레쉬토큰을 헤더에 담아서 요청하여 새로 운엑세스 토큰을 받는 로직과 b. 서버에서 만료기한 검사를하여 만료기한이 넘어갔다면 에러 코드를 보내고. 클라이언트에서 해당 에러코드를 받았을 때 새로운 액세스토큰을 발급하는 api요청을 하고서 실패했던 api를 재요청하는 로직이 있는데 1. 위 두가지의 방법에서 제로초님이 더 선호하시는 방법은 무엇인가요?? 2. 각 방식의 장단점이 보이기는 하는데.. a. 방식은 매 요청마다 토큰 만료기한을 검사하는 로직이 실행되는게 단점으로 보이는데 요게 성능에 문제가 되는 부분일까요?? 3. 로그인된 상태에서 리프레쉬토큰도 만료되면 새로 발급받는 건가요?? 리프레쉬토큰이 만료되어 갑자기 로그아웃되는 상황이 발생하여 사용성에 안좋을거같은데 또, 이렇게 한다면 리프레쉬토큰은 로그아웃하지 않는한 영구히 보존되는거라 다른 조치가 필요하지 않을까 싶어서 어떻게 활용하는지 궁금합니다. 4. 로컬스토리지로 토큰을 보관하였을때 문제가 로컬스토리지는 만료기한이없고 로그아웃 또는 직접 삭제하지 않는한 영구히 보존되는걸로 알고있는데 로컬스토리지로 보관하는 방법으로는 모든 브라우저창이 닫힐때 로그아웃처리(로컬스토리지 데이터삭제)를 구현을 못하는건가요?? 5. 쿠키에 httpOnly를 적용하면 프론트서버에선 접근이 가능하다고 말씀해주셨는데 리엑트로 프로젝트를 진행한다면 프론트엔드 코드에서는 접근할수가 없던데 맞나요!? 항상 감사합니다 제로초님!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
dispatch에 관한 질문입니다.
Post의 경우에는 addPost라는 actionCreater를 통해 action을 호출한 것이고 Comment의 경우에는 직접 action을 호출한 것으로 보면 될까요? addComment 없이 dispatch로 액션을 호출한 것이 좀 달라서 질문드립니다 !
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
글 작성시 UserID가 DB에 저장안되는 이슈
안녕하세요~ 글 작성시 UserID가 DB에 저장안되는 이슈가 있어서 질문드립니다. 게시글을 작성 후에 TypeError: Cannot read properties of null (reading 'nickname') 에러가 납니다. 지금까지 해본 것 1. 다른 답글에 적어주신 내용처럼 router/post.js 쪽에서 req.user.id를 확인해보았습니다. 위에 사진처럼 작성자의 아이디가 나왔습니다. 2. MySQL의 DB에 보니까 UserId가 올라오고 있지 않습니다. 3. res.send로 받은 result를 console.log를 찍어보니까 UserId가 없었습니다. 4. MySQL 에 UserId를 직접 입력 (1) 해보니까 에러 없이 잘 나왔습니다. 제 생각에는 Model에서 에러가 발생한 것 같습니다. 깃허브에 올려주신 것을 보니까 5버전에 클래스로 하신 코드이신데 강의에서는 위와 같이 사용중이라서 참고를 해보았으나 DB 등록시 UserId가 입력이 안되는 것 같습니다.알려주신대로 기능 추가시 흐름을 정리해서 보면서 생각해보니까 여기까지는 에러가 왜 낫는지 알겠는데 몇시간을 고민해도 버그가 수정이 안되서 송구스러운 마음을 가지고 질문드립니다. 깃허브 주소 : https://github.com/hyunjoogo/react-nodebird
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 css관련 성능최적화 관해 질문드리겠습니다
태그안에 인라인으로 css 을 적용하면 성능최적화에 안좋다고 하셨는데, 그럼 태그별로 클래스명을 주고 css파일을 따로만들어서 css을 정의하는 방식은 성능최적화에 좋은지안좋은지 여부와 , 또다른 단점이 있다면 알고싶습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
인피니티 스크롤 적용시 정렬
인피니티 스크롤로 구성할때 해당 게시물들의 정렬들은 어떻게 동작을 하게 되는 것인가요? 현재 불려온 데이터들만 정렬하는건 아닌거같아서정렬할때마다 전체 데이터를 조회해서 상위 10개씩 뽑는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
에러가 납니다...ㅠㅠ
Server Error ReferenceError: children is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack AppContainer file:///C:/Users/front/node_modules/next/dist/server/render.js (414:12) processChild file:///C:/Users/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3353:14) resolve file:///C:/Users/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3270:5) ReactDOMServerRenderer.render file:///C:/Users/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3753:22) ReactDOMServerRenderer.read file:///C:/Users/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29) Object.renderToString file:///C:/Users/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27) Object.renderPage file:///C:/Users/front/node_modules/next/dist/server/render.js (736:46) Object.defaultGetInitialProps file:///C:/Users/front/node_modules/next/dist/server/render.js (368:51) Function.getInitialProps node_modules\next\dist\pages\_document.js (145:19) Object.loadGetInitialProps file:///C:/Users/front/node_modules/next/dist/shared/lib/utils.js (69:29) 에러가 뜹니다.. 현재 강의 진도는 redux-devtools-extension 여기중에 개발자툴에서 히스토리보는 작업 할려고 서버 돌렸더니 저 문구가 뜨네요.... 아직 Server? 백엔드 만들기도 전인데 왜 이러는지모르겠어요....
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
채팅을 구현할려고할떄 테이블구조
노드버드에 채팅을 구현할려고 하는데 대충 Chat table 만들고 User 랑 관계정의 시켜서 테이블 쭉 쌓으면 될것같은데 모든 채팅 정보가 한테이블에 있으면 나중에 규모가 커진다고 가정했을때 시간이 오래걸리것같습니다. 아무리 sql이 조회가 빠르다해도 채팅의 경우 다른 Post 나 User 테이블보다 훨씬 많이 쌓일테고 유저 개개인의 채팅한 정보가 한곳에 모이다보니 A 와 B 채팅 정보를 가져오는데 모든 사람의 테이블을 다 조회하면 시간이 오래걸릴것같은데 이런경우는 어떻게 처리하는게 좋을까요? 채팅부분만 mongo 써야될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이벤트 위임이 되는 것 같은데 될 이유가 없어보입니다
이 코드에 있는 input에서 입력하고 엔터를 입력하면 이벤트 위임이 되는 듯 등록이 두번됩니다. 그래서 e.stopPropagation(); 를 이용하여 해결하려 했는데 여전히 입력이 두번씩 됩니다.. 이게 제일 최하위 컴포넌트인데 도저히 에러를 못잡겠어서 질문드립니다. 심지어 e.target.value=""로 마지막에 입력값을 지우는 코드를 집어넣으면 첫 입력이 하크 였으면 뒤에글자인 크가 한번 더 입력됩니다. (첫번쨰 입력: 하크 두번쨰 입력: 크) 대체 왜이러는걸까요..?? 항상 답변 잘 해주셔서 감사합니다 제로초님 return ( <TodoTagDiv> <TagTextInput> <input onKeyDown={onInputTag} ref={tagNameInput} placeholder='태그 이름과 배경색 글자색을 입력하시고 엔터를 눌러주세요!' /> <div> {tags.map((item) => ( <span key={item.id}>{item.tagName}</span> ))} </div> </TagTextInput> <ColorDiv> <Input value={tagBGColor} onChange={onChangeTagBGColor} type='color' bordered={false} /> <span>배경색</span> </ColorDiv> <ColorDiv> <Input value={tagTextColor} onChange={onChangeTagFontColor} type='color' bordered={false} /> <span>글자색</span> </ColorDiv> </TodoTagDiv> ); const onInputTag = useCallback( (e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); if (e.key === 'Enter' && e.target.value) { e.preventDefault(); console.log(e.target.value); setTagName(e.target.value); onChangeTags({ id: uuid(), createdAt: new Date(), tagName: tagName, tabBGColor: tagBGColor, tagTextColor: tagTextColor, }); } }, [tagName, tagBGColor, tagTextColor, onChangeTags] );
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
강의 마지막에 사용자 정보 user객체를 넘겨주던데
그것때문에 다음 강의에서 payload 확인해보면 로그인 정보가 그대로 노출되는건데 맞는 코드인건가요? 꼭 사용자 정보를 넘겨줘야 하는건가요? 아니면 그냥 res.send(true) 이런 코드도 가능한건가요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. next api route에 대해서 질문있습니다.
안녕하세요!! (강의 별개 질문입니다) 강의를 다 듣고난 후에 next 공식문서를 찾아보니까 api route 관련 글이 있었습니다. page 아래 api 폴더를 만들어서 data fetch 요청을 통해 호출하는거 같더라구요.. 구글링을 해서 사용방법은 대략 알 것 같은데 왜 사용하는지..? 이유를 정확하게 잘 모르겠습니다. 어떠한 경우에 next api route 를 사용하는지 알 수 있을까요? 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인폼에서 dispatch 하면 폼이 전송됩니다..
(Login.js) 여기서 로그인 버튼을 누르면 submit 함수로 id와 password를 리덕스 loginRequestAction으로 id와 password 데이터를 실어서 디스패치 시켜주었습니다. 로그인을 누르면 이렇게 아이디와 패스워드가 콘솔에 찍혀있습니다. (reducers/user.js) 리덕스에서 로그인 요청을 받고, type과 data를 사가로 넘겨주고, 사가에서 받은 데이터는 action.data로 draft.me에 넣었습니다. (sagas/user.js) 로그인 API에 디스패치받은 action.data를 넣어, 로그인 post API를 호출했습니다. (models/User.js) 간단한 몽고DB 모델을 만들었습니다. (app.js) 서버로 와서 패스포트 인증부분을 만들었습니다. 이러고 나서 로그인 버튼을 누르면 네트워크에 로그인에 이렇게 폼이 데이터로 넘어가 있고.. me 데이터를 콘솔로 찍어보면 이렇게 html로 나타납니다.. 3일동안 원인도 잘 모르겠고, 뭐라고 검색해야 할지도 잘 모르겠어요.. 이유가 뭘까요 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getStaticProps
11:37 에 getStaticProps 가 이벤트페이지 같은거에 적합하다 하셨는데 getStaticProps 라는게 npm build 를 하거나 npm run dev 를해서 서버를 키면 getStaticProps가 html 을 정적으로 만드는것까지 이해가 가는데 만약 이벤트 페이지를 변경하거나 삭제하고싶을때 이벤트 정보가 담긴 DB 는 삭제 또는 수정해도 이미 html 로 만들어놔서 그대로 보여주고 서버를 껏다 켜야지만 삭제 또는 수정한 내용이 적용되는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요, 제로초님! 모델관련 질문이 있습니다.
myPage라는 페이지에 user가 Cart에 담은 product를 결제했을때 payment(결제내역)을 보여주려고 합니다. 이것을 처음에 payment(결제내역) 모델과 Cart 모델을 연결시켜서 결제내역을 보여주게 하였습니다. 그런데 user가 Cart에 있는 product를 삭제할때 Payment의 내역까지 같이 삭제되는 현상이 발생했습니다. 생각해낸 방법이 Cart모델의 같은 내용을 가진 recordCart 모델을 만들어서 연결시켰습니다. Payment내역을 불러올때는 recordCart모델과 연결, user가 Cart의 Produdct를 삭제하거나 할떄는 Cart모델과 연결 하는 식으로 하였는데 이렇게 모델을 복사하여 사용하는게 별로 좋지 않은 방법일까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
runtime error 질문드립니다.
아래 그림과 같은 에러가 나는데 어디가 문제일까요... state를 console로 찍어보니 undefined가 찍히는데 이 말은 useSelector로 state를 못 가져왔다는 말인가요?? 저 부분 없애면 작동합니다...
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
state의 무결성?
안녕하세요. 올려주신 리엑트쿼리 기반으로 연습하고 있습니다. antd의 datepicker 이용해서 기간별로 포스트 불러오는걸 해보고 있습니다. 리액트의 state에 관해서 좀 기초적인?원초적인? 질문이 있습니다.. 출발날짜의 상태와 변경함수 const [ startDate, setStartDate ] = useState(moment().subtract(5, 'days')); ... const onChangeStartDate = (date, dateString) => { setStartDate(date); }; 날짜 변경후 적용버튼 눌러 서버 데이터 갱신하는 부분 const onLoadTodos = () => { if(!startDate || !endDate){ message.error('날짜를 선택해 주세요.', 0.5); return; } queryClient.invalidateQueries('orders'); } 데이터 가져오는 useQuery 부분 const { status, isLoading, data: orders } = useQuery('orders', () => { console.log('useQuery'); console.log(startDate); const from = startDate.toDate(); const til = endDate.toDate(); const params = {from:from, til:til, stat1: orderStatOpt}; console.log(params); return loadTodosAPI(params)} ... 날짜를 변경setStartDate(date);한다음에 <Button onClick={()=>{console.log('메롱', startDate)}}>날짜보기</Button> 이렇게 버튼으로 startDate값을 가져오는것과 invalidateQueries('orders'); 로 useQuery('orders',를 불러서 안에서 startDate를 가져오면 값이 다르게 나오는데.. 원래 state의 값이 다르게 나오기도 하나요? 아니면 useQuery안에서 state가 다르게 작동한건지.. 이상태에서 브라우저밖으로 커서 이동했다가 다시 들어오면(갱신시) state값이 동기화되긴 합니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
sudo npx pm2 monit 화면 질문
S3_ACCESS_KEY_ID S3_SECRET_ACCESS_KEY 만약 .env 파일에 값이 없는 상태에서 이미지 파일을 넣으면 에러가 떠야 하는데 안뜨는 이유는 어떤건가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
궁금한 점이 있습니다.
getServerSideProps의 req.headers.cookie 는 로그인 하고 브라우저의 Application => Cookies에 생긴 쿠키와는 다른건가요? 브라우저에 있는 쿠키를 지우고 새로고침 시 로그인이 풀리던데 그럼 서버사이드렌더링(getServerSideProps) 중 LOAD_MY_INFO_REQUEST 를 할떄 프론트 서버에서 브라우저에 있는 쿠키를 활용하는게 아닌가요? 서버사이드 렌더링 시 브라우저를 통하지 않는데 브라우저에 있는 쿠키를 지우면 로그인 풀리는 부분이 잘 이해가 가지 않습니다. req.headers.cookie 는 브라우저에 있는 쿠키랑은 다른건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
서버 실행은 잘 되는거 같은데 막상 주소창에 입력하면 '사이트에 연결할 수 없음'이 뜹니다
안녕하세요. 제로초님! sudo node app를 명령어로 terminal에선 실행이 되는데 브라우저 주소창에 "퍼블릭 IPv4 주소"를 입력하면 '사이트에 연결할 수 없음'이라고 뜹니다. sudo vim app.js 명령어로 포트를 80으로 바꿨고 aws ec2 보안 정책에서도 80포트를 설정해줬습니다. sudo npx pm2 monit를 실행해보면, process list에 app이 있지만 app.logs에 아무것도 뜨지 않습니다. 구글링도 해봤는데 어떤 부분이 문제인지 찾질 못하겠습니다. 조언 부탁드립니다!