강의

멘토링

커뮤니티

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

    As mentioned in the lecture, this is not a lecture about React or Node.js. This lecture focuses on processes such as deployment, domain registration, and CI/CD settings. Junior developers tend to neglect elements such as CI/CD compared to development, but CI/CD is an essential process for the continuous development of a program. Through this lecture, I was able to easily learn how CI/CD is actually performed. I enjoyed the lecture :)

    • kenuheo
      Instructor

      Thank you for the good review. Be happy. 😊

  • ew2io3ogji23님의 프로필 이미지
    ew2io3ogji23

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    I'm new to programming and have just started developing locally and can easily create projects, but I was unfamiliar with the development environment settings and deployment CI/CD, and it was difficult to understand them. In particular, I had a hard time understanding what to do on the server, but it explained everything from the installation page guide to the environment settings, and covered the entire creation - setting - simple error resolution - deployment, so I was able to go through a cycle. The most difficult part when learning is that you have no choice but to move on to an abstract understanding because you have no experience, but after going through a cycle like this and looking at the lecture materials again, I think I gained more based on my experience, thinking, "Oh, that's what I did earlier!" Rather than those who want to get a detailed explanation of the projects (React, etc.) used from the development environment settings to deployment, it would be very helpful for those who are curious about "How on earth do I create, set up, deploy, and automate a project?" I don't know how much I can use the knowledge I learned in the lecture because I haven't worked in the field yet, but I'm sure that when I work on a project or in the field later, I'll be able to recall the experience I gained from the lecture and lay the foundation for learning. I hope this lecture will be widely known to beginners like me! Thank you for the great lecture.

    • kenuheo
      Instructor

      Thank you for your course review. I am glad that it was helpful. Establishing a development + deployment environment is basic. Creating the service you want here requires more effort. I hope you create a good service. I support you!

  • yeslee님의 프로필 이미지
    yeslee

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    It was a useful lecture because I was able to gather all the scattered concepts related to distribution at once. After finishing it, I got a sense of what I need to study more intensively.

    • mike2ox님의 프로필 이미지
      mike2ox

      Reviews 1

      Average Rating 5.0

      5

      75% enrolled

      for students who are worried about payment - I have only tried local operation and have never set up an initial development environment considering CI/CD, but this lecture was good because I was able to learn how the entire process should proceed, although it is simple. - So, I think you should keep in mind that the code written for environment setup or the explanation of the installed package/framework was omitted. - There are probably many beginners who took the lecture thinking, “CI/CD is essential these days, so I should just take it.” Those people will learn this lecture and there will come a time when they need to customize CI/CD for the project they will be working on later. At that time, if you refer to the meaning of the code attached to the lecture and research the basic framework learned in this lecture, I think you will be able to properly understand CI/CD. Conclusion - Recommended for developers who want to learn the basics of CI/CD - When you need to customize in depth, it is expected that it will be of great help in improving your skills if you analyze the code of this lecture and learn the necessary parts additionally - Thank you for opening a great lecture!

      • kenuheo
        Instructor

        Thank you for your review. As you mentioned, there are many better features, so I hope you use them well. Be a happy programmer.

    • saokm50392님의 프로필 이미지
      saokm50392

      Reviews 4

      Average Rating 4.5

      5

      100% enrolled

      Thank you for the great lecture! It was very helpful because I was able to learn in detail not only about distribution automation but also how to use basic tools. I have only been working with PHP, so I have not been able to properly separate the front and back, but after watching the great lecture, I was able to separate them for the first time and even deploy them myself. In addition, I had the opportunity to learn how to use github, which was very helpful. Thank you.

      • kenuheo
        Instructor

        Thanks for the great review. SPA has one more thing to deal with, the frontend, so I focused on that part. Be a happy programmer.

    $34.10

    kenuheo's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!