AWS/Docker 클라우드 패스트캠퍼스 챌린지 26일차

[Front-end 화면개발 1,2]

 layout과 footer를 디자인된 사이트에서 필요한 코드를 가져다가 넣는다. Material Design Lite에서 가능하다. TAB을 2개 만든다. TAB1에는 FORM을 만든다. 먼저 GRID를 잡고 CARD 내용을 넣는다. mdl-layout-spacer를 통해 가운데 정렬을 할 수 있다. 가운데 정렬 된 곳에서 FORM을 작성한다. 새롭게 css 파일을 만들어서 <style></style>에 있었던 내용들을 모두 옮겨준다. Text를 입력할 수 있도록 Text관련 input="text"를 넣어주어야 한다. 사용자 아이디, 사용자 이름, 회사 이름, 전화번호, 등을 추가한다. GET STARTED라고 text를 만들어두었던 곳은 <button></button> 태그를 이용해서 submit으로 신청할 수 있도록 한다. 

 

 TAB2에는 신청한 목록을 확인할 수 있는 리스트를 만들기 위해 li를 이용한다. Lists를 이용해서 3line li을 이용한다. cdn dialog-polyfill을 이용해 head에 llink에 추가하여 css를 꾸밀 수 있도록 한다. 또한 jquery를 넣어서 ajax 응답을 사용할 수 있또록 한다. DIALOG WITH FULL WIDTH ACTIONS의 body 태그 안에 있는 내용만 가져오면 버튼을 누르는 변화를 알 수 있도록 한다. 즉, 신청한 사람들의 정보를 TAB2에 등록하는 것이다. SHOW MODAL을 누르면, 모든 내용들을 볼 수 있도록 block, CANCEL을 누르면 모든 내용을 볼 수 없도록 disable을 해준다. 

 

 

[S3 소개 및 구축 1,2]

 실제 이미지를 S3에 업로드할 것이고, CloudFront를 이용한다. Amazon S3는 일반적인 파일시스템과 다르다. 아마존의 객체 스토리지를 알아야 한다. 포인트는 99.99%의 내구성을 가지고 있다.  Amazon의 s3에 접속한다. bucket을 생성한다. 객체들을 보관하는 최상위 구조이다. 무제한으로 적재가 가능하다. aws에서 계정당 100개라는 임계치가 존재한다. 특정 프로젝트별로 bucket을 생성해야 한다. 그래야 많은 프로젝트를 감당할 수 있다. s3는 global 서비스이며, region은 Seoul로 한다. bucket 이름은 global에서 unique해야 한다. 따라서, 내 버킷 이름이 없어도 버킷이름을 만들 수 없다는 문구가 나올 수 있다. 

 

 모든 퍼블릭 엑세스를 차단해야 다른 곳에서 버킷에 접근해서 사용할 수 있다. 버킷에 바로 사진을 업로드할 수 있는 버튼이 있다. 안에 개별적으로 폴더를 만들 수 있다. flat한 특성이 있는것이 특징이다. 기본적으로 파일시스템을 디렉터리를 생성하고 접근, 빠져나오는 계층구조이다. 하지만 aws cli에서 aws api를 살펴보면, 사용방법들이 나와있는데, 디렉터리에 사진을 넣어도 계층구조로 접근하지 않는다. 무제한으로 depth에 영향을 받지 않으므로 적재가 가능하다.

 

 /category/imgs/big/ 이런식으로 경로를 세분화해서 분리해야 한다. 왜냐하면 파일시스템처럼 보이지만 동일경로 이기 때문에, 서로 다른 성격의 이미지나 파일을 구분하기 위해서는 세세하게 /를 사용해서 서로 구분해주는 규칙이 필요하다. 

 

 

필수 링크 확인

=> https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.