📌배경사내 여러 프로젝트에서 UI 컴포넌트들을 pkg로 말게 되었는데 ... 당연하게도 pkg로 배포하게 된 이유는 `생산성`에 있다. 정해진 컴포넌트들을 그대로 가져다가 쓰면 프로젝트를 진행하면서 미리 구축된 컴포넌트를 쓸 수 있으니 작업속도가 폭발적으로 증가할거라는 기대였다. 📌과정프로젝트 세팅부터 라이브러리 선정, 그리고 컴포넌트 개발까지 모든 과정을 거의 혼자 진행했다. 별도의 라이브러리 없이 컴포넌트 개발을 진행하는 것은 작업속도와 안정성 측면에서 굉장히 비효율적이라 생각하여 shadcn ui ( radix-primitive 기반 ) 를 적극 이용하였다. 동시에 스타일링은 `tailwind`를 이용하였다. css in js는 사실상 서버 컴포넌트에서는 지원을 하지 않기에 목록에서 뺏고 css..

📌Currying ( 커링 ) 수학과 컴퓨터 과학에서 커링(Currying)이란 다중 인수를 갖는 함수를 단일 인자를 받는 함수들의 함수열로 변환하는 것을 의미한다. 이해를 돕기위해 3개의 수를 입력받아 다 곱한 결과를 return 하는 3개의 인자를 필요로 하는데 단일인자를 갖는 함수들의 함수열로 표현해 보았다. function multiply(a) { return function (b) { return function (c) { return a * b * c; }; };}const result = multiply(2)(3)(4); // 2 * 3 * 4 =24console.log(result); //24📌커링을 이용해서 가져갈 수 있는 장점..

📌배경웹 성능을 높이는 데 있어 HTTP 캐시 전략은 굉장히 중요하다. 캐시를 잘못 설정하면 불필요한 요청이 발생하거나, 반대로 변경된 리소스를 사용하지 못해 사용자 경험을 해치는 일이 발생할 수 있다. 📌캐시의 생명주기 HTTP 캐시 전략에서 핵심은 리소스의 유효 기간을 얼마나, 어떤 조건으로 설정할지를 결정하는 것이다. 대표적인 설정값은 다음과 같다.max-age=: 캐시 유효 시간, 이 시간 동안은 서버에 요청하지 않고 캐시 사용no-cache: 캐시를 저장하지만, 사용할 때마다 서버에 재검증 요청을 보냄no-store: 캐시를 저장하지 않음. 로그인 정보나 민감한 리소스에 적합함로컬에서 간단하게 express 서버로 `./public/script.js` 를 1시간 ( max-age=3600 )..

📌배경JWT는 웹 개발에서 인증방식으로 많이 사용하는 방식으로 웹 개발자라면 해당 토큰에 대해 알고 있어야 한다. 중요한 사항인 만큼 포스팅으로 한번 정리하는 시간을 가지려고 한다. 📌구조JWT는 Header, Payload, Signature 로 구성되어 있고 각 영역마다 특정내용이 담겨있다. token은 보통 아래와 같이 생겼으며 각영역은 . (맞침표) 로 구분되어 있다. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c정확히는 jwt는 header, payload, s..

✅배경프론트엔드 개발을 하다 아래와 같은 경우를 볼 수 있다.분명히 0.1+0.2는 0.3이어야 되는데 0.3000000... 4 인 이유가 뭘까? 그 이유는 자바스크립트는 IEEE754 64비트 `부동소수점` 방식으로 저장 되기 때문이다💡자바스크립트의 숫자 표현방식자바스크립트에서 모든 숫자는 내부적으로 IEEE754 64비트 부동소수점 방식으로 저장된다. 이 방식은 어떤 수를 저장하기 위해 64비트를 쓰며 항상 수를 1.??? * 2^n 형태로 인식하고 ???는 가수부, n부분은 지수부로 보고 각각 11비트, 52비트를 이용하여 표현한다. 추가로 1비트는 양수/음수를 구분하기 위해 사용한다.부호부: 1비트 사용, 양수/음수 구분 (0:양수, 1:음수)지수부: 11비트 사용, 2의 거듭제곱을 표현 ..

