지속가능한 개발 노트:)

javascript 런타임 환경에 대해 명확히 정리해보자! ✨ 런타임 환경? Runtime Environments?? 정말 많이 들어봤지만 들을 때마다 왠지 모르게 거리감이 느껴지는.... 간단한 단어임에도 뭔가 스스로를 주늑들게 만드는 힘이 있는 단어랄까....ㅎㅎ 알튼 런타임 환경이란 무엇일까? 런타임 환경은 프로그램이 실행되는 곳이다. 이 환경은 프로그램이 접근할 수 있는 전역 객체를 결정하고, 실행 방법에도 영향을 준다. 대표적인 javascript 런타임 환경으로는 크롬과 같은 브라우저 런타임 환경, 노드 런타임 환경이 있다. ✨ 브라우저의 런타임 환경 우리에게 매우 친근한 브라우저는 javascript 코드가 실행되는 가장 일반적인 환경이다. 웹 사이트 위와 같이 작성한 HTML을 브라우저에서..

React Portal에 대해서 자세히 알아보고, 가장 유용하게 쓰이는 예시인 modal을 구현해보자!! ✨ React Portal이란? React 공식 문서에서 Portal을 사용하여 일부 하위 요소를 DOM의 다른 부분을 렌더링 할 수 있다고 설명한다. React Portal은 React 라이브러리에서 제공하는 기능 중 하나로, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 해준다. 1. 사용법 import 방법에 따라서 작성하는 법이 약간 다르다. Default Import와 Named Import 차이이지만, 가끔 사소한 실수로 작동이 안될 수 있으니 기억해두자. import ReactDom from "react-dom" ReactDom.createPortal(childre..

개인 블로그를 제작하여 S3와 Cloudfront로 배포하였다. 아주 무사히 잘 배포하였다고 생각했는데, 어느 날, 지인에게 블로그 글의 URL을 보내주려고 https://d301gw6ixi4s19.cloudfront.net/react-query/ 위와 같이 복사하여 보냈는데, 계속 해당글이 아닌 메인( https://d301gw6ixi4s19.cloudfront.net)으로 이동한다. 빠르게 해결해보자!! ❓원인 원인이 무엇일까? 배포가 안되고 있는 것은 아닐까? 의심해보았다. S3를 확인해보니 매우 잘 배포가 되고 있었다. 해당 게시물 폴더 안으로 들어가보니, 원인을 알 것 같았다. 각 포스트는 폴더 안에 index.html로 되어있다. 브라우저는 사용자 경험을 향상시키기 위해 index.html을 ..

AWS VPC와 서브넷 설정을 해보자! AWS 계정을 처음 생성하면 루트유저와 기본 리소스(기본 VPC) 등이 생성된다. 오늘 해볼 것은 아래 도식과 같은 형태의 설정을 완료하는 것이다. ✨ VPC 만들고 설정 확인하기 AWS 계정을 만들고 나면 아래와 같이 기본 VPC가 있다. 오늘은 기본 VPC를 사용하는 것이 아닌 새롭게 VPC를 생성할 것이다. 생성해보자! 생성할 리소스 부분에 "VPC 등"을 체크하면 라우팅 테이블, IGW 등이 알아서 생성된다. 하지만 학습을 위해 "VPC만"으로 생성해서 라우팅 테이블, IGW 등을 직접 연결해줄 것이다. 이름을 작성하고, IPv4 CIDR는 VPC를 생성할 수 있는 가장 큰 대역인 /16로 설정해주었다. 다행히 어렵지 않게 VPC 생성 완료!! 🎉 ✨ Sub..

GSAP은 Tween 및 Timelines를 만들고 이를 제어하는 다양한 메서드와 속성을 가진 객체(object)입니다. 그렇다면 Tween과 Timelines는 무엇인가?! 오늘은 먼저 Tween에 대해서 알아보겠습니다!! 💫 Tween Tween은 애니메이션의 속성을 정의하고, 그 속성대로 애니메이션이 작동하게 하는 것을 말합니다. target, duration 등 작성된 속성을 토대로 Tween이 작동하면서 해당 시점의 속성 값이 무엇이어야 하는지를 파악하여 이에 따라 적용합니다. (영문을 해석하다 보니... 매끄럽게 이해하시기 어렵다면... 죄송합니다...허허) Tween을 생성하기 위한 기본 메소드는 .to(), .from(), .fromTo()가 있습니다.3가지의 메소드는 Tween 인스턴스를..