BEST

개발 · 프로그래밍

풀스택

[리뉴얼] React로 NodeBird SNS 만들기

Name: [리뉴얼] React로 NodeBird SNS 만들기
Price: 88000 KRW

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

(4.9) 수강평 178개

수강생 3,703명

제로초(조현영)

React Redux Node.js Express Next.js

중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

리액트 개발
리덕스&리덕스 사가
리액트 Hooks 사용
Styled Components
Ant Design
SWR
서버 사이드 렌더링
검색 엔진 최적화
AWS 배포

새로 만나는 제로초의 리액트 노드버드 프로젝트!

리뉴얼된 사항

next@9, styled-components@5, antd@4, node.js@14 등의 버전을 다룹니다.

next@14와 node.js@20과도 호환되니 최신 버전으로 진행하셔도 됩니다. antd@5, next-redux-wrapper@8의 migration 방법은 강의노트와 새소식(공지사항)에 정리해두었습니다. 참고하면서 보세요!

이 강좌는 Pages Router를 다룹니다. App Router 강좌는 이 링크(클릭)에 있습니다. App router 강좌가 더 최신이지만 이 강좌를 남겨둔 이유는, App Router가 아직 불안정해서 실무에서 쓰기엔 조금 위험이 있습니다. 안정화될 때까지는 Pages Router를 실무에서 쓰시는 걸 추천드립니다.

당부의 말씀

작년에 많은 수강생분들이 이 강좌를 들어주셨습니다. 감사합니다. 다만 드리고 싶은 말씀이 하나 있습니다. 단순히 강의를 눈으로 본다고 해서 풀스택 개발자 되지 않습니다(그것은 욕심입니다). 직접 따라서 치시고, 발생하는 에러들을 해결하고, 강좌에는 없는 기능을 만들어보면서 나오는 기술을 자기 것으로 만들어야 합니다.

이 강좌는 실제로 6개월 이상이 걸리는 커리큘럼을 20시간 가까이 이어서 보여드리는 것입니다. HTML, CSS, JS, Node, MySQL, AWS 모두 최소 1달 이상을 투자해야 어느 정도 소화할 수 있습니다. 따라서 강좌는 20시간 분량이더라도 별도의 공부가 필요합니다.

제로초의 React로 배우는
20시간 풀스택 강좌!

^{▲ NodeBird SNS 만들기}

트위터와 비슷한(이라고 쓰고 짝퉁이라 읽는다) 제로초의 시그니처 프로젝트 NodeBird SNS를 만들어보며, 서비스 구현부터 배포까지 모두 배워봐요.
Next.js(SSR) + React Hooks + Redux + Redux saga + Ant Design + Styled Components + Node + Express + Sequelize(MySQL)를 배웁니다.
검색엔진 최적화와 AWS 배포(간단하게 EC2 + Lambda + S3 + Route53 사용)는 보너스!

직접 만들어보세요!

로그인, 게시글 작성, 좋아요

이미지 업로드, 댓글, 리트윗

인피니트 스크롤링, 팔로우, 언팔로우

해시태그 검색, 유저 프로필

질문에 빠르게
대답해 드립니다.

제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드려요.
강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부해 보세요.
내용을 이해하기에 더 도움이 될 거예요!

지식공유자를 소개합니다.

_{제로초 블로그 및
유튜브 채널 운영}

_{웹개발 베스트셀러
<Node.js 교과서> 저자}

_{주식회사 오늘의픽업
CTO}

연관 강의

웹 게임을 만들며 배우는 React
무료로 웹 게임을 통해 리액트를 배워봅니다.
프론트를 중점으로 다루고 백엔드는 부가적인 역할을 합니다.

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
노드에 대한 핵심 개념을 익힌 후,
실전 예제를 통해 실무에 뛰어들 준비를 갖춥니다.

Vue로 Nodebird SNS 만들기
Vue로 만드는 풀스택 SNS 강좌!

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트 Hooks나 Next같이 리액트를 응용하고 싶은 분
풀스택 개발에 관심있는 분
프론트엔드 개발자 지망생
Next Page Router를 적극적으로 사용해보고 싶은 분

선수 지식,
필요할까요?

HTML, CSS 지식
자바스크립트 최신 문법 지식
제로초의 리액트 무료 강좌 시청

안녕하세요
제로초(조현영)입니다.

