코스 이미지

[핸즈온] 만들면서 배우는 프론트엔드(Next.js,TypeScript)

판매 종료일: ~2023-01-18

[핸즈온] 만들면서 배우는 프론트엔드(Next.js,TypeScript)

  • 코스 난이도

    입문
  • 사용 언어

    # html
    # javascript
    # css
    # typescript

강의 소개

💡 이 강의는

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

  • 겉만 멋진 서비스 말고 사용자를 만나서 피드백 받을 수 있는 서비스를 만들 수 있습니다.
  • 웹 개발에 자신감을 얻을 수 있습니다.

온전히 작동하는 웹 서비스를 처음부터 끝까지 강사와 함께 라이브 세션으로 익힙니다.

  • 온라인 강의는 구입만 하고 끝까지 학습하기 너무 어렵습니다.
  • 그래서 강사가 직접 라이브 세션으로 함께하며 전 과정을 제작합니다.

6번 라이브 세션이 진행됩니다.

  • 1회차: 23/01/19(목요일), 오후 20:00 ~, 약 2시간
  • 2회차: 23/01/26(목요일), 오후 20:00 ~, 약 2시간
  • 3회차: 23/02/02(목요일), 오후 20:00 ~, 약 2시간
  • 4회차: 23/02/09(목요일), 오후 20:00 ~, 약 2시간
  • 5회차: 23/02/16(목요일), 오후 20:00 ~, 약 2시간
  • 6회차: 23/02/23(목요일), 오후 20:00 ~, 약 2시간

🤔 왜 라이브 세션으로 진행하나요?

만들면서 배우는 프론트엔드 DO IT 코딩 이란 동영상 강의를 수강한 많은 분들 중 약 70%가량은 끝까지 강의를 듣지 않습니다.

이건 동영상 강의의 특징이라고 생각합니다.

그에 비해 7번 진행한 라이브세션 스터디 는 더 많은 분들이 끝까지 강의에 참여하는걸 확인했습니다. 시작하는 분들이 자신감을 가지고 프로그래밍을 학습하기 위해서는 이렇게 완주하는 경험이 꼭 필요하다고 생각했습니다.

하여 이 강의에서는 전 과정을 라이브세션으로 진행하고자 합니다.

그리고 복습을 위해 기존에 제작한 VOD도 함께 제공합니다.

🤔 개발자가 되고 싶지만, 어디서부터 배워야 하지?

어떤 내용을 배워야 할지 모르겠는데 어마어마한 프론트엔드 로드맵에 치이고,
알고리즘 공부하느라 지치셨다면 순수하게 애플리케이션을 만드는 즐거움을 느껴보세요.
즐거워야 더 오랫동안 학습할 수 있습니다.


👩🏻‍💻 개발환경 설정부터 애플리케이션 배포까지

이 강의에서는 익명 질문 서비스(Blahx2)를 처음부터 모두 만들어서 배포하는 전 과정을 다룹니다.

  • React.js를 접할 때 자주 듣는 클라이언트 사이드 렌더링(CSR)이 아니라 서버에서 초기 html을 만들어서 내려준 뒤 하이드레이션(hydration) 과정을 거치는 서버 사이드 렌더링(SSR)을 지원하는 Next.js를 중심으로 다룹니다.
  • 각종 소셜 로그인 구현하느라 시간 쏟지 않고 빠르게 구축할 수 있도록 Firebase 인증을 활용합니다.
  • Firebase 파이어스토어(Firestore)를 활용해 NoSQL 방식으로 데이터를 저장/수정하며 페이지네이션 처리하는 방법을 배울 수 있습니다.

학습 내용

1️⃣ 메인 및 사용자 홈페이지 만들기

  • 사용자가 가장 많이 보는 뷰 페이지를 어떻게 구성하는지 살펴봅니다.
  • 각 페이지마다 모두 사용되는 공통 레이아웃을 만들고 GNB를 추가하는 과정을 전부 다룹니다.

2️⃣ 사용자, 메시지 API 만들기

  • 가입 후 사용자 정보를 저장/조회하는 API와 메시지 등록/수정 API를 모두 제작합니다.
  • 서버에서 API를 제공할 때 고려해야 하는 사항을 다루며, Firestore에 데이터를 어떤 식으로 구조화해서 넣는지 확인할 수 있습니다.

3️⃣ open graph 이미지 생성기 만들기

  • 소셜 미디어에 글을 공유하면 의레 이미지와 텍스트가 따라붙습니다.
  • 그중에서 사용자가 신경 쓰지 않아도 입력된 내용만 가지고 이미지를 생성할 수 있도록 playwright와 aws lambda에서 동작 가능한 headless chrome을 이용 방법을 다룹니다.

4️⃣ Vercel 배포

  • 서비스를 만들어도 사용자 피드백을 받을 수 있는 방법이 없다면 더 많은 걸 배워나갈 수 없습니다.
  • 이 부분을 개선하기 위해 GitHub 계정과 Vercel 배포 환경을 이용해서 지속 배포(Continuous Deployment) 가능한 환경을 만드는 방법을 다룹니다.

➕ 보너스: React Query

  • React.js의 useEffect를 활용해서 페이징 처리한 데이터를 로딩하도록 구현합니다.
  • 이를 React Query를 이용하면 어떻게 수정 가능한지 살펴봅니다.

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

이런 분들에게 추천합니다.

  • 프로그래밍의 재미를 찾고 싶은 분
  • 실전 기능 구현을 해보고 싶은 분
  • 최신 트렌드 기술을 배우고 싶은 분

핸즈온만의 특징

  • 처음부터 하나씩 만드는 과정을 강사와 함께 할 수 있습니다.
  • 라이브 세션을 통해 진행하기 때문에 강의만 사놓고 보지 못하는 문제를 막을 수 있습니다.
    • 단순 동영상 강의보다 라이브 세션은 완강율이 높습니다!
  • JavaScript만 접해보셨다면 TypeScript의 매력을 느껴보실 수 있습니다.
  • 프론트엔드 공부하다 보면 막막하게 느껴지는 백엔드가 쉽게 느껴지도록 단계별로 코드를 발전시킵니다.
    • 같은 코드가 반복되어도!
    • 오타 내기 쉬운 부분도!
    • 우선은 프로그래밍하고 차차 고쳐나가는 방향으로 설명합니다.
  • 프로그래밍 과정에서 흔히 하는 실수를 그대로 두고 이후에 수정합니다.
    • 현업에서 디버깅하는 방법을 엿보실 수 있습니다.

수강 시 꼭 확인해 주세요.

  • JavaScript 문법을 알고 계시면 더 쉽게 이해할 수 있어요.
    • JavaScript를 한 번도 다뤄보시지 않았다면 let, const 의 차이나 Array의 map 등은 확인하면 좋습니다.

강사소개

강사 프로필 이미지

송요창

현) 우아한형제들, 프론트엔드 프로그래머
전) 야놀자, 백엔드 프로그래머
전) 아라소판단, 백엔드 프로그래머


커리큘럼

준비하기 총 5개

메인 페이지 만들기 총 8개

사용자 API 만들기 총 7개

사용자 홈페이지 - 1 총 5개

사용자 홈페이지 - 2 총 12개

메시지 거절 메뉴 추가 총 4개

메시지 상세 페이지 총 4개

메타(Meta) 이미지 생성 총 4개

배포 총 2개

질문 & 답변