송민준의 개발노트

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'example') 콘솔에서 위와 같이 부모컴포넌트에서 자식컴포넌트의 'example'이라는 데이터를 참조하여 초기 렌더링 시에 발생하는 문제를 해결하는 방법이다. 문제의 코드는 아래와 같다. computed를 이용해서 refs로 example이라는 데이터에 접근을 했더니 위와 같은 문제가 생긴 것이다. // 부모 컴포넌트 {{ example }} // 자식 컴포넌트 자식 코드를 아래와 같이 고쳐주자. computed: { example () { return this.$refs.child?.example || '대체 문자' } }, 해결방법은 옵셔널 체이닝을 사용해서..

우선 Directive란 무엇인가? Vue 컴포넌트에 특별한 속성으로 사용되고 특정한 동작을 지정해주는 것이다. Vue에서 흔히 사용하는 v-if, v-show, v-text 등이 디렉티브이다. 그렇다면 개발자가 어떤 특정한 기능을 공통적으로 속성에 적용하고 싶다면 커스텀 디렉티브를 이용해서 구현이 가능할 것이다. 추가적인 디렉티브 개념이 알고싶다면 아래의 링크 참고 https://kr.vuejs.org/v2/guide/custom-directive.html 사용자 지정 디렉티브 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 나는 디렉티브를 이용해서 CSR Vue 프로젝트에 스크롤 애니메이션 효과를 구현한 적이 있다. 이번에 Nuxt로 전환하면서 해당 디렉티브..

얼마 전 Vue를 사용해서 프로젝트를 만들어 완성했다. 기본적인 CSR로 개발을 했는데 초기 로딩 속도와 SEO 때문에 SSR 개발을 도와주는 Nuxt를 공부하게 되었다. 그에 앞서 CSR과 SSR을 정리하고자 한다~! 1. CSR(Client Side Rendering) CSR은 SPA(Single Page Application)에서 쓰이는 방법으로 웹서버(Nginx 등)에서 html과 static 파일 번들을 가져온 후, javascript를 통해 동적으로 Rendering하는 방법이다. [장점] 동작하는데 데이터 갱신에만 리소스를 요청하므로 서버 부하가 덜하다. 최초 이후 동작들은 빠르게 Rendering이 가능해서 UX가 뛰어나다. [단점] 다만 SPA는 초기에 한번에 번들되어 오기 때문에 시간이..

프론트 개발을 하면 필수적으로 많이 사용하는 함수들을 모아서 공통 js 파일을 만든다. Vue에서는 어떻게 사용하는지 정리하도록 하겠다. 우선 공통 js를 만들기 전에 플러그인이라는 개념에 대해 알아야한다.(전역 수준으로 함수 만들어서 사용할거니까...) 따로 정리하진 않겠다. https://kr.vuejs.org/v2/guide/plugins.html 플러그인 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 플러그인으로 사용할 공통 js 파일을 plugins이나 assets이나 본인이 선호하는 곳에 아래와 같이 만들어준다. import Vue from 'vue' export default{ install(Vue) { const pt = Vue.prototype..

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..

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..