src/components/LoadingSpinner.vue <template> <div class="loading" v-if="loading"> <div></div> <div></div> <div></div> </div> &...

Navigation Guard 네비게이션 가드는 특정 URL에 접근(Navigation) 하기 전에 불려지는 (Hook)의 일종으로, 다른 페이지로 우회 하거나 접근 자체를 취소시킬 수 있기 때문에 네비게이션 가드라고 불립니다. 사용자의 권한에 따라 페이지 접근을 막거나 페이지를 로딩하기 전에 데이터를 미리 불러올 때 사용하기 좋은 기술입니다. 사실...

mixin 믹스인은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, create 등과 같은 컴포넌트 옵션입니다. 믹스인 코드 형식 믹스인을 주입 할 컴포넌트에 mixins 속성을 선언하고 배열 [] 안에 주입할 믹스인들을 추가합니다. import E...

HOC (high order component) 뷰의 하이 오더 컴포넌트는 리액트의 하이 오더 컴포넌트에서 기원된 것입니다. 리액트의 하이 오더 컴포넌트 소개 페이지를 보면 아래와 같이 정확한 정의가 나와 있습니다. A higher-order component (HOC) is an advanced technique iin React for reusi...

npm(node package manager) npm(node package manager)은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈을 패키지화 하여 모아둔 저장소 역할과 패키지 및 관리를 위한 CLI(Command Line interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여...

웹팩의 4가지 주요 속성 웹팩의 빌드(파일 변환) 과정을 이해하기 위해서는 아래 4가지 주요 속성에 대해 알고 있어야 합니다. entry output loader (module) plugin mode 주요 속성은 아니지만 한번 짚고 간다. module.exports = { mode: 'none', // productio...

Vuex Vuex는 vuejs에서 컴포넌트들의 상태(state)를 관리하는 라이브러리이다. (React의 Flux 패턴에서 차용한 것이라고 한다.) Vuex 설치하기 $ npm i vuex --save Vuex 세팅하기 Vuex는 상태(state)를 저장하고 있는 저장소(store)를 가지고 있다. Vuex가 설치되었다면 이 저장소를 관리...

common_module.js https://www.samsungsds.com/module_src/js/common_module.js common_module.js module.js https://www.samsungsds.com/module_src/js/module.js ...

프론트엔드 개발환경의 이해 강의를 듣고 최신 스펙인 webpack5로 다시 환경설정을 해봤다. 1. NPM 1-2. 프로젝트 생성 vs code로 프로젝트 폴더를 열고 터미널을 이용해 프로젝트를 생성한다. $ npm init 옵션은 전부 엔터로 넘겨도 된다. 루트에 package.json 파일이 생성된다. 2. webpack5 2-1. w...

이전글 웹팩(기본편)에서는 웹팩의 개념과 간단한 사용법에 대해 살펴보았다. 웹팩은 프론트엔드 개발 서버를 제공하고, 몇 가지 방법으로 빌드 결과를 최적화 할 수 있는데 이번 글에서 자세히 살펴 보겠다. 1. 웹팩 개발 서버 1-1. 배경 지금까지는 브라우져에 파일을 직접 로딩해서 결과물을 확인했다. 인터넷에 웹사이트를 게시하려면 서버 프로그램으로 이...