#devspace

1. 문제 상황

ImportError: pycurl: libcurl link-time version (7.79.1) is older than compile-time version (7.85.0)

npm run serve 실행시 pycurl 버전 문제로 보이는 에러가 발생하면서 프로젝트 실행이 되지 않았다.

2. 해결 방법

방법 1) pycurl 재설치 - 실패

아래 방법으로 pycurl 재설치를 해봤지만 계속 같은 오류가 났다.

brew install curl
brew link curl --force
brew install openssl
export LIBRARY_PATH=/usr/local/opt/openssl/lib
export CPATH=/usr/local/opt/openssl/include
pip --no-cache-dir install pycurl
python -c "import pycurl"

방법 2) npm 버전 다운그레이드 - 성공

결과적으로 npm 버전을 다운그레이드 했더니 해결됐다!

sudo npm install -g n
sudo n 16.13.2

PostgreSQL에 대한 과제를 진행하기 때문에 장고 프로젝트에 PostgreSQL을 연동하여 사용해고자 한다.

먼저, PostgreSQL을 설치하고 DB를 생성해야 한다.

완료되었으면 Django에 psycopg2를 설치해준다.

pip install psycopg2

설치가 되었으면 settings.py의 DATABASE 항목에 연결정보를 입력한다.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'project',
        'USER': 'root',
        'PASSWORD': 'password',
        'HOST': 'localhost',
        'PORT': '',
    }
}

그 후 터미널에서 아래와 같이 입력하고 서버 구동을 확인한다.

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

아래와 같이 장고 프로젝트에 잘 연동되어 데이터가 출력되는 것을 확인할 수 있다!

Reference

https://velog.io/@chaeri93/Django-Django와-Postgresql-연동하기

문제 상황

Vue는 template 단에서 html 요소와 component 요소가 혼동되지 않도록 component 이름을 복합어로 권장한다.

해결 방법

하단의 속성을 프로젝트 package.json의 rules에 추가

공식 Reference

vue/multi-word-component-names

문제 상황

VS Code에서 프로젝트의 ESLint 설정 파일을 인식하는 부분에서 에러 발생

해결 방법

하단의 코드를 VS Code의 settings.json에 추가

Reactivity

• 객체의 동작을 재정의함
• 데이터의 변경이 화면에 바로 반영됨

<div id="app"></div>

<script>
var div = document.querySelector("#app");
var viewModel = {};

// Object.defineProperty(대상 객체, 객체의 속성, {
// 정의할 내용
// });

// 즉시 실행 함수
(function () {
    function init() {
        Object.defineProperty(viewModel, "str", {
            get: function () {
                console.log("접근");
            },
            set: function (newValue) {
                console.log("할당", newValue);
                render(newValue);
            },
    });
}

    function render(value) {
        div.innerHTML = value;
    }

    init();
})();
</script>

인스턴스

속성

new Vue({
    el: ,
    template: ,
    data: ,
    methods: ,
    created: ,
    watch: ,
});

컴포넌트

• 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
• 재사용성이 향상되어 화면을 빠르게 제작 가능

전역 컴포넌트

// Vue.component('컴포넌트 이름', 컴포넌트 내용);
// 전역 컴포넌트 - 거의 안씀
Vue.component("app-header", {
    template: "<h1>Header</h1>",
});

Vue.component("app-content", {
    template: "<div>content</div>",
});

지역 컴포넌트

new Vue({
    el: "#app",
    // 지역 컴포넌트 등록 방식
    components: {
        // '컴포넌트 이름': 컴포넌트 내용
        "app-footer": {
            template: "<footer>footer</footer>",
        },
    },
});

컴포넌트와 인스턴스의 관계

• 전역 컴포넌트는 인스턴스를 새로 생성하고 components에 넣어주지 않더라도 반영이 되지만 (이미 등록이 되어 있음)
• 지역 컴포넌트는 인스턴스를 새로 생성하고 components에 넣어주어야 반영이 됨

컴포넌트 통신 방식

• props 전달

• event emit

뷰 라우터

• SPA를 구현할 때 사용하는 라이브러리

사용 방법

• CDN 순서 주의! (vue -> vue router 순)
• npm으로 설치할 수도 있음

<script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>
<script src="[https://unpkg.com/vue-router@3/dist/vue-router.js](https://unpkg.com/vue-router@3/dist/vue-router.js)"></script>

옵션

• routes : 라우팅 할 URL와 컴포넌트 값 지정
• mode : URL의 해쉬 값 제거 속성 (mode: history)

router-view

• Vue의 싱글 페이지
• URL이 변경되면 해당 컴포넌트가 화면에 뿌려지는 지점을 정함

router-link

• html의 a href 같은 기능
• 페이지 이동

axios

• Vue에서 권고하는 Promise 기반의 HTTP 통신 라이브러리
• 문서화 잘 되어 있고, API가 다양함

설치

• CDN

<script src="[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script>

• NPM

npm install axios

사용방법

<div id="app">
  <button v-on:click="fetchData">get data</button>
</div>

new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드
실행하면 사용자 정보가 콘솔에 출력됨

템플릿

데이터 바인딩

뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법

<div>{{ message }}</div>

new Vue({
  data: {
    message: 'Hello Vue.js'
  }
})

디렉티브 (v-)

뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법

• 자주 사용되는 디렉티브
  • v-if
  • v-for
  • v-bind
  • v-on
  • v-model (2-way 데이터 바인딩)

watch

특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하는 속성
값을 계속 추적, 이전 값과 바뀐 값을 받을 수 있음, 데이터 요청

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value);
    }
  }
})

message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터 출력

computed

바뀐 값에 대해서 모름, 빠름, 캐시 같은 느낌, validation이나 간단한 연산 가능, 가독성 향상

computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  }
}

<div>{{ reverseMessage }}</div>

• watch보다 computed 쓰는 것을 추천함

싱글 파일 컴포넌트

• vue-cli로 프로젝트 생성후 App.vue
• .vue 파일을 모두 싱글 파일 컴포넌트라고 함

<!-- .vue 파일 구조 -->
<template>
  <!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>

<script>
  // 자바스크립트 (뷰 컴포넌트 내용)
</script>

<style>
  /* CSS (뷰 템플릿의 스타일링) */
</style>

동작 원리

• 싱글 파일 컴포넌트는 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행됨
• 뷰 로더는 웹팩의 로더 종류 중 하나이고 뷰 CLI로 프로젝트를 생성하면 기본적으로 설정되어 있음