728x90 반응형 전체 글170 [Vue.js] Today I Learned - 프로젝트 생성 및 환경 구성 프로젝트 생성 Vue CLI 설치 npm install -g @vue/cli Vue CLI 버전 확인 vue --version Vue CLI 프로젝트 생성 vue create '프로젝트 명' 프로젝트 생성 설정 1. 프리셋(플러그인의 집합) 설정 : Manually select features 선택 2. 필요한 도구 설정 : Babel, Linter, Unit Testing 선택 3. Vue 버전 설정 : Vue 2.x 버전 선택 4. Linter & formatter 설정 : ESLint & Prettier 선택 5. Lint feature 설정 : Lint on save 선택 6. Unit testing solution 설정 : Jest 선택 7. 각 도구 설정정보 저장 방식 설정 : In dedic.. 2020. 10. 13. [Vue.js] Today I Learned - API 프로젝트 구성 API 프로젝트 구성하기 Node.js 버전 확인 node -v 명령어를 이용하여 설치된 Node LTS 버전을 확인하고 프로젝트 환경과 동일하게 맞춘다. 현재 PC 에 설치 된 버전은 v12.18.3 이기 때문에 프로젝트 환경인 v10.16.x 버전으로 다운그레이드가 필요하다. 이전 릴리즈 다운로드 페이지로 접속하여 설치한다. ※ OS 별 설치 파일 Windows 64bit : x64-msi Windows 32bit : x86-msi Mac OS : pkg Linux : tar NVM(Node Version Manager) 여러 버전의 Node.js 를 설치하고 관리하고 사용할 수 있게 하는 bash 스크립트 프로그램 설치하기 공식 GitHub에 접속하여 하단 Installing and Updating.. 2020. 10. 7. [Vue.js] Today I Learned 소개 Today I Learned 학습노트와 같은 의미로 오늘 공부한 내용을 정리하는 게시판 형태의 CRUD 애플리케이션이다. 구성 화면 현대 프론트엔드 개발 절차와 역할 개발 절차 요구사항 -> 서비스 기획 -> UI, UX 상세 설계 -> GUI 디자인 -> 퍼블리싱 -> 백엔드 API 개발 -> 프런트엔드 개발 -> QA 프론트엔드 개발자의 역할 화면단 코드 작성 기획, 디자인, 퍼블리싱, 백엔드 개발자와의 소통 API 문서 자동화 프로젝트 참고 swagger.io/ API Documentation & Design Tools for Teams | Swagger swagger.io 2020. 10. 7. [Vue.js] Hacker News - 서비스 배포 환경 구성 CLI로 생성한 프로젝트 배포하기 배포 명령어 CLI로 생성한 프로젝트를 서비스에 배포하려면 npm run build 명령어를 실행해야 한다. 실행한 결과로 아래 이미지와 같이 호스팅 할 수 있는 형태의 HTML, CSS, Javascript, Image 등의 빌드된 자원들이 생성된다. 웹 서버에 빌드된 자원 배포하기 배포 명령어를 통해 생성된 빌드 자원을 각각의 서버에 배포하기 위해서는 각 서버에 추가적인 설정이 필요하다. 특히 Vue Router를 활용한 SPA(Single Page Application)를 제작한 경우 서버에 반드시 페이지 fallback 옵션을 추가해야 해당 URL로 접근 시 정상적으로 동작한다. ※ 각 웹 서버의 fallback 설정 방법 HTML5 History Mode | V.. 2020. 10. 7. [Vue.js] Hacker News - 컴포넌트 디자인 패턴 Component Design Patterns 1. Common : 기본적인 컴포넌트 등록과 컴포넌트 통신 일반적인 컴포넌트 사용 패턴으로 상위 컴포넌트와 하위 컴포넌트 간 props 속성과 Event emit을 사용하여 통신하는 방법 예제 - App.vue - AppHeader.vue 결과 main.js 에서 render() 함수 표현 방법 import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), // 1 // render: function(createElement) { // return createElement(App); // }, // 2 // Vue.j.. 2020. 10. 7. 이전 1 ··· 13 14 15 16 17 18 19 ··· 34 다음