코스 이미지

Next.js와 TypeScript로 만드는 NotionAPI 블로그

판매 종료일: ~2022-10-31

Next.js와 TypeScript로 만드는 NotionAPI 블로그

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

    중급
  • 사용 언어

    # typescript

강의 소개

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

손수 만드는 개발 블로그... 만들어야지... 만들어야지... 미루던 분들은 어서 들어오세요!

📚사용할 기술 스택

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

html/css 는 기본이겠죠?

프론트

SSG(Static Site Generate)를 위해 Next.js를 사용하고, 더 나은 개발 경험을 위해 Typescipt 도 사용할 예정이며, 요즘 잘 나가는 Tailwind CSS를 사용해 개발 속도를 높이는 게 목표입니다!

Notion API

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

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

🥞결과 예시물

실제 회사에서 같은 기술 스택으로 개발 중인 사이트의 모습을 잠깐 가져와봤어요!

개발 중인 사내 블로그

만들게 될 블로그가 위와 같은 모습의 디자인은 아니지만, 기술 스택이 같으니 작동 원리도 같답니다!

자세한 모습은 스포일러!!

🚀내 작품을 세상에 내보내기

개발을 통해 나만의 작품을 만들었으면 세상에 공개해야죠!
검색엔진에 등록하고, 애널리틱스도 붙여서 방문자 수도 알아봐요.

요즘 취업엔 깃허브는 물론, 블로그도 본다고 해요!

내가 직접 만든 블로그임을 어필함과 동시에,
취업에 도움이 되는 글을 작성해 유익한 효과를 내봅시다!!

💡학습 과정

매주 강의 때는 이렇게 해요

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

나만의 아이디어와 기능을 추가 해보는 게 큰 도움이 돼요!

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

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

강의가 끝난 후에는

매주 강의 마지막에 과제를 하나 드릴 거예요. 해당 과제를 자신만의 방법으로 구현하시면 됩니다.
100% 누군가가 만들어주는 블로그가 아니라, 조금이라도 여러분이 직접 고민한 코드가 들어가는 게 좋다고 생각해요.

만약 코드 리뷰가 필요하시면 강의 때 알려드리는 방법으로 올려주세요. 즐거운 마음으로 리뷰해드리겠습니다!

걱정 마세요

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

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

결과물인 블로그

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

프론트엔드 기술 스택

유명 기업들이 사용하는 최신 프론트엔드 기술 스택들을 경험해보며 이해도를 높이고, 더불어 프론트엔드 필수 지식도 함께 함양합니다.
어떻게 컴포넌트를 재사용가능하게 작성하는지, 독립적으로 움직이도록 작성하는지 알아볼 기회가 될 거예요!

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

📆 스터디 일정

  • 시작 : 2022/10/25(화)
  • 종료 : 2022/11/29(화) 총 6회차

라이브세션은 매주 화요일 오후 8시에 시작하여, 최대 120분 정도 소요 예정입니다.
만약 시간이 남는다면 과제에 대한 힌트를 드릴 생각입니다!


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

💪이렇게 될 거예요.

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

👍이런 분에게 추천해요.

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

수강 시 꼭 확인해 주세요.

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

아쉽게도 완전 입문자 분들을 위한 html/css/js/react 강의부터 시작하지 않아요ㅠㅠ

기본적인 프론트엔드 기술을 알고 있는 분들이 들으시면 좋습니다!

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

SSR(Server Side Rendering) 과 CSR(Client Side Rendering)의 차이점,
동적 / 정적 웹 페이지에 대해 알고 오시면 이해하는 데 좋아요!

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

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

TypescriptNext.js 는 모르고 오셔도 됩니다!
JavascriptReact를 알고 계신다면 둘 다 그렇게 어렵지 않아요.
각각이 가진 장점들을 함께 습득할 겁니다!

SSR과 CSR / 동적, 정적 웹 페이지도 함께 개발하면서 차차 알아가게 되실 겁니다!

추가 정보

📰상세 커리큘럼

1회차 – 프로젝트 셋업하기

  1. 개발 환경 설정하기(VSCode, Extensions)
  2. 깃허브 레포 만들기
  3. 노션 시작하기 및 api 등록하기
  4. 프로젝트에 필요한 패키지들 설치하기
  5. Vercel에 배포하기

과제) 취업에 도움되는 깃허브 꾸미기

2회차 – Tailwind CSS와 친해지기

  1. Next.js와 TailwindCSS 기초 설명
  2. 반응형 디자인 구현하는 법
  3. 블로그 헤더 만들기
  4. 헤더 메뉴 만들기
  5. 푸터 만들기

과제) 블로그 헤드 프로퍼티 추가하기

3회차 – Notion API로 게시글 리스트 가져오기

  1. 노션에 글 작성하기
  2. Notion API를 이용해 데이터 가져오기
  3. 블로그 메인 페이지 만들기

과제) 인터랙티브 애니메이션 추가하기

4회차 – Notion에 적은 문서 내용 보여주기

  1. 블로그 게시글 상세 페이지 만들기
  2. 상세 페이지 세부 디자인하기
  3. 노션 API의 한계와 고쳐 쓰기
  4. 마법의 가루, ISR

과제) 이미지가 로딩 중임을 알려주기

5회차 – Notion API에 쿼리를 추가해 기타 페이지들 만들기

  1. 태그별 페이지 만들기
  2. 페이지네이션 추가하기
  3. 검색 페이지 만들기
  4. 서버사이드에서 프리뷰 이미지 추가하기

과제) 중복된 서버 요청 캐싱하기

6회차 – 내 블로그 세상에 공개하기

  1. 내 프로필 페이지 만들기
  2. 도메인 구매 및 vercel과 연결하기
  3. 구글과 네이버 검색 엔진에 등록하기
  4. 구글 애널리틱스 붙이기

과제) 게시글마다 댓글 시스템 붙이기


강사소개

강사 프로필 이미지

깔끔한 코드와 성능 최적화에 관심이 많은 프론트엔드 개발자입니다!
비전공자 출신 개발자이지만 개발에는 진심입니다!
함께 재미있는 개발 시작해봐요!

  • 현) AI 연구 조직 <KC MIC> 소프트웨어 개발팀 프론트엔드 엔지니어
  • 멋쟁이 사자처럼 학교 대표 경험
  • 구글 및 네이버에서 진행하는 스터디 리더 경험
  • 한빛미디어 기획단 IT도서 베타 리더 경험


커리큘럼

개발 환경과 프로젝트 셋업하기 - 필요 라이브러리 설치 / 노션 api 등록 / 프로젝트 배포

Tailwind CSS와 친해지기 - 반응형 디자인 구현하기

노션 API 연결하기 - 게시글 리스트 보여주기

노션 문서 내용 가져와 보여주기 - 게시글 상세 페이지 만들기

노션 API에 쿼리를 추가해 다양한 페이지 만들기 - 페이지네이션 / 태그 모음 / 검색 기능

결과물 세상에 공유하기

질문 & 답변