[TIL] 2022-04-21

0. SE Project

[배포] AWS와 github action을 이용해 배포 자동화 하기 🔗

• 객체: s3에 저장된 파일

• 버킷: 연관된 객체들을 그룹핑한 최상위 디렉토리, 버킷에 포함된 모든 객체에 대해서 일괄적으로 인증과 접속 제한을 걸 수 있다.

• GitHub Action: Workflow를 기반으로 동작하며, build, test, package, release, deploy 등 다양한 이벤트를 기반으로 사용자는 직접 원하는 workflow를 만들 수 있다.

1. npm/yarn을 통해 배포할 프로젝트 build

2. S3에서 bucket을 생성해 index.html 파일을 배포

3. GitHub action workflow 생성

4. 특정 이벤트(우리는 main branch에 puhs)에 의해 배포 프로세스 trigger 설정

AWS - S3, CloudFront, Route53을 이용한 정적 호스팅 🔗

• S3: 저렴한 비용으로 정적 호스팅을 할 수 있다

• CloudeFront: S3에서 제공하지 않는 HTTPS 배포를 가능하게 만들어 준다, 전 세계에 있는 엣지 포인트를 이용해 캐싱처리를 하여 사용자가 가장 가까운 지역의 엣지 포인트로 접속하게 하여 S3보다 더 빠른 속도를 제공하고 저렴한 비용을 지불하도록 도와준다.

AWS EC2(Amazon Elastic Compute Cloud) 🔗

• 인스턴스: AWS에 있는 컴퓨터를 한 대 빌려서 사용하는 것 (가상 컴퓨터)

아파치, NginX, 톰캣이 뭔가요? (+ 웹서버, WAS, 로드밸런싱, 프록시) 🔗

• Web Server: NginX, Apache 등이 대표적인 웹서버

---

1. FE theory

js async/defer

<script> : Dom을 따라 반드시 순서대로 실행되어야 할때

<script async> : Dom이나 다른 스크립트에 의존성이 없고, 실행 순서가 중요하지 않은 경우

• async 스크립트는 DOM 렌더 과정을 방해하지 않도록 병렬로 로드합니다.

<script defer> : Dom이나 다른 스크립트에 의존성이 있고, 실행 순서가 중요한 경우

• defer스크립트는 모든 DOM이 로드된 후에야 실행됩니다, 선언한대로 실행 순서가 보장됩니다.
• DOM 생성이 완료된 이후, 실행되어야 할 자바스크립트에 유용

---

2. Live Academy

• "I wish I could" & "I hope I can" - 중요한 구분 🔗복습

• "~을 잘 활용하다 / 써먹다" - 영어 표현력 업그레이드 - 구동사 2개
  🔗진도

---

3. Full Stack

• React로 NodeBird SNS 만들기 🔗

  • 게시글 제거 / 닉네임 변경 [🔗]https://minbr0ther.notion.site/b397f4bd84e74fea8f78642348eb94d8

---

⏱ Total study time - 9 hours 40 minutes