Frontend
-
Webpack / Bundler / Browserify / Babel 이란?Frontend 2021. 4. 20. 00:01
webpack 이란? 프로젝트 내부의 수많은 javascript 를 각각 브라우저에 로딩하면 느리고 충돌날수 있기 떄문에 어떤 파일이 어떤 파일을 바라보고 있는지 의존성을 파악한 뒤 이런 파일(모듈들)을 의존관계를 반영하여 묶어서 이용할 수 있게 하는 도구 => Javascript, Css, Image 등의 파일을 자바스크립트 모듈 하나로 로딩해서 사용할 수 있게 해주는 자바스크립트 정적 모듈 번들러 * Entry : 묶어줄 모듈의 시작점 * Loader : Image, Css 등을 웹팩이 알 수 있게 변경하는것 * Output : 하나로 묶을 결과물의 위치와 이름 * Plugin : bundle 된 javascript 결과물들을 처리, Loader 는 파일단위 처리 Bundler 란? 묶음이란 뜻처럼 ..
-
vue-cli 를 이용한 vue init 옵션별 차이Frontend 2021. 4. 19. 23:39
vue cli 를 통해 처음 프로젝트를 생성할때 다양한 옵션에 따라 지원되는것이 달라지는데 각각 명령어별 해당 옵션은 다음과 같다. $ vue init browserify Browserify + vueify 조합 (여러개 js 파일들을 하나로 묶어줌) => 코드 수정후 자동 재실행하는 hot-reload, 코드를 검사하는 eslint, 유닛 테스트 지원 $ vue init browserify-simple 간단한 Browserify + vueify 조합 (여러개 js 파일들을 하나로 묶어줌) => Browserify 를 이용한 빠른 개발을 위한 코드 수정후 자동 재실행하는 hot-reload 지원 $ vue init webpack webpack+vue-loader 조합 (자바스크립트 모듈을 비롯한 관련 리..
-
vue v-if 와 v-show 차이점Frontend 2021. 4. 11. 23:03
상태에 따라 현재 템플릿이나 정보를 보여줄지 말지를 Vue 를 통해 나타낼 때 흔히 v-if / v-else 디렉티브 또는 v-show 디렉티브 를 사용한다. 둘 다 보여줄지 말지를 조건에 따라 결정한다는 것은 같지만 큰 차이점이 있다. v-if 는 조건이 맞지않다면 해당 태그 자체를 생성하지 않고, v-show 는 조건이 맞지않아도 해당 태그는 생성한 뒤 보이지 않게 처리를 한다는 점이 다르다. 즉, v-show 는 사실 렌더링은 한 후 display: none 처리를 한것이라고 생각하면 된다. 따라서 둘다 결과적으로 화면에서 보이는 것은 같지만 상태가 true false 가 계속해서 한 화면에서 반복되는 경우에는 v-if 의 경우 해당 태그를 그렸다가 지웠다 하기 때문에 v-show 를 사용해 주는 ..
-
vue-cli 란?Frontend 2021. 4. 11. 22:47
vue 프로젝트를 처음 생성할 때 보통 vue cli 를 통해 생성한다. 먼저 CLI 는 명령어 인터페이스 (CLI : Command line interface) 의 약자로 명령어를 이용하여 컴퓨터와 상호 작용하는 방식을 의미한다. 따라서 vue-cli 는 명령어를 통해 기본 vue 개발환경을 설정해주는 도구라고 생각하면된다. vue-cli 를 통해 기본적인 프로젝트 세팅을 할 수 있어 간편하다. node가 설치되어 있다면 아래 병령어를 통해 어디서든 사용할 수 있게 vue/cli 를 설치한다. npm install -g @vue/cli
-
Javascript 에서 객체(Object) 에서 키와 값 가져 오는 법Frontend 2021. 3. 19. 15:38
javascript 를 사용하다보면 아래와 같은 객체 형식을 자주 볼 수 있다. const obj = { a: 1, b: 2, c: 3 }; 그리고 이때 객체의 값(value) 를 순서대로 가져오고 싶을 때가 있는데 이럴때에는 간단하게 for ... in 형식으로 객체의 key 값을 하나씩 가져온 뒤 해당 객체의 key 에 해당되는 value 값을 재호출 하는 형태로 쉽게 값을 가져올 수 있다. 코드는 아래와 같다. const obj = { a: 1, b: 2, c: 3 }; for(const item in obj) { console.log(obj[item]); }
-
javascript : for in vs for of 차이Frontend 2021. 3. 19. 13:54
javascript 를 사용하다보면 객체를 순환하면서 가져올 때 for(const item in obj) 과 for(const item of arr) 과 같은 두가지 방식을 사용하는것을 보는 경우가 있다. 두개의 차이점은 for in 은 객체를 순환하여 가져오고 for of 는 배열을 순환하여 가져온다. 간단히 말하면 실제 문법을 사용할 때에는 주로 for in 은 객체의 key 값 또는 index 를 가져와 사용할 때 이용하고 for of 는 배열의 값을 가져와 사용할 때 이용한다. 예시는 아래와 같다. ex) for ... in const obj = { a: 1, b: 2, c: 3 }; for(const item in obj) { console.log(item); } ex) for ... of co..