공책

vue를 쓰면서 node에러를 곧잘 만나게 됐다.

이번엔,

Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)

에러...

node-sass버전이 안 맞아서 나는 에러 같다.

나는 노드 기반 지식이 부족해서 이걸로 삽질을 꽤 했는데, 답은 아주 간단했다.

에러가 일어나는 프로젝트에 node-sass rebuild 해 버리면 된다.

근데 나같은 경우엔 처음 리빌드를 했을 때도 같은 에러가 나서, 그냥 node-sass를 삭제했다가 재설치를 했다.

npm rebuild node-sass

했는데도 안 먹으면,

npm uninstall node-sass

node-sass를 삭제하고,

npm install node-sass

재설치 한 후, 리빌드를 했다.

리빌드를 했는데 안 먹었던걸 보면, 아마 node-sass 버전을 맞춘다고했는데 잘못 맞춘것 같았다.

기존 node-sass 버전은 6.0.0 이었고, 재설치후 node-sass 버전은 7.0.1이었다.

참조한 글

https://stackoverflow.com/questions/37415134/error-node-sass-does-not-yet-support-your-current-environment-windows-64-bit-w

1. 스프링부트 프로젝트 파일을 만든다. (springboot)

2. springboot의 루트에 VueCLI로 Vue프로젝트(Front용)를 만든다. (vue)

3. vue의 루트에 vue.config.js를 만든다. 내용은 아래와 같이 작성한다.

module.exports = {
  devServer: {
    port: 8083,
    proxy: {
        '^/': {
            target: 'http://localhost:8080' //springboot쪽 서버
            changeOrigin: true // 기본 베이스 URL을 변경할지 여부
      }
    }
  },
  outputDir: "../src/main/resources/static", // 빌드가 완료 된 파일을 생성할 위치
}

4. Springboot와의 프록시 설정과 포트 변경은 완료됐다.

이렇게 설정하면 Front쪽은 Node.js 서버로, Back쪽은 스프링부트의 내장 웹서버로 나눠서 동작시킬 수 있다.

그래서 두 개의 서버를 켜 놓고, 앞단 작업을 바로바로 확인하며 효율적으로 작업할 수 있게 된다.

* 협업할시에는 node_modules는 gitignore설정을 하는 게 좋다.

어차피 디펜던시 개념이라 알아서 다운받음...

~ 여기까지가 기본 연동과정이고, data의 출력까지 확인해보려면..... ~

5. 커맨드 창을 열고 vue위치로 가서 'npm install axios'로 엑시오스를 다운로드 한다.

6. springboot쪽에서도 json관련 dependency를 추가한다.

https://mvnrepository.com/artifact/org.json/json

7. 서버에서 @ResponseController어노테이션을 이용해(혹은 @ResponseBody) 요청할시 json데이터를 리턴하게 한다.

8. front쪽 data를 받을 vue에 axios를 임포트하고, 

import axios from 'axios'

export default {

			.........

methods: {
   test : function() {
     axios.get("/test")
     .then((res => {
       console.log(res.data);
       this.name = res.data.name;
       this.day = res.data.day;
     }))
    }
  },
  			.........

위와 같은 방식으로 데이터를 가져온다.

+ CORS문제가 생길 수 있으므로, 서버를 관리할 수 있는 상황에서는

springboot쪽에 아래와 같은 클래스를 작성해놓는다.

front에서 프록시 설정을 잘 해뒀으면 상관없다!

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:8083");
    }
}

1. Node.js를 설치한다. ( npm : Node Package Manager )

https://nodejs.org/ko/

2. 명령 프롬프트창을 열고 'npm install -g @vue/cli' 입력한다. ( vue CLI을 시스템레벨에 다운로드 )

3. 프로젝트 폴더를 만들고 프롬프트창에서 해당 폴더 경로로 간다.

4. 해당 폴더에서 'vue create 프로젝트이름' 을 입력하여 패키지를 생성한다.

