주니어 개발자 모몽'-' 주니어 개발자 모몽'-'

Vue Router 컴포넌트 생성시 오류 발생 Error Message Component name "Contact" should always be multi-word Vue Router 설치 후 새로운 컴포넌트 생성 시 오류 발생 Contact.vue라는 파일 생성 후 오류가 생김 vue에서는 컴포넌트 이름을 지을 때 반드시 단어 조합으로 지어야 한다. 예를 들면 Contact가 아니라 ContactView 이런식으로 이름을 지어야 한다.

라우팅 특정 웹페이지에 접속을 했을 때 메뉴 또는 특정 링크를 클릭하면 화면이 전환된다. 이 때 브라우저 주소란을 보면 페이지가 이동될때마다 url 주소가 변경되는 것을 볼 수 있다. 뷰와 같은 단일 페이지 애플리케이션인 경우에는 페이지를 이동할 때마다 서버에 요청해서 페이지를 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다. 라우팅은 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해할 수 있다. Vue Router 설치방법 vue add router 기존 src router history를 Yes 선택하고 한다. src에 router와 views가 생긴것을 확인 할 수 있다. 실행 npm run serve http://localhost..

# Vue 프로젝트 매니저 프로그램 실행 vue ui http://localhost:8000/ 브라우저 오픈 만들기 클릭 후 프로젝트 위치 선택 프리셋 선택하기 수동 클릭 시 기능 선택하기 Router랑 Vuex 선택 설정 Router history 선택 Linter / fommatter config > ESLint + Standard config 선택 앞서 선택한 옵션을 저장해서 다음 프로젝트 만들 때 동일한 preset을 만들지 선택 이해했습니다 클릭 후 프로젝트 생성 완료! Vue 프로젝트 매니저 설정 대시보드 설정 원하는 위젯 추가 후 오른쪽 위 완료 버튼 클릭 위젯이 추가된 모습을 확인할 수 있다. 의존성, 플러그인을 보면 package.json 에 다 작성되어 잇는 부분 작업목록 package..

# 프로젝트 생성 vue create [프로젝트명] Maually select features 선택 선택방법 스페이스 클릭시 (*)로 선택된다. Choose Vue version: Vue 버전을 선택 가능 Babel: es6이상, TypeScript로 개발 시 브라우저 버전에 상관없이 자동 전환해주는 기능 TypeScript: TypeScript 개발시 지원해주는 기능 Progressive Web App (PWA) Support: Web App 개발을 지원해주는 기능 Router: Vue Router를 위한 기능 Vuex: Vue에서 상태관리를 위한 기능 CSS Pre-processors: CSS 작성을 위한 CSS 전 처리 기능 Linter / Formatter: JavaScript codding Co..

Default 옵션으로 Vue 프로젝트 생성 방법 visual studio > View > Terminal # 프로젝트 생성 vue create [프로젝트명] Default ([Vue 3] babel, eslint) 선택 후 Enter 설치중... 설치 완료 EXPLORER에서 폴더 생성된거 확인 가능 프로젝트 실행 visual studio > View > Terminal # 프로젝트 아래로 이동 # cd [프로젝트명] cd vue-default # npm run npm run serve npm run 성공 인터넷에서 http://localhost:8080 실행 설치된 프로젝트 구조 node_modules: npm으로 설치된 패키지 파일들이 모여 있는 디렉토리 public: 웹팩(webpack)을 통해 ..

nodeJS 설치 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js와 npm 버전 확인 방법 visual studio > View > Terminal # nodeJS 버전 확인 node -v # npm 버전 확인 npm -v 확장 프로그램 설치 1. Vetur 설치 2. Prettier - Code formatter 설치 3. Vue 3 snippets 설치 Vue CLI 설치하기 visual studio > View > Terminal # Window sudo npm install -g @vue/cli

도커 명령어 확인 docker --help 도커 명령어를 볼 수 있다. Usage: docker [OPTIONS] COMMAND A self-sufficient runtime for containers Options: --config string Location of client config files (default "/root/.docker") -D, --debug Enable debug mode -H, --host list Daemon socket(s) to connect to -l, --log-level string Set the logging level ("debug"|"info"|"warn"|"error"|"fatal") (default "info") --tls Use TLS; implied ..

Docker(도커)란? 컨테이너 기반으로 하는 오픈 소스 가상화 플랫폼. 리눅스의 응용 프로그램들을 프로세스 격리 기술들을 사용해 컨테이너로 실행하고 관리하는 오픈 소스 프로젝트이다. 도커는 독립적인 컨테이너가 하나의 리눅스 인스턴스 안에서 실행할 수 있게 한다. Container(컨테이너) 컨테이너란 격리된 공간에서 프로세스가 동작하는 기술. 컨테이너는 다양한 프로그램, 실행환경을 컨테이너로 추상화하고 동일한 인터페이스를 제공하여 프로그램의 배포 및 관리를 단순하게 해준다. Image(이미지) 이미지는 컨테이너 실행에 필요한 파일과 설정값등을 포함하고 있는 것. 컨테이너는 이미지를 실행한 상태라고 볼수 있고, 추가되거나 변하는 값은 컨테이너에 저장된다. 같은 이미지에서 여러개의 컨테이너를 생성할 수 있..