Partytown 사용하여 외부 스크립트 로딩 최적화 하기 왜 필요할까? 프로젝트에서 사용하는 외부 스크립트가 많아지면, 스크립트 로딩 시간이 길어지고 (해당 스크립트가 로딩하는 js 파일의 크기가 커질수록!), 이에 따라서 메인 스레드가 블로킹 되어 성능 측면으로 좋지 않다. 어떻게 해결할까? parytown 이라는 라이브러리는, 기존의 메인스레드에서 처리하던 외부스크립트 로딩을 웹 워커로 위임한다. 하지만 웹 워커는 window, document, localStorage와 같은 메이저한 api 에 접근이 불가능하다. 웹 워커가 뭔데? 자바스크립트는 싱글 스레드 기반으로 작동하고, 싱글 스레드로서의 단점을 보완하기 위해서 코드가 비동기로 실행된다. 하지만 비동기 실행이 계속 쌓이면, 모든 작업의 실행 속도가 느려진다. 이러한 문제를 해결하기 위해 나온 것이 웹 워커이다. 웹 워커는 멀티 스레드를 지원하고, 워커에서 작성된 스크립트는 메인 스레드에서 분리되어 독립된 스레드로 실행되…

1. 데이터 검증, 언제 얼마나 해야할까? 목적과 대상 사용자에 따라 구분하여 검증하기 브라우저 브라우저는 클라이언트의 영역 사용자의 경험이 중요한 영역 검증도 그에 따라서 부드럽게, 매끄럽게 잘 되어야 한다. 즉 검증은 오지 사용자의 경험을 낫게 하는데에 의의를 두어야 한다. 추후에 서버에서 에러를 일으킬 것을, 적절한 메시지와 타이밍에 미리 사용자에게 알려주어 더 나은 경험을 제공하는 것 따라서 서버쪽 검증에 완전히 의존적일 수 밖에 없다. 브라우저 단계에서 어떤 값이 실제로 유효할지에 대한 의의는 전혀 필ㅛ 없다. 데이터를 받는 서버 입장에서, 그 데이터가 적절한 클라이언트로부터 왔는지 검증할 방법이 없으므로. 즉, 서버 입장에서는 요청으로부터의 데이터를 단 하나도 신뢰할 수 없다. ref - https://elvanov.com/2414 2. RCP와 tRCP RCP 란? Remote Procedure Call 의 약자 하나의 컴퓨터에서 다른 컴퓨터로 함수를 호출하는 방법 전…

1. userAgent 사용자가 접속중인 브라우저 , OS, 버전 등의 정보를 담고 있다. 브라우저는 서버에 보내는 모든 요청에 userAgent 문자열이라고 부르는 자신의 정체성을 알리는 헤더를 싣어 보낸다. 이 문자열은 보통 브라우저 종류, 버전 번호, 호스트 운영체제를 포함한다. 클라이언트에서는 Javascript 의 속성을 통해서 userAgent 문자열에 접근 가능하다. 언제 사용할까? 웹 브라우저의 종류가 많고, 각각의 엔진을 사용하던 시절에는 각 브라우저별로 동일한 서비스를 제공하기 위해서 사용되었다. 하지만 현재 대부분의 브라우저들이 크롬/블링크 엔진을 사용하고 있기때문에 현재는 브라우저에 대한 정보보다는 접속한 컴퓨터 OS, 모바일 디바이스를 구분하는 역할로서 많이 쓰인다. 예를들어, 사내 서비스에서는 두가지 목적으로 사용한 경험이 있다. 사용자 접속 환경(모바일/데스크톱)에 대한 로그를 남기기 위해. 모바일 디바이스에서 접속 중인지 여부를 확인하기 위해 ref …

