개요

Single Page Application을 SPA 라고 부른다.

Note

이 문서는 IDE에서 제공되는 SPA 프로젝트를 기준으로 작성되었으며,

Webpack을 통한 개발환경이 익숙하지 않은 사용자에게 필요한 최소한의 내용에 초점을 맞추어 작성하였다.

각각에 대한 전체 가이드 문서는 해당 버전의 공식 문서를 통해 확인하여야 한다.

들어가기전

아래의 문법을 기본적으로 숙지하는 것을 권장함

  1. Vue(2.x) API

  2. Nodejs 프로젝트 관리 및 script 실행

  3. ES6 문법

    • Arrow Function

    • let const

    • 구조분해 할당

    • import/export (모듈)

    • Promise (비동기)

실행 환경

개발하기 전 해당 사항이 준비되어야 한다.

항목

설명

링크

Nodejs

8.9 이상, LTS

https://nodejs.org/ko/

Morpheus Client IDE

3.0.13 이상

게시글 바로가기

소프트웨어 설치

기본 설치 방법(windows, mac os)

  1. https://nodejs.org/ko/ 접속

../_images/13.png
  1. LTS 버전을 클릭하여 다운로드 받습니다.

텍스트이(가) 표시된 사진 자동 생성된 설명
  1. 설치 프로그램을 실행하여 nodejs 설치

또는 HomeBrew(Mac OS)를 통한 설치 방법

  1. Node버전 검색

brew search node
  1. LTS (짝수)버전 설치

brew install node@14
텍스트이(가) 표시된 사진 자동 생성된 설명

설치 후 위와 같이 PATH 설정에 대한 설명을 확인하여 수정

또는 여러 버전 사용이 필요한 경우(기존 설치 삭제 후 재설치 권장)
nvm (nodejs version manager)을 통한 버전 관리

OS

링크

비고

Mac

https://github.com/nvm-sh/nvm

Windows

https://github.com/coreybutler/nvm-windows

  • Windows 인 경우

  1. 링크 접속 (상단 표)

텍스트이(가) 표시된 사진 자동 생성된 설명
  1. 설치 프로그램 다운로드

텍스트이(가) 표시된 사진 자동 생성된 설명
  1. 설치 후 cmd에서 nvm 커맨드 확인

텍스트이(가) 표시된 사진 자동 생성된 설명

list (검색), install (설치), use(사용)을 통해 nodejs를 설치 및 사용할 수 있다.

  • Mac OS인 경우

  1. Homebrew를 통한 설치

brew install nvm
  1. ~/.nvm 폴더 생성 및 PATH

텍스트이(가) 표시된 사진 자동 생성된 설명

설치를 하고 난 후 추가 설정에 관련된 내용이 나오니 확인하여 세팅합니다.

사용하는 터미널에 PATH를 추가(~/.bash_profile or ~/zshrc 등)

  1. 설치 후 커맨드 확인

텍스트이(가) 표시된 사진 자동 생성된 설명

ls-remote(검색), install(설치), use(사용)

커맨드를 확인하여 nodejs 설치를 한다

설치 완료시

텍스트이(가) 표시된 사진 자동 생성된 설명