Elasticbeantalk로 생성된 리소스들 중에서
배포 파일등은 S3bucket에 등록되는데 이것은 버킷 정책에서 삭제가 안되도록 설정되어 있다.
FullAccess인데도 안된다.
Console 에서 S3로 들어간 다음
목록에서 버켓을 클릭하명 상세 내용이 나온다
[객체 | 속성 | 권한 | 지표 | 관리 | 액세스 지점 ] 탭들이 있는데
권한 탭을 보면
버킷정책으로 Json으로 정의된 내용이 나오는데
제일 밑에 Delete 어쩌구에 Effect:Deny로 있다.
"편집"버튼을 누른다음 Deny를 Allow로 바꾸거나 아예 지운다음 "변경사항저장" 한다.
버킷 목록에서
삭제할 버킷을 선택한 후 "삭제"버튼을 누르면 삭제 됨.
몇년 만이라고 할 것도 없이 많은 사람들 앞에서 말을했다.
얼마만인지도 모르게 말을 많이 해서 목도 좀 아프고
연습은 해도해도 모자른 게
기억이 제대로 나지 않고 실전에서는 떨리기 때문에
말도 꼬이고 틀리고
그래도 연습한 게 있어서 끝까지 무사히 마쳤다
어쨌거나 사고는 안쳤으니 다행이다.
---
아침에 행사장에 도착했는데
준비된 게 없어서 어슬렁거리다 한 컷
행사 들으며 왠지 분위기가 있어서 한 컷
behind
발표 내용 중에
여러 예가 있는데
특별히 솜 사탕이라는 것을 넣음 ㅎㅎㅎ
우선. Jetbrains 라이센스는 우리나라의 단군넷에서도 구매가 가능하다.(단군넷 회원가입 필요)
하지만 결국에는 jetbrains 홈페이지에도 따로 가입을 해야한다...
(참고로 10개정도 되어야 할인이 된다고 ...)
단군넷으로 결제를 하게되면 메일로 인증관련 메일이 온다.
링크를 타고 들어가서 가입하면 해당 계정이 마스터가 된다.
Jetbrains에서 가입하고 결제를 하면 해당 계정이 마스터가 된다.
결제가 완료되면 로그인했을 때 구매한 라이센스 정보를 보여준다.
구매한 게 "All Products Pack"에 4개를 구매 했다면 아래와 같이 나타난다.
"Active subscriptions"를 클릭하면 상세 목록이 나온다.
중간에 초대링크가 있으며
목록에는 LicensesID, Assigned여부, 만료일, 제품링크, 팀ID, Assign링크가 나타난다.
제품링크를 통해 가능한 제품을 바로 다운받을 수 있다.(어차피 인증은 나중이므로 여기에서 다운받지 않고 홈페이지의 다운로드 링크를 받아도 된다)
사용자를 할당하려면 오른쪽 끝의 Assign을 클릭한다.
링크를 보낼 Email주소와 이름을 입력하고 "Assign"버튼을 누르면 초대메일이 간다.
각 라이센스 ID별로 assing 하면 된다.
아래와 같이 메일에 파란색으로 "complete JetBrans Account registration" 링크가 있다.
클릭하여 완료하고
해당 메일계정으로 JetBrains에 가입이 안되어 있으면 가입해야 한다.
가입이 완료되면
제품을 다운로드 받은 뒤, 인증에서 jb account(email / password) 로 activate하면 된다.
help > register...
프로젝트 구조는
- myproject
- frontend : 여기에 UI 프로젝트(nuxt)
- backend
npx create-nuxt-app 입력하고 다음항목을 선택한다.
. 기본으로 생성한 후 추가 할 예정
. Lint 는 나중에 추가
생성되면
npm run dev 를 실행
npm run build
npm run start
기본 port는 3000번이므로
http://localhost:3000 으로 접속
Pass-ta를 실행시키기 위한 조건으로 "Virtualize Intel VT-x/EPT or AMD-V/RVI" 기능이 지원되어야 한다>
CPU에서 지원하는지 여부를 확인해야 한다.
ubuntu setting에서 체크를 한 뒤에 play 버튼을 눌렀을 때
에러가 나면
제어판 - 프로그램 및 기능 - Windows 기능 켜기/끄기
Hyper-V 설정 체크 해제 확인하고
그 다음 Windows 하이퍼바이저 플랫폼과 가상 머신 플랫폼 체크 해제를 확인한다.
빨간부분 체크해제하니 정상적으로 가동이 된다.
다만, WSL은 동작하지 않는다.
WSL을 하려면 빨간부분체크 -> Paas-TA 실행안됨
Paas-TA 하려면 빨간부분 체크 해제 -> WSL 안됨.
둘 중 하나만 가능.
Pass-Ta 환경구성할 때
Linux에 이것저것 설치하기 때문에
간단히 MS Store에서 Ubuntu 18.04 다운받아서 설치했다.
bosh 환경설 정 중....
종속성 파일 설치 명령을 내렸는데.. zlibc 설치가 안된다.
sudo apt-get install -y build-essential zlibc zlib1g-dev ruby ruby-dev openssl libxslt1-dev libxml2-dev libssl-dev libreadline7 libreadline-dev libyaml-dev libsqlite3-dev sqlite3
경로에 E: 로 되어있어... 안되니
맘 편히 VMware 의 workstation-player 에 설치하기를... ㅠ.ㅠ
VMware Player 설치
https://www.vmware.com/kr/products/workstation-player/workstation-player-evaluation.html
front-end 와 back-end 를 따로 구축하는 경우
proxy issue가 있다.
axios 를 이용하여 기존 서비스에 로그인을 시도했는데
parameter 수신이 되지 않았다.
전송자체는 동일한 값이 전송되었는데 수신 url에 대한 호출은 되나 param 정보가 없었다.
이유는 (일주일 정도 삽질했나?? ㅠㅠ)
크로스 도메인 이슈 때문이다.
| 스크립트가 실행되는 페이지와 비동기 호출 시 주소의 프로토콜, 호스트, 포트가 같아야 함. |
즉 front-end 실행 포트가 3000번이고
back-end 실행 포트가 8000번인 경우 위 경우에 해당되기 때문에
proxy 설정을 해야 정상적으로 처리가 가능하다.
먼저 모듈 설치
npm i @nuxtjs/axios
npm i @nuxtjs/proxy
그 다음 nuxt.config.js 설정
| module.exports = { modules: [ '@nuxtjs/axios' ], axios: { proxy: true // proxy 사용 }, proxy: { '/prefix-url': 'proxy-url' // proxy url } } |
나의 경우 로그인만 Test 했으므로 nuxt.config.js 에 추가
proxy: { '/login/': 'http://localhost:8000' },
호출하는 login.vue에서
<input v-model="userid" type="text" class="input" name="userid"/>
<input v-model="password" type=password" class="input" name="password"/>
// login function
const frm = new FormData()
frm.append('userid', this.userid) // model로 연결되어 있으므로 this.userid
frm.append('password', this.password) // model로 연결되어 있으므로 this.password
this.$axios.post(`login/proc`, frm)
수신하는 back-end 의 경로가
http://localhost:8000/login/proc
proxy에 /login 설정이 되어 있으므로
proxy에서 "/":"localhost:8000" 으로 하면 proxy로 바로 redirect 되므로 경로가 있어야 함.
하지만 proxy로 하는경우 경로 구별을 위해
/api/ 라는 경로를 주어 분리하는 용도로 사용해 봐야겠음.
참조하는 강좌에서 진행한 것으로
주된내용은 아니므로 Skip해도 됨.
npm install vue-video-player --save
https://www.npmjs.com/package/vue-video-player 참조
근데 안된다....
별거없이 추가했는데.. 안되네
오류가 could not find declaration file for module 'vue-video-player'
지나가자 ㅋ
시작부터 vuex의 store를 사용한다.
src/store/index.js 에서
state 안에 video dataset(videos)을 선언해둔다.
Home.vue 에서 videos 를 사용하는데
style 관련해서 sass 를 사용하므로 두개의 모듈을 추가로 설치한다
npm i sass-loader 로 최신버전을 깔았더니...
Syntax Error: TypeError: this.getOptions is not a function 에러가 나네... 쩝.
이런경우 npm uninstall sass-loader 로 삭제하고 10버전을 설치한다.
vue랑 sass-loader 버전이 호환되지 않는 경우가 있다고 하네...
npm install --save sass-loader@10
npm i node-sass
src/views/Home.vue 를 수정한다.
video dataset 이 목록으로 나오는 것을 확인할 수 있다.
이제 목록을 클릭하면 상세로 들어가자.
보통은 VideoWatchList -> VideoWatchDetail 과 같이 목록에서 상세로 가는데
Home 화면에 목록이 나오므로 VideoWatch화면을 상세로 사용하자.
그러기 위해서는 목록에서 값을 상세로 넘겨줘야하는데...
일단 화면의 링크를 클릭해봤는데 video watch화면이 나오네?? 흠...
src/route/index.js
path에 id를 받을 수 있게 :id 를 추가하고, params: true 로
url에 id가 넘어올 것이므로
VideoWatch.vue 에서 id를 이용해 store의 state 안에 있는 videos 에서 id로 값을 가져오게 한다.
computed에서 video라는 function을 정의하고
this.$store.state 로 state값에 접근하여 videos를 찾는다.
이때 this.$route.params.id 를 Number()로 감싸서 숫자로 바꾸어 주는데
이유는 videos 에 id 가 숫자로 되어있기 때문이다.
Number()로 감싸지 않으면 숫자와 문자를 비교하게 되어 return되는 값이 없다.
id를 '1' 과 같이 문자로 처리하면 Number()로 감싸줄 필요 없다.
결과는 this.$route.params.id 를 넘겨서 state.videos 에서 id에 해당하는 값을 가져왔다.
참고1.
console.log(this.$store.state.videos) 를 찍었을 때
data가 Proxy 아래로 나타나게 되는데 이것은 상관하지 않아도 된다.
똑같이 array며 표현만 저렇게 된 것임.
참고2
store/index.js 에 videos 를 선언한 것은 vuex 3.x 형 표현이다.
vuex 4.x 로 하면 형태가 조금 다른데 3.x 대 형태도 문제없이 동작한다.
Youtube 강좌 따라하기 : https://youtu.be/vaCrzaeC-RE
-- vue cli 와 npm 설치(업데이트)
npm i -g @vue/cli
npm install -g npm
vue create 프로젝트 이름
vue create screencast_1
(첫번째 default 로 설정한 프로젝트의 실패로... _1 이 붙었다.)
- vuex, vue-router만 추가했다.
프로젝트를 설정하면
src/views/Home.vue
src/views/About.vue
src/views/components/HelloWorld.vue
components 폴더에 있는 vue는 재사용하는 것들이고
views 폴더에 있는것을 화면단위이다.
이제부터 시작.
src/views/VideoWatch.vue 파일을 만든다.
route/index.js 파일을 수정한다.
import 시키고
routes 에 내용추가해서 경로를 입력한다.
http://localhost:8080/video
|