5. 'npm install' 입력해 구동하기 위한 라이브러리를 다운로드받는다.

6. 'npm run serve'를 입력하면 브라우저가 실행된다.

7. 크롬에서 vue extension 를 add 한다. ( Vue 개발자도구 )

< Vue.js의 특징 >

1. 뷰의 단위를 쪼개서 재활용이 쉽다. (컴포넌트로 구성하여 사용)
2. 가볍고 빠르다.
3. 데이터 피드백이 빠르다.

  - 출력값과 모델값의 동기화
  - 필요한 부분만 빠르게 렌더링

= Vue.js는 View가 아니라 데이터를 조작한다는 개념으로 이해하면 쉽다.

< Vue js 로드 >

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

< Vue Instance Example>

var vm = new Vue({
    el: '#id값'
    data() { 
    	수정중
    },
    methods: {
    	printName: function() {
        console.log(this.data);
        }
})

< LifeCycle Hook >

라이프 사이클 : 인스턴스가 호출되고 사라지는 전체 과정

훅 : 각 라이프 사이클에서 실행되는 커스텀 로직

1. beforeCreate
: 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계
data속성/methods속성이 아직 인스턴스에 정의되지 않았으므로 DOM(화면요소)에 접근할 수 없다.

2. created
: data/methods 정의 > 로직 실행가능, 컴포넌트 생성
서버에 데이터를 요청해 받아오는 로직을 수행하기 적합한 단계

3. beforeMount
: 마크업 속성을 DOM에 부착하기 전 단계
render() 함수 호출 전이다.

4. mounted
: DOM에 인스턴스가 부착 되자마자 호출되는 단계
DOM에 접근가능, 화면요소를 제어하는 로직을 수행하기 좋은 단계

5. beforeUpdate
: 데이터가 변경되고 가상 돔으로 화면을 다시 그리기 전 단계
변경 예정인 데이터값에 접근가능하므로 그 값과 관련된 로직을 넣기 좋다.
* 값을 변경하는 로직을 넣더라도 화면이 다시 그려지진 않음

6. updated
: 데이터가 변경된 후, 가상돔으로 화면을 다시 그린 후 실행되는 단계
데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋다.
* 이 단계에서 값을 바꾸면 무한루프에 빠질 수 있으니, computed나 watch를 사용해야한다.
가급적 값을 바꾸는 로직은 beforeUpdate에 넣고, updated는 변경 데이터의 화면요소(DOM)과 관련된
로직을 추가하는 것이 좋다.

7. before Destroy
: 뷰 인스턴스가 파괴되기 직전 단계.
아직 인스턴스에 접근할 수 있으므로 인스턴스의 데이터를 삭제하기 좋다.

8. destroyed
: 인스턴스가 파괴되고 난 후 호출되는 단계.

< Vue Directive > 

: html태그 안에서 v-접두사를 가지는 속성들

v-bind : 데이터가 바뀌면 DOM에 반영이 된다. 단방향 (출력만 할때)
v-model : View에서 데이터가 바뀌면 둘다 바뀐다. 양방향 (v-bind + v-on:input)
v-on : View에서 일어난 이벤트를 처리하는 키

v-for : v-if 보다 우선 순위가 높다. for문

v-if : v-for보다 우선 순위가 낮다. if문

v-pre : 특정 Elements들을 무시, 컴파일 속도에 영향

* DOM에서는 케밥케이스나, 소문자로 입력해야 인식된다.

< computed, methods, watch >

computed : 선언형, 캐싱한다. 원본 객체의 값이 변하지 않으면 다시 연산하지 않는다.

methods : 렌더링 마다 연산한다.

watch : 명령형, 데이터를 주시하다가 값이 변경 될 때마다 연산한다.

참고문헌 : 

Vue.js '가이드 2.x' 

https://kr.vuejs.org/v2/guide/index.html

장기효 지음, 『Vue.js입문』, 이지스퍼블리싱(2018)