본문 바로가기

Vue.js46

spa 새로고침 not found

안녕하세요. 이 이야기는 실무 개발하면서, SPA를 막 개발하기 시작한 주니어 개발자라면 모를 법한 얘기 입니다. 어떤 현상이냐면... 서버에 SPA를 배포 후, 사용자가 브라우저에서의 '새로고침' 또는 '뒤로가기'를 하거나 처음부터 Vue에 설정된 router 경로를 직접 접근하게 되면 아래의 그림처럼 페이지를 찾지 못하는 404에러가 발생하는 문제가 있었습니다. 이 문제를 해결하기 위해서 SPA를 서버에 배포할 때, SPA에 설정해 둔 router 경로를 웹 서버에 설정하는 방법을 알아보겠습니다. 해결 방법 해결 방법은 Vue에 router/index.js에 설정해 놓은 라우트 경로를 웹 서버에 설정해 주면 됩니다. 즉, 웹 서버가 '/'경로가 아닌, path가 담긴 url로 요청을 받았을 때 dis.. 2021. 3. 4.

[Vue.js] 2- vue-cli 프로젝트 생성하기

vue.js 기반의 프로젝트를 아주 처음부터 만들고, 수 많은 연관 라이브러리를 npm을 통해서 다운받아서 한 땀, 한 땀 만드는 일은 시간이 정말 많이 걸리고 복잡한 일일 겁니다. 그래서, vue.js를 사용한 초기 프로젝트를 패키지처럼 묶어서 사용할 수 있게 한 것이 vue-cli입니다. command-line-interface라고 하는데, 명령어 입력으로 초기 프로젝트를 설치하거나, 라이브러리를 설치할 수 있는 도구입니다. 그럼, vue-cli를 사용해서 초기 프로젝트를 생성해 보겠습니다. 1. 터미널을 엽니다. 2. vue-cli를 설치합니다. 명령어 : npm install -g @vue/cli 3. 다음 명령어로 vue 버전을 확인하고, 정상적으로 vue-cli가 설치가 되었음을 확인합니다. .. 2021. 1. 22.

Vue에서 $nextTick이란

Vue.js는 컴포넌트가 새로 생성이 되거나, 화면에 그려지는 데이터가 변경될 경우, Virtual DOM에 변경사항을 반영하고, 실제 DOM과 비교해서 달라진 부분만 교체합니다. 이 교체가 모두 완료되고 난 시점에서 실행되는 훅이 mounted입니다. mounted는 사용자가 사용하는 브라우저의 DOM에 모든 변경사항을 반영하고나서 실행되는 훅입니다. 그런데, Javascript의 비동기 처리 특성때문에 DOM을 탐색하거나 수정하는 로직이 있을 경우, DOM이 갱신이 되기 전에 DOM을 탐색해서 undefined나 null 에러가 발생하는 경우가 있습니다. 이런 상황때문에 Vue.js 프레임워크에서는 DOM에 모든 변경사항이 완전히 반영이 된 후에 사용자 정의 로직을 실행할 수 있도록하는 함수를 가지고.. 2020. 12. 22.

[Vue.js] mixin이란

mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다. 공식 문서 참고 여러 컴포넌트가 created, methods, data 같은 옵션을 공통적으로 사용하는 것처럼 컴포넌트마다 동일한 코드를 중복으로 작성할 필요 없이, 하나의 Mixin객체를 생성해서 여러 컴포넌트가 참조해서 사용하도록 하는 방법입니다. 공식문서에서는 property를 사용자 정의하는 데에만 사용하도록 권장하고 있습니다. 사용 방법 다음 예시는 공식 문서를 참고한 코드입니다. created와 methods 요소 옵션을 가지는 객체와 이 객체를 사용할 컴포넌트를 정의한 코드입니다. 전역 Mixin 사용 mixin을 전역으로 적용.. 2020. 12. 22.

[vue.js] 맨날 까먹는 props와 emit으로 컴포넌트 간에 값 전달하기

props 사용법 공식 문서 props는 상위 컴포넌트의 데이터를 하위컴포넌트로 전달할 때 사용합니다. props로 받을 때에는 camel 표기법을 사용해선 안됩니다. 대신, kebab 표기법(xx-xx)을 사용합니다. emit 사용법 emit을 사용할 때, 이벤트 이름이나 메소드 이름도 props와 마찬가지로 camel 표기법을 사용해선 안됩니다. 대신, kebab 표기법(xx-xx)을 사용합니다. 공식 문서에 따르면, 다음과 같이 나와있습니다. 컴포넌트 및 props와는 다르게 이벤트 이름은 자바스크립트 변수나 속성의 이름으로 사용되는 경우가 없으며, 따라서 camelCase나 PascalCase를 사용할 필요가 없습니다. 또한, (HTML의 대소문자 구분을 위해) DOM 템플릿의 v-on 이벤트리스.. 2020. 12. 20.

[Vue 실전편]props의 데이터 변화 감지를 위한 watch 사용법

상황은 다음과 같습니다. watch 속성을 사용하는데, props로 받아온 값의 변화를 감지하는 상황의 코드입니다. 부모 컴포넌트 변경 감지 자식 컴포넌트 Vuex store의 값의 변화를 감지하는 watch export default { watch : { } } 2020. 12. 19.

티스토리툴바