63,998

명

수강생

1,535

개

수강평

9,612

개

답변

4.8

점

강의 평점

개

강의

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자
– ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중
– 현) 스모어톡 CTO
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
Operator of ZeroCho.com
Currently running a YouTube channel ZeroCho TV, covering development topics
CTO at SmoreTalk
Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

커리큘럼

전체

94개 ∙ (23시간 3분)

섹션 1. Hello, Next.js

8개 ∙ (1시간 34분)

섹션 2. antd 사용해 SNS 화면 만들기

9개 ∙ (1시간 47분)

9. antd와 styled-components
10:55
10. _app.js와 Head
09:18
11. 반응형 그리드 사용하기.
11:33
12. 로그인 폼 만들기
09:36
13. 리렌더링 이해하기
09:59
14. 더미 데이터로 로그인하기
08:39
15. 크롬 확장프로그램과 Q&A
11:53
16. 프로필 페이지 만들기
18:28
17. 회원가입 페이지 만들기(커스텀 훅)
17:06

섹션 3. Redux 연동하기

12개 ∙ (2시간 48분)

18. 리덕스 설치와 필요성 소개
13:25
19. 리덕스의 원리와 불변성
17:07
20. 리덕스 실제 구현하기
14:50
21. 미들웨어와 리덕스 데브툴즈
09:46
22. 리듀서 쪼개기
08:13
23. 더미데이터와 포스트폼 만들기
19:43
24. 게시글 구현하기
17:05
25. 댓글 구현하기
12:45
26. 이미지 구현하기
09:37
27. 이미지 캐루셀 구현하기(react-slick)
16:02
28. 글로벌 스타일과 컴포넌트 폴더 구조.
19:00
29. 게시글 해시태그 링크로 만들기
11:11

섹션 4. Redux-saga 연동하기

13개 ∙ (3시간 23분)

섹션 5. 백엔드 노드 서버 구축하기

25개 ∙ (6시간 38분)

섹션 6. Next.js 서버사이드렌더링

12개 ∙ (2시간 47분)

섹션 7. AWS에 배포하기

9개 ∙ (2시간 22분)

섹션 8. 보너스

6개 ∙ (1시간 41분)

강의 게시일: 2020. 07. 06.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

178개

4.9

178개의 수강평

