코스 이미지

[라이브/2기] Next.js와 TypeScript로 만드는 NotionAPI 블로그

판매 종료일: ~2023-03-20

[라이브/2기] Next.js와 TypeScript로 만드는 NotionAPI 블로그

코스 대표 이미지
  • 코스 난이도

    초급
  • 사용 언어

    # html
    # javascript
    # css
    # typescript

강의 소개

👨‍💻나만의 개발 블로그를 만들어봐요!

📚사용할 기술 스택

주로 사용할 기술 스택은 다음과 같아요.

🧋한 번 시작하면 끊을 수 없는 세 가지

  • Next.js
  • Typescript
  • Tailwind CSS

Next.js + Typescript

SSG(Static Site Generate)를 위해 Next.js를 사용하고, 더 나은 개발 경험을 위해 Typescipt 도 사용할 예정입니다.

Tailwind CSS

요즘 잘 나가는 CSS 라이브러리인 Tailwind CSS를 사용해 개발할 예정입니다. 더 이상 클래스명을 고민하거나, .css 파일 창을 드나들지 않아도 돼요!

tailwind

Notion API

거의 모든 회사에서 사용하고 있을 정도로 유명한 문서 관리 툴인 Notion의 API를 사용할 예정입니다.
굳이 백엔드와 WYSIWYG를 직접 개발하거나, 에디터로 Markdown 문서를 작성하지 않아도 돼요!
노션에 글을 올리면 블로그에 그대로 올라가니, 개발자도 비개발자도 손 쉽게 블로그 글을 작성할 수 있습니다.

자세한 건 커리큘럼을 참고해주세요!

🥞결과 예시물

Framer 디자인 샘플(참고용) 을 통해 결과물을 살짝 참고해볼 수 있어요!

💡학습 과정

👌매주 강의 때는 이렇게 해요

매주 약속된 시간에 만나 라이브 코딩을 하며, 재미나게 블로그를 만들어봅니다.
라이브 코딩 속도를 꼭 따라오려고 하지 않아도 됩니다!
매주 녹화본과 완성 코드가 제공되기도 하지만
일단 보며 이해한 뒤에, 나만의 코드와 나만의 디자인을 갖춘 블로그를 만드는 것도 매우 좋은 경험입니다!

100% 누군가가 만들어주는 블로그가 아니라, 조금이라도 여러분이 직접 고민한 코드가 들어가는 게 좋다고 생각해요.

그래도 라이브로 진행하는 세션에 들어오면 라이브로 질문에 대한 대답도 하고 아무래도 유익한 시간이 되겠죠?
진행하면서 당연히 모르는 부분이 생길 테고, 즉석에서 질문하는 게 좋으니까요!

많은 질문이 훌륭한 개발자를 만들어요!

😫어라 왜 안 되지??

매 강의 챕터마다 코드 완성본이 깃허브 레포지토리를 통해 브랜치 별로 제공되니,
이때 이 코드를 어떻게 짰는지, 똑같이 따라했는데 왜 내 코드만 오류가 나는지😥 강의 영상을 돌려보며 찾아보지 않아도 됩니다:)

🍀이 코스를 통해 얻게 될 것들

나의 개발 일지를 담을 수 있는 블로그를 가지게 되면서 취업과 자기 계발에 도움이 되는 글을 재미있고 손쉽게 작성할 수 있게 됩니다.
이후에 블로그를 자신만의 스타일로 디자인하는 것도 덤이구요!

무엇보다도, 자신이 올바른 방법으로 코드를 작성하고 있는지 스스로에게 의구심이 드는 취준생 개발자분들에게 도움이 될 거라고 생각합니다!

📆 스터디 일정

  • 시작 : 2023/03/21(화)
  • 종료 : 2023/05/02(화) 총 7회차 + @

라이브세션은 매주 화요일 오후 8시 30분에 시작하여, 약 120분 정도 소요 예정입니다.
강의는 7회차라는 횟수에 딱 맞추는 것이 아니라, 학습 진도에 맞추어서 나갈 예정이기 때문에 7회 이상이 될 수도 있습니다!

따라서 1주차라고 해서 챕터 하나만 진행되는 것이 아니라,
진행 상황에 따라 한 챕터에 2주를 소요할 수도 있고
반대로 한 주에 챕터 2개를 진행할 수도 있습니다.

