bfcache를 사용하면, 브라우저 속도 최적화를 할 수 있다 ! 👻

웹 페이지에서 링크를 클릭하거나 브라우저의 '뒤로' 버튼을 누를 때, 페이지가 빠르게 로드되는 것을 경험한 적이 있으신가요? 뒤로가기, 앞으로가기 성능의 최적화를 위해서 브라우저가 제공하는 캐싱 기능이 있는데, 이것이 바로 BFCache이다! 이번엔 BFCache가 무엇인지 알아보고, 어떻게 활용할 수 있는지에 대해서 스터디를 진행했다. 👍 ✨ BFCache(Back-Forward Cache)란?BFCache(Back-Forward Cache)는 사용자가 브라우저의 '앞으로', '뒤로' 버튼을 눌렀을 때 페이지 로딩 시간을 단축해주는 브라우저의 캐시 기능이다. 일반적으로 페이지를 새로 로드하면 서버와 데이터를 다시 주고받아야 하지만, BFCache를 사용하면 기존에 로드된 페이지가 메모리에 저장되어 있..

• format_list_bulleted 웹 개발
• · 2024. 11. 20.
• textsms

TextEncoder를 활용하여 텍스트 인코딩하기 (문자열 byte 계산하기 🎶)

새삼스럽지만 프로그래밍에서 데이터는 byte단위의 용량을 가진다.당연히 작성하는 코드의 String 데이터도 byte 단위의 용량을 가지는데, 그 용량은 다음과 같다. (UTF-8 기준)영어, 공백, 숫자, 특수문자 : 1byte한글 : 3bytes대부분의 이모지 ❤️ : 4 bytes가끔은 데이터를 바이트로 바꾸어 사용하거나, 작성된 텍스트가 몇 바이트인지 체크해야할 경우가 있을 수 있다.파일 입출력네트워크 전송바이트 크기 계산이럴 경우에는 Javascript 내장 객체 TextEncoder를 활용하여 손쉽게 바이트로 데이터를 다룰 수 있다 👍 const encoder = new TextEncoder();  간단한 예제를 통해서 문자열을 바이트로 변환해보자.const encoder = new Text..

• format_list_bulleted JavaScript
• · 2024. 11. 7.
• textsms

[typescript] Record를 사용하여 객체 Key 타입 설정하기 🍎

객체의 타입을 설정할 때 있었던 일이다. const winner = { "One": false, "Two": false, "Three": true,}; 이런 객체가 있다고 가정해보자. 객체의 Key값은 One, Two, Three만 될 수 있기에, 타입으로 제한해보자 👻 가장 처음 떠올릴 수 있는 방법은 다음과 같다! type KeyExample = "One" | "Two" | "Three";const winnerFail: { [key: KeyExample]: boolean } = { "One": false, "Two": false, "Three": true,} 이렇게 하면 될 것 같지만! 에러가 발생한다. 타입 에러에 따르면, 인덱스 시그니쳐 파라미터 타입은 liter..

• format_list_bulleted TypeScript
• · 2024. 11. 1.
• textsms

resize Event와 ResizeObserver 비교해보기 🙌

브라우저의 창 크기가 변화했을 때, 어떤 액션을 발생시키고 싶다면, 가장 먼저 떠올릴 코드는 다음과 같을 것이다.window.addEventListener('resize', () => { console.log('Window resized!');}); 바로 resize Event이다.위의 코드는 브라우저 창 사이즈 크기를 탐지한다.다만, 특정 DOM의 사이즈 변화는 탐지하지 않기에 개별 Element 사이즈 변화에 대응하지는 않는다. 때문에, 새로운 방법이 등장했는데 그것이 바로 ResizeObserver이다.ResizeObserver는 특정 Element의 크기 변화를 감지할 수 있다.따라서, 브라우저 창 크기 변화뿐만 아니라 특정 요소의 자체 크기가 변화할 때에도 어떠한 액션이 실행되도록 설정할 수 ..

• format_list_bulleted 웹 개발
• · 2024. 10. 18.
• textsms

node.js CLI 사용성 높이기 - 질문을 통해서 사용자가 옵션 값 선택하게 하기 - 프롬프트 CLI (with inquirer.js)

이전에 node.js 환경에서 CLI 라이브러리를 만드는 작업을 진행했었다. https://citron031.tistory.com/entry/commanderjs%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-js-CLI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B5%AC%ED%98%84-with-%EC%98%88%EC%A0%9C commander.js를 사용한 js CLI 라이브러리 구현 (with 예제)CLI 라이브러리를 구현하기 위해서는 여러 키워드들에 대해서 알아야 한다. - bin 등록 (package.json의 bin)- 커맨드를 통해 인자를 받기 위한 process.argv- shell 스크립트 작성등등... 위와 같이 CL..

• format_list_bulleted Node
• · 2024. 10. 5.
• textsms

타입스크립트에서 기존 코드로부터 타입을 가져오는 법 ReturnType, ComponentProps

타입스크립트를 잘 사용하기 위한 여러 유틸 타입이 있다. 그중에서도 이미 잘 사용중이던 함수를 사용한다면, ReturnType을 통해서 해당 함수의 반환값 타입을 쉽게 얻을 수 있다. ReturnType function getUser() { return { name: "Alice", age: 30, };} 이런 함수가 있을 때, 이 함수의 리턴값 타입을 재사용하고자 하는 경우를 생각해보자.interface getUserReturnValue { name: string; age: number;} 이렇게 타입을 직접 작성할 수도 있지만, 만약 getUser 함수의 리턴값이 바뀌는 작업이 일어나면 타입도 직접 바꿔줘야 한다.그리고 사람이 작성하는 코드이기에, 실수가 일어나기 더 쉬워보인다. 때..

• format_list_bulleted TypeScript
• · 2024. 9. 18.
• textsms