초코레

생성자 함수의 형태는 함수명의 첫 글자를 대문자로 지정하고 new 연산자로 인스턴스를 생성한다 생성자 함수 Prototype

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Object.defineProperty(obj, prop, descriptor); const object1 = {}; Object.defineProperty(object1, 'property1', { value: 42, writable: false }); object1.property1 = 77; // throws an error in strict mode console.log(object1.property1); // expected output: 42 cs 객체의 특정 속성의 동작을 재정의하는 API Object.defineProperty()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes: [ { path: '/index', redirect: '/', }, { path: '/', component: () => import('@/views/MainPage.vue'), }, { path: '*', component: () => import('@/views/NotFoundPage.vue'), }, ], }); export default rou..

$(document).ready(function(){ }); $(function(){ }); 둘은 같은 구문 jQuery에서 많이 사용되기 때문에 축양형인 두번째 구문을 제공한다. 페이지 로딩이 끝났을 때 실행될 함수를 등록하는 곳을 의미 (function(){ })(); 퓨어 자바스크립트에서 항상 사용하는 것 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) 이 안의 코드를 하나의 스코프에 담고 바로 실행한다 참고 (function() { })() 의 의미는? 자바스크립트에서 이런 구문을 보신 적이 있으신가요? (function() { // 코드 })(); 제가 처음 이런 구문을 봤을 적엔 의아스러웠습니다. 괄호가 여기저기 겹쳐 붙어 있는 걸로 보..

전 세계 자바스크립트 라이브러리가 존재하는 공개 저장소 설치 명령어 npm install 명령어를 실행하면 npm 설정 파일(package.json)에 설정된 라이브러리 목록을 다운로드하게 된다. --save 옵션 vs --save-dev 옵션 웹팩 추가 설정을 위한 플러그인 라이브러리나 로직과 관련된 외부 라이브러리를 해당 프로젝트에 다운로드하는 옵션 두 옵션의 차이는 npm 설정 파일의 라이브러리 이름이 추가되는 곳이 다르다. npm install --save 명령어를 사용하면 dependencies 속성에 라이브러리 이름이 추가된다. 애플리케이션을 동작시키는 데 필요한 라이브러리가 들어가는 곳 npm install --save-dev 명령어를 사용하면 devDependencies 속성에 라이브러리 ..

최신 프런트엔드 프레임워크인 앵귤러, 리액트, 뷰에서 모두 권하는 모듈 번들러 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구 화면 구성에 필요한 자바스크립트, CSS, 이미지 파일마다 서버로 보내는 HTTP 요청이 발생하는 데, HTTP 네트워크 요청 숫자가 늘어나면 늘어날수록 웹 화면 로딩 시간은 길어질 수 밖에 없다. 동작에 관련된 여러 파일들을 1개의 자바스크립트 파일 안에 넣어 버리고, 해당 자바스크립트 팡리만 로딩해도 웹 앱이 돌아가게 하자는 취지 주요 속성 entry : 웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성. entry로 지정한 파일의 내용에는 전체 애플리케이션의 로직과 필요한 라이브러리를 로딩하는 로직이 들어간다. output : 웹팩으로 빌드..

브라우저는 웹 페이지를 화면에 나타내는 역할을 하는 데, 완벽하게 그려진 HTML 페이지를 나타내는 것과 일부만 그려져 있어 추가로 더 그려야 할 것이 남아 있는 HTML 페이지를 나타내는 것은 차이가 있다. 클라이언트 사이드 렌더링 다 그려져 있지 않은 HTML 페이지를 브라우저에서 받고 프런트엔드 프레임워크와 같은 자바스크립트를 이용하여 나머지 부분을 그리는 것을 의미한다. 클라이언트가 웹 페이지를 받고 나서도 자바스크립트(또는 프레임워크)로 추가 내용을 화면에 부착하고 그려 줘야하기 떄문에 노출 정도가 상대적으로 낮다. 서버 사이드 렌더링 완벽히 그려진 HTML 페이지를 브라우저에서 받는 것을 의미한다. 검색 엔진 최적화(SEO, Search Engine Optimization)이다. 화면의 내용이..

뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성 데이터가 변경되었을 때 어떻게 뷰에서 자동으로 화면을 갱신하는가? 인스턴스가 생성될 때 data 속성에 정의된 객체들은 특정 변환 작업을 거친다. 라이브러리에서 data에서 정의된 모든 속성(객체)을 getter, setter의 형태로 변환하는 것을 말한다. getter, setter는 뷰 인스턴스에 정의해 놓은 data 속성에 변화가 생길 때 뷰에서 감지하기 위해 라이브러리 내부적으로 필요한 속성이다. getter와 setter를 변환할 때는 자바스크립의 내장 API인 Object.defineProperty()가 사용된다. watcher는 모든 컴포넌트에 존재하는 속성이고, 화면을 다시 그리는 데 중요한 역할을 한다. 예를 들어, 인스..

뷰엑스(Vuex)는 애플리케이션의 상태 관리를 돕는 라이브러리 특정한 뷰 data 속성을 여러 컴포넌트가 공유하고 있을 때 그 데이터를 '상태'라고 한다. 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리하여 크기가 큰 애플리케이션의 데이터 관리를 효율적으로 하는 것이 상태 관리의 목적이다. 상태 관리는 컴포넌트가 너무 많아 관리가 어려운 복잡한 규모의 애플리케이션에서 필요하다. 뷰엑스 공식 사이트 Vuex가 무엇인가요? | Vuex Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그..

브라우저 저장소에는 로컬 스토리지(Local Storage), 세션 스토리지(Sesstion Storage), 인덱스드 디비(IndexedDB) 등 여러 가지가 있다. Web Storage API Web Storage API Web Storage API는 key/value 쌍을 저장할 수 있는 브라우저로부터 쿠키를 사용하는 것 보다 훨씬 더 직관적인 메커니즘을 제공합니다. developer.mozilla.org 하나의 페이지를 여러 컴포넌트로 쪼개 놓은 이유는 작은 역할 단위로 컴포넌트를 관리하는 것이 다른 페이지에서 해당 코드를 재사용하기가 수월하기 때문이다. 컴포넌트는 관례상 src/components 폴더에서 관리한다. 애플리케이션 규모가 커져 기능별로 관리해야 할 경우에는 components/기능..