게다가 여러분의 질문이나, 추가 기능에 따라 강의를 더 진행할 예정입니다!


수강 후 기대 효과 및 추천 대상

💪이렇게 될 거예요.

  1. React 프레임워크인 Next.js를 사용해보며 SSR/SSG에 대해 학습할 수 있게 됩니다.
  2. 이제는 필수인 Typescript를 직접 사용해보며 익숙해집니다.
  3. 요즘 인기인 Tailwind CSS를 사용해보며 CSS에 대한 지식을 공부합니다.
  4. 대부분의 IT기업이 사용하는 문서 관리 툴, Notion의 API를 백엔드로 사용하는 방법을 알게 됩니다.
  5. 결과물인 블로그를 배포하는 방법을 배웁니다.

👍이런 분에게 추천해요.

  1. 나만의 블로그를 만드는 게 목표였던 주니어 프론트엔드 취준생/개발자
  2. Next.jsTypescript에 익숙하지 않은 개발자
  3. 노션을 활용하고 싶은 개발자

수강 시 꼭 확인해 주세요.

🙇‍♀️시작하기 전에 알아오면 좋은 것들

아쉽게도 완전 입문자 분들을 위한 html/css/js/react 강의부터 시작하지 않아요😢😢
기본적인 프론트엔드 기술을 알고 있는 분들이 들으시면 좋습니다!

혹시 모르는 부분이 있다면 아래 문서를 읽고 오시면 도움이 되실 겁니다!

깃허브와 노션에 미리 회원가입을 해두시면 빠르게 시작하실 수 있습니다!

👌이건 모르고 오셔도 됩니다

TypescriptNext.js 는 모르고 오셔도 됩니다!
JavascriptReact를 알고 계신다면 둘 다 그렇게 어렵지 않아요.

어떻게 TypescriptReact 를 개발하는지 알 수 있어요!

추가 정보

📰상세 커리큘럼

1 – 프로젝트 준비하기

  1. 깃허브 시작하기
  2. Next.js 프로젝트 시작하기
  3. 관련 패키지 설치하기
  4. vscode extensions 설치하기
  5. Vercel에 배포하기

2 – Notion API 연결하기

  1. 노션 페이지 만들기
  2. 노션 데이터베이스 만들기
  3. 노션 api 연결 만들고 데이터베이스에 연결하기
  4. Next.js 프로젝트에 환경 변수로 설정하기

3 – Tailwind CSS로 꾸미고, 데이터 뿌려주기

  1. 헤더와 푸터 만들기
  2. Notion API를 이용해 데이터 가져오기
  3. 블로그 메인 페이지 만들기

4 – 게시글 상세 페이지 만들기

  1. 상세 페이지 만들기
  2. 상세 페이지 세부 디자인하기
  3. ISR 사용하기

5 – 쿼리를 추가해 기타 페이지들 만들기

  1. 태그별 페이지 만들기
  2. 검색 페이지 만들기
  3. 페이지네이션 추가하기

6 – Notion API 기능 확장하기

  1. 프리뷰 이미지 추가하기
  2. 과도한 Image Optimization 해결하기
  3. 댓글 시스템 붙이기

7 - 세상에 내보낼 준비하기

  1. head 설정하기
  2. 커스텀 도메인 연결하기
  3. 구글과 네이버 검색엔진 등록하기
  4. 구글 애널리틱스 붙이기

추가 - Next.js@13 마이그레이션 해보기


강사소개

강사 프로필 이미지

코딩으로 만들고 싶은 게 너무 많아 행복한 프론트엔드 개발자입니다!

  • 현) 머신러닝 연구 조직 프론트엔드 엔지니어
  • 구글 및 네이버에서 진행하는 스터디 리더 경험
  • 한빛미디어 기획단 IT도서 베타 리더 경험 다수


커리큘럼

프로젝트 준비하기 총 5개

Notion API 연결하기 총 4개

Tailwind CSS로 꾸미고, 데이터 뿌려주기 총 3개

게시글 상세 페이지 만들기 총 3개

쿼리를 추가해 기타 페이지들 만들기 총 3개

Notion API 기능 확장하기 총 3개

세상에 내보낼 준비하기 총 4개

Next.js@13 마이그레이션 해보기 총 2개

질문 & 답변