본문 바로가기

Frontend

Frontend 2020. 6. 3. npm install 프록시 환경 세팅 npm config -g edit npm config -g set proxy http://host-ip:port/ npm config -g set strict-ssl false 하면 사내에서 가능 안되면 npm cache clean --force vue create가 안될 때 .vuerc { "useTaobaoRegistry": true } 로 하니까 됐음 근데 인증서를 npm에 임포트 시키면 될것같은데 >>>>> 결론 1) npm -g config edit > proxy, cafile or strict-ssl 설정 2) (Optional) C:\Users\%USERNAME%\.vuerc > 파일 생성 후 아래 항목 입력 { "useTaobaoRegistry": true }
Frontend 2020. 5. 25. Vue.js(10) 시작2 > 책의 마지막 챕터 Vue.js 중/고급 개발자가 되기 위한 스킬 요약 1. Vue.js 중/고급 개발자 되기 Vuex Vue Reactivity Server Side Rendering 2. Webpack 3. ES6 4. NPM
Frontend 2020. 4. 30. Vue.js (9) 웹 애플리케이션 1. 할 일 관리 앱 프런트엔드 프레임워크의 기본인 TODO 앱을 만들어보며 컴포넌트 구조화와 컴포넌트 통신에 대해 연습한다. 브라우저 저장소인 로컬 스토리지를 사용한다. TodoHeader, TodoInput, TodoList, TodoFooter 4가지로 컴포넌트 영역을 분할하여 구현한다. 여러 페이지에서 컴포넌트를 재사용하기 위해 인풋 박스, 목록, 버튼 등의 작은 역할 단위로 컴포넌트를 관리한다. webpack-simple 프로젝트 생성한다. index.html 파일 헤더 설정 - 반응형 웹 디자인 태그 viewport 메타태그는 PC웹 화면, 모바일 웹 모두 레이아웃이 깨지지 않도록 만들어준다. width=device-width: 기기의 너비만큼 웹 페이지의 너비를 지정 initial-scale..
Frontend 2020. 4. 25. Vue.js (8) 뷰 프로젝트 1. 싱글 파일 컴포넌트 뷰 프로젝트는 싱글 파일 컴포넌트 체계를 사용한다. 싱글 파일 컴포넌트는 .vue 파일들로 프로젝트 구조를 구성하는 방식이며, [.vue = 컴포넌트 1개]이다. [.vue 기본 구조] {{ message }} 2. 뷰 CLI(Command Line Interface) 싱글 파일 컴포넌트를 사용하기 위해서는 Webpack이나 Browserify와 같은 도구(모듈 번들러)가 필요하며, 이는 뷰 CLI를 통해 간단하게 구성할 수 있다. 커맨드 라인에 다음 명령어를 입력하여 뷰 CLI 도구를 설치하자. (npm 명령은 node.js가 설치되어 있어야 한다.) > npm install vue-cli -global 아래 명령을 통해 뷰 CLI가 동작하는지 확인할 수 있다. > vue Us..
Frontend 2020. 4. 24. Vue.js (7) 뷰 템플릿 1. 뷰 템플릿 뷰 템플릿은 뷰 인스턴스에서 정의한 로직을 HTML과 연결하여 최종 HTML로 변환해주는 속성이다. 뷰 템플릿을 적용하는 방법은 다음 두 가지가 있다. - 뷰 인스턴스의 template 속성을 활용하는 방법(ES5) - 싱글 파일 컴포넌트 체계의 태그(ES6) 2. 뷰 템플릿의 주요 요소 A. 데이터 바인딩 HTML 화면 요소와 뷰 인스턴스의 데이터를 연결하는 것. {{}} 형태를 사용한다. {{}} 안에 자바 스크립트 표현식을 사용할 수 있다. 복잡한 로직처리는 불가하며, 연산이나 메소드호출과 같은 말 그대로 표현식만 사용 가능하다. 또한 표현식임에도 너무 복잡할 경우 computed 속성 사용을 권장한다. [사용 불가] {{ var a = 10; }} {{ if (true) { ret..
Frontend 2020. 4. 23. Vue.js (6) HTTP 통신 1. HTTP 통신 HTTP 통신을 통해 사용자 상호작용에 따라 화면의 변화를 줄 수 있다. 대표적으로 jQuery의 ajax가 있다. 2. Vue에서의 HTTP 통신 HTTP 통신 도구로 뷰 리소스와 액시오스가 있으며, 액시오스를 주로 사용한다. A. 액시오스 액시오스는 Promise 객체 기반의 API를 지원한다. Promise 객체는 비동기 방식으로 로직을 수행하는 자바스크립트 객체이다. 액시오스는 response data가 객체 형태로 리턴되어 별도의 parsing 처리가 필요 없다. [액시오스의 API 형식] API Description axios.get('...url...') .then() .catch(); get 요청을 실행한다. 정상 수신 시 then()을 실행하고, 오류 발생 시 catc..
Frontend 2020. 4. 21. Vue.js (5) 라우터 1. 라우터 개념 var routes = [ ... ] → 라우팅 정보 객체 var router = new VueRouter( ... ) → 라우터 객체 var app = new Vue( ... ) → 뷰 인스턴스 Vue( ... ).$mount() → $mount() API 2. 여러 컴포넌트로 화면 구성하기 A. 네스티드 라우터 상위 컴포넌트가 하위 컴포넌트를 포함하는 방식 최상위 ---라우터---> User컴포넌트 ---라우터---> Posts/Profile path, component, children 활용 B. 네임드 뷰 같은 레벨에서 여러 개의 컴포넌트를 동시에 표시하는 방식 최상위 ---라우터(header)----> Header ┣----라우터(default)----> Body ┗----라우..
Frontend 2020. 4. 11. Vue.js (4) 컴포넌트 간 통신 상위 → 하위 데이터 전달(props) 하위 → 상위 이벤트 전달(emit) 같은 레벨 간 통신: 공통 상위 컴포넌트를 경유하여 emit과 props를 활용하여 전달한다. 불필요하게 상위 컴포넌트를 두어야 하는 경우가 생긴다. 이러한 단점을 해결하는것이 이벤트 버스이다. 관계 없는 컴포넌트 간 통신: 이벤트 버스를 활용한다. 이벤트 버스용 뷰 객체 생성 후 emit과 on을 활용하여 구현한다.

티스토리툴바