모든 일에 의문을 제기하고 그 의문을 해결하기 위해 지식을 구하고 공부

가장 최신의 릴리즈 버전이었던 Webpack4 버전은 2년(2018년) 전이 마지막이었다. 이에 이어 5번째 Webpack 릴리즈판이 2020년 10월 10일 공개됐다. Webpack5는 다음 5가지 사안을 중점적으로 변화를 꾀했다. 1. Faster builds with persistent caching (영구적인 캐싱으로 더 빨라진 빌드) : an opt-in filesystem cache(옵트인 파일시스템 캐시)를 제공한다. 이에 빌드 속도가 빨라졌다. 2. Smaller bundle sizes (더 작은 번들 사이즈) Tree Shaking(dead code elimination이라고도 함)이 개선됐다. Tree Shaking이란 사용하지 않는 코드를 제거한다. 버전 5에서는 이 기능이 더 수월해..

1. content-visibility 속성이란? 2020년 8월 25일, Chrome 85에 새로운 CSS 속성가 추가됐다. 가장 핵심적인 효과는 **화면 밖에 있는 컨텐츠의 렌더링을 건너뜀으로써 페이지 초기 로드 시간을 획기적으로 줄인다는 것이다. 더 구체적으로 말하면 웹브라우저(또는 앱)가 초기에 페이지를 로딩할 때에 **화면 밖의 컨텐츠에 대해 일부의 렌더링 작업만을 하는 것이다. 이는 content-visibility : auto ; 값을 입력함으로써 가능하고, 페이지 초기 로딩 시간이 단축되는 효과를 갖는다. 아래와 같이 실제 실험 결과 렌더링 성능이 7배 향상됐다는 것을 확인할 수 있다. **화면 밖 = off-screen : 사용자 액션, 즉 선택되거나 포커스를 받는 등의 작용이 이뤄지지 ..

**메소드란? 어떤 특정 작업을 수행하기 위한 명령문의 집합이라 할 수 있다. 보통 function abc ( ){ } 형태를 함수, 함수 선언문이라고 한다. 이 때 Class, Json 등 안에 함수 형태로 선언되어 있는 것을 '메소드'라고 부른다. (즉, 어딘가에 속해 있는 함수 라고 보면 됨) 예시1) let object = { test ( ) { } } 예시2) class testClass { test ( ) { } } *Vue에서 메소드 정의하기 : 보통 methods json 안에 선언해 준다. ** 이 때, 화살표 함수를 사용하면 안좋다. methods를 구현하다보면 data에 접근해야 하는 경우가 많은데, 화살표 함수는 this를 바인딩하지 않으므로, this가 vue 객체(new Vue)..

list를 출력하는 방법은 일반적으로 for문을 돌려 요소의 name, description 등이 나타나도록 했다. vue에서 list 출력하는 방법은 무엇일까. HTML {{item.id}} {{item.title}} * v-for 속성 : 반복해서 출력할 태그(위 예시는 li를 여러 개 출력)에 v-for 속성을 입력한다. * v-for 속성 값 : " 항목(list)을 담을 변수 in 반복문을 사용할 " * v- for 속성을 가진 태그 내에 배열에서 가져온 정보들을 출력하자. -mustache 이용 : {{ item.id }} * 태그의 속성값에 배열의 정보를 출력하고 싶다면? -콜론, 따옴표 이용 : :src="item.image" JavaScript * data 메소드에 items라는 배열 작..

본격적으로 vue에서 데이터 바인딩(결합, 연결)을 어떻게 하는지 예제를 통해 알아보자. 목차는 다음과 같다. 1. 기본 데이터 바인딩 2. attribute 바인딩 3. 배열과 json 방식을 이용한 데이터 설정 4. class 데이터 바인딩 1. 기본 데이터 바인딩 HTML 로그인 아이디 : {{userId}} 비밀번호 : {{userPassword}} 1) vue와 바인딩할 태그에 id를 부여한다. (여기서는 "app") 2) v-model(vue가 제공하는 속성)에 변수 명을 기재한다. => new Vue 인스턴스에 data와 바인딩 된다. 3) {{ }} (콧수염처럼 생겨서 머스타시 라고 불리는 중괄호 세트)에 변수 명을 작성하면, 변수 data 값이 출력된다. ※ onchange, onclic..

vue 시작 1. install 1) CDN 삽입 OR 2) CLI 설치 npm install -g @vue/cli # OR yarn global add @vue/cli /설치하고자하는 directory에서 다음 명령어 입력 vue create 프로젝트명 2. 선언적 렌더링 : new Vue 인스턴스 구문 안에 여러 가지 요소들을 선언하게 되면 DOM에 렌더링시킬 수 있다. {{ message }} var app = new Vue({ el: '#app', //vue에 담고 싶은 element는 app이라는 id를 가졌다. data: { message: 'Hello Vue!' } })