수업 목차

1회차

[React & Node 구조설정, 서버 구동 확인, 리스트 페이지 구현]

✔REACT, NODE 서버를 PROXY로 연결해, 하나의 서버 처럼 구동한다.
✔REACT VIEW 페이지 레이아웃을 세팅하고, 공공데이터 API를 호출해 리스트 페이지를 구현한다.
✔튜터의 DB서버에서 데이터를 조회해, REACT 리스트 페이지를 구현한다.

1-1강
- 인사(OT)
- 전체 수업 진행 방식에 대한 설명
- 1회차 수업 목차 소개
1-2강
- NODE.JS 설치, CREATE REACT APP 설치, NODE EXPRESS FRAMWORK설치
- 디렉터리 구조 설정
- 프록시 설정
- GET 방식, POST 방식으로 REACT 서버에서 NODE 서버의 JSON 데이터를 가져온다.
1-3강
- 제공받은 HTML, CSS, IMG 파일로 REACT서버 HOME 페이지를 세팅한다.
- 레이아웃 HEADER, FOOTER 처리
- REACT 공공데이터 리스트 페이지 구현
- 공공데이터 API 호출에 화면에 리스트 출력 확인
1-4강
- REACT 분석 TOOL 리스트 페이지 구현
- 분석 TOOL 리스트 NODE API 개발
- MYSQL RDS(튜터 계정)를 연결해, 리스트 페이지에 데이터 출력 (Mybatis 모듈사용)

2회차

[AWS에 가입 후 DB 서버 생성, 등록 & 수정 페이지 구현, 파일 & 이미지 업로드 구현]

✔AWS 가입 후 RDS 인스턴스를 생성 및 구동하고, DB 테이블을 만든다.
✔생성한 DB서버에서 조회한, 데이터를 REACT 화면에 노출시킨다.
✔등록 & 수정 페이지와, 파일 & 이미지 업로드 기능을 구현한다.

2-1강
- AWS 가입 후 RDS 프리티어(1년무료) DB 서버를 세팅하고, 인스턴스를 구동한다.
- MYSQL을 설치한다.
- MYSQL Workbench에서 RDS 서버에 접속해, 스키마와 필요한 테이블을 생성한다.
- 프로젝트 코드에서 튜티 계정으로 새로 만든, DB서버 주소와 계정 정보를 입력한다.
- MYSQL RDS(튜티 계정)를 연결해, 리스트 페이지에 데이터 출력 (Mybatis 모듈사용)
2-2강
- DB 서버 한국시간 설정
- 함수 작성 권한추가 (RDS 콘솔 > 파라미터그룹 수정)
- DB 서버 한글 인코딩 설정
- 리스트 페이지에서 데이터 노출을 하기 위해, 생성한 테이블에 더미 데이터를 삽입한다.
2-3강
- REACT TOOL 등록 페이지를 구현
- NODE TOOL 등록 API를 구현
- 등록페이지 입력한 데이터들을 유효성 검사 후, DB에 INSERT
- 파일업로드, 이미지 업로드 구현
2-4강
- REACT TOOL 수정 페이지를 구현
- NODE TOOL 수정 API를 구현
- 수정페이지에 기존에 등록한 데이터들 노출
- 수정페이지 입력한 데이터들을 유효성 검사 후, DB에 UPDATE

3회차

[삭제 기능 추가, GIT사용, AWS EC2서버에 소스 배포, 스케줄러 구현]

✔리스트 페이지에서 삭제 기능을 구현한다.
✔사이트 디자인에 어울리는 ALERT 창을 추가한다.
✔EC2서버를 생성하고, 소스를 배포한다.
✔특정 시간단위로 작업을 실행하기 위해, 스케줄러를 구현한다.

3-1강
- 삭제 버튼을 누르면 해당 글이 DB에서 DELETE
- SWEETALERT2(ALERT창을 이쁘게 띄어주는 패키지) 구현
- 개인 GITHUB에 Repository 생성. SOURCE TREE 사용
3-2강
- EC2(t2.micro) 서버생성 (프리티어 - 무료 1년 사용가능)
- SFTP, SSH 환경 세팅, 리눅스 명령어 학습
3-3강
- EC2 서버에 node를 설치
- react-node 소스코드를 서버 배포, 패키지 설치
3-4강
- NODE 스케줄러 개발 후 EC2서버 코드배포
- 스케줄러 실행시 DB 로깅테이블에 INSERT

4회차

[회원가입 & 로그인 구현, 이메일 발송 구현]

✔회원가입, 로그인을 구현한다.
✔쿠키로 로그인 세션 관리를 구현한다.
✔이메일 발송을 통해 사용자 인증을 한다.

4-1강
- 단방향 암호화 모듈을 사용해 회원가입 기능 구현
- 회원가입 정보 유효성 체크, Bcrypt 단방향 암호화
4-2강
- Bcrypt를 사용해 로그인 기능 구현
- 로그인 후, 쿠키 세션관리
4-3강
- 이메일 HTML 템플릿 작성.
- 이메일 인증을 이용한 비밀번호 재설정 구현

4-4강
- 자유로운 물음과 답

 

https://taling.me/Talent/Detail/19341

[비전공자도 가능한 웹 프로젝트] 개발부터 배포까지, 배우면서 완성(react,nodejs,mysql,aws)! | 탈잉

강의 문의 : ljung5@naver.com