본문 바로가기

개발

 (34)
[AWS] AWS CDK 시작하기 (1) | Javascript, AWS Configure, CDK Init, CDK deploy, lambda, api gateway 📄 목차 1. AWS & CDK 설정 AWS Configure 기존에 aws configure를 통해 AWS와 로컬이 연결되어 있다면 건너뛰어도 됩니다. aws configure list AWS의 IAM에서 키페어(AWS Access Key, AWS Secret Access Key) 발급 참고) 키페어 발급 https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/cli-configure-quickstart.html#cli-configure-quickstart-creds terminal에서 aws configure 커맨드를 통해 aws 계정 연결 $ aws configure AWS Access Key ID: [aws 에서 IAM생성하여 입력] AWS Secret ..
Vue 시작하기 (4) | Github actions + S3로 배포 자동화 📄 목차 1. Amazon IAM 생성 1. 사용자 이름, 자격증명 유형 선택 2. 권한 설정 나머지는 다음 다음 눌러서 넘겨주시면 됩니다. 사용자 추가가 완료되면 키가 포함된 csv를 다운로드 할 수 있습니다. 2. github secrets 세팅 깃헙 프로젝트를 새로 생성하여 작업한 vue 프로젝트를 업로드 합니다. Settings탭 > secrets > actions > New repository secret 아까 S3에서 생성한 key id와 secret을 각각 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY 이름으로 등록합니다. 3. github workflows정의 프로젝트의 루트 디렉토리에 .github/workflows 폴더를 만들고 하위에 deploy.yml 파일..
Vue 시작하기 (3)| 프로젝트 빌드, S3로 배포 📄 목차 Vue 프로젝트는 Amazon S3를 활용해서 간단하게 무료로 배포할 수 있습니다. 이번 글에서는 Amazon S3 를 통한 프로젝트 배포 방법을 설명하겠습니다. 1. S3 버킷 만들기 S3에서 배포를 위한 새로운 버킷을 만들어줍니다. 여기에 vue를 빌드한 정적 파일을 업로드하여 호스팅을 할 예정입니다. 2. 버킷의 퍼블릭 접근 허용 버킷 > 권한 탭에 가서 버킷 정책을 public read 허용으로 편집해줍니다. { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicRead", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject", "s3:GetObjectVersion" ], "Re..
Vue 시작하기 (2) | Firebase 프로젝트 생성, FireStore권한 전체허용, Vue에서 FireStore데이터 불러오기 📄 목차 1편에서 만들 Form input을 저장소와 연결해야 하는데요, 이번 글에서는 데이터를 저장할 저장소를 만들어 vue와 연결하겠습니다. 서버를 따로 만들기는 번거로우니 Firebase를 활용하겠습니다. 1. Firebase 프로젝트 생성 프로젝트 이름을 지정하고 google analytics계정을 연결해줍니다. 프로젝트 생성이 완료되면 콘솔로 이동하는데요, 앱 추가 > Web을 선택하면, npm방식으로 web에 연결하는 방법과 apikey등이 나옵니다. 이 key값들을 잘 복사해두세요. vue코드 안에 삽입해주어야 하는 값입니다. 2. Firebase에 데이터 생성 Firebase의 데이터를 vue프로젝트와 연결해보겠습니다. 데이터베이스만들기를 클릭하여 새로운 데이터베이스를 하나 만들어주세요. ..
Vue 시작하기 (1) | vue create, vuetify, form input 1. Vue Create로 프로젝트 생성 Vue 기본 프로젝트를 하나 생성합니다. vue create (프로젝트명) cd (프로젝트명) npm i npm run serve vue create시의 옵션은 아래와 같이 설정했습니다. [Vue 2] dart-sass, babel, typescript, pwa, router, vuex 2. Vuetify추가 vue add vuetify 명령어 입력 후 localhost:8080에 접속해보면, vuetify 디자인이 적용된 화면을 확인할 수 있습니다. 3. Vuetify 컴포넌트 사용해보기 vuetify 공식 페이지에서 버튼 컴포넌트를 하나 가져와 사용해보겠습니다. https://vuetifyjs.com/en/components/buttons/#usage Butt..
AWS 솔루션 아키텍트 AWS-SAA(C02) 공부방법/합격후기 01. 왜 AWS SAA 공부를 시작했나? 나는 작년까지는 아키텍쳐나 CI/CD쪽 업무를 볼 일이 거의 없었다. 아키와 CI/CD가 다 잡힌 상태에서 개발을 하는게 주요 업무였고, 네트워크상에 문제가 있다거나 젠킨스 빌드에 오류가 난다거나 하면 담당자분이 해결해주셨다. 이 시험을 준비하기 전 나의 AWS에 대한 이해도는..EC2 인스턴스 몇 개 만들어본 정도.. VPC나 Subnet등 네트워크 기본 개념도 '들어만 봤다'정도였다. (단적으로 Private subnet과 Public subnet이 뭐가 다른지 몰랐다...) 팀을 바꾼 후에는 서비스 구조가 좀 더 복잡해지고 아키텍쳐만을 봐주시는 분이 따로 계시지 않았기에, AWS 서비스에 대한 이해도를 높이고 싶었고, 꼭 업무적으로가 아니더라도 기본적으로 ..
AWS 솔루션 아키텍트 AWS-SAA(C02) 시험공부 (팁 & 주요 개념) 💡 TIPS Windows server -> FSx 인스턴스끼리 전송속도 향상 -> Placement Group secure network connectivity -> Site to Site VPN ~~TB의 데이터를 초기에 전송해야 함 -> Snowball 전 세계 유저에게 빠른 접근 제공 -> CloudFront 특정 국가에서의 접근을 막고자 함 -> CloudFront Geo restriction 용량을 자유롭게 바꾸고 여러 인스턴스에서 접근 -> EFS File system 초당 수십만개의 트랜젝션을 처리할 block storage -> EC2 instance store Key-value request -> Dynamo DB API gateway + 예측 불가능한 요청 패턴 -> Lambda 인스..
tmux : centos에서 화면 분할하기 - 설치, 사용, pane/session/window centos환경에서 작업하다보면, 크롬탭처럼 화면을 여러개 띄우고 싶을 때가 있습니다. ex) 다른 유저로 두개의 작업을 해야할 때, 한쪽은 작업을 실행하고 다른쪽에서는 실시간 로그를 확인할 때 이럴 때 사용할 수 있는 tmux에 대해 알아보겠습니다. tmux에는 pane(화면분할)/ window(탭 분할)/ session(창 분할) 의 개념이 있지만 아마 화면분할을 위해 사용하려는 경우가 많을 것 같습니다. 00. 자주 쓰는 명령어 💡 이거 보러 들어오신 분들을 위해 위로 올렸습니다 tmux new -s [세션명] // tmux시작 (ctrl) + b + % // 가로 분할 (ctrl) + b + " // 세로분할 (ctrl) + b + (방향키) // 분할 내 이동 (ctrl) + b + d // 세..

티스토리툴바