관리 메뉴

SIMPLE & UNIQUE

[비전공자도 가능한 웹 프로젝트] 상세 커리큘럼 본문

탈잉 강의 자료/2025_비전공자도 가능한 웹프로젝트(최신)

[비전공자도 가능한 웹 프로젝트] 상세 커리큘럼

착한코딩 2025. 1. 22. 13:45

==============================================================
1주차

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

1-1강
- 인사(튜터, 수강생 소개)
- 수업 진행 방식
- 수강 대상
- 준비물
- 수업시간에 배우는 언어, 프레임 워크, 기술
  : React.js, Node.js, Mysql, Aws란?

1-2강
- NODE.JS 설치, CREATE REACT APP 설치, NODE EXPRESS FRAMWORK설치

- React, Node 서버 구동

- 프로젝트 구조 및 설정 파일 분석

 

1-3강
- 프록시, 포트 설정
- GET 방식, POST 방식으로 REACT 서버에서 NODE 서버의 JSON 데이터를 가져온다.

==============================================================


2주차

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

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

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

[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 값 조회

==============================================================


3주차

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

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

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

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

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

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


==============================================================


4주차

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

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

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

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

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

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

* 질의응답 *

'탈잉 강의 자료 > 2025_비전공자도 가능한 웹프로젝트(최신)' 카테고리의 다른 글

2-1강 강의 자료  (0) 2025.02.01
1-3강 강의 자료  (1) 2025.01.22
1-2강 강의 자료  (1) 2025.01.22
Comments