====== 개요 ====== 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/ 접속 .. image:: ../_static/spa/overview/1.png :width: 6.26806in :height: 3.64722in 2. LTS 버전을 클릭하여 다운로드 받습니다. .. image:: ../_static/spa/overview/2.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 4.70972in 3. 설치 프로그램을 실행하여 nodejs 설치 **또는 HomeBrew(Mac OS)를 통한 설치 방법** 1. Node버전 검색 .. code-block:: bash brew search node .. image:: ../_static/spa/overview/3.png :alt: 텍스트, 모니터, 스크린샷, 화면이(가) 표시된 사진 자동 생성된 설명 :width: 5.26966in :height: 1.60556in 2. LTS (짝수)버전 설치 .. code-block:: bash brew install node@14 .. image:: ../_static/spa/overview/4.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 1.86597in 설치 후 위와 같이 PATH 설정에 대한 설명을 확인하여 수정 | **또는 여러 버전 사용이 필요한 경우(기존 설치 삭제 후 재설치 권장)** | nvm (nodejs version manager)을 통한 버전 관리 ======= ========================================== ==== OS 링크 비고 ======= ========================================== ==== Mac https://github.com/nvm-sh/nvm Windows https://github.com/coreybutler/nvm-windows ======= ========================================== ==== - **Windows 인 경우** 1. **링크 접속 (상단 표)** .. image:: ../_static/spa/overview/5.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 2.19583in 2. **설치 프로그램 다운로드** .. image:: ../_static/spa/overview/6.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 3.68403in 3. **설치 후 cmd에서 nvm 커맨드 확인** .. image:: ../_static/spa/overview/7.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 2.77222in list (검색), install (설치), use(사용)을 통해 nodejs를 설치 및 사용할 수 있다. - **Mac OS인 경우** 1. **Homebrew를 통한 설치** .. code-block:: bash brew install nvm 2. **~/.nvm 폴더 생성 및 PATH** .. image:: ../_static/spa/overview/8.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 3.99861in 설치를 하고 난 후 추가 설정에 관련된 내용이 나오니 확인하여 세팅합니다. 사용하는 터미널에 PATH를 추가(~/.bash_profile or ~/zshrc 등) 3. **설치 후 커맨드 확인** .. image:: ../_static/spa/overview/9.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 3.1in ls-remote(검색), install(설치), use(사용) 커맨드를 확인하여 nodejs 설치를 한다 **설치 완료시** .. image:: ../_static/spa/overview/10.png :alt: 텍스트이(가) 표시된 사진 자동 생성된 설명 :width: 6.26806in :height: 1.45208in