20 Apr 2019
|
Vue.js
vuejs를 끄적이면서 간단하게 정리했던 것들 입니다. 전부 vuejs 공식문서에서 발췌함.
vuejs
- vue 생성자는 미리 정의된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장될 수 있습니다.
- vue앱은 new Vue를 통해 만들어진 root vue instance로 구성되며, 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성된다.
- 모든 vue 컴포넌트가 본질적으로 확장된 vue instance.
vuejs에서 server side rendering 사용하기
- vuejs에서 csr 대신 ssr을 사용하고 싶을 경우 Nuxt.js 를 사용
- https://medium.com/aha-official/%EC%95%84%ED%95%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EA%B8%B0-1-spa%EC%99%80-ssr%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EA%B7%B8%EB%A6%AC%EA%B3%A0-nuxt-js-cafdc3ac2053
속성과 메소드
- 각 vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리 한다.
부모와 자식 컴포넌트 관계
- 구조상 상-하 관계에 있는 데이터 통신
- 부모 -> 자식 : props down
- 자식 -> 부모 : events-up
props
- 모든 컴포넌트는 각 컴포넌트 자체의 스코프를 갖는다.
- ex) 하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없는 형식.
- 상위에서 하위로 값을 전달하려면 props 속성을 사용한다.
non paren
- 컴포넌트간의 직접적인 통신을 불가능하도록 되어 있다. –> vue의 기본 구조.
- emit event를 통해서 컴포넌트간 데이터 통신?을 가능하게 해준다.
parent - child
- 같은 레벨에서 다른 컴포넌트로 데이터를 전달할때 불편하다.
event bus
***this(중요함).
- Java : 클래스 인스턴스의 래퍼런스 변수.
- javascript : 현재 실행 문맥.(호출자가 누구인가에 따라)
vuex
- 상태관리 개념(state management)
webpack 라이브러리로
- one source(하나처럼 뭉쳐있음) –> webpack build후 –> .js . html이렇게 나눠서 보여줌..
Reference
02 Apr 2019
|
Angular
angular-cli
배포서버에서(ubuntu) sudo pm2 start –env production 실행시 Error: listen EACCES: permission denied 0.0.0.0:80
- 로컬피씨에선 테스트 완료 후 실행.
- 권한 문제라고 ..
{ Error: listen EACCES: permission denied 0.0.0.0:80
at Server.setupListenHandle [as _listen2] (net.js:1239:19)
at listenInCluster (net.js:1304:12)
at Server.listen (net.js:1392:7)
at Function.listen (/home/ubuntu/eosTracker/EOSTracker/node_modules/express/lib/applic$
at Object.<anonymous> (/home/ubuntu/eosTracker/EOSTracker/server.js:11:5)
at Module._compile (internal/modules/cjs/loader.js:799:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
at Module.load (internal/modules/cjs/loader.js:666:32)
at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
at Function.Module._load (internal/modules/cjs/loader.js:598:3)
code: 'EACCES',
errno: 'EACCES',
syscall: 'listen',
address: '0.0.0.0',
port: 80 }
조치한 것
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080sudo chown ubuntu:ubuntu /home/ubuntu/.pm2/rpc.sock /home/ubuntu/.pm2/pub.sock
–> not working…
solved
- 결국
sudo pm2 start server.js 로 실행해서 올림.
- 소스코드상 server.js를 실행하면 /dist의 경로를 보고 프로젝트를 올린다.
- pm2 ecosystem.config.js는 사용하지 못함~~
의문
- ng serve 실행 vs server.js 실행의 차이???
- ng serve로 실행할 경우 default port 4200,
- server.js로 실행할 경우 default port 80~
reference
https://stackoverflow.com/questions/35105100/start-app-as-root-with-pm2
