리액트js, 넥스트js, 노드js, DB(mysql,몽고db),API활용 학습

풀스택(Fullstack) 웹개발(react.js,node.js)양성과정(아래 출처 참조=>링크 hrd net 개강정보 바로가기.)

- 풀스택 이란? 보통 아래 3가지 민 스택 종류에 포함된 4가지 기술을 함께 사용하면서 생겨난 용어 이다.

- 1) MEAN스택(MongoDB, Express백엔드프레임워크, Angularjs프런트엔드프레임워크, Nodejs 런타임 서버 실행환경)

- 2) MERN스택(MongoDB, Express백엔드프레임워크, Reactjs프런트엔드프레임워크, Nodejs 런타임 서버 실행환경)

- 3) MEVN스택(MongoDB, Express백엔드프레임워크, Vuejs프런트엔드프레임워크, Nodejs 런타임 서버 실행환경)

우리는 위 에서 2번째인 MERN 스택으로 학습을 하게 된다.

- 프런트엔드?, 백엔드?, 풀스택? 구분에 대해서 확인해 본다(아래). ( https://stackblitz.com/ )

- 우리가 학습할 교과목(아래)

위 내용 출처 URL(아래)

https://www.hrd.go.kr/hrdp/ps/ppsmo/PPSMO0109P.do?hpgYn=Y&tracseId=AIG20220000403893&tracseTme=1&ncsYn=Y&pssrpYear=2022&pssrpTme=9&spclizTracseKndCd=C&crseTracseSe=C0061&mainTracseSe=C0055

 

오른쪽 NCS 학습모듈 검색 사이트에서 능력단위요소별 교재를 확인: https://ncs.go.kr/unity/th03/ncsSearchMain.do

총 10개 과목으로 과목명은 프런트엔드 개발 환경구성, HTML/CSS, JS, ES6, 리액트js, 넥스트js, 노드js(2과목), API활용 및 데이터베이스(2과목)으로 실습 위주로 진행 합니다.

보통 1과목 종료 후 바로 평가를 진행하고, 주로 과목을 복습하는 목적으로 구성된다. 평가 형식은 아래와 같다.

- 과목별 과정에서 배운 내용에서 기능을 추가하는 문제해결 시나리오 방식으로 1문제~10문제 사이

- 과목별 과정에서 배운 내용의 결과물을 평가하는 포트폴리오 방식으로 1문제~10문제 사이

- 과목별 과정에서 배운 내용을 정리하는 서술형 방식으로 1문제~10문제 사이

- 과목별 과정에서 배운 내용을 정리하는 구두발표 방식으로 1문제~10문제 사이

- 과목별 과정에서 배운 내용을 정리하는 논술형 방식으로 1문제~10문제 사이

 

강의 교재는 위 NCS학습모듈과 제공된 서적을 참고해 강사가 제작한 PDF 강의로 진행되고, 세부 사항은 아래와 같다.

 

1. 개발환경 구성: 개발자 환경 구축 과목(아래)

- PC개발환경 구축: VS Code(IDE) , 클라이언트 소스버전관리(git-scm), 노드js , 리액트js, 넥스트.js, DB클라이언트설치(Mysql 워크벤치, MongoDBCompass)

- 디자인 개발환경 구축: 부트스트랩 프레임워크, mui 리액트 템플릿, Chart.js챠트 템플릿

- 클라우드 개발환경 구축: 깃 허브( https://github.com 소스 버전 형상관리), 구름ide 플랫폼( https://ide.goorm.io/ 노드js 버전업데이트, 리액트js, 넥스트.js, MysqlDB, 몽고DB 서버).

 

2. 리액트js: UI구현과목(아래)

 디자인 부스스트랩 프레임워크와 mui 리액트 템플릿으로 UI구현

- 리액트js: UI구현과목 미리보기 이미지와 확인URL(아래)

- 리액트js: UI구현과목 확인 URL: ( https://abc-app-xysup.run.goorm.app/ )

3. javascript ES6: 프로그래밍 언어 응용 과목(아래)

 리액트 학습 강의에서 Javascript vs ES6 를 비교하는 실습으로 강의

- ES6: 프로그래밍 언어 응용 과목 미리보기 이미지와 확인URL(아래)

- ES6: 프로그래밍 언어 응용 과목확인 URL: ( https://abc-app-xysup.run.goorm.app/App )

4 넥스트js: 통합구현 과목(아래)

 리액트js 프로젝트내에 넥스트js 를 신규로 설치해서 기존 컴포넌트를 활용하면서 넥스트js의 특징과 사용법을 확인 할 수 있게 된다.

- 넥스트js: 통합구현 과목 미리보기 이미지와 확인URL(아래)

- 넥스트js: 통합구현 과목확인 URL: ( https://nextjs-app.run.goorm.app/ )

- 위 는 jsx 기반 넥스트js 작업결과이고, 신규로 타입스크립트 기반 넥스트js 작업으로 변경해 보았다. 자세한 정보는 https://kimilguk.tistory.com/837 (아래는 결과 미리보기 화면)

5. API 활용 및 데이터베이스1:  SQL 활용 과목(아래)

 DB설치 부터 SQL 구문활용과 ERD로 DB설계 및 고급 SQL인 조인과 프로시저와 같은 객체까지 사용해 볼 수 있다.

- 노드js 기반으로 MysqlDB와 챠트 디자인 연동 미리보기 이미지와 확인URL(아래)

- Mysql 데이터베이스 활용과목 확인URL : https://nodejs-jvbqr.run.goorm.io/

6. API 활용 및 데이터베이스2:  데이터베이스 구현  과목:노드js기반(아래)

- 노드js 기반으로 몽고DB로 회원관리 구현 미리보기 이미지와 확인URL(아래)

- 몽고NoSQL DB 구현 확인URL : https://nodejs-jvbqr.run.goorm.io/

7. 노드js1: 서버프로그램 구현 과목(아래)

- 소켓통신을 서버 프로그램와 클라이언트로 구성해서 동시 이벤트를 구현한다. 발전소 관제시스템이나 채팅알림과 같은 서비스에 사용된다. 확인URL : https://nodejs-jvbqr.run.goorm.io/

- 크롬 2개를 띄워놓고, 1곳에서 투표하면 다른 크롬에서의 챠트도 실시간으로 UI에 반영되도록 구현된다.(아래)

- 노드js와 연동된 리액트js에서 챠트 디자인 연동 미리보기 이미지와 확인URL(아래)

- 노드js와 리액트js 연동확인 URL https://nodejs-jvbqr.run.goorm.io/chart/

 

8. 노드js2 : 인터페이스 구현 과목(아래)

- 공공데이터 API 인터페이스를 사용한 전기차 충전소 표시를 카카오맵에 구현한다.(아래)

- 리액트js를 사용한 미리보기 이미지와 확인URL(아래)

- API 인터페이스를 사용한 전기차 충전소 표시를 카카오맵에 구현 URL: https://nodejs-jvbqr.run.goorm.io/chart/kakaomap

 

9. javascript 프로그래밍: 프로그래밍 언어 활용 과목

위 과목은 아래 강사의 교육용 블로그 자료를 가지고 javascript 프로그래밍 언어 활용 을 진행한다.

- 위 과목은 1~8과목에서 중복되는 내용이 많다. 되도록 이면 1~8과목에서 모두 다루고, 수료 전 마무리 정리 학습에 사용하도록 한다.

- 아래 10가지 강사의 교육용 블로그 자료 : 약 3~4일 기간 학습 예정

----------------------------------------------------------------------------------------------------------------------------------------------

1). 기본 JS(ES5) vs EcmaScript6(ES6)-엑마스크립트6 비교 실습 : https://kimilguk.tistory.com/838
 - 엑마스크립트6를 학습하면서, 기존 JS(ES5)에 대해서도 확인할 수 있게 된다.
2). 리액트js 기본 : https://kimilguk.tistory.com/839
 - 컴포넌트(리액트화면_기능단위), props(컴포넌트화면 초기의 속성값), state(컴포넌트화면의 상태값)을 실습한다.
3). 리액트의 state상태와 화면 다시 렌더링(re rendering) 실습 : https://kimilguk.tistory.com/840
 - 리액트의 state 상태를 이용하여 Todo List 앱을 만들어 본다.
4). 리덕스로 앱 상태관리 실습 : https://kimilguk.tistory.com/841
 - 리액트에서 상태-state를 전역변수처럼 사용하는 리덕스를 실습한다.
5). 리덕스 업데이트버전인 리덕스js 툴킷 사용 실습 : https://kimilguk.tistory.com/842
 - 리액트-리덕스의 향상된 버전인 리덕스js 툴킷 사용 예를 확인한다.
