• 다회차
  • 최대 10명

[비전공자도 가능한 웹 프로젝트] REACTJS NODEJS MYSQL AWS 웹개발

이정열 튜터 5.0(18)

클래스 전 숙지해주세요!

코로나 상황이 좋지 않아, 1년 넘게 강의를 하지 않았는데요.
쉬는 동안 강의 내용을 보완, 재정비해 8회차 수업으로 돌아왔습니다.
8주의 시간이 아깝지 않도록, 강의 내용을 완벽히 이해시켜 드릴게요^^

8회차 중 (4회차+4회차)로 나눠서 결제 원하시는 분은
실시간톡으로 문의 부탁드립니다~

2인 이상 그룹수업으로
수강인원이 모이지 않거나, 1:1 강의로 요청 주실 경우
수강료가 달라질 수 있습니다.
이런 경우 미리 말씀 드릴게요^^

튜터 공지

클래스 요약

웹 사이트가 동작하는데 필요한 전체적인 Flow를 학습합니다.
Front-end, Back-end, DB, Cloud의
가장 기초적이지만 필수적인, 개념과 기술을 커리큘럼에 담았습니다.

수업시간에는 필수적인 기술들을 알려드리지만
심화된 기능을 구현하고 싶으신 분들은, 수업과 병행하여 코칭해드립니다.

비전공자도 이해 가능하도록 가장 쉽게 설명해 드릴게요^

이런 분들이 들으면 좋아요.

▬ 이런 분들께 추천합니다.

웹 프로젝트 경험이 필요하다!
- 직접 클라우드 서버 배포까지 하고 싶은 분들.

IT 지식이 부족해서 개발자와의 협업이 힘들다!
- 기획자, 디자이너, 마케터, 영업, 창업자 분들.

React.js, Node.js를 학습하고 싶은 개발자.
- 다른 언어 개발자이면서 언어 폭을 넓히려는 분들.

나만의 웹사이트를 갖고 싶다!
- 나만의 디자인, 데이터의 웹사이트가 필요한 분들.

아이디어는 있지만, 개발 구현이 어렵다!
- 웹으로 시연가능한 포트폴리오가 필요한 분들.

▬ 아래 개념들의 배경지식이 없다면, 수업 이해가 어렵습니다.

웹 페이지를 구성하는 HTML, JAVASCRIPT, CSS 개념
- 각각의 요소들이 웹에서 어떤 기능을 하는지에 대한 기초적인 개념.

프로그래밍 언어에서 변수, 함수, 배열에 대한 개념
- 언어 종류와 상관없이 변수, 함수, 배열에 대한 기초적인 개념.

튜터님을 소개합니다.

이정열

블로그 유튜브
  • 정보처리기사
  • [초보자를 위한 리액트 200제] 집필

안녕하세요. 6년차 웹 개발자 이정열입니다.

現) SK 텔레콤 ERP 서비스 운영 및 개발
前) LG 전자 ThinQ, SmartWorld 운영
前) 아주대 의료원 교직원(개발자)
前) 홈플러스 창고형 마트 쇼핑몰 개발
前) 아모레퍼시픽몰 운영 및 개발

✔ 인하대학교 사학사 & 소프트웨어 융합공학사
✔ SCSC(Samsung Convergence S/W Course) 인증
✔ [초보자를 위한 리액트 200제] 저자
✔ /*elice*/ Front End 코치
✔ UNIST 빅데이터 경진대회 우승(2015)
✔ Google Analytics 교육 이수
✔ Secure Coding 이수
✔ Class101 [풀스택 웹 개발로 확진자 지도 서비스 만들기] 크리에이터

[가장 쉽게 배우는, Git과 Github]
[taling.me/Talent/Detail/45432]

어떤 클래스 인가요?

✔ 수업 목표 & 5주 뒤 결과물

만들고 싶은 서비스를 직접 구현하게 됩니다.

사람들이 방문하고 액션을 할 수 있는
웹 페이지를 제작 & 배포하는 것까지 진행됩니다.

여러분이 개발 경험이 있든 없든
만들고 싶은 서비스가 무엇이든

이 수업을 통해 스스로 만들어내실 수 있을 거에요!


✔ 왜 REACT NODE MYSQL AWS 일까요?

배포 가능한 웹사이트는 결국
앞단의 front-end
뒷단의 back-end,
데이터가 쌓이는 DB Table
웹에서 소통하게 만들어주는 서버 세팅까지

전반적인 웹 프로젝트의 A to Z를 밟아야 완성돼요.

위에 제시해드린 4개의 언어가 A to Z를
모두 아우르는 언어 조합이고
실무에서도 많이 씁니다!