자유인
수강평 2
∙
평균 평점 5.0
2021. 05. 23.
5
91% 수강 후 작성
안녕하세요! 제로초님 수업듣고 블록체인 회사에 취업도 했고, 따로 제 프로젝트 홍보도 할 겸 해서 수강평을 작성하게 되었습니다:) 현재도 회사 다니면서 유지보수중인 프로젝트 먼저 공개하겠습니다! 여기 쓴 노드버드랑 거의 동일한 스택인데 타입스크립트, Nest가 추가됐어요! https://musicsseolprise.com 여기 들어오시면 됩니다! 프로젝트 주제이신 분이 방송 나오셔서 홍보도 할 겸 해서 수강평 쓰게 되었어요☺️ 제가 공개할 프로젝트는 프론트에 한해서 노드버드 강의만 잘 이해해도 충분히 할 수 있는 난이도에요! 백앤드는 Nest.js를 따로 공부하셔야 하구요. 저는 전공자였지만 학부 시절 마지막 학기 때 들은 데이터베이스를 제외하고 방황을 많이 했어서 학점도 좋지 않고, 비전공자랑 베이스가 차이가 없었다고 보시면 됩니다. 일단 강의의 가장 큰 장점은 질문답변! 전공자지만 대학을 늦게 들어가서 인맥이 부족했어요. 그래서 라이브 강의하실때나 인프런 질문이나 열심히 올리면 답변 너무 친절하게 달아주셨어요. 덕분에 리눅스까지 같이 공부해서 이번 회사 들어가는데 큰 도움이 되었습니다! 그리고 프론트앤드는 변화가 너무 빨라요. 그래서 공부하실 때 라이브러리를 왜 쓰시는지 스스로 질문 해보시고 그래도 안 풀리시면 다른 라이브러리도 찾아보시고 질문을 활용해주시면 실력이 많이 느실거에요! 개인적으로 저는 취준생이라면 상태관리를 Recoil.js를 하시는거 추천드려요. 리덕스는 사실 사가까지 하시면 코드량이 너무 많아져서 생산성이 떨어지거든요. 그리고 Nest.js는 나중에 강의로도 올려주실거지만 사실 사전에 익스프레스를 공부하시는게 더 좋아서 공부해보시고 리팩토링으로 질문하시면서 공부하시는거 추천드려요! 참고로 저는 추가로 타입스크립트를 공부 해서 짠 코드를 전부 다 타입스크립트로 교체했습니다! 그리고 스타일 라이브러리는 다른거 썼구요. 저도 리덕스는 썼다가 제거하고 swr로 ajax를 구현했습니다. 그리고 무한스크롤은 intersection observer라고 브라우저 내장 api를 썼구요. 어째튼 바쁘신데 질문 항상 친절하게 달아주셔서 제로초님 정말 감사합니다!!
Choi Boo
수강평 18
∙
평균 평점 4.8
2020. 10. 20.
5
99% 수강 후 작성
강의 구매 고민하시면서 이 글을 보신다면 당장 수강하세요 후회하지 않습니다. 안녕하세요 이 강의를 듣고 취업하게 되었습니다. 이 강의를 수강한 뒤나 수강하면서 토이 프로젝트를 정하고 실행하세요. 그리고 기록하는 습관이 있으면 좋습니다. 또는 개발 블로그를 만드세요. 강의를 수강하면서 모르는 부분은 꼭 기록하세요. 개발 블로그에는 완전히 이해하고, 내 것으로 만들었다는 마음으로 쓰면 도움이 될 겁니다. 제 스토리를 다 풀고 싶지만 너무 길어져서... 제가 취업하기까지 학습 순서는 1. 제로초 Node 크롤링 (자바스크립트 뭣도 모를 때) 2. 자바스크립트 (계속 반복 학습하고 인프런 위주로 공부했습니다.) 3. 제로초, 캡틴판교 vue (살짝 맛만 봄, 지금 vue로 프로젝트 하라하면 못함) 4. 생활코딩 react, redux (유튜브) 5. John Ahn 리액트 시리즈 (인프런) 6. 제로초 [리뉴얼] react nodebird 7. nextjs 토이프로젝트 (제일 중요!! 인생의 전환점) 8. github 잔디 관리 9. 개발블로그 10. 이력서, 포트폴리오 관리 11. 면접 및 취업 제대로 취업하기 위해 준비한 기간이 생각보다 짧은데(4개월?) 뭔가 좀 많이한 느낌도 들긴합니다. 공부를 많이할 수 있었던 계기가 금토일 야간 알바하면서 일 없을 때 계속 공부해왔다가, 코로나로 장사 안 되서 알바 못나갈 때 그때 공부 엄청한거 같습니다. 꼭 이 강의만 봐서 취업하진 않았지만 이 강의를 수강함으로써 취업하기 위해 도움이 많이 되었습니다. 아마 이 강의가 없었다면 다른 알바 일하면서 계속 공부하고 있을거라 생각합니다. 이 강의를 보고 나시면 어떤 사이트든 만들 수 있는 자신감이 생깁니다. 파이팅!!
- 이룸
  2021. 02. 08.
  next.js 토이프로젝트는 어디서 수강하신건가요?
- Choi Boo
  2021. 02. 24.
  이룸님 답변이 많이 늦었네요 알람이 안 와서 답글이 달린 줄도 몰랐습니다. 토이 프로젝트는 클론 코딩이랑 유사한데 강의로 듣지 않고 특정 사이트 정해서 하나하나 클론 했습니다.
