송민준의 개발노트

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

프론트 개발을 하면 필수적으로 많이 사용하는 함수들을 모아서 공통 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..

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

github.com/axios/axios axios/axios Promise based HTTP client for the browser and node.js - axios/axios github.com axios란? - axios는 브라우저, node.js 등을 위한 프로미스 기반의 http 비동기 통신 라이브러리임. 특징 - 프로미스 활용(es6+) - 요청과 응답 데이터의 변형 - JSON형태로 자동 변경 간단 사용법 해당 프로젝트 경로로 이동 후 아래 명령어 입력 npm install axios package.json과 package-lock이 업데이트 됨. 코드 구조 Home Board List : Loading... Api result: {{boards}} Board 1 Board 1

우선 Git이 설치되어 있어야 한다. 이래저래 만지다 보니 커밋된거 같은데;; 1. 일단 아톰에서 local repository를 만든다. 만들면 아래 오른쪽 처럼 staged 상태창에서 깃허브에 올릴걸 설정한다. 2. 올릴거 정하고 커밋하면 로컬저장소에 있는게 커밋됨 3. cmd 키고 프로젝트 경로로 간다.(난 vuejs) 4. 깃헙에서 레퍼지토리를 하나 만든다.(이름은 Vue_Toy_Atom 으로 만들었음) 5. 아래처럼 명령어 치면 된다. 6. 확인하면 잘 올라가 있다. 맨날 이클립스나 인텔리제이, 소스트리 같은 GUI 툴을 사용해서 업로드 했는데 이번엔 첨으로 bash를 써봤다. 꽤나 간편한뎅...?

vue에서 로컬 스토리지에 값을 넣는 경우가 있다. 아래처럼 localStorage.setItem으로 설정해주면 된다. 개발자모드에서 확인 가능