React + API Server 프로젝트 개발과 배포 (CI/CD) 대시보드

초급자를 위해 준비한
[데브옵스 · 인프라] 강의입니다.

SPA의 대명사인 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다.

SPA 프로젝트 로컬 개발환경 구축부터 
서버 배포 자동화까지 직접 도전해보세요! ✌

React SPA 프로젝트, 
서버 배포 + 자동화까지 💡

프론트엔드 환경과 API 서버를 개발했지만 막상 어떻게 배포를 해야 할지 막막하신가요? 생소한 개발 환경 세팅과 배포 CI/CD를 위한 흐름을 익히고 싶으신가요

이 강의에서는 리액트 프로젝트의 로컬 개발환경 구축 및 서버 배포 자동화 과정을 직접 경험해봅니다. 기존 웹 개발 방식과 달라진 리액트를 이용한 싱글 페이지 애플리케이션(SPA) 개발 환경을 다루며, 이를 서버에 배포해서 서비스하는 방법에 대해 소개합니다. 또한 Swagger를 이용한 API 문서 자동화를 함께 다루며, 로컬 개발 환경과 배포되는 서버 환경과의 차이를 배울 수 있습니다.

윈도우 기준으로 영상을 만들었지만, 맥과 리눅스에서도 거의 대부분 동일하게 따라할 수 있습니다. 개발 환경 세팅부터 배포, 자동화가 어떻게 이루어지는지 강의에서 직접 확인해 보세요!

이런 분들께 추천합니다 🎁

• ✅ 문법 중심보다 서비스 중심의 개발을 선호하는 분
• ✅ 서버에 동작하는 코드를 어떻게 올리는지 모르시는 분
• ✅ 클래식 웹과 차이나는 방법을 알고 싶은 분
• ✅ AWS 사용이 처음이거나, HTTPS 서버 구성을 배우고 싶은 분

📌 강의에서 쓰이는 스킬 모아보기

_VSCode

_Node.js

_Git

_GitHub

_{GitHub Actions}

_{AWS EC2}

_{AWS Route53}

_{Nginx + HTTPS
(SSL 인증서)}

학습 내용 미리보기 📚

01. 준비하기

꼭 필요한 개발 플랫폼과 개발 도구, 관련된 계정 등록 소개

02. SPA 개발 환경 구성

로컬 컴퓨터에서 작업하기 위한 프론트엔드와 백엔드의 기본적인 프로젝트 환경 구성

03. 배포 프로세스

서비스를 위해 서버에 배포하는 절차, 방법 소개

04. 도메인 등록과 HTTPS 설정

도메인과 서버를 연결하고, HTTPS 연결을 위한 방법 소개

05. 배포 자동화하기

코드가 변경되면 자동으로 개발 서버에 배포되는 작업 설명

06. CORS 설정

로컬 개발 환경에서 발생하는 CORS 이슈와 빌드 환경 변수 구성

지식공유자 소개 ✒️

반갑습니다, Kenu입니다!

Hello World를 찍으면 개발 준비는 끝났습니다! 단순히 코드를 짜본 경험이 있다는 수준에서 그치는 것이 아니라, 내가 만든 애플리케이션을 사람들이 사용할 수 있도록 서버에 자신이 만든 코드를 올려서 서비스할 수 있는 자신감이 생깁니다.

Q&A를 확인해보세요! 💬

이런 분들께 추천드려요!