etc.
1.[Etc] Vercel로 React 프로젝트 배포하기
Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 자동화할 수 있게 빌드,배포,호스팅 서비스를 제공하는 호스팅 사이트이다. 비슷한 서비스로는 Netlify가 있다.❗Vercel은 GitHub, GitLab, Bitbucket 등의 버전 관리 시스템과 연동하
2.[etc] PT.1 - React 프로젝트 이미지 성능 최적화 시키기 (온디맨드 이미지 리사이징)
이미지 리사이징 처리를 해줘야 하는 이유. 사이트가 크고 사용하는 이미지가 많을 때, 이 이미지를 원본크기 그대로 가져와서 이미지 리사이징을 처리하면 처리가 오래 걸려서 로딩 시간이 길어진다. 또한 이미지를 생성하고 삭제하면서 이미지 작업에 따른 비용도 늘어나게 된다.
3.[etc] PT.2 - React 프로젝트 이미지 성능 최적화 시키기 (AWS lambda@edge, cloudfront, S3)
앞서 온디맨드 이미지 리사이징의 작동순서에 대해서 설명을 했는데 그 안에서 사용되는 AWS 서비스인 lambda@edge, cloudfront, S3가 각자 어떤 역할을 하는지에 대해서 밑에서 설명해 보겠습니다.Lambda@Edge는 Amazon CloudFront의
4.[etc] PT.3 - React 프로젝트 이미지 성능 최적화 시키기 (AWS lambda@edge, cloudfront, S3 설정하기)
AWS Identity and Access Management(IAM)은 AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스이다. IAM을 사용하면 사용자가 액세스할 수 있는 AWS 리소스를 제어하는 권한을 중앙에서 관리할 수 있다. IAM을 사용하여 리
5.[etc] PT.4 - React 프로젝트 이미지 성능 최적화 시키기 (React 프로젝트에 적용하기.)
npm i @aws-sdk/client-s3 설치.s3ClientConfig: 이 객체는 AWS S3 클라이언트를 구성하는 데 사용된다. S3 클라이언트 설정을 정의하고, AWS 리전과 인증 자격 증명 정보를 설정한다.region: S3 버킷이 위치한 AWS 리전을 설
6.[etc] 디자인 시스템이란?
❓ 디자인 시스템이란? '디자인 시스템'이란, 디지털 프로덕트의 디자인 및 앱이나 웹사이트와 같은 제품의 개발을 돕기 위해 일관된 디자인 원칙과 이를 이용한 패턴, 공유 방식의 집합이다. 그래서 디자인 시스템은 다양한 페이지와 채널을 걸쳐 공통의 언어와 시각적 일관성
7.[etc] AWS S3 + Cloudfront + Route53 배포
그동안에는 프로젝트를 끝내면 자동 배포 시스템인 netflify나 vercel을 사용해서 배포했는데, AWS사용에 익숙해질겸 이번에는 AWS의 S3와 cloudfront를 사용해서 배포를 해보았다. 💻 배포 과정 ➡️ IAM 사용자 생성 IAM이란? AWS I
8.[etc] CI/CD란?
CI/CD란?
9.[etc] GitHub Actions로 CI/CD 자동화 하기
AWS의 S3와 cloudfront, Route53을 통해서 프로젝트 배포를 완료 했는데, 문제는 정적 웹 사이트를 호스팅하고 배포하기 위한 플랫폼인 netflify나 vercel처럼 코드를 수정하면 자동으로 배포되지 않는다는 점이다. 그래서 따로 자동 배포화 작업을