송민준의 개발노트

Lazy Loading이란? react, vue와 같은 SPA로 개발을 하면 사용자가 처음 진입 시 프로젝트와 관련된 모든 리소스를 다운 받는다. 그렇다면 현재 보여지는 화면 외에 다른 리소스까지 다운을 받게 되고 이는 프로젝트가 커질 수록 영향을 받게 된다. 이러한 문제를 개선하기 위한 방법이 Lazy Loading이다. 말 그대로 로딩을 지연한다는 것이다. 적용 방법은 간단하다. Vue Cli와 같은 도구를 사용하면 빌드 파일을 분리할 수가 있다. route를 설정하는 파일에서 특정 컴포넌트를 가져올 때 주석으로 webpackChunkName을 추가해주면 된다. 예를 들어 아래와 같이 변경이 가능하다. // 기존 import Notice from '@/views/board/Notice.vue' // ..

EventBus란? Vue는 컴포넌트 단위로 메소드/변수를 포함해서 구성한다. Vue에서 개발을 하다보면 데이터의 경우 vuex와 같은 라이브러리를 사용하면 컴포넌트간 데이터를 쉽게 가져올 수 있다. 그리고 컴포넌트간 메서드를 호출해야할 경우가 있다. 보통 emit 같은 기능을 사용해서 구현을 하겠지만 비 부모-자식간 통신을 해야하면 어떻게 해야 할까? 이러한 경우 EventBus를 활용하여 컴포넌트간 메소드를 호출할 수 있다. EventBus라는 공간에 각 프로젝트에 맞는 규격을 만들어 규격에 따라 EventBus를 활용하면 된다. 구성하는 코드는 별도로 빼든 main.js에 선언하든 크게 상관은 없다. 기본적인 구성은 아래와 같다. //main.js import Vue from 'vue' import..

https://www.favicon.cc/?

1. spring Initializr로 새로운 프로젝트 생성 2. Initializr 환경 셋팅( Maven, Java11, Jar) 3. dependencies 설정 (일단 쓰겠다싶은 것 추가함) 4. 프로젝트 finish 5. root 경로에 .editorconfig 라는 파일 생성 root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true [*.md] trim_trailing_whitespace = false 6. properties -> yml 로 바꿔주기 and 기본정보 세팅 spring: # d..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

vuex.vuejs.org/kr/ Vuex가 무엇인가요? | Vuex Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 vuex.vuejs.org npm i vuex 상태 1. 단일 상태 트리 - vuex는 단일 상태 트리를 사용함. 이 단일 객체는 모든 어플리케이션 수준의 상태를 포함하며 "원본 소스"역할을 함. 이는 각 어플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미. - 아래는 mapState 헬퍼를 이용해서 관리 isAddBoard라는 모달상태값을 vuex의 저장소를 이용해서 관리 import Vue from 'vue' import Vuex..