1. Meta tag - CSP 알아보기 요렇게 되어있는 메타태그의 역할은 뭘까?😯 http-equiv 어트리뷰트 : HTTP 와 동등을 의미하며, 웹 브라우저에게 해당 메타 태그의 Content 에 들어가는 내용이, HTTP 헤더와 동등한 Content임을 의미한다. 예를들어 로 설정할 경우, 브라우저에게 페이지를 30초마다 새로 고침하도록 요청하는 것과 동일하다. 또한 Content-Type이나, Content-Language, Content-Security-Policy와 같은 HTTP 헤더와 관련된 메타정보를 지정할 수 있다. 메타 정보란 ? 다른 데이터를 설명하거나 제어하는 데이터 Content-Security-Policy (CSP) 는? 웹앱의 보안을 강화하기 위한 보언 메커니즘 중 하나로, CSP 는 웹앱에서 실행되는 스크립트, 스타일시트, 이미지 등의 리소스가 로드 되는 방식을 제어한다. Content 어트리뷰트 : 위에서 언급했듯, http-equiv 어트리뷰트에 …

css border-radius에서 %의 기준점은? 지난 한달간 사내에서 새로운 테마를 만드는 작업을 했는데, 새테마 주제가 라운드였다. 말 그대로 에디터 내 사용자 설정에 따라 동글강도(?)가 달라지기도 하고 이미지에도 여러 동글동글한 이미지모양을 적용 할 수 있게끔 설계가 되어있었다. (동글동글..) 그러다보니 css의 border-radius 속성을 굉장히 많이 사용하게 되었고 새로 알게된바가 있었다. 👩‍🎨 border-radius의 %는 어떤 기준값을 따라가나요? 기준값을 바꿀 수 있나요? 사실 한번도 생각 못해봤는데 알아보니 아래와 같다. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. 즉, 수평의 radius는 엘리먼트의 너비를 기준점으로…

제어의 역전 (Inversion Of Control) 외부의 API에서 실행 되어야 하는 작업을 사용자(프로그래머)에게 넘기는 것 filter라는 메서드를 구현한다고 했을 때, 아래와 같이 구현을 해본다고 하자. 만약 위의 코드에서 0만 필터링 해주는 기능을 추가한다고 하면 어떨까? filter 메서드에 매개변수를 추가하고, 내부의 분기문을 하나 더 추가하고 하며 점점 더 filter 함수가 비대해진다. 이렇게 비대해지는 함수는 유지보수에 취약하다. 🧵 제어의 역전 사용해보기 위와 같이 구현하게 된다면 filter 함수는 여러 요구사항에 맞춰서 대응될 필요가 없다. 즉 필터링하는 책임을 filter메서드에서 제어하는게 아니라, 한 것이다. 그래서 제어의 역전이다. 리액트에서 컴파운드 컴포넌트 역시 제어의 역전의 예시이다. 컴파운드 컴포넌트 패턴 역시 하나의 컴포넌트에서 모든 책임을 제어하는게 아니라, 외부에 책임을 위임시켜버림으로써 많은 유즈케이스에 대응 할 수 있다. 그렇다고 무…

모듈페더레이션을 깊게(but 얕게) 알아보자 ref - https://maxkim-j.github.io/posts/module-federation-shared https://maxkim-j.github.io/posts/module-federation-concepts Module Federation 이모저모 apollo GraphQL 의 federation 개념을 js 에 적용한 것이라고 한다. apollo GraphQL 의 federation 이란? 여러 GraphQL 마이크로서비스의 GraphQL schema 를 조합하여 하나의 큰 GraphQL schema 로 만드는 방식 웹팩에서 지원해주기 시작했고, 현재는 vite, rollup 도 플러그인이 개발 되었다. 다른 대안은 없을까? 빌드타임 통합은? 느리고 비효율적이며 확장가능하지 않다. 결국 의존성이 생긴다. iframe 방식은? 하나의 앱처럼 완벽히 합쳐지지는 않는다. 결국 한계점이 있다. 서비스 규모가 커질수록 작은 변경에…

