본문 바로가기

vue25

spa 새로고침 not found

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

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+express] webpack과 express 프레임워크를 사용한 vue App 개발환경 구축하기

개발 결과 시작하며... 시작의 발단은 스터디이다. node를 공부하려 들어갔지만, vue를 front로 붙이자며 시작한 것이 정말 어렵게 되었다. 처음에는 굉장히 쉽게 생각을 했다. 무슨 자신감이었는지 모르겠다. 하지만 이건 커피에 홍어를 찍어먹으면 맛있을 거라 생각하는 것만큼 큰 착각이었다. vue는 생각보다 어려웠다. 시작환경 [Window10] [Visual-Studio] [Node.js] ->설치되어 있음. 영상으로 개발하기 [vue+express] webpack과 express 프레임워크를 사용한 vue App 개발환경 구축하기 도움이 되셨다면 구독과 좋아요 부탁드립니다! https://www.youtube.com/watch?v=HHXnC6RfEyk 개발 순서 1. Webpack 설치 및 환경.. 2019. 8. 16.