Thumbnail
BEST
개발 · 프로그래밍 풀스택

[리뉴얼] React로 NodeBird SNS 만들기 대시보드

(4.9)
171개의 수강평 ∙  3,582명의 수강생
88,000원

월 17,600원

5개월 할부 시
지식공유자: 조현영
총 94개 수업 (23시간 3분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
조현영 프로필
2024년 첫 타임어택 시작합니다!!
조현영 1달 전 (1달 전 수정됨)

먼저 다들 새해 복 많이 받으세요~~

2024년 첫 강좌 타임어택 프로그램 9기 진행합니다!

강좌는 구매했는데 매번 끝까지 못 보시는 분들을 위한 프로그램입니다. 무료로 참가하실 수도 있으며 의지력이 많이 부족한 분들을 위해 따로 보증금 제도도 운영하고 있습니다. 이전 기수 분들이나 같은 기수 분들의 정리 노트를 보면서 공부하실 수도 있고, 저나 다른 분들에게 질문을 할 수도 있습니다.

  • 참고로 강의는 인프런에서 저를 검색해서 구매하시기보다는 https://zerocho.com/lecture에 있는 링크 눌러서 구매해주시면 제가 내는 수수료가 많이 줄어듭니다. 부탁드려요 ㅎㅎ

     

완주하시면 강좌 쿠폰(35~60%)이나 만나서 식사권을 드리고 있습니다!

저도 현재 매 기수 적자를 보면서 진행하고 있습니다.그럼에도 진행하는 이유는 제 강좌가 실질적으로 여러분들한테 도움이 되기를 바라기 때문입니다. 강좌를 사놓기만 하고 안 들으시는 분이 많은데 정해진 진도와 함께 끝까지 들으시고 여러분의 개발 실력이 향상되었으면 해서 매번 진행 중입니다. 저는 제 강좌가 도움이 되었다는 말을 들을 때 가장 뿌듯하거든요. 타임어택에서 나오는 강좌 피드백을 바탕으로 강좌를 조금씩 수정하고도 있어 저에게도 도움이 되고요.

슬랙에서 진행하기 때문에 슬랙 방 참가해주셔야 합니다. 아래 슬랙 링크로 들어오세요.

https://zerocho.com/slack

들어오시면 공지 채널에 9기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다. 링크도 따로 같이 올려드립니다.

https://forms.gle/2FEFKqdHqL4k7jEW9

설문 조사를 작성하지 않으셨더라도 저한테 DM을 보내서 알려주시면 참가하실 수 있습니다.

타임어택 프로그램에 참여하지 않으시더라도 슬랙 방에 참여하시면 긱뉴스 등의 정보 공유도 하고 프로그래밍 질문고민 상담도 하고 여러 모로 도움되실 거에요. 벌써 3000분 정도 들어계십니다!

감사합니다.

조현영 프로필
Next 13 + Antd 5 할 때 SSR 안 되는 문제
조현영 3달 전 (3달 전 수정됨)

https://ant.design/docs/react/use-with-next#using-pages-router

적용하시면 됩니다. @ant-design/cssinjs를 설치한 후에 _document.tsx는 다음과 같이 수정합니다.

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';

export default class MyDocument extends Document {
  // eslint-disable-next-line consistent-return
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;
    const cache = createCache();
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(
            <StyleProvider cache={cache}>
              <App {...props} />
            </StyleProvider>
          ),
        });
      const initialProps = await Document.getInitialProps(ctx);
      const style = extractStyle(cache, true);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
            <style dangerouslySetInnerHTML={{ __html: style }} />
          </>
        ),
      };
    } catch (error) {
      console.error(error);
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Next 14 App Router 강좌가 곧 출시됩니다. 이 강좌 수강생분들께는 할인쿠폰이 이메일로 전송될 것이니 조금만 기다려주세요. 이 강좌는 없어지지 않습니다. Page Router라서 신규 강좌와 차별점이 있으므로 없애지 않습니다!

조현영 프로필
수업 노트 추가
조현영 7달 전 (7달 전 수정됨)

버전 문제때문에 걱정하실까봐 리액트 노드버드 강좌에 버전업을 위한 수업노트를 여러 개 추가해두었습니다. 수업노트는 강의영상 바로 아래에 나오니 스크롤 내려보시면 됩니다(수업노트가 없는 것도 많습니다). 현재 next13 pages 폴더까지는 이 강좌로 큰 무리 없이 따라오실 수 있습니다. app directory쪽은 너무 달라서 아예 새로 재촬영해야 하는 수준이고요.

next13, next-redux-wrapper8, antd5, redux-toolkit 소스 코드를 보시려면 https://github.com/ZeroCho/react-nodebird/tree/master/toolkit 여기 참고해주시면 됩니다!

다른 댓글 보기(3)
조현영 프로필
타입스크립트 교과서 출간 안내
조현영 7달 전 (7달 전 수정됨)

안녕하세요. 제로초입니다.

타입스크립트 교과서(464p, 길벗)이 출간되어 이벤트와 함께 안내드립니다. Node.js 교과서, Let's Get IT 자바스크립트 프로그래밍에 이은 세 번째 책이네요.

타입스크립트 교과서는 제 인프런 강좌 타입스크립트 올인원을 강좌(Part1, Part2 합본)를 기반으로 한 책입니다. 많은 분들이 타입스크립트 문법은 익혔는데 남의 타입을 분석하지 못하거나 직접 작성할 때 막히는 모습을 보았습니다. 그래서 단순하게 타입스크립트 문법만 배우는 책이 아니라 유명 라이브러리 타입들을 분석해보고 직접 작성하는 연습도 해보는 등의 매우 실전적인 책을 집필하게 되었습니다. 최신 버전(5.1)을 사용하고 심혈을 기울여서 집필하였으니 많은 관심 부탁드립니다! 구매하신 분은 아래 이벤트도 참가하시어 스벅 기프티콘도 받아가세요!

예약 구매 링크

-교보문고 https://bit.ly/43Vjw4N
-Yes24
https://bit.ly/3qgKh5W
-알라딘
https://bit.ly/43SpymM

전원 '스타벅스 아메리카노 기프티콘' 증정하는 타입스크립트 교과서 구매 인증 이벤트도 함께 진행합니다! (이미 사신 분도 가능합니다!)
구매 인증 + 구매 채널에서 기대평 하나 작성해주시면 됩니다.
https://naver.me/GrNPPeXW
에 구매인증 관련 내용을 넣어주시면 됩니다!

감사합니다.
제로초(조현영) 드림.

image

조현영 프로필
타임어택 6기 신청 안내
조현영 8달 전 (8달 전 수정됨)

강좌 타임어택 프로그램 6기 진행합니다!

강좌는 구매했는데 매번 끝까지 못 보시는 분들을 위한 프로그램입니다. 무료로 참가하실 수도 있으며 의지력이 많이 부족한 분들을 위해 따로 보증금 제도도 운영하고 있습니다. 이전 기수 분들이나 같은 기수 분들의 정리 노트를 보면서 공부하실 수도 있고, 저나 다른 분들에게 질문을 할 수도 있습니다.

완주하시면 강좌 쿠폰(35%)이나 만나서 식사권을 드리고 있습니다!

저도 현재 매 기수 적자를 보면서 진행하고 있습니다. 그럼에도 진행하는 이유는 제 강좌가 실질적으로 여러분들한테 도움이 되기를 바라기 때문입니다. 강좌를 사놓기만 하고 안 들으시는 분이 많은데 정해진 진도와 함께 끝까지 들으시고 여러분의 개발 실력이 향상되었으면 해서 매번 진행 중입니다. 저는 제 강좌가 도움이 되었다는 말을 들을 때 가장 뿌듯하거든요. 타임어택에서 나오는 강좌 피드백을 바탕으로 강좌를 조금씩 수정하고도 있어 저에게도 도움이 되고요.

슬랙에서 진행하기 때문에 슬랙 방 참가해주셔야 합니다. 아래 슬랙 링크로 들어오세요.

https://zerocho.com/slack

들어오시면 공지 채널에 6기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다. 설문 조사를 작성하지 않으셨더라도 저한테 DM을 보내서 알려주시면 참가하실 수 있습니다.

타임어택 프로그램에 참여하지 않으시더라도 슬랙 방에 참여하시면 긱뉴스 등의 정보 공유도 하고 프로그래밍 질문 고민 상담도 하고 여러 모로 도움되실 거에요. 벌써 2100분 정도 들어계십니다!

감사합니다.

조현영 프로필
제로초스쿨 강좌 타임어택 5기 시작합니다.
조현영 11달 전 (11달 전 수정됨)

강좌 타임어택 프로그램 5기 진행합니다!

강좌는 구매했는데 매번 끝까지 못 보시는 분들을 위한 프로그램입니다. 무료로 참가하실 수도 있으며 의지력이 많이 부족한 분들을 위해 따로 보증금 제도도 운영하고 있습니다. 이전 기수 분들이나 같은 기수 분들의 정리 노트를 보면서 공부하실 수도 있고, 저나 다른 분들에게 질문을 할 수도 있습니다.

완주하시면 강좌 쿠폰이나 만나서 식사권을 드리고 있습니다!

저도 매 기수 적자를 보면서 진행하고 있습니다. 그래도 진행하는 이유는 제 강좌가 실질적으로 여러분들한테 도움이 되기를 바라기 때문입니다. 강좌를 사놓기만 하고 안 들으시는 분이 많은데 정해진 진도와 함께 끝까지 들으시고 여러분의 개발 실력이 향상되었으면 해서 매번 진행 중입니다. 저는 제 강좌가 도움이 되었다는 말을 들을 때 가장 뿌듯하거든요. 타임어택에서 나오는 강좌 피드백을 바탕으로 강좌를 조금씩 수정하고도 있어 저에게도 도움이 되고요.

슬랙에서 진행하기 때문에 슬랙 방 참가해주셔야 합니다. 아래 슬랙 링크로 들어오세요.

https://zerocho.com/slack

들어오시면 공지 채널에 5기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다. 설문 조사를 작성하지 않으셨더라도 저한테 DM을 보내서 알려주시면 참가하실 수 있습니다.

타임어택 프로그램에 참여하지 않으시더라도 슬랙 방에 참여하시면 정보 공유도 하고 프로그래밍 질문고민 상담도 하고 여러 모로 도움되실 거에요. 벌써 1800분 정도 들어계십니다!

감사합니다.

다른 댓글 보기(1)
조현영 프로필
강좌 타임어택 프로그램 4기 진행합니다!
조현영 2023.03.10

강좌 타임어택 프로그램 4기 진행합니다!

강좌는 구매했는데 매번 끝까지 못 보시는 분들을 위한 프로그램입니다. 무료로 참가하실 수도 있으며 의지력이 많이 부족한 분들을 위해 따로 보증금 제도도 운영하고 있습니다. 이전 기수 분들이나 같은 기수 분들의 정리 노트를 보면서 공부하실 수도 있고, 저나 다른 분들에게 질문을 할 수도 있습니다.

슬랙에서 진행하기 때문에 슬랙 방 참가해주셔야 합니다. 아래 슬랙 링크로 들어오세요.

https://zerocho.com/slack

들어오시면 공지 채널에 4기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다.

타임어택 프로그램에 참여하지 않으시더라도 슬랙 방에 참여하시면 정보 공유도 하고 고민 상담도 하고 여러 모로 도움되실 거에요. 벌써 1500분 정도 들어계십니다!

감사합니다.

조현영 프로필
타임어택 3기 모집 안내
조현영 2023.01.19

안녕하세요. 돌아온 타임어택 시간입니다. 타임어택 프로그램 3기 진행합니다!

강좌는 신청했는데 매번 끝까지 못 보시는 분들을 위한 프로그램입니다. 무료로 참가하실 수도 있으며 의지력이 많이 부족한 분들을 위해 보증금 제도도 운영하고 있습니다. 다른 분들의 정리 노트를 보면서 공부하실 수도 있고, 저나 다른 분들에게 질문을 할 수도 있습니다.

슬랙에서 진행하기 때문에 슬랙 방 참가해주셔야 합니다. 아래 슬랙 링크로 들어오세요.

http://bitly.ws/yCFL

들어오시면 공지 채널에 3기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다.

감사합니다.

조현영 프로필
강좌 타임어택 2기 모집
조현영 2022.11.14

https://join.slack.com/t/zerochoschool/shared_invite/zt-1jc8v4gdz-~BgE2zxq_zC3wSG80YuOeg

안녕하세요. 강좌 타임어택 2기를 모집합니다. 11월 21부터 시작합니다. 11월 20일까지 공지에 있는 설문조사 참여하시면 됩니다.

강좌 타임어택은 다른 사람들과 함께 정해진 기간동안 공부를 하고, 간단한 요약/질문을 올리는 것으로 진도를 체크하는 프로그램입니다. 의지력이 약해서 못 들으셨던 분들 참여해보세요!(자율보증금도 있어서 더 의지력을 높일 수 있습니다)

원래 오늘부터 유튜브 라이브(노드교과서 강좌 리뉴얼) 다시 하려 했는데 코로나에 걸려 일주일 뒤로 미룹니다. ㅜㅜ

조현영 프로필
강좌 타임어택 1기를 모집합니다.
조현영 2022.09.23

안녕하세요. 제로초입니다.

강의를 구매하고 쟁여놓기만 하시거나, 강의는 샀는데 막상 혼자 들으려니 심심해서 의지가 생기지 않는 분들이 계신 것 같아 하나의 프로그램을 마련해보았습니다.

 

이름하여.... 강좌 타임어택! 제가 정해준 시간 안에 정해준 사람들과 강좌를 끝마치시면 됩니다. 서로 막히는 것 물어보셔도 되고요. 

https://join.slack.com/t/zerochoschool/shared_invite/zt-1gmqvylzl-lRZwbG0r4__GTVBCNUa41A

슬랙 채널에 들어오시면 참여 설문조사가 있습니다. 슬랙 채널 기반으로 진행할 예정이라 슬랙 채널은 가입해주셔야 합니다.

조현영 프로필
ERR_OSSL_EVP_UNSUPPORTED 에러 관련
조현영 2022.09.21 (8달 전 수정됨)

해당 에러가 뜨는 분들은 Node 18 버전 이상을 사용하고 계실 겁니다.

npm i cross-env 하신 후 package.json을 다음과 같이 바꾸세요. 커맨드에 NODE_OPTIONS를 추가로 넣으시면 됩니다. next를 사용하는 다른 명령어도 마찬가지입니다.

"scripts": {
  "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider next -p 3060",

다른 댓글 보기(1)
조현영 프로필
redux createStore 관련
조현영 2022.06.28

redux 사용 시 createStore에 취소선이 그어져있다는 제보를 해주시는 분들이 많습니다.

결론적으로는 createStore 그대로 쓰셔도 됩니다. 아무 문제 없습니다.

다만 redux 팀에서는 이제 redux를 쓰지 말고 @reduxjs/toolkit을 쓰라는 것으로 공식 입장을 정한 것 같습니다.

툴킷 적용을 원하신다면 제 깃헙 toolkit 브랜치 참고하시면 되겠습니다.

조현영 프로필
passport@0.6 출시로 req.logout 시 문제가 발생합니다.
조현영 2022.05.23

req.logout(() => {
  res.redirect('/');
});

이런 식으로 콜백 함수를 제공하고 그 안에서 응답하셔야 합니다.

passport@0.6이 되면서 로그인할 때마다 세션 쿠키가 변경되고 로그아웃할 때에도 세션 쿠키가 정리되는 것 같습니다.

다른 댓글 보기(1)
조현영 프로필
라이브러리 최신화 안내
조현영 2022.05.05

안녕하세요. React Nodebird 강좌가 최신 버전 라이브러리에서도 돌아가는지 테스트해보았습니다.

https://github.com/ZeroCho/react-nodebird/tree/master/intersection

리액트 18, 넥스트 12에서 테스트한 결과 잘 돌아갑니다. 다만 수정사항도 있었습니다.

  • faker -> @faker-js/faker, babel-eslint -> @babel/eslint-parser 등이 수정되었고,
  • react-slick 때문에 slick-carousel 라이브러리가 추가되었습니다 (_app.js에 css를 import합니다)
  • antd Menu가 children에서 items props으로 변경되었습니다.
  • intersection observer 적용이 안 되신다는 분들이 많아서 div에 height: 10을 추가했습니다.

뭔가 적고 보니 게임 패치노트 같네요. 생각보다 계속 잘 돌아가서 리뉴얼은 내년에나 할 것 같습니다. redux-saga 대신 redux-toolkit을 쓸 예정입니다.

참고로 실전에서는 getServerSideProps를 최소화하시는 게 좋습니다. 이를 위해서는 유저 정보를 SSR하지 마시고 CSR해야 합니다. getStaticProps나 getStaticPath를 써야 서버쪽에서 컴포넌트 캐싱이 가능합니다. 유저 정보는 개인마다 다 다르기때문에 캐싱이 불가능하거든요. 다음 리뉴얼 때는 getStaticPath와 getStaticProps만 써서 Incremental Rendering을 보여드릴까 생각 중입니다.

주기적으로 강좌 라이브러리를 최신화하고 있으니 intersection 폴더를 보시면 됩니다.

감사합니다.

다른 댓글 보기(4)
조현영 프로필
react-slick css 미적용 관련 안내
조현영 2022.03.05

react-slick 버전이 올라감에 따라 기본적으로 css가 포함되지 않게 되었습니다. 다음 링크의 방법을 수행하시면 됩니다.

https://www.inflearn.com/questions/465319