✅Event Bubbling프론트엔드 개발자라면 당연히 알아야 되는 개념 중 하나로 DOM 요소 중 하나에 특정 이벤트가 발생했을 때 해당 이벤트가 부모요소 쪽으로 계속 전파되는 현상을 의미한다. 해당 현상을 기본적으로 일어나는 현상 중 하나이며 버블링을 막기 위해선 별도의 작업이 필요하다 궁금해서 어디까지 전파될까 눈으로 확인해보고 싶어 아래와 같은 코드를 이용해서 확인해봤다. 버튼을 클릭 하고 콘솔창을 확인해보니 해당 클릭이벤트가 쭉쭉 올라가 document를 거쳐 window까지 전파 됨을 확인 할 수 있었다.// index.htmlbutton그렇다면 여기서 전파를 못하게 하려면 어떻게 해야할까? 간단하다 이벤트 전파가 멈추길 바라는 요소에 `e.stopPropagation()` 를 걸면된다. 이..

📌배경프론트엔드 개발자로 근무하다 보면 여러가지 이미지를 다뤄야 할 때가 있다. 대표적으로 많이 사용되는 이미지 포맷형식으로 JPG(JPEG), PNG, WEBP, GIF 가 있다. 물론 그 외에도 엄청 많긴하지만 대표적으로 사용되는 몇가지를 정리하려고 한다.📌JPG (JPEG)- joint photographic experts group 의 약자로 손실 압축 포맷이다.- 압축 손실 포맷이지만 크기가 작기 때문에 웹에서 널리 쓰인다.- 용량 대비 이미지 품질이 괜찮다. - 압축률을 높이면 파일 크기는 작아지지만 이미지 품질은 더욱 떨어진다. - 투명도는 지원 하지 않는다. 📌PNG - Portable Network Graphic 의 약자로 jpg보다 용량이 크지만 비손실 압축 방식으로 품질 저하가 ..

📌LRU 알고리즘LRU(Least Recently Used) 알고리즘은 가장 오랫동안 사용되지 않은 데이터를 제거하는 전략이다. 캐시 교체 방식으로 많이 쓰인다. 해당 알고리즘은 hash 와 double linked list 를 이용하여 구현할 수 있다. 📌실제로 구현해봤다.자바스크립트로 구현해봤다. hash table은 Map 객체를 이용했으며 Map에는 각 key에 대응되는 node가 저장되어 있다. ( 각 노드의 prev, next 는 이전,다음 노드를 카리킨다 ) // LRU cache 교체 알고리즘 구현 (has table + double linked list이용 )class Node { constructor(key, value) { this.key = key; ..

📌Stacking Context ( 쌓임 맥락 ) 이해하기웹 개발을 하다 보면, 분명 `z-index`를 올렸는데도 요소가 가려지는 경우가 있다. "왜 애가 위에 안올라가지?" 이럴 때 등장하는 개념이 바로 Stacking Context ( 쌓임 맥락 ) 이다. 📌쌓임 맥락이란?쌓임 맥락은 브라우저가 요소들의 쌓는 순서를 관리하는 독립적인 영역이다. 같은 맥락에 있는 요소들끼리는 `z-index`로 순서를 조절할 수 있지만, 다른 쌓임 맥락에 있는 요소들은 서로 영향을 주지 못한다.📌쌓임 맥락이 만들어지는 조건 쌓임 맥락은, 문서 어디에서나, 다음 조건을 만족하는 요소가 생성한다. 문서의 루트 요소. () `position`이 `absolute`또는 `relative`이고 `z-index`가 `au..

🧩`useOptimistic``useOptimistic` 는 낙관적(optimistically)으로 UI를 업데이트 할 수 있도록 하는 React Hook 이다.  const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);🧩레퍼런스`useOptimistic(state, updateFn)``useOptimistic`은 aysnc action 이 진행되는 동안 다른 state를 보여준다. 이 말을 예시를 들어 설명하면 이렇다. 만약 우리가 인스타그램을 하다가 좋아요 버튼을 클릭한다고 가정하면 유저가 그 게시물에대해 좋아요를 했다는 정보를 서버에 저장하기 위해서 서버에 http request를 하고 서버에서 해당 작업을 완료한 뒤 서..