게다가,
개념을 이해하고 추후 응용, 발전시키기 용이해서
개발 언어를 처음 접하기에 매우 유용해요.

입문자도 코딩 원리를 쉽게 터득, 응용하는 데에
굉장히 편리합니다 :)

앞으로 계속 개발 공부를 하신다면,
큰 도움이 되는 자산이자, 경험이 되실거에요!


✔ 수업 방식

코드를 자세히 이해한 다음,
참고 & 응용할 수 있게 진행합니다.

그 다음,
직접 새로운 페이지를 제작할 수 있게 진행합니다.

※ 참고 ※
커리큘럼과 관련된 더 학습하고 싶은 내용이 있으시면,
강의시간 외에도 도움을 드립니다!!!


✔ 제 수업의 특징

① 웹 프로젝트의 A to Z
- 프론트, 백엔드, DB, 서버셋팅 모두 학습합니다.
- 웹 프로젝트의 필수 개념&요소도 학습합니다.

② 비전공자도 가능한 경험 & 학습
- 그대로 따라하면 되는 강의자료 제공해드립니다.
- 비전공자와 IT업무를 했던 경험을 토대로 굉장히 쉽게 설명해드려요!

③ 개념만 배우는 게 아니에요!
- 완성, 배포하는 직접 경험을 합니다.
- 실무에서의 협업과 응용시 즉시 도움이 됩니다.

▬ 수업 전 꼭 확인해 주세요 ▬

✔ 개발이 목적이 아니라, 전체적인 흐름만 알고 싶은 신 분은
수업 시간에만 집중해서 수강하셔도 됩니다.
하지만 매주 복습은 꼭 해주셔야, 스스로 개발할 정도의 실력이 됩니다.
복습할 시간적 여유가 되시는 분만 참여해주세요.

✔ 프로그래밍 언어에서 사용하는 변수, 함수와
웹 페이지를 구성하는 HTML, JAVASCRIPT, CSS의 개념에 대해서
어느 정도 알고 계셔야 수업내용을 따라올 수 있습니다.
수업에서는 시간 관계상, 이런 기초 개념은 설명해드리기 어려우니
미리 학습하시고 참여 부탁드립니다.

클래스 유의사항

준비물
* 윈도우 10이 설치된 노트북
(맥도 수강은 가능하지만, 수업 시간 관계상 윈도우 기준으로 설명드립니다.)
* 스터디룸 비용은 튜터가 부담합니다.

클래스는 이렇게 진행됩니다.

1회차 커리큘럼

[튜터 및 수강생 인사, 수업 소개, 개발 환경 세팅]
✔ 배우게 될 기술들의 개념과 특징을 학습한다.
✔ Node.js을 설치하고, REACT와 NODE 서버를 구동한다.
✔ REACT서버와 NODE서버가 데이터를 주고 받는 방법을 학습한다.

1-1강
- 인사(튜터, 수강생 소개)
- 수업 진행 방식
- 수강 대상
- 준비물

1-2강
- 수업시간에 배우는 언어, 프레임 워크, 기술
: React.js, Node.js, Mysql, Aws란?
- 6회차의 커리큘럼 및 학습하게 될 기능

2-1강
- NODE.JS 설치, CREATE REACT APP 설치, NODE EXPRESS FRAMWORK설치
- 프로젝트 구조 및 설정 파일 분석
- React, Node 서버 구동
- 프록시, 포트 설정
- GET 방식, POST 방식으로 REACT 서버에서 NODE 서버의 JSON 데이터를 가져온다.

2회차 커리큘럼

[React 페이지 구현, 외부 API 호출, NODE 서버 API 호출, MYSQL 서버 연동]
✔ 호출된 URL에 맞는 REACT 컴포넌트를 매칭하는 법을 학습한다.
✔ 외부 API를 호출해, 가져온 데이터를 REACT 화면에 노출한다.
✔ NODE 서버 API를 호출해, 가져온 데이터를 REACT 화면에 노출한다.
✔ NODE 서버에서, 원격 MYSQL 서버를 연동해 데이터를 조회한다.

2-2강
- 페이지 라우팅
- HTML, CSS, IMG을 적용해, REACT서버 HOME 페이지를 세팅한다.
- 레이아웃 HEADER, FOOTER 처리
- REACT 공공데이터 리스트 페이지 구현

2-3강
- REACT 분석 TOOL 리스트 페이지 구현
- 분석 TOOL 리스트 NODE API 개발
- MYSQL RDS(튜터 계정)를 연결해, 리스트 페이지에 데이터 출력 (Mybatis 모듈사용)

3회차 커리큘럼

