전체 글33 프론트엔드 배포하기 - (2) CloudFront가 뭔데? (feat. React + S3 + CloudFront + Route 53) CDN(Content Delivery Network)이 뭐길래 사용하는 걸까? 최근 프론트엔드 개발자라면 한번쯤은 CDN(Content Delivery Network)에 대해서 들어봤을 겁니다. AWS에서는 CDN을 "콘텐츠 전송 네트워크(CDN)로서 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크"라고 설명하고 있습니다. 좀 더 쉽게 말하자면 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 합니다. 이때 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸립니다. 이때 CDN를 사용하면 웹 사이트 콘텐츠가 지리적으로.. 2024. 10. 8. 프론트엔드 배포하기 - (1) 그래서 S3가 뭔데요? (feat. React + S3 + CloudFront + Route 53) 이번에 진행하고 있는 책잇(Checkit) 프로젝트를 배포하는 과정에서 알게 된 개념들을 정리해 보는 시간을 갖겠습니다.이번 글에서 중점적으로 다룰 부분은 각각의 개념과 용도입니다! 이미 많은 블로그에서 사진과 함께 어떤 순서로 무엇을 누르면 배포에 성공할 수 있는지에 대해서는 아주 상세하게 설명을 하고 있지만 그렇게 설정하는 것들이 정확히 어떤 것들인지는 알기 어려운 글들이 많았습니다. 그래서 이번 기회에 직접 각각의 개념과 왜 다들 S3 + CloudFront + Route 53 이 조합을 세트처럼 사용하고 있는지 한번 자세히 정리해 봐도 좋을 것 같다는 생각을 해서 이번 글을 작성하게 되었습니다! 🥸 S3 버킷 만들라고 해서 만들긴 했는데 이게 뭐지?처음 아마존 AWS로 배포를 해야겠다고 정한 후.. 2024. 10. 1. 무한 스크롤(Infinite scroll) 구현하기(1) - IntersectionObserver API 대량의 컨텐츠를 이용자에게 보여줄 수 있는 가장 대표적인 방법에는 무한 스크롤과 페이지네이션이 있습니다.그 중 오늘은 무한 스크롤에 대해서 알아보고 내가 실제로 IntersectionObserver를 이용하여 무한 스크롤을 어떻게 구현했는지 정리해보겠습니다. 🧐 무한 스크롤(Infinite scroll)이란?무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식입니다.한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있습니다.핀터레스트나 크롬에서 이미지를 볼 때 무한 스크롤 방식이 사용된 것으로 이해하면 됩니다. 🧐 왜 페이지네이션이 아니라 무한 스크롤을 구현했나?우선 제가 무한 스크롤을 적.. 2024. 9. 10. [Chap 22] this 22.1 this 키워드객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적 단위로 묶은 복합적 자료구조 의미- 이때 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티 참조 및 변경할 수 있어야 함- 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함 ( 1 ) 객체 리터럴└ getDiameter 메서드 내에서 메서드 자신이 속한 객체를 가리키는 식별자 circle 참조함└ 이 참조 표현식은 getDiameter 메서드가 호출되어 함수 몸체가 실행되는 시점에 평가됨└ 위 예제의 객체 리터럴은 circle 변수에 할당되기 직전에 평가됨└ 때문에 getDiameter 메서드 호출 시점에 이미 객체 리터럴의 평가가 완료되어 객체가.. 2024. 6. 19. 이전 1 2 3 4 ··· 9 다음