자동차 경주 게임을 타입스크립트 + 노드환경 기반으로 구현하면서 깨달은 이모저모 🕺 랜덤값에 대한 테스트는 어떻게 해야하나? 문제점 였다. 그래서 처음에는 자동차 객체내부 메서드에서 랜덤값(조건)을 구하는 로직을 추가했다. 자동차 전진 조건은 당연히 자동차 객체가 가지고 있어야 한다고 생각했다. 하지만 이렇게하니 해당 기능에 대한 테스트를 진행 할 수 없었다. 해결방법 자동차의 전진 조건이 되는 랜덥값을 자동차 객체에서 직접 구하도록 하지 않고, 외부에서 매개변수로 주입받을 수 있도록 수정했다. 이 방법이 좋다고 생각한 이유 우선 랜덤값에 대한 경계값 테스트가 쉽게 가능하다. ‘4이상일 때 전진해야한다’라는 걸 테스트할때 중요한건 경계값 즉, 조건이 4와 3일 경우에 대한 기능 테스트라고 생각한다. 랜덤 숫자를 구하는 로직을 자동차 객체에게 위임하지 않고 외부에서 주입받게 함으로써 보다 테스트가 용이해졌다. 테스트가 용이해졌다는 것은 결국 자동차 객체의 책임이 어느정도 줄었다는 …

null 리턴은 왜 나쁠까 https://velog.io/@tosspayments/null-%EB%A6%AC%ED%84%B4%EC%9D%80-%EC%99%9C-%EB%82%98%EC%81%A0%EA%B9%8C 요 글은 코틀린 예시를 들고 있지만, 코틀린과 타입스크립트는 둘다 함수가 일급시민인 언어들이어서 타입스크립트에도 적용 가능한 부분이 보여서 정리한다. (사실 코틀린 예제인데 처음에는 ts인줄 알았다) 함수 인자와 달리 리턴값은 하나이다. 따라서 개발자들은 여러 의미를 하나의 값에 담고싶어함. 즉 여러 의미를 하나로 축약하고자 한다. 문제는 이 null 값에 담긴 의미를 모든 개발자들이 이해하기는 어렵다는 것! 개선 방안 로그에 맥락을 남긴다. 만약에 함수에서 null 값이 리턴되면 해당 함수를 호출한 곳에서 null 의 이유를 볼 수 있도록 로그를 남긴다. 예제를 타스로 바꿔보자면 아래와 같음 맥락 처리를 위한 기능을 만든다. 해당 함수에 인자로 Null 값일 경우 실행할 콜…

자바스크립트 Map을 사용해야하는 이유 Map 은 해시테이블을 사용하여 구현되어있다. 값에 접근하기 위한 복잡도는 일반 객체와 Map모두 O(1)로 동일하다. 하지만 요소의 개수를 구하는 경우 Map 은 O(1)의 시간복잡도를 가지지만, 일반 객체의 경우 O(n)이 된다. 일반 객체가 O(n)이 되는 이유는 해야 하므로 Map은 key 의 타입에 제한이 없다. 반면 객체의 경우는 key 타입이 string으로 제한된다. 객체는 원소의 입력순서에 따라 출력순서를 보장하지 않지만 Map은 보장된다. Map에는 Iterator Interface가 구현되어있다. 따라서 forEach를 사용 할 수 있다. RSC (React Server Component) 와 SSR (Server-Side Rendering)의 차이점 두개 다 서버에서 데이터를 하이드레이션 해주는 것은 동일하다. 그런데 왜 SSR이 있는데 RSC가 도입되었을까? 참고 RSC는 SSR에서 최상위(top-level) 페이지 단…

