본 설치 과정 및 시작 과정은 macOS 기준입니다.
공통 설치과정
Node.js 설치는 필수입니다.
글 작성 날짜 기준으로 LTS 버전은 16.13.1 입니다. 버전을 맞출 필요 없으니 가장 최신의 LTS 버전으로 설치해 주세요. 다만 취미 또는 테스트 용도로 사용할 생각이라면 Current 버전 설치도 상관 없습니다.
설치 및 세팅시 root가 아닌 user local로 경로를 설정해서 사용하는 것을 추천합니다. 이렇게 세팅하면 npm, yarn 패키지 설치시 root 권한이 아닌 user 권한으로 설치가 가능합니다. = sudo 권한 불필요
Homebrew 설치 방식으로는 설치하지 마세요. 추천하지 않습니다.
Angular.js (1.x.x)
프로젝트 수동 생성 후 angular 패키지를 설치합니다.
$ md project-name $ cd project-name $ npm i angular
Angular (2.x.x higher)
angluar-cli 패키지를 설치합니다. cli를 이용하면 프로젝트 생성과 세팅이 자동으로 이루어집니다. (위에서 설치한 angular 패키지는 1.x.x 버전 즉, Angular.js 전용이므로 여기서는 설치하지 않습니다.)
$ npm i -g @angular/cli $ ng new project-name
개발 서버 실행은 ng 명령어를 쓸 수도 있고 npm 명령어를 쓸 수도 있습니다.
$ ng serve ## 또는 $ npm start
Vue.js
vue 패키지와 vue cli 패키지를 설치해야 합니다.
$ npm i -g vue $ npm i -g @vue/cli
vue는 프로젝트 생성시 몇 가지 템플릿을 골라서 생성할 수 있습니다.
템플릿 종류로는 browserify, browserify-simple, simple, webpack, webpack-simple 이렇게 있습니다.
크게 browserify를 사용해 live server를 돌릴지, webpack을 사용해 live server를 돌릴지, 아니면 서버 구동없이 돌릴지 (simple) 3가지 방법으로 나눌 수 있고, browserify와 webpack에 붙은 -simple 여부는 테스트 코드를 작성할지 안할지를 고르는 거라고 생각하면 됩니다. (-simple이 테스트 코드 작성 안하는 템플릿)
## simple 템플릿 선택시 $ vue init simple project-name
live server 세팅시 webpack이 가장 문서가 많으므로 템플릿은 webpack을 추천합니다.
Nuxt.js
Nuxt.js는 Next.js의 Vue.js 버전이라고 한다면 이해하기 쉬울 듯 한데, 이전 포스팅에서도 설명했듯이 SSR 렌더링입니다.
설치 방법은 이미 Vue.js 프로젝트를 진행하고 있는 도중에 Nuxt.js를 사용하고 싶을 때, 그리고 새 프로젝트로 처음부터 Nuxt.js를 사용하고 싶을 때 이렇게 2가지로 나눌 수 있습니다.
이미 진행 중인 Vue.js 프로젝트에 nuxt.js를 설치하기 위해서는 몇 가지를 수정하거나 추가/설치 해야 합니다.
// package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start
}$ npm i nuxt
새로 프로젝트를 시작할 때는 npm 또는 npx을 사용하면 됩니다. (모든 과정은 yarn도 지원합니다)
## npx $ npx create-nuxt-app project-name ## npm $ npm init nuxt-app project-name ## yarn $ yarn create nuxt-app project-name
nuxt.js는 SSR 렌더링이므로 live server 형태로 동작합니다.
React (A.K.A. CRA)
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
$ npx create-react-app project-name $ cd project-name $ npm start
Next.js (A.K.A CNA)
SSR 렌더링. React 프로젝트 진행 중인 상태에서 Next.js를 사용하고 싶을 때는 몇 가지 세팅이 필요합니다.
$ npm i next ## react-dom 설치가 안되어 있을 때는 react-dom 추가 설치 필요 $ npm i react-dom ## next, react-dom 같이 설치 $ npm i next react-dom
// package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}새로 설치는 간단합니다.
## npx $ npx create-next-app ## yarn $ yarn create next-app
React Native
Expo 환경이냐, Metro 환경이냐에 따라서 세팅이 다르며, 실행 방법도 다릅니다.
그리고 Android는 Java 환경이므로 Adroid Studio 외에도 설치 및 세팅해야 할 게 많습니다.
iPad, iOS는 Xcode 외에도 CocoaPod를 설치해야 하는 과정이 있습니다. (IntelMac, AppleSiliconMac 여부에 따라서도 세팅이 달라짐)
공식문서를 확인하세요: https://reactnative.dev/docs/environment-setup
Svelte
Svelte는 degit이라고 하는 bundler를 이용해 프로젝트를 생성합니다. (npx를 이용해 별도로 degit 패키지를 설치하지 않고 사용 가능)
$ npx degit sveltejs/template project-name $ cd project-name $ npm i $ npm run dev
참고로 degit은 github repository를 이용해 템플릿을 설치하는 bundler라고 생각하면 됩니다.
sveltejs templete에 대한 내용은 https://github.com/sveltejs/template 여기를 참조하세요.
SvelteKit
SvelteKit은 React의 Next.js, Vue.js의 Nuxt.js와 같이 여러가지 Kit을 지원해주는 Svelte용 framework 입니다.
Svelte와 다르게 SvelteKit은 npm init으로 프로젝트를 생성합니다.
$ npm init svelte@next project-name $ cd project-name $ npm i $ npm run dev
O612님의 창작활동을 응원하고 싶으세요?