[AWS MYSQL 서버(RDS) 생성, DB 세팅, NODE서버에 생성한 DB 연동]
✔ AWS에 가입하고, DB전용 서버인 RDS로 MYSQL서버를 생성한다.
✔ 로컬에서 DB툴과, 프로젝트(NODE서버)에 생성한 MYSQL서버를 연결한다.

3-1강
- AWS 가입 후 RDS 프리티어(1년무료) DB 서버를 세팅하고, 인스턴스를 구동한다.
- 로컬에 MYSQL(Client), Workbench(DB툴)을 설치한다.
- MYSQL Workbench에서 RDS 서버에 접속해, 스키마와 필요한 테이블을 생성한다.
- 리스트 페이지에서 데이터 노출을 하기 위해, 생성한 테이블에 더미 데이터를 삽입한다.
- 프로젝트 코드에서 튜티 계정으로 새로 만든, DB서버 주소와 계정 정보를 입력한다.

3-2강
- DB 서버 한국시간 설정
- 함수 생성 권한추가 (RDS 콘솔 > 파라미터그룹 수정)
- UPDATE 안전모
- DB 서버 한글 인코딩 설정
- DB Max Connection 값 조회

4회차 커리큘럼

[등록 페이지 구현, 파일 업로드 구현]
✔ REACT 등록 페이지를 구현하고, NODE API로 데이터를 삽입한다.
✔ 파일 및 이미지를 NODE서버 경로에 업로드하고, 경로 정보는 DB로 관리한다.

3-3강
- REACT TOOL 등록 페이지를 구현
- NODE TOOL 등록 API를 구현
- 등록페이지 입력한 데이터들을 유효성 검사 후, DB에 INSERT

4-1강
- REACT 파일, 이미지 선택 기능 구현
- NODE 파일 업로드 API를 구현
- 파일 업로드 경로를 DB에 INSERT

5회차 커리큘럼

[수정 페이지 구현, 스타일 ALERT 라이브러리 사용]
✔ REACT 수정 페이지를 구현하고, NODE API로 데이터를 수정한다.
✔ 스타일이 적용된, 다양한 디자인의 ALERT 창을 구현한다.

4-2강
- REACT TOOL 수정 페이지를 구현
- NODE TOOL 수정 API를 구현
- 수정페이지에 기존에 등록한 데이터들 노출
- 수정페이지 입력한 데이터들을 유효성 검사 후, DB에 UPDATE

4-3강
- 삭제 버튼을 누르면 해당 글이 DB에서 DELETE
- SWEETALERT2(ALERT창을 이쁘게 띄어주는 패키지) 구현

6회차 커리큘럼

[AWS EC2 서버생성, 리눅스 환경 세팅, EC2에 소스 배포 및 서버 구동]
✔ AWS의 리눅스(UBUNTU) 인스턴스(EC2)를 생성하고, 사용법을 학습한다.
✔ EC2서버에 REACT, NODE서버가 구동될 수 있게 환경을 세팅한다.

5-1강
- EC2(t2.micro) 서버생성 (프리티어 - 무료 1년 사용가능)
- SFTP, SSH 환경 세팅, 리눅스 명령어 학습
5-2강
- EC2 서버에 node, npm, yarn을 설치
- react-node 소스코드를 서버 배포, 패키지 설치
- 서버를 구동하고, 외부에서 ip로 접속

7회차 커리큘럼

7회차
[회원가입 구현, 로그인 구현]
✔ 비밀번호를 암호화하는 로직 및 라이브러리를 학습한다.
✔ 브라우저 쿠키를 사용해, 로그인을 유지하는 방법을 이해한다.

6-1강
- 단방향 암호화 모듈을 사용해 회원가입 기능 구현
- 회원가입 정보 유효성 체크, Bcrypt 단방향 암호화
6-2강
- Bcrypt를 사용해 로그인 기능 구현
- 로그인 후, 쿠키 세션관리

8회차 커리큘럼

8회차
[이메일 인증, 비밀번호 재설정, 질의응답]
✔ 비밀번호을 재설정하기 위해, 이메일 인증 방법을 사용한다.
✔ 이메일 템플릿을 작성해, 발송하는 로직을 학습한다.
✔ 배웠던 내용들에 대한 질의응답을 진행한다.

6-3강
- 이메일 HTML 템플릿 작성.
- 이메일 인증을 이용한 비밀번호 재설정 구현

* 질의응답 *

관련 영상 보고가세요.

실제 수강생의 리뷰입니다.

  • 커리큘럼5.0
  • 전달력5.0
  • 시간준수5.0
  • 준비성5.0
  • 친절도5.0

이 강의는 어떠세요?

클래스 일정

부천 목동

22,000원 / 시간 528,000원 / 총 8회 24시간