지속가능한 개발 노트:)

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 인스턴스를..

💫 GSAP 이란? GSAP은 이미 많은 사용자를 보여하고 있는 자바스크립트 애니메이션 라이브러리입니다. 보통 CSS 혹은 제이쿼리 등을 이용하여 애니메이션 효과를 구현하지만, 보다 복잡하고 화려한 애니메이션을 구현하기에 어려운 부분이 있기에 GSAP을 이용한다고 합니다!! GSAP도 간단한 애니메이션을 구현하는 것은 사용법이 매우 간단하지만, 복잡한 애니메이션을 구현하게 될 때는 사용법이 무척 어렵고 헷갈려집니다;; 허허 그리하여 저도 이참에 기본부터 시작해서 기깔나는 애니메이션을 구현할 수 있도록 GSAP 정복을 해보려고 하니 함께 하시죠!!!ㅎㅎㅎㅎ 우선 셋팅부터 해야겠지요? 설치(Installation) GSAP 공홈에서는 zip파일로 다운로드, NPM, CDN, GITHUB 등 다양한 이용방법을..

📕문제 설명 약수의 개수가 세 개 이상인 수를 합성수라고 합니다. 자연수 n이 매개변수로 주어질 때 n이하의 합성수의 개수 를 return하도록 solution 함수를 완성해주세요. 📗제한사항 1 ≤ n ≤ 100 📘입출력 예와 설명 n result 설명 10 5 10이하 합성수는 4,6,6,9,10 로 5개입니다. 따라서 5를 return합니다. 15 8 15이하 합성수는 4,6,8,9,10,12,14,15 로 8개입니다. 따라서 8을 return합니다. 📙풀이 function solution(n) { var answer = 0; for(let i = 1; i

반복문 안에 반복문!! 반복될수록 은근히 헷갈리는 녀석! 오늘 제대로 알아보렵니다:) 💫 중첩 반복문 중첩 반복문은 반복문 안에 새로운 반복문이 들어가는 것을 말합니다. 중첩의 횟수도 제한이 없습니다! 그리고 for문, while문 어떤 반복문도 중첩이 가능합니다. 중첩 for문 for(begin1; condition1; step1){ // 외부 반복문 for(begin2; condition2; step2){ // 내부 반복문 반복할 명령문! } } 반복문 안에 작성되어 있는 반복문을 내부 반복문, 내부 반복문을 감싸고 있는 반복문을 외부 반복문이라고 합니다. 내부 반복문의 루프가 끝나면 외부 반복문이 증가 또는 감소하는 식으로 반복동작합니다. 예시를 통해 더욱 자세히 이해해보겠습니다. for( i=0;..

📕문제 설명 i 팩토리얼(i!)은 1부터 i까지 정수의 곱을 의미합니다. 예를들어 5! = 5 x 4 x 3 x 2 x 1 =120입니다. 정수 n이 주어질 때 다음 조건을 만족하는 가장 큰 수 i를 return 하도록 solution 함수를 완성해주세요. 📗제한사항 0

📕 문제 설명 머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box 와 주사위 모서리의 길이 정수 n 이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. 📗제한사항 box의 길이는 3입니다. box[0] = 상자의 가로 길이 box[1] = 상자의 세로 길이 box[2] = 상자의 높이 길이 1 ≤ box의 원소 ≤ 100 1 ≤ n ≤ 50 n ≤ box의 원소 주사위는 상자와 평행하게 넣습니다. 📘 입출력 예와 설명 box n result 설명 [1, 1, 1] 1 1 상자의 크기가 가로1, 세로1, 높이1..