6). TypeScript-타입스크립트의 특징 아래 3가지 실습 : https://kimilguk.tistory.com/843
 - 변수의 데이터 형을 지정한다.
 - 데이터 형태를 컴파일 시 검사해 주기 때문에 안정된 코딩을 할 수 있다.
 - 에디터 창에서 정확한 에러 메세지를 보여준다.
7). 타입스크립트-TypeScript 전용 타입에 대해서 실습 : https://kimilguk.tistory.com/844
 - 기존JS자바스크립트 말고, TS타입스크립트에서 지원하는 데이터 타입Type들에 대해서 확인 한다.
8). 기존 JS vs TypeScript(ES6+TS) 비교하면서 실습 : https://kimilguk.tistory.com/845
 - TS타입스크립트 실행환경에서 지원하는 ES6엑마스크립트기능을 JS와 비교하면서 확인할 수 있다.
 - 블록 영역 변수, 상수 선언 과 템플릿 리터럴 변수사용에 대해서 실습한다.
 - 화살표(애로우)함수-람다식 사용에 대해서 실습한다.
 - 함수의 매개변수 초기화 사용에 대해서 실습한다.
 - 배열에 전개연산자와 인덱스index대신 비구조화 할당 사용에 대해서 실습한다.
9). ES6 vs TS vs 리액트+TS 에서 클래스 사용 : https://kimilguk.tistory.com/846
 - ES6부터 클래스 문법을 사용할 수 있다. ES6의 클래스와 TS의 클래스의 사용방법을 비교해 본다.
 - 클래스를 정의하고, 속성을 설정하는 기본 사용법을 실습한다.
 - 타입스크립트용 접근 제어자 public, private, protected 사용해 본다.
 - 서브(자식) 클래스로 클래스 확장 : extends 키워드(예약어) 사용해 본다.
 - 겟터-getter, 셋터-setter 함수사용에 get, set 키워드(예약어)를 사용해 본다.
 - 클래스를 new 키워드로 객체 생성 없이 바로 접근해서 사용할 수 있는 static 키워드를 사용해 본다.
 - 리액트+TypeScript 환경에서 클래스를 사용해 본다.
 - 추상 Class vs 인터페이스의 차이점을 비교해 본다.
