월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql 설치후 react-nodebird 가 뜨지않습니다.
안녕하세요. 강의를 듣다가 해결하지 못하는 부분이 있어서 이렇게 여쭤보게 되었습니다. mysql 설치 및 config와 index를 설정 후 workbench에 들어갔지만 react-nodebird가 뜨지 않습니다. 제가 react-nodebird를 직접 만들어야 하는 것인지 아니면 강의와 같이 했을 경우 자동으로 생성 되는지 궁금합니다. 만약 생성 된다면 해결방법을 알려주시면 진심으로 감사하겠습니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Sequelize Create와 ADD의 차이점이 궁금합니다.
제목 그대로 sequelize에서 새로운 column을 생성할 때 create 혹은 add를 쓰는 것 같은데, 그 두개를 어떨때 다르게 사용하는지 궁금합니다. 이제까지 강좌를 보면서 create를 쓸 때는 model에서 기재했던 define안에 들어있는 값들을 넣어서 생성할때 사용하고, add를 쓸때는 associate과 연관된 값들을 넣을때 사용한다고 생각했었습니다. 하지만 retweet 강의에서는 create안에 associate 관련된 값들을 한번에 넣어서 생성하셨는데, 어떤 기준으로 create 혹은 add를 쓰는지가 궁금합니다. 아니면 add는 이미 create된 row에 추가로 값을 추가하는 개념인가요? const retweet = await Post.create({ UserId: req.user.id, RetweetId: retweetTargetId, content: "retweet", });
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
웹사이트
선생님이 만든신 웹사이트가서 좋아요를 눌렀을때 다른사람이 좋아요를 눌른게 보이지 않는것같습니다 그리고 로그인하기전에 저가 누른 좋아요가 없어졌어요 카운트가 안되는건가요? 좋아요 누적이랑 여러사람이 눌렀으면 좋아요 4~5 이렇게 숫자로 보여져야하는것같은데 버그인듯합니다 아니면 구현이 안된건가요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
카드가 반응형 스타일이 좀 이상하게 됩니다.
ㅋ카드가 모양이 제대로 안나옵니다. antd에서 가져오고 딱히 건든건 없는것같은데 무엇이 문제일까요 import React from "react"; import { List, Button, Card } from "antd"; import { StopOutlined } from "@ant-design/icons"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: "20px" }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(item) => ( <List.Item style={{ marginTop: "20px" }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> )} /> ); }; export default FollowList;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
갑자기 궁금한게 생겼습니다
첫 화면을 저 화면이 아닌 그냥 일반적인 홈페이지로 만들고싶은데 만약 인덱스에다 해놓으면 URL을 쳤을때 로그인도있고 포스트도 있는 화면이 보여요 만약 첫화면을 따로 만들고싶으면 index2 라고 이렇게 만들어야하는건가요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
MenuItem Should not leave undefined key
FollowList.js 에 위와같이 코드를 작성했는데, Warning: MenuItem should not leave undefined `key`. 이런 에러가 뜨더라고요... 저기서 말하는 key가 Card.Meta에 적은 key값인건지... 아님 다른 key값인건지 구글링해도 알 수가 없어서 문의드립니다
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
next는 파일 확장자
같은 자바스크립트여도 리액트인걸 개발자한테 알려주기위해 jsx 를 쓴다고 무료강좌에서 들었던것 같은데 next js 는 확장자를 보통 js로 하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
nickname 첫글자 가져오기 에러에 대한 질문드립니다!
배열을 지우고 실행하니 me?.nickname[0] --> me?.nickname 닉네임 전체는 잘 가져왔고 닉네임을 가져오는 것에는 문제 없었고 역시 배열 [0]에 접근하면서 에러가 생겼습니다. nickname[0], 전체 닉네임에서 첫글자에 접근하는 부분에 옵셔널 체이닝을 적용하면 될 것이고 me?.nickname?.split("")[0] split를 써서 닉네임 첫글자를 가져올 수 있었습니다. 원하는 결과를 얻긴 했지만 다른 방법이 있는지, 에러가 생긴 이유에 의심가는 점이 있으신지 답변 부탁드립니다!!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트쿼리로 변경 후 질문있습니다.
안녕하세요 매번 제로초님의 강의로 많은 도움과 영감을 얻어 사내에서 사용하는 시스템을 적용중에 있습니다. 감사드립니다. 다름이 아니라 타입스크립트 버전인 리액트쿼리를 깃허브에 올려주셔서 적용해봤는데요 새로고침 시 기존에는 깜박임 없이 바로 로그인 이후 페이지로 연결되었던게 지금은 일시적으로 로그인 페이지에 접근했다가 메인페이지로 가더라구요 그래서 임시로 Loading아이콘을 보여주는 식으로 했는데 제가 잘못사용해서 그런건가요? 소스코드 첨부합니다.ㅜㅜ import React, { useEffect, useState } from 'react'; import { dehydrate, QueryClient, useQuery } from 'react-query'; import User from '../interfaces/user'; import AppLayout from '../components/AppLayout'; import { loadMyInfoAPI } from '../apis/login'; import LoginLayout from '../components/login'; import { GetServerSidePropsContext } from 'next'; import axios, { AxiosError } from 'axios'; import Router from 'next/router'; import { Spin } from 'antd'; const Home = () => { //const [ref, inView] = useInView(); const [loading, setLoading] = useState(true); const { data: me } = useQuery<User>('user', loadMyInfoAPI); useEffect(() => { console.log('1111'); if (me) { setLoading(false); } }, [me]); return ( <div> {loading == true ? ( <div className="loadingBar"> <Spin /> </div> ) : me ? ( <AppLayout /> ) : ( <LoginLayout /> )} </div> ); }; export const getStaticProps = async () => { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery('user', () => loadMyInfoAPI()); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; };
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
antd 가로스크롤
안녕하세요 제로초님 강의 잘 듣고 디자인을 수정해보려고 하는데 가로스크롤이 없어지지 않아서 질문 드립니다. 비슷한 질문의 내용 찾아보고 삐져나온 컴포넌트가 있는지 확인해보고 코드를 몇일동안 봐도 어디서 잘못되었는지 알 수가 없어서 막힌 상태입니다 ㅜㅜ 이 사진은 화면 전체를 캡쳐한 사진입니다. antd col 태그 안의 모든 내용을 주석처리하고 레이아웃만 border 적용해서 출력한 사진입니다. 가로로 총 5칸으로 만들어 보았는데 혹시 제가 놓친 부분이 있을까요?ㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키 관련 질문
안녕하세요. 현재 토이 프로젝트로 프론트/백엔드 따로 하여 프로젝트 진행중입니다. 저는 리엑트로 프론트하고 백엔드분은 자바 스프링으로 하고 있구요. 지금 쿠키를 받는 부분을 하고 있는데 이상한 부분이 있어 질문 드립니다. Network 탭에서 분명 로그인시마다 응답으로 헤더에 쿠키가 포함되어 오는것은 확인을 하였습니다. 그러나, Application 탭의 Cookies에 쿠키가 없더라고요. 원래 Application 탭의 Cookies에 쿠키가 저장되고 삭제하더라도 로그인마다 받아와야하는것이 정상이 아닌가요? 백엔드에서는 잘 가고있다고하는데 이것은 문제가 아닌지 궁금하여 여쭤봅니다. 백엔드에서 뭔가 설정을 잘못하여 그런게 아닐까 싶어서요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Cannot read properties of undefined (reading 'value')
안녕하세요. 이번에 유료 수강하게된 입문자 입니다. 위 에러를 아무리 찾아봐도 답을 찾지 못하였습니다. 잘 부탁드립니다 import React, { useCallback, useState } from 'react' import { Button, Form, Input } from 'antd' import Link from 'next/link' const LoginForm = ({ setIsLoggedIn }) => { const [id, setId] = useState('') const [password, setPassword] = useState('') const onChangeId = useCallback( (e) => { setId(e.target.value) }, [] ) const onChangePassword = useCallback( (e) => { setPassword(e.target.value) }, [] ) const onSubmitForm = useCallback( () => { console.log(id, password) setIsLoggedIn(true) }, [id, password] ) return ( <Form onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> <div style={{ marginTop: 10 }}> <Button type="primary" htmlType="submit" loading={false}>로그인</Button> <Link href="/signup"><a><Button>회원가입</Button></a></Link> </div> </Form> ) } export default LoginForm
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
훅스에서는 데이터를 바로 넘길 수 있다는 말이 이해되지 않아요
프로필 페이지 만들기에서 컴포넌트를 잘게 쪼개는 것이 좋다는 얘기를 하시면서 옛날에는 container에서 데이터를 받아서 presente로 계속 prop을 전달하는 것이 부담이 있었는데 현재는 hooks로 바로 받아 올 수 있어 컴포넌트 쪼개는 것에 대한 부담이 없어졌다 라고 하셨는데 hooks로 바로 데이터를 받아 올 수 있다라는 말이 이해가 안돼요ㅠㅠ 리덕스 등으로 바로 데이터를 받아 올 수 있다는 것은 아는데 hooks로도 데이터를 바로 받아 올 수 있나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
google passport를 이용한 로그인 기능에 대해 질문이 있습니다
안녕하세요 제로초님! 제가 현제 google passport를 이용해서 로그인 하는 기능을 추가하고 있는데, 궁금한 점이, local로 로그인 할때는 res.status(200).json(fullUserWithoutPassword);이렇게 유저 데이터를 프론트로 같이 보내주시는데, google passport 공식문서에는 redirect밖에 없어서 어떻게 유저 데이터를 프론트로 보내는 지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지를 서버 파일시스템으로 보내는 시점 문의입니다.
안녕하세요. 강의 다시한번 듣고있는 중에 이미지를 서버로 보내는 시점에 대한 궁금증이 생겨서요. 서버로 이미지를 보내는 방법여러가지가 있다고 생각하는데요.1. image들과 title, description을 submit 버튼을 유저가 누르게 되면 서버로 한꺼번에 보낸다 2. 유저가 이미지를 올리자마자 프론트앤드에서 서버로 이미지를 바로 보내고 접근할수 있는 url을 response로 받아온다. 2-1 FE는 추가,삭제,순서등을 react state로 관리하고 이미지 title, description과 같은 string 값들을 submit button을 누르게 되면 image들의 url과 같이 서버로 보낸다. 3. 강의에서 말씀하신거처럼 서버를 거치지 않고 프론트에서 클라우드로 바로 올리는 cloudnary같은 서비스를 사용한다. - 이런 서비스를 사용하면 비용이 만만치 않을거 같은습니다. cloudnary만 하더라도 600기가바이트에 매달 30만원 정도 내야하는거같더라고요 제가 직접 클라우드로 올리는 서비스를 사이드 프로젝트로 만들어서 관리하는게 낫나요. 아니면 cloudnary같은 서비스를 그냥 사용하는게 나을까요? 어떤게 실제 서비스하는데 적합한지가 궁급하니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
개발자모드 redux 에러
안녕하세여 "리덕스 실제 구현하기" 까지 인강을 듣다가 로그인 버튼 export const logoutAction 위 부분까지는 데이터 값이 전달이 되는데 AppLayout.js 에서 isLoggedIn이 값을 제대로 못가져 오더라구여. 이런 문제가 있어서 리덕스를 이용해서 문제해결을 하려했는데 개발자모드에서 아래 사진처럼 뜨더라구여 혹시 해결방법좀 알수있을까여? https://github.com/woo1038/react_bird_exam 현재 클릭 이벤트 에러가 뜨는 깃 주소인데 확인 한번만 부탁드려도 될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServersideProps session 질문
안녕하세요! 강좌를 바탕으로 블로그를 제작하는 중에, 방문자 수를 counting 하는 기능을 구현하는데 막혀 질문드립니다. front server에서 getServerSideProps에 있는 export const getServerSideProps = wrapper.getServerSideProps(async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }) context.store.dispatch({ type: LOAD_POSTS_REQUEST, }); context.store.dispatch(END); await context.store.sagaTask.toPromise(); }); LOAD_MY_INFO_REQUEST와 LOAD_POSTS_REQUEST를 이용해 back server에 요청을 날리면 back server에서는 app.js의 최상단에 존재하는 let count = 0; app.use((req,res,next) => { var date = new Date(); var today=date.getYear()+" "+date.getMonth()+" "+date.getDate(); console.log("lastvisit : " + req.session.lastVisit); if(req.session.lastVisit != today){ req.session.lastVisit = today; count++; } next(); }); 다음 함수를 이용해 방문자 수를 count할려고합니다! 문제는 front에서 먼저, LOAD_MY_INFO_REQUEST로 요청을 보내, session과 함께 응답을 받고 다시 LOAD_POSTS_REQUEST요청을 하면, 요청에는 첫번째 요청의 응답으로 넣어주었던 session이 존재하지 않는다는 점입니다. 몇일동안 잡고 있어도 도저히 해결책을 모르겠어 질문드립니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Redux Saga의 작동 방식
안녕하세요, 제로초님. Redux Saga의 작동 방식에 대해 질문을 드리려 하는데요. 1) https://github.com/ZeroCho/react-nodebird/blob/master/ch4/front/components/LoginForm.js 에서 const onSubmitForm = useCallback(() => { console.log(email, password); dispatch({ type: LOG_IN_REQUEST, data: { email, password }, }); }, [email, password]); 이 함수가 실행이 되면, https://github.com/ZeroCho/react-nodebird/blob/master/ch4/front/sagas/user.js 에서 function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } 실행이 되어, function* logIn(action) { try { console.log('saga logIn'); // const result = yield call(logInAPI); yield delay(1000); yield put({ type: LOG_IN_SUCCESS, data: action.data, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } } 이 실행이 되고, https://github.com/ZeroCho/react-nodebird/blob/master/ch4/front/reducers/user.js 에서 case LOG_IN_SUCCESS: draft.logInLoading = false; draft.me = dummyUser(action.data); draft.logInDone = true; break; 이 부분이 실행이 되어, initialState.logInDone = true로 바뀌게 되는 것인지요? 2) https://github.com/ZeroCho/react-nodebird/tree/master/ch4 의 코드로 실행을 한 후, 트윗을 쓰게 되면, https://github.com/ZeroCho/react-nodebird/blob/master/ch4/front/components/PostCardContent.js#L7 에서 에러가 발생을 하는데, 향후 코드 수정에 참조하시라고 말씀드립니다. 읽어주셔서 감사합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
sequelize migration에 대한 궁금증이 있습니다.
강사님 안녕하세요. 좋은 강의 덕분에 저만의 홈페이지를 부족한 실력이지만 운영하게 되었습니다. 1년전 html이 무엇인지도 몰랐던 제가 홈페이지를 운영하게 되다니 강사님의 강의가 얼마나 훌륭한지 알수 있다고 봅니다. 감사합니다. 제 질문은 mysql 데이터베이스를 운영하면서 새로운 테이블 또는 컬럼을 추가할 때 sequelize migration을 이용해야 한다고 들어서(기존 데이터를 보존하기 위해서) 공부를 하고 있고 적용을 해보았습니다. 잘 작동하기에 문제는 없는데 mysql workbench를 이용하는게 더 직관적이고 편해서 이쪽을 이용하는 편입니다. 혹시 migration을 꼭 이용해야만 하는 장점이 있을까요? 딱히 그런게 없다면 워크벤치를 계속 이용해도 괜찮을 까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
node sequelize migrate 관련하여 질문 드립니다.
backend node sequelize 지식이 부족하여 질문을 드립니다. create migtate 에서 addcolumn 후 db:migrate를 하니까 잘 반영이 되더라고요 ? 근데 이걸 만든 후에 models 쪽에 define이나 클래스 생성시 init에 다시 js 파일 만들어서 반영 해줘야 할까요 ? 아 또... removeColumn 하려고 up쪽에 addcolumn은 주석 시키고서 db:migrate 하니까 반영이 안되더라고요.. db:migrate:undo해서 날리긴했는데... 좀 더 안전한 방법하게 특정 파일 만 날릴 수 있나요 ? 계속 추가 하다 보면 migrate한 파일이 늘어나게 되고 undo시 선택이 안되는거같은데 잘못하다가 다른게 날라가는게 아닌가 해서요. 안전하게 migrate 파일을 더 늘려서 지워야하나요 ? 요약입니다. 1. create migrate 후 반영 시 init이나 define에 정의를 해줘야하는지? 2. removeColumn이나 droptable 시 특정 파일만 반영 시킬 수 있는지 ? 없다면 create migrate 후 드랍시켜야 하는지? 3. 마이그레이션 외 다른 방법이 혹여 있는지 ? 연휴 마무리 잘 하시길 바랍니다 ^^ 아래는 코드 스크린 샷입니다. 아 소스는 노드교과서 ch9.5 소스입니다.. 카카오 로그인 기능 쪽 구현 해보려고 passport쪽 보고 users 테이블에 컬럼 추가 하려고... 동작시켜보느라 깃헙 소스 긁어와서 보고 있습니다.. create한 마이그레이션 (addColumn) model/hashtag.js