OCK Sam
수강평 2
∙
평균 평점 4.5
2020. 08. 30.
5
97% 수강 후 작성
현업 프론트엔드 개발자로 백엔드 개발을 어려워 했었고, 배포를 해보고 싶었지만 막연한 두려움 때문에 시작하지 못했었습니다. 그런데 이 강의를 통해서 직접 배포도 해보고, 백엔드 작업도 해서 정말 좋았습니다! 강의를 들으시는 분들 경우 redux와 saga 수업 들으실때, 어느 정도 패턴에 익숙해 지시면 제로초님이 redux, saga 작업 하기전에 미리 멈춰놓고 프론트에서 redux와 saga, backend router 작업을 미리 해보시고 강의를 들으면 좋을 것 같습니다^^!
조도미에
수강평 4
∙
평균 평점 2.5
2020. 07. 16.
5
37% 수강 후 작성
JavaScript 일도 모르는 비개발자였습니다. 유툽 제로초 채널통해서 게임으로 배우는 JavaScript 자스스톤까지 듣고 빨리 리액트 시작하고 싶은 마음에 리액트 초급강좌로 개념만 후딱 터득하고 이거 들었어요. 원리 중심으로 설명하시는 스탈이라 관심만 있다면 비전공자가 들어도 따라오실수 있습니다. 문법에 대한건 중간중간 구글에 검색해서 알면되니까요. 그리고 질문에 답변 빨리 달아주시는 것도 큰 길라잡이가 되었습니다.
GUKKE
수강평 2
∙
평균 평점 3.5
2022. 10. 12.
3
88% 수강 후 작성
이 강의의 장단점을 적오보고자 합니다. 장점 1. 강의 내용이 너무 알차다 단점 1. 코드를 복사 붙여넣기 하는 구간이나, 편집해서 갑자기 완성된 코드가 나올 때마다 갑자기 생긴 코드이기 때문에 이 코드를 어디서 가져왔는지, 어떤 내용을 수정했는지에 대한 설명이 부족해 이 부분에서 시간이 많이 소요됨 2. 강의를 잘 따라오면 중간에 에러가 생기는데 강의 자체에서 생긴 실수이기 때문에 다음 강의에서 정정하는 구간이 나오지만 이에 대한 언급이 없기 때문에 다음 강의를 보기 전까지는 본인이 어디서 실수를 했는지 계속 찾게 됨 강의 내용이 너무 알차지만 편집 부분이 많이 아쉽다.

제로초(조현영)님의 다른 강의

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

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

React, React Native, 하이브리드 앱

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

제로초(조현영)

노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서비스를 배포해보기도 하고 노드 프로젝트를 타입스크립트로 전환해도 봅니다.

초급

Node.js, Express, MySQL

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

제로초(조현영)

타입스크립트/자바스크립트로 그림판을 만들어보며 다양한 디자인 패턴의 쓰임과 장단점을 알아봅니다. canvas api를 배울 수 있는 것은 보너스!

중급이상

디자인 패턴, 객체지향, TypeScript

테스트 with Jest: 제로초에게 제대로 배우기

제로초(조현영)

본 강의에서는 테스트가 필요한 경우와 테스트를 할 때의 장점을 Jest 프레임워크를 통해 보여드립니다. 리액트, Express 등에 유닛테스트, 통합테스트를 적용해봅니다.

초급

소프트웨어 테스트, Jest, react-testing-library

Next + React Query로 SNS 서비스 만들기

제로초(조현영)

리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

중급이상

Next.js, React, react-query

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

제로초(조현영)

Node.js의 스프링이라고 불리는 NestJS를 배우고, Dependency Injection의 편리함을 맛봅시다. API 개발부터, 익스프레스와의 비교, 배포, 테스팅까지 모두 배워봅시다.

중급이상

NestJS, TypeORM, Express

