강의

멘토링

로드맵

개발 · 프로그래밍

/

풀스택

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

(4.1) 수강평 19개

수강생 994명

  • John Ahn

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 리액트

  • 타입스크립트

  • PostgreSQL

  • 도커

  • NextJS

  • 배포

NextJS, Typescript, ExpressJS, Postgres
가장 핫한 풀스택 조합으로 레딧을 클론코딩해요! 👨‍💻

이 강의에서는?

세계적인 커뮤니티, 레딧 사이트
처음부터 같이 만들어봅니다.

요즘 자바스크립트 스택에서 가장 많이 쓰이는 풀 스택 조합인 NextJS Typescript ExpressJS Postgres 조합으로 어느 정도 복잡한 애플리케이션을 처음부터 함께 만들어 보게 되므로, 풀 스택 개발에 자신감을 가질 수 있게 이 강의를 만들게 되었습니다.

이 강의의 특징은 모든 소스코드를 처음부터 하나씩 따라하면서 배울 수 있다는 것입니다. 소스코드를 한 줄씩 설명하고 그 이후에 코딩을 함께하기 시작해서 여러 번 반복학습을 하게 됩니다. 실습 위주의 강의지만 헷갈리거나 어려운 개념은 깊게 학습하고 넘어가게 됩니다. 모든 부분은 도표를 통해 최대한 시각적으로 이해할 수 있도록 노력했습니다.

사용되는 언어와 프레임워크 👉

레딧 사이트를 만들 때 프론트엔드 부분은 리액트의 NextJS를 사용하고,
백엔드 부분은 NodeJS와 ExpressJS를 사용합니다. 두 부분 모두 언어는 타입스크립트를 사용합니다. 데이터베이스는 PostgreSQL을 이용하며 TypeORM을 이용해서 컨트롤하게 됩니다.


학습할 내용을 소개해요 📚

Section 1

전체적인 구조 만들기

프론트엔드와 백엔드, 데이터베이스를 사용할 수 있도록 준비를 합니다.

Section 2

Entity 생성하기

어플리케이션에서 필요한 데이터들을 생성하기 위해 각각의 Entity들을 생성해줍니다.

Section 3

회원가입, 로그인

회원가입과 로그인 페이지를 생성하며 유저에 관한 데이터는 React Context를 이용해 처리해줍니다.

Section 4

커뮤니티 생성하기

커뮤니티 생성하는 페이지, 커뮤니티 생성, 이미지 업로드 등을 구현합니다.

Section 5

포스트 페이지 생성하기

각 커뮤니티에 들어있는 포스트들을 생성하고 포스트 페이지를 만들어줍니다.

Section 6

댓글과 투표 기능 구현하기

댓글과 투표 기능을 구현합니다.

Section 7

무한 스크롤 및 유저 페이지 생성하기

useSWRInfinite와 Intersection observer를 이용한
무한 스크롤 기능을 구현해주며 유저 페이지를 생성해주겠습니다.

Section 8

애플리케이션 배포하기

EC2 인스턴스를 이용해서 지금까지 만든 애플리케이션을 배포해주겠습니다.

 

지식공유자의 
다른 강의가 궁금하다면? 📖

누적 수강생 50,000+명, 따라하며 배우는 웹 개발 시리즈 

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 자바스크립트로 풀스택 앱을 만들고 싶은 사람

  • 재미있게 공부하고 싶은 사람

선수 지식,
필요할까요?

  • 자바스크립트

  • 리액트JS

  • 노드JS

안녕하세요
입니다.

84,178

수강생

2,696

수강평

2,430

답변

4.8

강의 평점

20

강의

안녕하세요. 

즐겁게 개발하고 있는 개발자입니다. 

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.


- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사 
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

커리큘럼

전체

103개 ∙ (17시간 39분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

19개

4.1

19개의 수강평

  • jung ae Kim님의 프로필 이미지
    jung ae Kim

    수강평 9

    평균 평점 4.8

    4

    97% 수강 후 작성

    제가 업무에서는 사용하지 않는데.. 노드, 리액트, 도커, aws 배포 등에 궁금증과 관심이 있어서 강좌를 듣기로 결정했습니다. 강좌교재도 잘 정리되어 있고 매 강의마다 시간도 길지 않아서 강의따라서 구현하기도 좋고 설명도 잘 해주셔서 좋았습니다. 그런데 좀 아쉬운건, 배포하는 부분에서 좀 헤매다가 겨우 배포했네요 ㅋ 도커, aws에 배포하는 것.. 이 2가지가 젤 익숙하지 않은 부분이라서 가장 강좌를 통해서 경험 해보고자 했던 부분인데 앞부분에서 화면구현에서는 자세하게 잘 설명이 되었는데 배포부분에서는 강좌교재와 영상부분이 많이 아쉬웠습니다. 전반적으로 기본개념 잡고 구현해가에 충분히 좋은 강좌라고 생각합니다!

    • hi2177님의 프로필 이미지
      hi2177

      수강평 3

      평균 평점 5.0

      5

      68% 수강 후 작성

      강의좋아요

      • dev.jun28님의 프로필 이미지
        dev.jun28

        수강평 9

        평균 평점 5.0

        5

        100% 수강 후 작성

        좋은 강의 감사합니다.

        • 이은영님의 프로필 이미지
          이은영

          수강평 1

          평균 평점 5.0

          5

          97% 수강 후 작성

          최신 typescript 강의를 들을수 있어서 너무좋았습니다 섬세히 알려주셔서 끝까지 완성할수있었습니다 감사합니다

          • 양효준님의 프로필 이미지
            양효준

            수강평 2

            평균 평점 5.0

            5

            90% 수강 후 작성

            NextJS와 Docker에 대해 맛볼수 있는 좋은 강의였습니다! 다음에 새로운 강의 출시되면 또 구매해야겠어요

            ₩44,000

            John Ahn님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!