1. callbackRef DOM의 노드사이즈를 구해서 상태에 저장해야하는 로직이 필요했었고 당연히 아래와 같이 썼었다. (이전에도 당연히 아래와 같이 사용하곤 했었음) 근데..늘 이런 코드를 작성 할 때 과연 ref 의 변경사항을 useEffect 가 잘 감지해서 트리거될까? 라는 의문을 떨칠수가 없었다. 당연히 ref 는 컴포넌트의 리렌더링을 시키는 요소가 아니기 때문이다. 또한, ref 를 붙이는 노드가 특정 조건에 따라 달라지게 되면 상태 업데이트가 제대로 되지 않는 문제점도 마주했었다. 그럴 때의 해법은 useEffect 의 디펜던시 배열을 없애고, useEffect 가 매리렌더링마다 실행되게 하는 것이라고 생각했었다. 따라서, 저 코드에서 디펜던시 배열에 를 넣는건 의미가 없다. 해당 useEffect가 잘 실행되는 이유는 ref 의 변경을 감지해서가 아니라, useEffect 가 초기 렌더링 때는 무조건 실행되기 때문이다. 따라서, 간단한 컴포넌트 혹은 훅에서는 괜찮…

1. dangerouslySetInnerHTML 리액트에서 element 내에 html 을 삽입할 때는 을 사용 할 수 있다. 을 사용하게 되면, 리액트 역시 해당 element 내의 내용이 동적이라는 것을 알게 된다. 또한, 해당 노드의 자식들에 대해 버츄얼 돔과의 비교를 생략하여 성능적으로 향상된다. 하지만 이름 그대로 하다. 바로 XSS(Cross-site scripting) 공격에 취약해질 수 있기 때문이다. 언제 사용해야할까? HTML 태그가 포함 된 데이터를 요소를 채워야 할 때. 위와 같은 경우가 있을 때 알다시피 태그는 제대로 삽입 되지 않는다. 이 때 dangerouslySetInnerHTML 을 사용 할 수 있다. DOMPurify 와 같은 도구로 위험 줄이기 DOMPurify 와 같은 도구를 사용하면 alert 함수가 실행되지 않는다. 2. Module Federation 모듈 페더레이션 관련은..따로 포스팅을 할 예정이긴 한데, 짤막하게 기록해놓자면 회…

1. 크롬의 새로운 scroll 애니메이션 API - Scroll Progress Timeline 아주 사알짝 맛보기 출처 Animate elements on scroll with Scroll-driven animations - Chrome Developers 이전에는 스크롤시 애니메이션을 주려면, 스크롤 이벤트를 활용해서애니메이션을 추가해주어야 했다. 이는 당연히 스크롤 이벤트가 일어날 때마다 특정 함수를 실행해야하므로, 브라우저의 메인쓰레드를 사용하여 성능이 저하될 수 밖에 없었고 이를 해결하기 위해서 이벤트 리스너에 디바운스를 추가한다던지 IntersectionObserver를 사용하게 되며 구현 난이도를 높였다. 이를 해결하기 위해 나온 API라고 한다. (JS 를 사용하지 않아도 되어서 메인쓰레드에서 돌아가지 않고 컴포지터에서 돌아간다고 한다.) + JS 를 사용하지 않아도 되지만 JS를 사용해서 구현도 가능하다. CSS 예시 여기서 animation-timeline 은 …

1. React 컴포넌트에서 null 반환 vs false 반환 “return null” vs “return false” in React | by Çağlayan Yanıkoğlu | Apr, 2023 | Medium null 반환 리액트에게 아무것도 렌더링하지 말라고 알려준다. 따라서 DOM 에는 아무것도 그려지지 않는다. false 반환 리액트에게 아무것도 렌더링하지 말라고 알려준다. 따라서 DOM 에는 아무것도 그려지지 않는다. 컴포넌트가 추후에 업데이트 되는 것을 막는다. 리액트는 를 일종에 unmount 시그널로 본다. 따라서, 영구적으로 DOM에서 제거한다. 따라서 조건부 렌더링 시에는 null을 사용하는 편이 사이드이펙트가 적지만, 역으로 false를 이용하여 사이드이펙트가 없는 정적인 컴포넌트를 조건부렌더링 할 수 있다. 여기서 사이드이펙트는 API 요청, 상태변화 등등이다. 2. 리액트 쿼리 - 유저별 데이터 구분하기 리액트 쿼리는 캐싱을 지원한다. 따라서 한번 A…

