25%
66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
_app.js에서
const App = ({ Component }) => { return ( <> <Component /> </> ) }; 여기서 ({ Component }) 이 부분의 {} 는 어떤 역할인지 잘 모르겠어요.. {} 는 왜 넣어주는 거죠??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 클론코딩 강의 어떤것을 먼저 들을지 궁금해서 여쭈어보려고 합니다.
안녕하세요 제로초님 클론코딩 강의 두가지 모두 끊어서 듣고 있는 학생입니다. 두 클론코딩 강의 모두 리액트 무료강좌가 선수강의로 알고 있습니다. 다만 두 클론코딩 강의중 노드버드는 리액트 위주의 풀스택 강의인것 같고 슬랙은 리액트+TS에 백엔드는 Typeorm + nest.js강의로 알고 있어서 개인적으로 두 클론코딩 강의중에 어떤것을 먼저 듣는게 좋을지 여쭈어보고 싶습니다. 그리고 추가적으로 공부방법에 관련해서 여쭈어보고 싶습니다. 제로초님 강의를 전부 천천히 다 듣는거는 강의 양이 많아서 무리라고 생각이 들어서.. 지금 책으로 빠르게 리액트 개념에 대해서 전반적으로 훑어보고 클론코딩을 하면서 모르는 개념에 대해서 책을 찾아보고 제로초님 강의를 찾아가면서 들으려고 하는데 괜찮은 공부방법인지 여쭈어보고 싶습니다. (제로초님 웹 게임 강의만 듣자니 무언가 포트폴리오로 남는것이 없고 시간만 오래 걸리는것 같아서 여쭈어보려고 합니다.) 아니면 시간이 오래걸리더라도 웹 게임 강의를 들으면서 천천히 진도를 나가는게 맞을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
next.js에서 swr 서버사이드 렌더링 질문드립니다.
next.js에 swr, typescript를 이용해 노드버드 실습을 해보다가 서버사이드 렌더링에 대해 궁금한 게 생겼습니다. 사용자가 만약 로그인을 한 상태일 때, 서버사이드 렌더링을 해서 컴포넌트에 사용자 정보를 넣어준 상태로 페이지가 보여지도록 하고 싶은데요. 강의에서는 pages/index.js에서 리덕스를 이용하여 LOAD_MY_REQUEST 액션을 dispatch 한 뒤, components/AppLayout.js 에서 useSelector로 me 값을 가져 오면 사용자 정보가 담겨진 채로 AppLayout.js 컴포넌트가 랜더링 됩니다. swr을 적용해서 동일하게 구현해보려고 하는데요. swr에서는 page/index.js에서 서버사이드에서 로그인한 사용자 정보롤 가지고 오더라도, components/AppLayout.js에서 useSWR을 사용하면 처음 [로그아웃] 상태일 때의 화면이 잠깐 나오고, [로그인]상태일 때의 모습으로 변합니다. 혹시 swr을 이용해서 pages/index.js에서 서버사이드 렌더링으로 가지고 왔던 값을 components/AppLayout.js에도 페이지 렌더링 초기에 값을 함께 전달해주는 방법은 없을까요? 제가swr을 이용해 아래처럼 적용해봤는데, 다른 방법이 있을까요? pages/index.tsx export const getServerSideProps: GetServerSideProps = async function({ req }) { const cookie: string = req ? req.headers.cookie : ''; if (cookie) { const data = await fetcher.get('/user', { cookie }); if (data) { return { props: { userProps: data }, }; } } return { props: { userProps: null }, }; }; function Index({ userProps }: InferGetServerSidePropsType<typeof getServerSideProps>) { const { data: user } = useSWR<IUser>('/user', fetcher.get, { initialData: userProps }); return <AppLayout>{user ? user.nickname : '로그인해주세요'}</AppLayout>; } components/AppLayout.tsx function AppLayout() { const { data: user } = useSWR<IUser>('/user', fetcher.get); return ( <div css={userNavStyle}> {user ? ( <> <Profile image={user.profile} size='40px' /> </> ) : ( <Link href='/login'> <a href='' className='login'> 로그인 </a> </Link> )} </div> ); }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
선생님 redux 버전 질문입니다
해당 영상에서 redux 6 버전이고 지금은 7 버전으로 받아지는데 버전을 낮추어 사용해야 할까요? 오류가 나는지는 아직 설치만 해 둔 상태라 잘 모르겠습니다.. ㅠ ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
성능상 어느쪽이 더 좋을까요?
제로초님 방식대로 req.login쪽에 User.findOne을 새로하는것과 LocalStrategy쪽의 User.findOne에 처음부터 include를 모두 설정해주는것 중에 어떤게 성능이 좋나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
브라우저 경고 의미
제가 리덕스 툴킷을 따로 배워서 리덕스사가 대신 리덕스 툴킷으로 작성중인데, 회원가입을 하면 네트워크상으론 이상없고 데이터베이스에도 잘 저장됩니다. 그래서 서버에는 확실히 문제가 없는 것 같고 프론트 문제인거 같습니다. 콘솔창에 이런 경고가 나오는데 어떻게 해결해야할지 모르겠습니다. 아래는 제 액션 코드입니다. 아래는 제 리듀서 코드입니다. 처음엔 fulfilled만 넣어줘서 저런 경고가 뜨는가 해서 위사진처럼도 해보고 저기다가 return state까지 넣어서 해보기도 했지만 계속 같은 경고가 나옵니다. 아래는 제 스토어 코드입니다. 리듀서만 넣어줘서 안되는것인가 싶어 미들웨어에 [...getDefaultmiddleware()]도 넣어보고 createSerializableStateInvariantMiddleware이것도 해봤지만 안됩니다. 이외에 제가 선생님이랑 다르게 작업한건 툴킷에서 HYDRATE를 어떻게 적용시켜야할지 모르겠어서 빼준것 밖에는 없는것 같습니다. 어떻게 방법이 없을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
프론트 서버는 어떤거로 해야 할가요?
next의 빌드후 웹서버는 어떻게 연결시키나요? ssr 이 없는 일반 react 엔 dist 를 ngnix 에 연결시켜서 사용했는데요. ssr 이 들어가는 next 의 경우는 웹서버를 어떻게 해야 하는건지 궁금합니다 기존에 하던데로 하면될지 아니면 ssr 을 위한 프론트 서버가 있는건지요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next typescript 적용해보려는데 한가지 질문좀 드리겠습니다.
타입스크립트 next 전부 세팅을 하고 적용하고 있는데요. 테스트중인데 분명 타입스크립트를 적용하지 않으면 vscode내에서는 오류가 나오는데 브라우저에서는 오류가 나오지 않는데 혹시 짐작가시는 부분이 있을까요.. 찾아보려 하였지만 셋팅도 그렇고 잘못된 부분이 없는데 나와 답답해서 여쭤봅니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
error 인식
router.post('/', isNotLoggedIn, async (req, res, next) => { try { const existedUser = await User.findOne({ where: { email: req.body.email, }, }); const existedNickname = await User.findOne({ where: { nickname: req.body.nickname, }, }); if (existedUser) { return res.status(403).send('이미 사용중인 아이디 입니다.'); } if (existedNickname) { return res.status(403).send('이미 사용중인 닉네임 입니다.'); } const hashedPassword = await bcrypt.hash(req.body.password, 12); await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.status(201).json({ signUpSuccess: true }); } catch (error) { console.log(error); next(error); } }); 회원가입 라우터입니다. 강의에서 보면 기존에 회원가입되어잇는 이메일이 있다면 아래 부분 코드에 의해서 응답을 처리하게 되는데요. if (existedUser) { return res.status(403).send('이미 사용중인 아이디 입니다.'); } 응답 상태 코드가 403이라서 saga에서 try catch 문에서 에러로 빠지는건가요? 백엔드 라우터에서 try catch에서 error가 발생해서 응답한게 아니고 어떻게 보면 정상적으로 응답을 한건데 saga에서 어떻게해서 에러로 인식되는지 궁금합니다. 상태 코드 200으로 응답하면 saga에서 에러로 안빠지더라구요. 상태코드 때문인것같은데 확실한건지 몰라서 질문드립니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
커스텀훅 리턴값에 Setvalue도 넣어봤는데...
import { useState } from "react"; export const useInput = (initialState) =>{ const [value, setValue] = useState(initialState); const onChangeValue = (e) => { setValue(e.target.value); } return [value, onChangeValue, setValue] } //가끔 전송 후 setValue('')로 값초기화까지 써야할경우에 리턴값에 이렇게 setValue 까지 넣어서 사용합니다. 평소에 [email,onchangeEmail] = useInput(''); 이런식으로 쓰다가 [comment, onchangeComment, setComment] = useInput('') 이렇게 사용해도 커스텀훅을 사용하지 않고 쓰는것처럼 아무 이상 없을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
배포 질문드립니다.
배포를 하려다보니 .. 계속 반복해서 영상을 보고있습니다. back과 front 서버를 별도로 둔다면 git도 별도로 만들어서 back 에는 back만 다운받고 front도 front만 다운을 받아서 하는게 더 좋을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 질문하나만 드릴게요
서버사이드 렌더링 페이지가 아닌 그냥 페이지인데 router로 params를 주고 받습니다. 이 페이지를 주소를 복사해서 주소창에 붙여 넣기 해서 엔터치면 router.query 값이 undefined 로 뜨는데 정상적인가요? 서버사이드 렌더링 페이지가 아닌데 주소 복사 붙여넣기 해도 router.query를 받을 수 있는 방법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
에러처리 미들웨어
지금 보니까 에러처리 미들웨어를 따로 작성하지 않았는데 따로 작성해줘야하나요? 강의 도중에 에러처리 미들웨어를 따로 작성하지 않아도 된다고했던것같은데 따로 작성하지 않아도 된다면 왜그런건가요?? 없는 라우터 경로로 요청을보내면 An unexpected error has occurred. 뜨는거 보니까 에러 처리가 자동으로 되는것같긴한데 어느 부분에서 말씀해주셨는지 기억이 안나는데 찾기가 쉽지않네요..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
req.logout()
passport.serializeUser((user, done) => { done(null, user.id); }); req.logout()은 serializeUser() 호출 시 done 된 쿠키와 user.id를 없애는 기능을하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트 개발 스펙에 대해 질문 있습니다.
실무에서 프론트 엔드 개발할때 next js 리엑트 리덕스 리덕스 사가 antd immer , swr 이정도는 그대로 사용해도 되나요? 그리고 ts 도 적용하는게 좋겠죠? 이외에 어떤 스펙으로 개발하는게 추천할만한지 알려주시면 감사요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
build 후 start 명령어 후 웹 실행시 속도
삭제된 글입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
"MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.
안녕 하십니까 제로초님 학습 중에 이런 에러가 발생해서 혼자 해결해보려 했지만 무슨 말인지 잘 모르겠습니다 검색을 하니 저랑 비슷한 에러가 나오신 분이 계셨는데 그분은 임포트 때문에 그러셨다고 했습니다 확인을 하고 제로초님 코드를 비교 해보았지만 자세히 모르겠습니다,,ㅠㅠㅠ 이런 에러 입니다 https://github.com/ansuhwan/nodeBird 깃 주소 입니다!! 이런
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
https 로그인 가능 후 다른 문제가 계속 해결 되지 않아 다시 올립니다.
삭제된 글입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
className과 SSR
_document.js를 만들고 styled-components를 설정후에도 className 오류가 여전히 브라우저에서 발생합니다. 설정이 잘못된 걸까요? 코드에 문제는 없어 보입니다. import React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } } render() { return ( <Html> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } } 또한, 서버 사이드 렌더링시 console.log가 뜨지 않는것을 확인하였습니다. 데이터는 잘 들어가는거 같은데 콘솔이 뜨지 않을걸 보아 SSR이 되지 않는 건지 의심이 가네요. profile.js 페이지입니다. export const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req }) => { console.log('getServerSideProps start'); const cookie = req?.headers.cookie; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } store.dispatch(loadMyInfoRequestAction()); store.dispatch(END); console.log('getServerSideProps end'); await store.sagaTask.toPromise(); } );
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next에서 전체 html 수정
안녕하세요 따라서 만들고 있는데 이렇게 옆에 남는 부분이 생깁니다 ㅠㅠ html이라고 뜨면서 width를 100%로 채우고 최소 width를 저 html이상으로 높여봐도 오른쪽은 채워지는데 왼쪽과 위가 안채워집니다ㅠㅠ 어떠케 해야 없어질까요?