💡 이 강의는

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

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

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

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

총 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를 이용하면 어떻게 수정 가능한지 살펴봅니다.