[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

제로초(조현영)

타입스크립트 기본 문법을 배우고, 다른 사람이 작성한 타입을 분석하는 방법과, 내가 직접 타입을 작성하는 방법에 대해 알아봅니다.

초급

TypeScript

비전공자의 전공자 따라잡기 - 네트워크, HTTP

제로초(조현영)

HTTP를 다루는 개발자이거나 개발자가 되고 싶은데 컴퓨터 학과를 전공하지 않아 네트워크가 약하신 분들, 이 강좌 하나로 평생 지식을 얻어가세요!

입문

네트워크, tcpip, websockets

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

제로초(조현영)

알고리즘 공부의 필수 선수과목인 자료구조! 다양한 자료구조를 자바스크립트로 배워봅시다!

초급

JavaScript, 알고리즘, 코딩 테스트

비전공자의 전공자 따라잡기 - 데이터베이스,SQL

제로초(조현영)

이미 개발자이거나 개발자가 되고 싶은데 컴퓨터 학과를 전공하지 않아 데이터베이스가 약하신 분들, 이 강좌 하나로 평생 지식을 얻어가세요!

입문

DBMS/RDBMS, SQL, MySQL

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

제로초(조현영)

타입스크립트 기본 문법을 배운 상태에서, 유명한 라이브러리들의 복잡한 타입을 분석하는 방법을 알아봅시다.

중급이상

TypeScript

Redux vs MobX (둘 다 배우자!)

제로초(조현영)

리덕스와 몹엑스 뭘 선택할지 고민되시나요? 일단 둘 다 배우고나서 고민합시다!

초급

Redux, MobX

배달앱 클론코딩 [with React Native]

제로초(조현영)

리액트 네이티브로 라이더용 배달앱을 만들어봅니다. 6년간 리액트 네이티브로 5개 이상의 앱을 만들고, 카카오 모빌리티에 매각한 개발자의 강의입니다.

중급이상

React Native

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

제로초(조현영)

본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카드 짝맞추기 게임, 텍스트 RPG, 지뢰 찾기, 2048게임, 두더지 잡기까지 함께 만들어봅시다.

초급

JavaScript

Slack 클론 코딩[실시간 채팅 with React]

제로초(조현영)

Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!

중급이상

클론코딩, React, TypeScript

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

Node.js, 웹앱, TypeScript

웹 게임을 만들며 배우는 React에 TypeScript 적용하기

제로초(조현영)

리액트로 만든 웹 게임과 React Router, Redux, MobX에 타입스크립트를 붙여보면서 리액트와 타입스크립트를 같이 사용해봅시다.

중급이상

React, TypeScript

웹 게임을 만들며 배우는 Vue

제로초(조현영)

간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다.

초급

Vuex, Vue.js, Webpack

Vue로 Nodebird SNS 만들기

제로초(조현영)

Vue와 Nuxt 프레임워크를 사용해 SNS 서비스를 만듭니다. 서비스에 필요한 풀스택 지식을 학습합니다.

중급이상

Vue.js, Node.js, AWS

웹 게임을 만들며 배우는 React

제로초(조현영)

웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다.

초급

React

비슷한 강의

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

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

PostgreSQL, Next.js, TailwindCSS

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

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

중급이상

React, Redux, Node.js

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

닭강정

React, Node.js, MongoDB를 활용해 회사 웹사이트를 직접 제작하는 과정을 배울 수 있는 실전 강의입니다. 간단한 React, Node.js 배경으로 풀스택 프로젝트를 같이 만들어요!

중급이상

React, Node.js, MongoDB

Vue로 Nodebird SNS 만들기

제로초(조현영)

Vue와 Nuxt 프레임워크를 사용해 SNS 서비스를 만듭니다. 서비스에 필요한 풀스택 지식을 학습합니다.

중급이상

Vue.js, Node.js, AWS

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate

Wintho

React Native 기반 모바일 앱 개발을 위한 중급 강의입니다. 프론트엔드의 심화내용 학습 뿐만 아니라 Firebase 기반의 백엔드 내용까지 함께 배우면서, 서버 연동/ 로그인/ 데이터 송수신/ 공공API 활용 등이 가능한 하나의 완벽한 앱을 개발할 수 있도록 제작된 강의입니다.

중급이상

React Native, Redux, Firebase

Next + React Query로 SNS 서비스 만들기

제로초(조현영)

중급이상

Next.js, React, react-query

실무 중심! FE 입문자를 위한 React

IT Share

강의를 모두 듣고 나면, 스스로 하나의 웹서비스를 개발할 수 있는 역량을 갖게 됩니다.

초급

React, Node.js, Redux

Next.js 15로 완성하는 실전 YouTube 클론 개발

antonio

이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

초급

Next.js, React, PostgreSQL

NodeFull Stack 개발 가이드

싸플

맥 또는 윈도우 상관없는 Docker 환경에서 나만의 쇼핑몰을 만들어 봅시다 ^^

초급

React, Docker, redux-toolkit

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

React Native, React, ES6

[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 백엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Node.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

초급

Node.js, MySQL, Express

공식문서로 배우는 실전 타입스크립트

어쩔코딩

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

입문

TypeScript, JavaScript, ES6

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

TypeScript, Node.js, 웹앱

Node.js로 웹 크롤링하기

제로초(조현영)

네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

중급이상

JavaScript, Node.js, 웹 크롤링

[바이브코딩] 초간단 가족만의 단톡방 만들기 (Cursor + Firebase)

체험코딩

Cursor AI와 Firebase를 이용하여 가족만을 위한 프라이빗 메신저를 만들며, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 직접 만든 웹사이트로 실제 사용도 해보세요.

입문

Firebase, Next.js, vercel