코딩 공부 기록

1. Vue CLIVue Command Line InterfaceVue 프로젝트를 빠르게 구성하고 빌드, 배포할 수 있게 도와주는 도구 2. Vue CLI 설치vs code 터미널에 명령어 입력npm install -g @vue/cli npm install: npm에 등록된 패키지 설치-g: global. 설치하는 패키지가 현재 디렉토리뿐만 아니라 앞으로 생성하게 되는 모든 프로젝트에서 사용    --save: 현재 작업 중인 디렉토리 내에 있는 ./node_modules에 패키지 설치npm install 패키지명 --save  3. Default 옵션으로 프로젝트 설치1) Vue 프로젝트 생성명령어 입력vue create 프로젝트명 preset 선택지 중 Default(Vue 3 Preview) 선택,..

node_modules: npm으로 설치된 패키지 파일 디렉토리public: 웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여있는 디렉토리src/assets: 이미지, css, 폰트 등 관리 디렉토리src/components: vue 컴포넌트 파일 디렉토리App.vue: 최상위(root) 컴포넌트main.js: 가장 먼저 실행되는 자바스크립트 파일. Vue 인스턴스 생성gitignore: 깃허브에 업로드 할 때 제외할 파일 설정babel.config.js: 바벨(Babel) 설정 파일package-lock.json: 설치된 package의 의존성 정보 관리 파일package.json: 프로젝트에 필요한 패키지 정의, 관리 파일README.md: 프로젝트 정보 기록  package.json{ ..

vs code, node, npm1. vs code 설치2. node.js 설치- Vue로 개발하는 과정에서 필요한 라이브러리를 빠르게 설치하고 적용하기 위함vs code에서 node.js 버전 확인[View] → [Terminal]터미널에 명령어 입력node -v 3. npm 설치Node.js 설치 과정에서 자동으로 설치됨vs code에서 npm 버전 확인터미널에 명령어 입력npm -v 4. Vue 개발용 vs code extention 설치1) Vetur 2) Debugger for Chrome크롬 브라우저의 개발자 도구처럼 vs code 안에서 디버깅을 할 수 있게 함현재 사용 불가, 대신 Javascript Debugger 사용 3) Prettier - Code formatter

vue.js란SPA개발을 위한 프론트엔드 프레임워크 1. SPASingle Page Application페이지 이동시 처음 접속했을 때 로딩된 페이지 중에서 변경이 필요한 부분만 갱신- 첫 화면 로딩 속도가 느릴 수 있다- 이후 화면 전환이 빠르다 2. Vue.js의 장점1) 직관적이고 배우기 쉬움2) 재사용을 통해 개발 기간 단축3) Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 갖춤- 데이터 바인딩: 데이터와 HTML DOM이 양방향으로 연결됨- 가상 DOM: 가상의 DOM을 만들어서 메모리에서 처리한 다음 실제 DOM과 동기화 → 속도 개선 3. Vue.js 특징1) MVVM(Model-View-ViewModel) 패턴- view와 model 중간의 viewModel: 데이터..