개발자의 끄적끄적

[VueJS] Apache Tomcat서버에 배포하기 [펌] 기존에 사용중이던 Apache Tomcat 서버에 vue 프로젝트를 배포를 했다. 1. vue 프로젝트를 build 한다. node cmd > $ cd 프로젝트 경로 node cmd > $ npm run build 2. 프로젝트 폴더 > dist에 build된 파일이 생성된다. dist 폴더 내 파일을 모두 복사한다. 3. 서버에 접속 후 tomcat webapps 경로로 이동 후 프로젝트 명으로 폴더를 생성한다. 복사한 dist 폴더 내 파일들을 붙여넣기한다. - 경로 : 웹서버 > tomcat 설치 경로 > webapps > 프로젝트 폴더명 4. "톰캣 호스팅 주소 : 포트/프로젝트명"으로 접속하여 테스트 해본다. #. 프로젝트 경로로 제대..

[vue.js] local server IP로 접근하기 [펌] 아래의 명령어로 vue 프로젝트를 생성 & 실행 시 localhost:8080 URL에서 화면을 확인할 수 있다.vue init webpack project-name cd project-name npm run dev 하지만 localhost에서는 페이지에 접근이 가능하지만, IP로 접근 시에는 페이지가 열리지 않는다. (예: 12.34.56.78:8080) webpack-dev-server에 IP에 대한 제한 설정을 풀어주면 IP로도 페이지 접근이 가능해진다. package.json 파일 내 scripts.dev 부분에 "--host 0.0.0.0 --disableHostCheck true" 구문을 추가한다. as-is "scripts": {..

[Vue.JS] Vuex Store의 state를 효율적으로 초기화하기 [펌] Vue.js의 상태 관리 패턴인 Vuex에서 Store의 state를 초기화하는 방법에 대해 알아보자. Vuex Store에서 state는 원본 데이터 즉, 모델의 역할을 하며mutation에 의해 변경이 가능하다. state는 최초에 명시되어 있어야 하며, 때로는 기본값을 가지고 있다. 이러한 state를 mutation에 의해 변경을 하고 이후 어떠한 작업을 하더라도 초기화되지 않는다. 그렇기 때문에 해당 stat를 다시 사용한다면 이전 값이 남아있다. 그렇기 때문에 state의 초기화는 필수적이다. 이번 포스트에서는state를 초기화하는 효율적인 방법에 대해 알아보자. state의 효율적인 선언과 초기화 당연한 말이지만 ..

[vue.js] axios 사용시 폼 데이터 전송하기 (+파일 업로드) [펌] axios 의 post 기능은 기본적으로 폼 데이터 전송방식을 사용하지 않기 때문에 서버쪽에서 파라메터를 받는 부분을 수정할 수 없는 상황이라면 문제가 됩니다. 보통 외부 API 서비스를 사용할 때 많이 발생하지요. // 보통 axios 는 아래와 같이 보내게 된다. // 이렇게 보내면 폼 전송형식이 아닌 JSON 포맷으로 전송하게 된다. axios.post('https://domain/form-post-url', { name: '이름' key: '값' }).then((response) => { // 응답 처리 }) .catch((error) => { // 예외 처리 }) 이를 해결하기 위해 가장 간단한 방법은 과거부터 오랫동..

[vue.js] Vuex 시작하기 1 - Vuex와 State [펌] 들어가며 이 글은 Vue.js의 컴포넌트와 컴포넌트 통신 방법을 알고 계신 분들이 읽기 좋습니다. Vue.js를 잘 모르시거나 이제 막 시작하시는 분들은 Vue 입문 가이드를 먼저 읽어보시고 오세요 :) Vuex란? Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있습니다. 상태 관리(State Management)가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. 예를 들면, header, button, list 등의 화면 요..

[Vue.js] 뷰 라우터(router-view, router-link)[펌] 뷰 라우터) 뷰 라이브러리를 이용하여 싱글페이지 애플리케이션을 구현할 때 사용하는 라이브러리 ​ (cdm 방식) //뷰 를 먼저 해주고 //라우터 해주면 됨 router-view) 태그는 페이지의 url이 이동했을 때 그 범위내에서 뿌려주는 태그 ​ router-link) 태그는 라우터에서 페이지 이동을 위한 태그 태그와 비슷한 기능을 가짐 로그인 메인 홈 ​ 출처 : https://blog.naver.com/PostView.nhn?blogId=lth9036&logNo=221579816680

[vue.js] 처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지 라우팅 라우팅이란 웹 페이지간의 이동 방법을 말한다. 라우팅은 현대 웹앱 형태 중 하나인 싱글 페이지 에플리케이션에서 주로 사용된다. 싱글 페이지 에플리케이션이란 서버에 웹 페이지를 요청하지 않고, 미리 해당 페이지를 받아 놓고 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션을 말한다. 뷰 뿐만 아니라 리엑트, 엥귤러는 모두 라우팅을 이용한 화면 전환을 지원하고 있으며 Fouc 현상이 일어나지 않아 화면을 더 빠르고 매끄럽게 전환할 수 있다. Route 예제 Link To Main Link To Login 네스티드 라우터 네스티드 라우터를 사용하면 페이지를 이동할 때 최소 2개 이상..

[Vue.js] 참고 사이트 [펌] 1. Vue.js 공식 사이트 - Vue.js에 대한 기본적인 지식을 배울 수 있는 곳으로 Vue.js를 처음 배우는 분들을 반드시 방문해야 하는 사이트 입니다. https://kr.vuejs.org/v2/guide/ 2. Vuetify 공식 사이트 - Vue.js는 가상 돔(DOM)을 이용하기 때문에 jQuery가 제대로 동작하지 않는 경우가 있습니다. 그래서 jQuery를 이용하는 Bootstrap도 잘 동작하지 않는 경우도 있습니다. - Vuetify는 Bootstrap을 이용해 Vue.js를 이용하면서도 Bootstrap을 이용한 것처럼 화면을 만들 수 있도록 합니다. Bootstrap과 사용방법이 거의 비슷합니다. https://vuetifyjs.com/ko/..