타입스크립트 기반 넥스트JS 프로그래밍

참고: 단숨에 배우는 타입스크립트 : 출판사 영진닷컴 http://www.yes24.com/Product/Goods/102416447

- 위 책에서 타입스크립트 문법만 학습한 소스: https://github.com/kimilguk/abc-app/tree/abc-app17_03/nextjs-app/TS

타입스크립티 기반 넥스트JS 프로그래밍 학습 순서(위 기초 문법만 학습 후 아래 웹 프로그램을 구현하는 실습)

이전 리액트js 프로그래밍에 이어서 학습한다.(이전 작업 URL: https://kimilguk.tistory.com/833 )

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

1.  넥스트js 시작하기

----------------------------------------------------------
 1-1  넥스트js의 기본환경  - 넥스트js란 무엇인가 - 넥스트js의 기본구조 - 넥스트js 설치하기
 1- 2 리액트 앱을 넥스트js 로 마이그레이션  - 넥스트js용 컴포넌트 간 상태 값 전달 - 사용된 넥스트js 객체에 대해 정리 - SSR 특성에 따른 에러 처리
 1-3  네이버 로그인 API 사용  - 넥스트js용 네이버 로그인 api 사용환경 - 네이버 로그인 api 코딩 추가 - 통합 로그인 폼 추가

----------------------------------------------------------
2.  넥스트js 활용

----------------------------------------------------------
 2-1  로그인 폼 커스터마이징 및 클라우드 배포  - 로그인 폼 커스터마이징 후 포트폴리오용으로 변경 - 클라우드에서 네이버 로그인을 배포버전에 맞게 수정 - 클라우드에서 넥스트js 앱을 백그라운드로 실행
 2-2  타입 스크립트 기초  - 자바스크립트 대비 타입스크립트의 장점 - 타입스크립트 컴파일 환경 추가 및 기본서식 사용 - 타입스크립트 함수 처리 및 요약 정리
 2-3  타입스크립트 기본 타입과 커스텀 타입  - 변수와 함수의 기본타입 종류 - 함수의 변수와 확장타입 사용 - 타입, 클래스, 인터페이스를 사용한 커스텀 타입 종류

----------------------------------------------------------
3. 타입스크립트 객체지향프로그래밍

----------------------------------------------------------
 3-1  클래스와 상속  - 클래스와 객체의 관계 - private 멤버변수에서 get/set 메서드 생성방법 - 클래스의 상속
 3-2  추상클래스와 객체의 다형성  - static변수와 싱글톤 클래스 사용 - 추상클래스 사용 - 객체의 다형성 구현
 3-3  넥스트js 대시보드에서 인터페이스 사용  - 템플릿을 넥스트js 프로젝트에 포함시키기 - 넥스트js 템플릿 사용준비 - 타입스크립트용 인터페이스 사용

----------------------------------------------------------
4. 넥스트js에서 css, scss 스타일 사용

----------------------------------------------------------
 4-1  넥스트js에서 css 사용  - 넥스트js 기본프로젝트에 포함된 기본 css 파일 사용 - globals.css 파일 소스 분석 - Home.module.css 파일 소스 분석
 4-2  넥스트js에서 scss 기초  - SCSS와 SASS 비교 - globals.css 파일을 scss로 변환 - Home.module.css 파일을 scss로 변환
 4-3  넥스트js에서 공통 레이아웃 구현  - 기존 대시보드를 공통 레이아웃으로 구현 - 메뉴소스를 사용하여 지금까지 제작한 컴포넌트를 통합 - yarn build/start 에서 발생되는 에러를 처리

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

위 학습 순서에서 문법을 보면, 자바(Java)와 토씨 하나 안 틀리고 비슷하다. 단, 실제 웹 프로그램 구현에서는 차이가 난다.

자바기반 스프링 프로젝트에 사용되는 클래스와 인터페이스의 구현과

타입스크립트 기반 넥스트JS 프로젝트에서 사용되는 클래스(요즘 대세는 함수)와 인터페이스 구현은

많은 차이가 난다.

만약, 자바스크립트(노드js, 리액트)로 프로젝트를 진행하다가, 규모가 큰(좀더 구조화된) 프로젝트로 마이그레이션 할 때 타입스크립트 기반 넥스트js 프로젝트를 사용하면 좋겠다는 생각이 듭니다.

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

아래는 위 순서대로 넥스트js 프로젝트를 진행한 결과 입니다. https://nextjs-app.run.goorm.app/MovieListComponent