본문 바로가기

programming study

 (889)
Vue.js - HTTP 통신 라이브러리(axios) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. axios Vue에서 권장하는 HTTP 통신 라이브러리 Promise 기반 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양 vue-resource 예전의 공식 라이브러리 샘플코드를 마주칠 수 있으니 참고 Ajax Asynchronous JavaScript and XML 비동기적인 웹 애플리케이션 제작을 위한 웹 개발 기법 HTML 문서에서 일부 필요한 부분만 받아올 수 있다. SPA을 가능하게 하는 기술 중 하나 jQuery.ajax() 오픈 소스를 사용하는 방법 오픈 소스 라이브러리의 깃허브를 참고하기 star 수 확인 커밋과 contributors 확인 ..
Vue.js - 뷰 라우터 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 뷰 라우터 소개와 설치 뷰를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 페이지 이동을 가능하게 함 npm install vue-router를 입력하여 설치 또는 script 태그에 패키지 소스 코드를 불러오기 2. routes 속성 페이지의 라우팅 정보 어떤 url로 이동했을 때 어떤 페이지가 뿌려질지에 대한 정보 배열이며 각 요소는 페이지의 정보 각 페이지의 정보는 객체 페이지 정보 객체의 key path: 페이지의 url component: 해당 url에서 표시될 컴포넌트 ... // 라우터 인스턴스 var router = new VueRouter({ /..
Vue.js - 컴포넌트 통신 방법(응용) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 같은 컴포넌트 레벨 간의 통신 방법 상위 컴포넌트를 거쳐서 같은 레벨의 컴포넌트 간의 통신이 가능하다. 예시 ... ... Reference Vue.js 시작하기 -Age of Vue.js
Vue.js - 컴포넌트 통신 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 컴포넌트 통신 컴포넌트를 등록했을 때, 컴포넌트 간의 관계가 생기게 된다. 상위 컴포넌트 - 하위 컴포넌트 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다. props 속성: 상위에서 하위로는 데이터를 내려줌 event: 하위에서 상위로는 이벤트를 올려줌 2. 컴포넌트 통신 규칙이 필요한 이유 N방향 통신의 문제점 특정 기능이 바뀌었을 때 그로인한 버그를 추적하기 어렵다.(MVC 패턴) 컴포넌트 통신 규칙 데이터의 흐름을 추적할 수 있다. 위에서 아래로는 props, 아래에서 위로는 event이므로 3. props 속성 ... // v-bind: props 속성 이름 = "상위 ..
Vue.js - 뷰 인스턴스, 컴포넌트 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 뷰 인스턴스 뷰로 개발할 때 필수로 생성해야 하는 코드이자 단위 인스턴스 생성 ... ... 인스턴스를 생성하고 나면 변수 안에 인스턴스의 내용을 담을 수 있다. Vue가 제공하는 API와 속성이 담기게 된다. 인스턴스 생성 시, el에 특정 태그를 지정해야 Vue를 사용할 수 있게 된다. 기본적으로 Root 컴포넌트가 된다. 인스턴스와 생성자 함수 function Person(name, job) { this.name = name; this.job = job; } var p = new Person('josh', 'developer'); 생성자 함수의 작명법은 Pascal Case ..
Vue.js - 개발환경 설정, Vue.js 소개 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 개발 환경 설정 필요 프로그램 Chrome Visual Studio Code(VSC) Node.js VSC Extention Vetur Chrome Extention Vue.js devtools Live Server 2. Vue.js 소개 Vue는 무엇인가? MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 View: 브라우저에서 사용자에게 보여지는 화면 입력박스, 버튼과 같은 HTML 요소 DOM: JavaScript로 조작할 수 있는 객체 DOM Listieners: View에서 사용자가 클릭, 키보드 입력 등을 하였을 때의 이벤트를 청취..
CSS 방법론 본 내용은 10분 테코톡 동동님의 강의를 토대로 작성하였습니다. 1. CSS란? HTML, XML 문서의 스타일을 나타내는 언어 문서의 구조와 스타일을 분리하여 HTML, XML 문서의 각 요소를 꾸미는 것이 역할 2. CSS의 등장 이전과 이후 등장 이전 각 요소의 전용 속성이나 style 속성으로 스타일을 지정 문제점 여러 페이지에 같은 스타일 요소를 적용 시, 그만큼 반복해야 한다. HTML은 본래 문서 구조를 의미하므로 바람직하지 않다. 텍스트 문단 등장 이후 CSS 파일과 HTML 문서를 분리하여 사용 가능 HTML문서에서의 스타일 관련 코드를 분리할 수 있게 됨 여러 페이지에 같은 스타일을 적용시키기 용이 /* p태그의 스타일을 설정 */ p { color: black; font-size: 1..
Webpack - 최적화 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 최적화 코드가 많아지면 번들링된 결과물이 메가바이트 단위로 커지게 되어, 브라우저 성능에 영향을 준다. 웹팩으로 번들 결과를 압축하거나 분리하여 최적화를 한다. 2. mode 웹팩의 mode 값을 설정 development mode development는 디버깅 편의를 위해 두 개의 플러그인을 사용 NamedChunksPlugin NamedModulesPlugin DefinePlugin을 사용시, process.env.NODE_ENV 값이 development로 설정되어 전역 변수로 주입됨 production mode mode를 production으로 설정하면..

티스토리툴바