10). TS-타입스크립트 확장 코딩 패턴사용 : https://kimilguk.tistory.com/847
 - 모듈 코딩 패턴으로 복잡한 기능을 분리할 수 있다.
 - 제네릭 T(타입)코딩 패턴을 사용하여 객체가 어떤 데이터를 사용하는지 new로 객체생성 단계에서 확실히 알수있다.
 - 싱글톤(Singleton) 코딩 패턴을 사용하여 클래스의 객체(인스턴스-Instance)를 한개만 생성되게 할 수 있다.

----------------------------------------------------------------------------------------------------------------------------------------------

10. Html/Css: 화면구현 과목(아래)

 위 과목은 아래 강사의 교육용 사이트 자료를 가지고 화면구현을 진행한다.

- 화면구현 활용 진행 강사 교육사이트 URL: http://edu19.dothome.co.kr/metro/

- 위 과목은 1~9과목에서 중복되는 내용이 많다. 되도록 이면 1~9과목에서 모두 다루고, 여유가 되면 위 강사 교육용 사이트자료를 가지고 학습하도록 한다.

 

자 이제 부터 수업을 진행 하도록 하겠습니다.

 

Ps. 노드js 서비스 앱 예시(아래)

- 민관협력지원플랫폼(K-PaaS기반, http://digitalsolveup.kr/ ) :

- 구름 플랫폼(AWS기반, https://ide.goorm.io/ ) :