django로 만든 웹크롤링 사이트를 iframe 태그로 다른 html에 뿌려줘야하는 상황이 있었다.
그냥 iframe 태그로 뿌리니까 해당 사이트에서 연결이 거부되는 문제가 있었다.
아래 방법으로 해결하였다. 적용은 AWS EC2 등 다른 서버에서도 동일하다.
해결책은
from django.http import HttpResponse
from django.views.decorators.clickjacking import xframe_options_exempt
@xframe_options_exempt
def ok_to_load_in_a_frame(request):
return HttpResponse("This page is safe to load in a frame on any site.")
life cycle에서는 create, beforeMount, Mounted (window.addEventListener / bus.$on) 이 세 개를 많이 쓰고, 이벤트 해제 할 때에 beforeDestory를 사용 (window.removeEventListener / bus.$off)
new HtmlWebpackPlugin({
// index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
template: 'index.html',
}),
MiniCssExtractPlugin
css 파일을 별도의 파일로 분리 (css를 추출하는 플러그인)
개발용 라이브러리와 배포용 라이브러리 구분
개발용 (devDependencies)
npm i webpack webpack-cli --save-dev
배포용 (devDependencies)
npm I lodash –save
최종 애플리케이션에 포함되어야하는 라이브러리는 -D로 설치하면 안 된다. eslint, webpack등이 개발용 라이브러리이다.
라이브러리 지울 때는 npm uninstall 명령어를 사용한다.
Webpack Dev Server
매번 수정하고 npm run build 하는 것은 굉장히 비효율적인 반복 작업이다. 이 문제를 해결하기 위해, webpack dev server를 사용한다.
webpack dev server : 파일 입출력을 하지 않고, 해당 dist/bundle.js를 memory 위에만 올려놓고 사용 (local에서 확인할 수 없다)
npm run serve로 해당 작업을 수행할 수 있다.
추가적으로, webpack dev server를 이용하면 html, css, js 파일 뿐만 아니라, vue파일도 코드만 고쳤을 때 live server처럼 동일하게 화면을 갱신시켜줄 수 있다. webpack dev server에서 내부적으로 webpack 빌드를 하고 있다는 차이점이 존재하긴 한다.
Vuex
component와 달리 트리구조가 아니라 container(store)가 하나 존재하고, 거기에 값을 같이 접근하는 방식 -> 정확하게는 단일 상태 트리를 이용 Vuex State
단방향으로만 흐르는 것을 알 수 있다.
State
vue에서의 상태 (state) : 여러 컴포넌트간 공유되는 data
데이터가 많으면 한 곳에서 관리해야 한다. 상태 또한 component의 event처럼 규칙이 있다.
npm i vuex
// main.js에서
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
str: 'hi',
},
});
// app.js에서
<p>{{ $store.state.str }}</p>
Mutations
state는 data와 비슷하고, mutations는 method와 비슷하다.
차이점은 data는 Vue 개발자도구에서 최종 값만 확인할 수 있고, state는 data의 각 시점의 변화(logging)를 볼 수 있다.
mutations: {
addStr(state) {
state.str += '!';
}
다른 컴포넌트에 아래 코드처럼 입력하면, 같은 data를 바라보기 때문에, 한 번의 mutation으로 두 개의 component가 변경된다.
main.js : 전반적인 library, 프로젝트에 어떤 기능이 있는지 포함이 되어 있어야 한다. store나 router가 많아지면 한 눈에 보기 힘들기 때문에 src 폴더 밑에 store 폴더를 만들고 index.js에 store와 router를 포함시켜야 한다.
Actions
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(json => this.user = json); // json 결과를 this.user에 담아 둔다.
위는 브라우저에서 사용되는 HTML request 방식이다.
데이터 호출은 vuex에서 mutations이 아닌 actions으로 한다!
actions에 작성하는 함수는 전부 대문자로 작성 (ex> FETCH_USER)
mutations와 달리, actions에서 state로 갈 수 있는 길이 없다. mutations을 거쳐야만 가능하다.
mutations은 devtool로 확인할 수 있기 때문에 debugging도 용이하다.
setUser(state, user) {
// 두 번째 인자는 payload로도 많이 씀
state.user = user;
},
},
Vue core library는 화면단의 데이터에 관한 기능을 중점 지원하지만, 프레임워크의 기능인 router, state, testing을 쉽게 할 수 있는 형태로 제공. Vue를 단지 library뿐만이 아닌, progressive framework라고 부르는 이유이다.
var vm = this;
return axios
.get('https://jsonplaceholder.typicode.com/posts/1')
.then(data => {
this.post = data.post; // 화살표 함수를 쓰면 vm이 아닌 this를 사용해도 된다.
})
인스턴스 option 속성에는 화살표를 쓰면 안된다.
-> 왜냐하면 바로 위의 this의 범위가 달라지기 때문이다.
fetchItems() {
…
}
-> 대신에 이런 식으로 작성이 가능하다.
Enhanced Object Literal
향상된 객체 리터럴(표기법): key와 value가 같아질 때 사용한다.
var obj = {
num, // num: num,
};
-> vue의 component 정의에서도 예를 들어 TodoInput이 html에서는 todo-input으로 바뀌기 때문에 사용 가능하다. (대소문자 구별을 하지 않기 때문임)
import, export
- 값이나 변수가 나가는 곳에서 export var a
- 받는 곳에서 import {값 or 함수} from '가져오는 위치'
export default
-> 해당 파일에서 무조건 하나만 들고 오겠다면 default를 붙인다.
-> 이때는 무조건 하나만 들고 오기 때문에, import sum from '...' 처럼 { } 없이 들고 올 수 있다.
npm init -y (모든 option을 yes로 처리) -> package.json 생성
package-lock.json : 특정 라이브러리를 설치할 때 또다른 라이브러리를 설치해야 할 수도 있기 때문에 생기는 것
npm i jquery와 같이 라이브러리를 install 하면
"dependencies": {
"jquery": "^3.4.1"
}
node_modules 폴더 밑에 jquery 폴더가 생기고, 가져다 쓸 수 있음
ES6 에서는 CDN 방식(script)로 접근하지 않고, import로 라이브러리에 접근한다.
npm i jquery-ui@1.10.5 처럼 @+ (버전) 으로 특정 버전을 설치할 수 있다.
package.json에 필요한 모든 패키지가 명시가 되어 있으므로, node_modules를 제외하고 새로운 폴더로 옮긴 후에, npm i 명령어를 통해 옮긴 후에 node_modules를 생성하는 식으로 프로젝트 위치 변경 용이하다. 따라서 git으로 올릴 때에도 package.json과 package-lock.json을 같이 올리는 것이 좋다.
Vue CLI
CDN은 인터넷 연결이 되지 않으면 사용 불가
setup된 project에서 개발하기 위해 Vue CLI를 쓰는 것임 (명령어로 프로젝트 구성하는 도구)
1. vue create todo-app (프로젝트 생성, 생성 option은 사전 설정 없으면 defalut로 하면 된다)
2. cd todo-app
3. npm run serve (프로젝트 실행)
vue! : vscode에서 .vue 파일로 개발할 때 single file component(html+css+js) 자동 생성 단축키
vue cli가 live server로 열리지 않는 이유 : HTML, CSS, JS는 브라우저가 인식 가능하지만, Vue 파일은 인식할 수 없기 때문이다.
vue cli에서 서버 명칭 : webpack-dev-server
로딩해주는 것 : vue-loader
-> 이러한 잡다한 부분을 vue-cli의 최신 버전들은 @vue-cli 폴더 등에 넣어놓음
