Nuxt는 Vue.js의 Server-Side Rendering을 지원하기 위한 프레임워크로, SSR 뿐만 아니라 Static Site 그리고 SPA 또한 지원한다. (Nuxt에 대한 소개는 추후 다른 포스트에서 계속하기로 하고…) 이제 Nuxt 프로젝트를 생성해보자!!!
Nuxt를 생성하기 위한 명령어로는 아래와 같으며
1 2 3 4 5 6 7 8 9
// yarn yarn create nuxt-app <project-name>
// npx npx create-nuxt-app <project-name>
// npm npm init nuxt-app <project-name>
저는 두번째 npx CLI를 통해 생성해보겠습니다.
1
npx create-nuxt-app nuxt-bootstrap-dashboard
위 명령어를 실행하면 nuxt 앱을 생성하기 위한 다양한 옵션이 있으며 프로젝트에 맞는 옵션을 선택해주면 프로젝트 초기부터 구조가 잡힌 상태로 생성되면 그렇지 않다고 해서 개발 도중에 환경구성을 추가로 할 수 있다.
create-nuxt-app v3.6.0 ? Project name: nuxt-bootstrap-dashboard ? Programming language: (Use arrow keys) ❯ JavaScript TypeScript ? Package manager: (Use arrow keys) Yarn ❯ Npm ? UI framework: (Use arrow keys) None Ant Design Vue BalmUI ❯ Bootstrap Vue Buefy Chakra UI Element Framevuerk Oruga Tachyons Tailwind CSS Windi CSS Vant View UI Vuesax (Move up and down to reveal more choices) ? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Axios - Promise based HTTP client ◯ Progressive Web App (PWA) ◯ Content - Git-based headless CMS ? Linting tools: ❯◉ ESLint ◯ Prettier ◯ Lint staged files ◯ StyleLint ◯ Commitlint ? Testing framework: None ❯ Jest AVA WebdriverIO Nightwatch ? Rendering mode: (Use arrow keys) ❯ Universal (SSR / SSG) Single Page App ? Deployment target: (Use arrow keys) ❯ Server (Node.js hosting) Static (Static/Jamstack hosting) ❯◉ jsconfig.json (Recommended for VS Code if you're not using typescript) ◯ Semantic Pull Requests ◯ Dependabot (For auto-updating dependencies, GitHub only) Version control system: (Use arrow keys) ? Continuous integration: None ❯ None GitHub Actions Circle ci ... ? Version control system: (Use arrow keys) ❯ Git None
// 설치 시작 ⠸ Installing packages with npm
아래는 선택한 옵션 목록입니다. 몇 가지 설명을 부연하자면, 이번 프로젝트에서는 UI Component 옵션에서는 Bootstrap Vue 를, Nuxt.js modules 옵션에서는 Axios 를 선택했습니다. 사실 이 둘은 나중에 설치 및 환경구성을 해줘도 되지만 그렇게 되면 환경구성에 대해 직접 해줘야해서 다소 번거로워 되도록이면 프로젝트 생성과정에서 설치해주는게 이득인거 같습니다. 그리고 이외의 Linting tools, Testing framework, Rendering mode 와 같은 부분은 Nuxt 어플리케이션 skeleton을 잡기 위한 프로젝트 옵션으로써 앱 생성 옵션 선택에서 해주는 것이 중요합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13
✨ Generating Nuxt.js project in nuxt-bootstrap-dashboard ? Project name: nuxt-bootstrap-dashboard ? Programming language: JavaScript ? Package manager: Npm ? UI framework: Bootstrap Vue ? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Testing framework: Jest ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Continuous integration: None ? Version control system: Git
생성된 프로젝트의 디렉토리는 아래 이미지와 같습니다.
생성이 완료되면 Command 창에 앱을 구동하기 위한 npm script 로 추후에 개발 환경변수 및 RestAPI를 개발하면서 수정할 예정입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
🎉 Successfully created project nuxt-bootstrap-dashboard
To get started:
cd nuxt-bootstrap-dashboard npm run dev
To build & start for production:
cd nuxt-bootstrap-dashboard npm run build npm run start
To test:
cd nuxt-bootstrap-dashboard npm run test
Github Repository 환경구성
Repository 생성 및 프로젝트 연결
자, 이제 Skeleton을 생성했으니 프로젝트 버전관리를 위해서 Github에 Repository를 생성해 연결해보겠습니다. Github 페이지에서 원격 저장소를 생성하면 아래와 같은 저장소 화면으로 이동하며 우리는 이미 프로젝트를 생성한 후 원격 저장소를 연결하는 것이기 때문에 existing repository from the command line 방법을 따릅니다.
1 2 3 4 5 6 7 8 9 10 11 12
// 해당 디렉토리의 저장소 초기화 git init
// 로컬 파일 추가 및 커밋 git add . git commit -m "Initial Commit"
// 원격 저장소 주소 설정 git remote add origin https://github.com/Joontae-Kim/Nuxt-Bootstrap-Dashboard.git
// 원격 저장소로 commit한 파일 push git push origin master
Develop 브랜치 생성하기
프로젝트의 버전관리를 위해 Gitflow Workflow를 따를 것이고, Default Branch를 develop 브랜치로 변경 후 아래의 브랜치들을 가지고 Workflow를 수행할 것입니다.
이상으로 이번 포스트의 주제인 1. 프로젝트 생성 및 Github Repository 환경구성 에 대해서 다뤄봤습니다. 일전에도 Git Flow 기반의 프로젝트 개발을 진행해봤었지만 아직도 햇갈리는 부분도 있고, 실수도 있습니다. 그러나 대규모 프로젝트에 참여해 개발을 진행할땐 팀내 협업을 위해서는 필수적이며 체계적인 배포 버전관리와 기능개발을 위해서도 개발자라면 혼자서라도 한번쯤은 연습 또는 실습해봐야할 개발 환경입니다. 추후에 Git Flow 기반의 프로젝트 개발에 대한 포스트를 작성해보겠습니다.
