728x90
반응형
 포스팅 썸네일 이미지

React

[React] 서비스워커 ServiceWorker와 PWA란? (feat. skipWaiting,workbox,pwa,nextjs)

이번 프로젝트에서는 PWA를 이용해서 앱처럼 보이는 효과를 적용하다가 ServiceWorker라는 개념을 몰라 정리해보았습니다. (PWA를 활용하면 사파리등 웹에서 볼 수 있는 페이지를 홈 화면에 추가한 후 어플처럼 볼 수 있습니다.) Google의 Workbox는 자산을 쉽게 캐시하고 프로그레시브 웹 앱 (PWA)을 빌드하는 데 사용되는 기능을 최대한 활용할 수 있도록 하는 라이브러리 및 node module 세트입니다. 서비스 워커(Service Worker)는 브라우저가 백그라운드에서 실행하는 스크립트입니다. 웹 페이지와 별개로 생명주기를 갖고 동작합니다. 서비스 워커는 오프라인(offline)에서 웹페이지를 사용자에게 보여주기 위해 만들어졌습니다. 서비스 워커의 장점 1. 브라우저에서 파일을 캐시..

2022.04.25 게시됨

 포스팅 썸네일 이미지

AWS

[AWS] Nextjs cloudfront S3 배포 시 html 확장자 제거 (feat. lambda 함수 이용)

이번 글은 Nextjs로 AWS에 베포를 진행하는 과정 중 발생하였다. 처음에는 모든 페이지들이 정상적으로 작동하는 듯 싶었으나, 역시 그럴일이 없었다. Nextjs는 동적 라우팅 즉, Dynamic Loute를 지원한다. ex) www.~~~.com/products/1 위의 링크처럼 동적 라우팅이 있는 폴더 구조가 있다고 생각해보자. 결국 folder struct는 products 폴더 안에 [id].tsx와 같은 파일이 존재할것이다. 여기까지는 아주 좋다. 이제 문제는 지금부터다. AWS의 CloudFront를 이용하여 배포를 진행하였을 때 해당 동적 페이지로 들어가면 아무 페이지가 뜨지 않는다. 해결 방법은 .html 확장자를 명시적으로 넣어주는것이다. 하지만 매 페이지 요청 시 www.~~~.co..

2022.04.08 게시됨

 포스팅 썸네일 이미지

React

[react query] stale이란? (feat, 캐싱,use query,fetch, react query에 대해 알아보)

React-Query의 캐싱개념은 stale과 cachetime을 통해 이루어진다 Stale과 cacheTime은 무엇인지 먼저 알아보자. | Stale 이란? react query는 기본적으로 캐싱된 data를 stale한 상태로 여긴다. stale의 사전적 의미는 "신선하지 않는"이라는 뜻을 가진다. 신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 이미 오래된 낡은 데이터가 되었으므로 stale하다고 말하는 것이다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다. refetch 되는 조건들을 확인해보자. 1. 새로운 query inst..

2022.03.20 게시됨

 포스팅 썸네일 이미지

AWS

[Terraform]테라폼 모듈(module) 작성 방법

Terraform Module 작성 방법 module은 root module과 child module 로 나누어집니다. root module : terraform 커맨드가 실행 되고 있는 module child module : root module에서 리소스를 생성하기 위해 참조하고 있는 module block child module 작성 방법 먼저 파일구조입니다. 테라폼은 디렉토리에 있는 모든 *.tf 파일들을 읽습니다. 테라폼 컨벤션으로 보통 위 사진과 같이 정의합니다. versions.tf : provider / module 의 버전 의존성 variables.tf : variable 관련 outputs.tf : output 관련 main.tf : resources/data/module/local ..

2022.03.03 게시됨

 포스팅 썸네일 이미지

AWS

[Terraform]테라폼(terraform)state 관리(local,terraform cloud,s3)

이번 포스팅에서는 테라폼 상태(state)관리에 대해 알아보겠습니다. | 테라폼 상태(Terraform state)란? 테라폼 state 관리는 대표적으로 Local state 와 backend state로 나누어집니다. terraform init & terraform apply 명령어를 실행하면 다음과 같은 파일들이 생성됩니다. 다음과 같은 파일들은 local에서 관리됩니다. .terraform .terraform.lock.hcl terraform.tfstate .terraform.* 형태의 파일 : terraform init 명령어를 실행할 때 생성 terraform.tfstate: terraform apply 명령어 실행 후 생성 .terraform.lock.hcl은 잠금 파일이며 경쟁 상태에서 생..

2022.03.02 게시됨

 포스팅 썸네일 이미지

AWS

[AWS]VPC Endpoint란?(feat.bastion(바스티온) 접속)

| VPC Endpoint를 알아보겠습니다. VPC 밖(인터넷을 통해)에서 들어오는 트래픽에는 과금이 되기 때문에 비용을 줄이기 위해 AWS 네트워크 안에서 통신할 수 있도록 하는 것이 좋습니다. VPC Endpoint는 EC2 인스턴스를 VPC 외부 서비스(AWS서비스 중 S3 등)와 private한 연결을 하기 위해 사용됩니다. 즉, AWS 서비스를 전용 연결할 수 있도록 해주죠. 따라서 어떤 트래픽도 AWS 네트워크에서 벗어나지 않기 때문에 비용을 절약할 수 있습니다. 이 경우 퍼블릭으로 해당 서비스를 노출하지 않더라도 연동할 수 있습니다. IGW, VPN, NAT, proxy 등 사용할 일이 전혀 없죠. 위 그림과 같이 private subnet이 존재할 때, 이 서브넷과 S3를 연결하고 싶다면,..

2022.02.28 게시됨

 포스팅 썸네일 이미지

AWS

[AWS]AWS 네트워크 구조(feat.VPC,Subnet,NACL,Security Group,Router)

VPC에 대해 알아보겠습니다. VPC 적용 전 VPC가 없다면 EC2 인스턴스들이 서로 거미줄처럼 연결되고 인터넷과 연결됩니다. 이 구조의 단점은 하나의 변경사항 OR 추가만 되도 모든 인스턴스를 수정해야하는 불상사하 펼쳐집니다. VPC 적용 후 보기만 해도 깔끔하죠? VPC를 적용하면 위 그림과 같이 VPC 별로 네트워크를 구성할 수 있고 각각의 VPC에 따라 다르게 네트워크 설정을 줄 수 있습니다. VPC를 구축하는 과정 네트워크에서 해당 VPC를 설정합니다. 계정을 만들고 EC2 생성을 하면 하나의 리전에서 만들어지는 기본 리소스는 7가지가 있습니다. | VPC(Virtual Private Cloud)란? - 2019년부터 모든 사용자들에게 VPC 적용이 강제적으로 부여됐기 때문에, 대부분의 서비..

2022.02.25 게시됨

728x90
반응형