1. 유지보수하기 좋은 CSS 습관 요소A 내부에 다른 요소들이 포함된다면 (혹은 포함 될 예정이라면) 정적인 Width 나 Height 대신 Padding 값을 활용하여 높이와 넓이를 설정하기 추후에 다른 요소가 추가 된다면 정적인 Width 나 Height는 변경되어야 한다. 이 변경을 최소화 하기 위해서는 정적인 숫자로 높이와 넓이를 정하는게 아니라 상대적으로 높이와 넓이를 늘려주거나 줄여줄 수 있는 Padding으로 높이와 넓이를 정하자. 은 피치못할 때에만 이용하기 해당 요소를 사용하여 CSS를 조작 할 경우 추후에 해당 요소 내 또 다른 엘리먼트가 추가 되면 또 다시 를 사용하여 포지셔닝을 해주어야 한다. 이는 당연히 CSS 코드만 읽었을 때 직관적으로 이해하기 어렵다. 따라서 최대한 부모 엘리먼트를 추가+활용하여 포지셔닝을 하는 편이 추후에 유지보수에 용이하다. 매직넘버는 위험하다. 우린 자바스크립트에서 매직넘버를 방치하지 않는다. 그런데 CSS에선 그래도 된다고 …

1. 디자인패턴 - Composite Pattern 참고 - 모든 IT 스타트업에서 꼭 작성해야 하는 프론트엔드 단위 테스트가 있다? (로깅, 단위 테스트, 그리고 의존성 주입) 동일한 인터페이스의 함수(or 객체)를 하나의 함수로 추상화한다. Composite 은 객체를 트리 구조로 구성한 다음, 이러한 구조를 개별 객체처럼 작업 할 수 있게 하는 구조적 패턴이다. 해당 패턴을 사용하여 공통 인터페이스를 통해 각 객체를 모두 동일하게 처리할 수 있다. 메서드를 호출 할 때 객체 자체가 요청을 트리 아래로 전달한다. 🤔 프론트엔드에서 언제 사용 할 수 있을까? 어떤 이벤트에 대해 A라는 함수를 호출 해야 한다. 그런데, 추후에 해당 이벤트에 대해 B라는 함수도 호출 해야 할 수 있다. 이 때마다 이벤트에 A,B,C…와 같은 함수를 계속 추가해야할까? 심지어 함수 A와 B의 이 동일하다면? (역할은 동일하나 사용처는 다를 수 있다. 예를들어 로깅시스템을 여러개 도입할 수도 있다.)…

1.React Query v5부터 useQuery의 API 제거 출처 - TkDodo’s Breaking react Query’s API on purpose 리액트 쿼리 v5 부터 useQuery의 api 가 제거 될 예정이라고 한다. (useMutation의 경우 해당 api는 유지된다.) 제거되는 이유는 간단히 말해서 이라고 한다. 하지만 몇가지의 이유가 있다. 1. 상태의 싱크가 맞지 않는 문제 특히나 많은 사람들이 아래와 같이 상태를 동기화시키기 위해서 해당 api 를 사용한다. 위와 같은 onSuccess api 사용은 state를 변경함으로써 불필요한 렌더링을 추가함과 동시에 아래와 같은 세단계의 렌더 사이클을 가지게 된다고 한다. 가 이고 length 가 0이다. 이는 query 가 fethcing 되는 동안의 정상적인 초기 값이다. 가 길이가 5인 배열이 되고, todoCount는 0이 된다. (Out of sync 발생) useQuery른 한번 실행 되었으나 …