강의

멘토링

커뮤니티

BEST
Programming

/

Devops & Infra

React + API Server Project Development and Deployment (CI/CD)

Create a React development environment, the hallmark of SPAs, and automatically generate API documentation through a Node.js-based API Server and Swagger. Understand the differences between local development environments and development servers, and easily follow along to use AWS. Course materials: https://bit.ly/okreactapi

(4.6) 46 reviews

624 learners

  • kenuheo
3시간 만에 완강할 수 있는 강의 ⏰
CI/CD
SPA

Reviews from Early Learners

What you will gain after the course

  • React Development Environment and Server Configuration

  • Creating a Vite-based React Development Environment

  • Node.js-based API Server

  • API Documentation Automation with Swagger

  • Differences between local development environment and development server

  • Resolving CORS Issues

  • AWS EC2 Server Setup Basics

  • Nginx (Web Server) Basic Usage

  • Connecting Nginx and Node.js

  • Free HTTPS Certificate Issuance

  • GitHub Actions for CI/CD Automation

Build your SPA project local development environment
and challenge yourself with automated server deployment! ✌

📢 Please check before taking the course!

  • This course does not cover React and Node.js syntax, but focuses on development environment setup and deployment.
  • Course materials can be downloaded from Section 1 - SPA Development Environment Setup (1) class.

React SPA Project,
Server Deployment + Automation 💡

Have you developed a frontend environment and API server but feel overwhelmed about how to deploy them? Do you want to learn the unfamiliar development environment setup and the flow for deployment CI/CD?

In this course, you'll directly experience the process of setting up a local development environment for React projects and automating server deployment. We'll cover the React-based Single Page Application (SPA) development environment, which differs from traditional web development approaches, and introduce methods for deploying and serving these applications on servers. Additionally, we'll explore API documentation automation using Swagger and learn about the differences between local development environments and deployed server environments.

The videos were created based on Windows, but you can follow along almost identically on Mac and Linux as well. Check out in the course how everything from development environment setup to deployment and automation works!


Recommended for these people 🎁

  • ✅ Someone who prefers service-oriented development over grammar-focused development
  • ✅ Those who don't know how to deploy code that runs on a server
  • ✅ Those who want to know the differences from classic web methods
  • ✅ Those who are new to AWS or want to learn HTTPS server configuration

📌 Collection of Skills Used in the Course

VSCode

Node.js

Git

GitHub

GitHub Actions

AWS EC2

AWS Route53

Nginx + HTTPS
(SSL Certificate)


Learning Content Preview 📚

01. Getting Ready

Introduction to Essential Development Platforms, Development Tools, and Related Account Registration

02. SPA Development Environment Setup

Basic project environment setup for frontend and backend to work on a local computer

03. Deployment Process

Introduction to procedures and methods for deploying to servers for service

04. Domain Registration and HTTPS Setup

Introduction to connecting domains and servers, and methods for HTTPS connections

05. Automating Deployment

Description of the process where code changes are automatically deployed to the development server

06. CORS Configuration

CORS Issues in Local Development Environment and Build Environment Variable Configuration


Instructor Introduction ✒️

Kenu (허광남)

I often do programming broadcasts on YouTube.

  • 2000.12 OKJSP started → Currently operating as okky.kr
    • A major domestic developer community with 50,000 daily visitors
  • Current okdevtv.com programming broadcast BJ
  • Former '18~'19 PetFriends CTO
  • Former '17~'18 HelloNature CTO
  • Former '15~'17 GS SHOP Venture Investment Team CoE Part
  • Former '12~'16 eGovFrame Evangelist

Nice to meet you, I'm Kenu!

Once you print Hello World, you're ready to start developing! It's not just about having experience writing code, but gaining the confidence to deploy your own code to a server so people can actually use the applications you create.


Check out the Q&A! 💬

Q. Can non-majors also take this course?

Yes, non-majors can definitely take this course. We'll explain everything thoroughly, starting from installing the relevant programs!
(You should have JavaScript as prerequisite knowledge!)

Q. What level of content does the class cover?

This explains development environment setup, deployment, and automation without covering React and Node.js syntax.

Q. When the versions of technologies used in the courses are updated, are the courses updated as well?

If the major version upgrade makes it difficult to proceed with the course, updating the course content will be necessary. Therefore, we are considering updates until 2025.

Recommended for
these people

Who is this course right for?

  • Someone who joined as a startup developer but has no mentor

  • For those new to SPA development environments and server deployment

  • People who are new to using AWS

  • Those who want to learn HTTPS server configuration

  • CI/CD Beginner

Need to know before starting?

  • JavaScript

Hello
This is

767

Learners

52

Reviews

43

Answers

4.6

Rating

3

Courses

