1. 터미널에서 brew를 이용하여 설치
brew install postgresql
2. 버전 확인
postgres -V
3. 시작
brew services start postgresql
4. 접속
psql postgres
brew services stop postgresql
1. DBeaver 다운로드
2. PostgreSQL 선택
3. 정보 입력 (유저 생성 후 진행해야함) 후 Test Connection 클릭
4. 드라이버 설치
5. 완료
Reference
<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>",
},
},
});
컴포넌트와 인스턴스의 관계
사용 방법
<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>
옵션
설치
<script src="[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script>
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'
}
})
뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법
특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하는 속성
값을 계속 추적, 이전 값과 바뀐 값을 받을 수 있음, 데이터 요청
new Vue({
data() {
return {
message: 'Hello'
}
},
watch: {
message: function(value, oldValue) {
console.log(value);
}
}
})
message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터 출력
바뀐 값에 대해서 모름, 빠름, 캐시 같은 느낌, validation이나 간단한 연산 가능, 가독성 향상
computed: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}
<div>{{ reverseMessage }}</div>
<!-- .vue 파일 구조 -->
<template>
<!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>
<script>
// 자바스크립트 (뷰 컴포넌트 내용)
</script>
<style>
/* CSS (뷰 템플릿의 스타일링) */
</style>
동작 원리
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Vue.js devtools
Browser DevTools extension for debugging Vue.js applications.
chrome.google.com
뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑 하고 싶을 때 사용하는 CLI 도구
✅ 공식문서
https://cli.vuejs.org/guide/installation.html
sudo npm install -g @vue/cli
# 버전 확인
vue --version
vue create [프로젝트명]
❗️ 진행 시 주의할 점
vuetify 추천 버전을 사용하기 위해서는 vue2를 설치해야 한다.
설치 완료라고 예쁘게 뜬 메시지를 확인할 수 있다.
npm run serve
vue add vuetify
❗️ 진행 시 주의할 점
vuetify3는 프리뷰 버전이기 때문에, 추천 버전인 vuetify2를 사용하기 위해서는 vue2를 설치해야 함!
vue3를 설치한 경우 아래와 같은 에러가 발생한다.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
아래와 같은 메시지가 출력되면 잘 설치된 것이다!
npm run serve
Reference
프론트엔드 개발을 쉽게 하기 위한 자바스크립트 프레임워크
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
💡 Virtual DOM
화면에 변화가 있을 때 변경사항을 실시간으로 수정하지 않고, Virtual DOM을 이용해 메모리에서 처리하고 DOM을 한번만 수정한다. 결과적으로 브라우저는 렌더링을 한번만 하게 되기 때문에 렌더링 성능을 높인다.
Reference
Django는 설치할 때 기본적으로 SQLite가 연동됩니다.
하지만 실제 프로젝트를 위해 MySQL 연동 작업을 진행해보겠습니다.
1. 커넥터 설치
mysqlclient 라는 라이브러리를 설치하면 파이썬과 MySQL 통신이 가능합니다.
pip install mysqlclient
2. settings.py 설정
DATABASES = {
'default' : {
'ENGINE': 'django.db.backends.mysql',
'NAME': '연동할 데이터베이스 이름',
'USER': 'DB 접속 계정명',
'PASSWORD': 'DB 접속 비밀번호',
'HOST': '실제 DB 주소',
'PORT': '3306', # 기본 포트 주소
}
}
3. DB 감지
해당 DB에 존재하는 테이블들을 model로 만들어줌
# 앱 안에 models.py에 바로 저장하기
python manage.py inspectdb > [앱이름]/models.py
# 앱 안에 models.py에 바로 저장하기 (멀티 DB)
python manage.py inspectdb --database 'db명' > [앱이름]/models.py
# 출력만 하기
python manage.py inspectdb
4. 테이블 생성
모델이 변경되었으니 마이그레이션 적용하기
python manage.py makemigrations
python manage.py migrate