https://okky.kr 창립자이며, https://github.com/kenu/okdevtv 에서 배운 것을 공유하고 있습니다.

https://mp4.okdevtv.com 에 개발관련 채널의 최신 영상을 모으고 있습니다.

KenuHeo 유튜브에서 프로그래밍 방송을 500회 이상 진행하고 있습니다.

 

Curriculum

All

8 lectures ∙ (1hr 48min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

46 reviews

4.6

46 reviews

  • meltep00님의 프로필 이미지
    meltep00

    Reviews 9

    Average Rating 4.4

    5

    100% enrolled

    講義でも言及しますが、ReactやNode.jsについて扱う講義ではありません。簡単ですが、CI / CDはプログラムの継続的な発展のために必要なコースです。 良い講義はよく聞きました:)

    • kenuheo
      Instructor

      良い受講評ありがとうございます。 幸せです。 😊

  • ew2io3ogji23님의 프로필 이미지
    ew2io3ogji23

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    プログラミングに入って、ちょうどローカルで開発してプロジェクトを簡単に作ることができるようになりましたが、このような開発環境の設定と配布CI/CDについては不慣れで理解しにくく接するのが難しかったです。 特に、サーバーで何をするのか理解が難しかったのですが、インストールするページ案内から環境設定まで説明してくれ、全体的な生成 - 設定 - 簡単なエラー解決 - 展開まで取り上げて、1サイクルを回すことができるようになりました。 学ぶときに一番難しいのが経験してみなかったことをそうしてやむを得ず抽象的な理解に移らなければならない部分なのにこうやったサイクルを回して再び講義資料を見たら経験に基づいて 'あ、さっきしたそれだ!&#x27 ;しながら得ていく方が多くなるようです。 開発環境の設定から配布まで使用されるプロジェクト(React..など)や詳細な説明を得るための方ではなく、'一体プロジェクトをどのように作って設定して配布し、それを自動化しないのか?できなかった方が聞くととてもいいようです。 まだ現業で仕事をしてみた経験がなくて講義で習得した知識をどれだけ活用できるかは分からないが、後でプロジェクトや現業で仕事をするときに講義を通じて得た経験を思い出して学習の基盤を設けることができることを確信し、この講義が私のような初心者にたくさん知られてほしいですね! 良い講義ありがとうございます。

    • kenuheo
      Instructor

      受講後ありがとうございます。助けてくれて嬉しいです。 開発+配布環境を構築することは基本です。ここに必要なサービスを作成するには、より多くの努力が必要です。 良いサービスをしてください。 応援します!

  • yeslee님의 프로필 이미지
    yeslee

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    配布に関して散らばった概念を一度に集めることができ、有益な講義でした。 頑張って、何をもっと集中的に勉強しなければならないのか感がありました。

    • mike2ox님의 프로필 이미지
      mike2ox

      Reviews 1

      Average Rating 5.0

      5

      75% enrolled

      for 支払い 悩む受講生 - 毎回ローカルでのみ動作し、CI/CDを考慮した序盤の開発環境の構築はしなかったが、本講義を通じて簡単ですが、全体のプロセスがどのように進行されるべきかを知ることができてよかったです。 - だから、環境設定のために作成したコードやインストールしたパッケージ/フレームワークの説明は省略されていることに留意しておきたいと思います。 - おそらくWeb開発自体も初めてなのに '最近CI/CDは必須だからただ受講しなければならない'という考えで講義を聞いた初級者の方も多いでしょう。あなたのプロジェクトに合わせてCI / CDをカスタマイズする必要があるかもしれません。添付されたコードの意味を参考に調べてみると、CI/CDをきちんと理解することになるのではないでしょうか。 結論 - CI/CD 大枠をつかむ目的で聴く開発者の方がおすすめ - 深くカスタマイズする必要があるときは、本講義コードを分析していき、必要な部分を追加学習すれば、実力向上に役立つことが多いと期待 - 良い講義を開いてくれてありがとう!

      • kenuheo
        Instructor

        受講評 ありがとうございます。 幸せなプログラマーになってください。

    • saokm50392님의 프로필 이미지
      saokm50392

      Reviews 4

      Average Rating 4.5

      5

      100% enrolled

      良い講義ありがとうございます! 配布自動化の内容だけでなく、基礎的なツールの使い方まで詳細に知ることができ、多くのお役に立ちました。 ずっとPHPだけやってきてフロントバックの分離がきちんとできなかったのに良い講義を見て初めて分離してみて直接配布までしてみました。 また、githubの使用まで学ぶ機会があり、多くの助けになりました。 ありがとうございます。

      • kenuheo
        Instructor

        良いレビューありがとうございます。 SPAは扱うようにフロントエンドがもう一つあって、その部分に集中しました。 幸せなプログラマーになってください。

    $34.10

    kenuheo's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!