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

Suspense란? 서스펜스를 사용하면 자식 컴포넌트가 로딩을 완료 할 때 까지 폴백 UI를 노출 할 수 있다. 서스펜스로 감싸지면, 리액트는 자식에게 필요한 모든 코드와 데이터가 로드 될 때 까지 로딩 폴백을 표시한다. 기존에는 JS 번들을 스플리팅하고 웹 자원 중 코드를 lazy loading 하는데 쓰였지만, React 18 부터는 어떤 것이든 기다릴 수 있는 기능으로 확장되었다. 즉, 이미지 / 스크립트 / 그 밖의 비동기 작업을 기다리는데에 모두 사용 될 수 있다. Suspense가 활성화 되는 상태 Relay 및 Next.js와 같은 Suspense 도입 프레임워크를 사용한 데이터 페칭 lazy 를 사용한 지연 로딩 컴포넌트 코드 Suspense 는 Effect 나 이벤트 핸들러 내부에서. 페칭하는 경우를 감지하지 않는다. Suspense는 어떻게 동작할까? Suspense 는 하위 children들의 비동기 상태를 감지 할 수 있다. 그렇다면 어떻게 알 수 있는걸까? …

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일 경우에 대한 기능 테스트라고 생각한다. 랜덤 숫자를 구하는 로직을 자동차 객체에게 위임하지 않고 외부에서 주입받게 함으로써 보다 테스트가 용이해졌다. 테스트가 용이해졌다는 것은 결국 자동차 객체의 책임이 어느정도 줄었다는 …

왜 회고글을 이제와서 쓰냐고 할 수 있겠지만, 원래 회고글을 썼었는데..실수로 해당 회고글을 수정하려고 잠깐 삭제했다고 생각했는데 도무지 어디로 간지 모르겠어서 다시 쓴다. ㅠ.. 내용이 거의 반절로 줄었음… 💭 개발자 1년차 식스샵에서 나는 웹 빌더를 개발하면서 두가지 도메인을 경험하고 있다. 커머스 웹사이트를 만들어주는 에디터 에디터로 만드는 커머스 웹사이트 요 두 개이다. 그러다보니까 에디터의 도메인 지식과 커머스 도메인 지식을 다 파악하고있어야했다. 에디터는 특히나 구조 자체가 복잡하고 고려해야할 점이 많아서 에디터 피쳐 개발을 할 때에는 항상 긴장상태였던 듯하다. 그래도 에디터라는 도메인을 만지작해보면서 개발자로서 많이 성장했다고 생각한다. 커머스 같은 경우는 에디터보다 더 많은 경험을 했는데, 내가 합류한 시점에 흔히 생각하는 커머스 기능이 완벽히 구현된 상태가 아니었기 때문이었다. 처음 합류 한 후 진행한 업무도 주문/배송조회 목록 페이지에 배송추적 기능을 추가하는 것…

1장 사용자 수에 따른 규모 확장성 다루기 수직적 규모확장 vs 수평적 규모확장 수직적 규모확장 (스케일업) 서버에 고사양 자원(더 좋은 CPU, 더 많은 RAM)을 추가하는 행위 데이터베이스 서버 하드웨어에는 한계가 있어서, CPU, RAM 등을 무한 증설 할수는 없다. 사용자가 계속 늘어나면 결국 서버 한대로 처리하기는 어려움. SFOF(Single Point of Failure)로 인한 위험이 크다. SFOF 란 단일 장애 지점. 장애가 발생하면 이 하나의 서버로만 처리해야하는 것. 수평적 규모확장 (스케일아웃) 더 많은 서버를 추가하여 성능을 개선하는 것 샤딩 (sharding)이라고도 부름 샤딩은 데이터베이스를 샤드라고 부르는 작은 단위로 분할하는 기술 모든 샤드는 같은 스키마를 쓰지만 샤드에 보관되는 데이터 사이에는 중복이 없다. 아래와 같은 문제점이 있음 데이터의 재샤딩 : 데이터가 너무 많아져서 하나의 샤드로는 더 이상 감당하기 어렵거나, 샤드 간 데이터 분포가 균등…

쇼피파이는 싱글태넌트로 설계 되어있다는 걸 알고, 싱글 태넌트와 멀티 태넌트의 차이점과 장단점은 무엇인지 간략히 정리해보려 한다. 먼저 태넌트(tenant)가 뭘까? 태넌트 (tenant)는 ‘임차인’이라는 뜻을 가진다. 즉 자신의 자원이 아닌 서비스 제공자의 클라우드 자원을 빌려서 서비스를 이용하는 주체를 라고 한다. 태넌트 개념은 주로 SaaS(서비스형 소프트웨어) 제품과 엮여서 사용되곤 한다. 왜 SaaS와 연결될까? 아래에서도 언급하겠지만 SaaS는 주로 멀티 태넌트를 채택하여, 여러 고객이 동일한 서비스를 이용하도록 설계하는게 일반적이다. 하지만 IaaS와 PaaS는 주로 인프라 또는 플랫폼을 제공하는데 중점을 두고 있어서, 태넌트 개념의 필요성이 상대적으로 적다. 그러면 멀티 태넌트 / 싱글 태넌트는 뭘까? 멀티 태넌트 멀티 태넌트는 여러 사용자 또는 고객이 하나의 소프트웨어 인스턴스를 공유하는 것이다. SaaS에서 멀티 태넌트는 여러 고객이 동일한 서버, 데이터베이스,…

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 값일 경우 실행할 콜…

10월도 나름 부지런히 읽었다..4권 읽었으니, 주 한권씩 읽은 셈이군. 월말과 11월 초에는 바쁜일이 있어서 잘 못읽었는데..이제 또 다시 열시미 읽어야징 1. 싯다르타 - 헤르만 헤세 10월의 첫 책으로 싯다르타를 읽었다. 헤르만 헤세에 대해 조금 더 알게된 느낌.. 싯다르타를 읽고..불교 철학을 직접 경험해보고싶어서 난생처음 강원도 낙산사로 템플스테이도 다녀왔다 ㅎ 싯다르타처럼 살 수는 없겠지만 그의 깨달음을 한번이라도 경험하면 좋겠다는 생각에서였다. 카말라, 만약 그대가 돌멩이 하나를 물 속에 던지면, 그 돌멩이는 곧장 그 물 아래 밑바닥에 가라앚게 되겠지요. 싯다르타가 하나의 목표, 하나의 계획을 세우면 바로 그렇게 되지요. 싯다르타는 아무 짓도 하지 않아요. 그는 기다리고, 그는 사색하지 않은 채, 몸 하나 까딱하지 않은 채, 마치 물 속을 뚫고 내려가는 그 돌멩이처럼, 세상 만사를 뚫고 헤쳐나가는 대로 놔두지요. 그의 목적이 그를 끌어 잡아당기지요. 왜냐하면, 그의 목…

자바스크립트 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. 문제상황 파악하기 일단 내가 식별했던 문제는 아래와 같다. 컴포넌트A가 을 목적으로 여러 페이지에서 사용되고 있다. 하지만 컴포넌트A는 사용처마다 스타일이나 보여줘야하는 데이터가 미세하게 다르고 사용방법도 다르다. 따라서 컴포넌트A의 props 가 엄청나게 뚱뚱해지고, 여러 컴포넌트가 한 컴포넌트A 에 묶인채로 조건부 렌더링되다보니 코드 파악이 어렵고 변경에 취약하다. 내가 리팩터링했던 컴포넌트는 주문 데이터(주문 한 상품명, 상품 이미지, 상품 가격)등을 렌더링하는 였고 사용처별로 사용방법들과 요건들을 정리해보면 아래와 같았다. 0. 컴포넌트 사용처 및 사용방법 정리해보기 주문완료 페이지 맨 위에 border 없음 맨 위에 padding 값 다름 주문서 페이지 맨 위에 border 없음 Info Margin 값 다름 주문 취소 …

회사 프로젝트에서 타팀의 앱 영역에 우리 팀의 코드가 들어가는 경우가 종종 있다. 현재 회사의 제품은 크게 세가지의 영역으로 나뉠 수 있는데 첫번째, 커머스 상점을 만들 수 있는 에디터이고 두번째, 에디터로부터 만들어지는 커머스 웹사이트의 뼈대, 그리고 마지막 그 상점에 대한 주문/상품/고객 정보를 관리 할 수 있는 어드민이다. 여기서 첫번째와 두번째의 제품을 우리팀에서 만들고 세번째의 제품을 다른팀에서 만든다. 여기서 제품 구조상 우리팀의 관리포인트인 웹사이트 영역의 특정 데이터, 예를들면 웹사이트에 들어갈 기본정보나, 법적필수정보 설정 같은 것들도 상점에 대한 어드민 영역에 들어가게 된다. 이 때, 만약 타팀의 코드에 직접 우리의 코드를 심는다면 관심사의 분리에 실패하게 된다. 타팀의 코드에 결국 우리 팀의 서버 정보, 환경 변수 등등이 함께 들어가게 되기 때문이다. 또한 우리 팀의 코드만 변경사항이 발생해도, 우리 팀의 코드만 배포할 수 없다. 타팀의 코드도 함께 배포해야한다…

문득 책을 읽더라도 기록하면서 읽어야겠다고 생각이 들었다. 개인 노트에 적기에는 동기가 부족해서 잘 안쓰게 되기도하고, 막상 나도 잘 안읽고 해서 퍼블릭한 블로그에 독서기록을 짤막하게라도 남겨야겠다고 생각했다. 따로 블로그를 만들까 했지만, 이 블로그가 100% 개발블로그도 아니니까..여기에다 써도 되겠다 싶었다. 아무튼 내가 읽는 활자들을 그냥 그대로 흘리지 않고 소화해내고 싶다ㅎ.ㅎ 1. 인생의 역사 - 신형철 어떻게 이런 글을 쓰고 이런 생각을 할까 싶을정도로 문장이 하나하나 다 아름답고 좋았다. 평소에 시는 잘 읽지 않았는데, 이 책 덕분에 좋은 시들도 많이 알아가서 너무 좋았다. 대학생 때 에밀리 디킨슨의 시를 정말 좋아했는데, 신형철이 설명해주는 디킨슨을 읽고 다시 좋아졌다. 신형철 글은 늘 여러 사랑의 뒷모습들을 참 잘 기억하고 해석하는 것 같다. 그 예리한 감수성이 정말 신기함.. (아쉽게도 문장 수집해놓은게 없음,,😇) 2. 사는게 힘드냐고 니체가 물었다 - 박찬국…

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

달리기를 처음 시작한건 지금으로부터 3년전..이었던 것 같다. 코로나로 인해 계획했던 것들을 모두 뒤로하고 무기력하게 집에서 대학교 막학기를 다니고 있었을 때, 근거 없이 초조한 마음과 무기력한 몸을 깨끗하게 만들고자 달리기를 시작했다. 그렇게 시작한 달리기였는데,얼마전까지만 해도 달리기의 재미를 몰랐다 어떻게 페이스와 호흡을 조절하는지 몰랐고, 달리는 시간이 길고 지루하게만 느껴졌다. 그래서 그 때, 달리기 하러 나갈 때는 기쁜마음보다 막막한 마음으로 나갔던 것 같다. 그럼에도 불구하고 달리기는 종종 나에게 마음을 환기시키는 창처럼 느껴졌다. 그리고 올해들어서 다시 달리기를 시작했다. 재택근무를 하면서 저녁시간이 많기도 했고, 팀 슬랙 채널에서 오운완 챌린지를 팀원들과 함께 하면서 달리기를 시작했다. 처음에는 호기롭게 530 페이스로 달려보자! 했는데 그러다보니 달리는 거리가 2km에서 머물렀었다. 달리기를 하고 나면 정말 숨 턱턱막혔고, 온몸이 새빨게졌었다. 그럼에도 불구…

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 은 …

원문-Stop Being a Junior by Kent C Dodds 를 번역한 글입니다. 오역과 의역이 있을 수 있습니다. 당신은 주니어 개발자인가요? 이 질문에 ‘예’라고 대답했다면 어떻게 자신이 주니어 개발자인걸 알았나요? 당신의 직함이 ‘주니어 개발자’이기 때문인가요? 당신의 동료들은 흥미로운 일을 하지만, 당신은 그저 지루하고 반복적인 일들과 단순한 버그잡기를 더 많이해서 인가요? 혹은 그저 나는 아직 ‘주니어’라는 딱지를 때기에는 ‘이르다’라고 생각하고 있는 건가요? 어떤 경우든 간에, 저는 당신에게 주니어가 되는 것을 그만두라고 말하고 싶습니다. 당장 그만 두세요. 저에게 “저는 이제 막 시작했어요” 혹은 “저는 그냥 주니어에요.”라고 말하며 대화를 시작하는 사람들에게 저는 이렇게 대답한 적이 있습니다. “좋네요! 소프트웨어 개발 세계에 오신 걸 환영합니다” 그리고 그들이 소프트웨어 개발자로 일한 지 이미 1년 반이 넘었다는 걸 알아버렸고, 매우 놀랐습니다. 그리고 이…

셋째주까지 배운 것들을 잘 작성하다가, 회사 제품 출시 때문에 바빠져서 기록을 못했다. 간단히 회고를 해보려고 한다. 🌿 제품 출시를 하면서 느낀 점 5월 말에 회사 제품이 OBT 출시를 했다. 그래서 출시 전까지 기능 쳐내고 버그 대응하느라 정신이 없었다. 비록 팀에 합류한지 이제 막 3개월이 넘었지만 그래도 뭔가 내 손을 탄 제품이 세상에 나갔다는 사실이 정말 뿌듯했다. 내가 개발한 기능을 실제 유저가 사용하고 있는걸 볼 때는 정말 신기했다. 잘된점과 잘 안된점을 정리해보자면 아래와 같다. 😇 잘된 점 문서화는 정말 도움이 된다. 우리팀은 문서화를 정말 잘 하는 편이라고 생각하는데, 나 역시도 이번에 제품출시를 하면서 아래와 같은 상황에는 노션에 문서로 따로 관리했다. 필요한 API 명세 프론트에서 필요한 값 해당 API 응답값으로 프론트에서 구현하는 방법 고민이 필요한 코드 설계 해당 설계가 필요한 상황 / 문제 정의 가능한 해결방법들과 각 방법의 장,단점 채택한 설계 방법과…

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른 한번 실행 되었으나 …

단순함이란 궁극의 정교함이다. “Simplicity is the ultimate Sophistication” 한국어 번역 제목은 ‘쏙쏙 들어오는 함수형 코딩’이어서 처음에는 ‘함수형 패러다임’에 대해 설명하는 줄 알았다. 하지만 책을 보면 그것보다는 더 나아가서 어떻게하면 좋은 함수를 만드는지에 대해서 설명하고 있다. 책에서도 언급하듯, 이 책에 나오는 내용들은 객체지향과 같은 다른 패러다임에서도 충분히 사용될 수 있다. 아무튼 깔끔한 코드를 작성하기 위해서 한번쯤 읽어보면 좋은 책! 🧠 CHP3. 액션,계산,데이터 액션 실행 시점, 횟수에 의존한다. 부수 효과 (Side-Effect), 순수하지 않은 함수라고도 부른다. 예시) 이메일 보내기 / 데이터베이스 읽기 계산 입력으로 출력을 계산한다. 순수함수라고 부른다. 예시) 최댓값 찾기, 이메일 주소가 올바른지 확인하기 데이터 이벤트에 대한 사실 예시) 사용자가 입력한 이메일 주소, 은행 API로 읽은 달러 수량 장보기에 액션-계산…

문제정의 서버에서 데이터가 아직 도착하지 않았을 때 우리는 보통 Loading UI 를 보여주곤 한다. 그런데 Loading UI 를 보여주고 싶지 않을때는 어떡할까? 그 때는 보통 아래와 같은 nullish 병합 연산으로 아직 오지 않은 데이터에 대한 기본값을 처리할 것이다. 하지만 생각해보면 과연 데이터가 도착하지 않았을 때, 디폴트 값 인 ‘0’으로 표시해주는 것이 UI 렌더링 계층의 역할인지 생각해보자. UI를 그려주는 영역에서, 까지 신경써줘야할까? 그게 과연 UI 렌더링에 속하는 역할인지 생각해보면 아닌 것 같다. UI 를 그려주는 영역의 역할은 단지 일 뿐이다. 간단한 데이터 스키마가 아니라 더욱더 복잡해질 경우.. 저런 nullish 병합 연산자 코드와 같이 데이터가 도착하지 않았을 때 특정 형태의 디폴트 데이터로 대체하는 코드가 가득해지면 아래와 같이 UI를 그려주는 영역의 역할이 더욱더 모호해지지 않을까생각한다. 왜냐하면, 첫번째로, 계속해서 서버에서 보내주는 데…

팀프로젝트에 늦게나마 RTL 과 Jest 를 활용한 테스트를 추가한 이야기이다. 왜 이제와서 테스트코드를 썼나요? 👮🏻‍♂️ 우테코 팀프로젝트 기간이 끝나면서, 그간 한 코드들을 정리해보는 시간을 가지게 되었다. 그러다가 양방향 무한스크롤 구현기를 정리했고, 다시 찾아보다가 상향 무한스크롤에 onWheel 이벤트만 적용되어 있어서 사용자가 직접 마우스나 키보드로 스크롤을 움직이면 상향 무한스크롤이 적용 안되는 것을 발견했다. 🤦🏻‍♀️ 해당 기능은 그래도 wheel, touch 이벤트 시 정상동작하기 때문에 급한사항은 아니라고 판단해서 천천히 고칠 예정이다. 하지만 이 사건을 계기로 사용자 행동에 대한 테스트코드를 착실히 작성해야 한다는 것을 깨달았다. 만약 내가 상향 무한스크롤에 대한 테스트코드를 작성해놓았다면, 애초에 구현 했을 때 이 문제점을 알고 구현하지 않았을까 하는 아쉬움이 남았다. 그래서 늦게라도 테스트코드를 추가하기로 마음먹었다. 왜 하필 컴포넌트 테스트인가요? 👮🏻‍♂️ 일단 위의 경험…

타입스크립트와 자바스크립트의 관계 타입스크립트는 자바스크립트의 상위집합 (Superset) 즉 모든 자바스크립트는 타입스크립트 (하지만 반대는 성립하지 않음) 타입스크립트를 사용하는 이유 타입스크립트의 타입 시스템은 런타임에 오류를 발생시킬 코드를 미리 찾아낸다. 코드 생성과 타입이 관계 없음을 이해하기 타입스크립트가 자바스크립트로 변환 될 때, 코드 내의 타입에는 영향을 미치지 않는다. 자바스크립트 실행 시점에도 타입은 영향을 미치지 않는다. 런타임에는 타입 체크가 불가능하다. 타입은 런타임 시점에 아무런 역할을 할 수 없다. 타입스크립트의 타입은 제거 가능하기 때문에, 실제로 자바스크립트로 컴파일 되는 과정에서 모든 인터페이스, 타입, 타입 구문은 그냥 제거되어 버린다. 런타임 타입은 선언된 타입과 다를 수 있다. 어느경우? API 호출로 받아온 값의 경우 구조적 타이핑 위에 Vector3D 에는 Vector2D 타입에 있는 x , y 속성이 있기 때문에 calculateLen…

프로젝트를 진행하면서 클라이언트에서 에러 핸들링을 어떻게 처리해줘야 할 지 고민이 참 많았다. 특히나 우리 서비스의 경우 클라이언트단에서 나는 에러는 거의 없고 (유저 인풋이 없기때문) 모두다 api 에러였다. 또한 data fetching 라이브러리로 react-query 를 쓰고 있었기 때문에, 어떻게하면 react-query 로 우아하게 api 에러를 핸들링 할 수 있을지 고민 많이 했던 것 같다. 그러다가 요 아티클을 발견했고, react-query 의 옵션을 사용한다면 아주 간단단하게 전역적으로 api 에러를 catch 할 수 있다는 것을 알게 되었다. 요구사항과 문제점 프로젝트 요구사항은, api 에러가 나면 올바른 에러메시지를 Snackbar 로 띄워주는 것 이었다. 우리 프로젝트에서는 아래와 같은 커스텀 훅을 사용 중이다. 원래의 에러처리 전략 대로라면 아래와 같이 처리해줬다. 즉 매 페이지마다 api 요청의 여부를 받아서 렌더링 할 때 if 문으로 분기처리를 통…

배경 사용중인 Next.js 버전은 이다. 사내에서 진행했던 프로젝트 중에 Url 에 아래와 같이 query string 이 들어가면 웹사이트에서 특정한 버튼들의 동작을 제한해야하는 요구사항이 있었다. 그래서 해당 코드는 아래와 같이 작성했었다. 로컬에서는 정말 잘 동작했다. 하지만 배포된 환경에서는 동작하지 않았다. 배포된 환경에서도 테스트서버에서는 동작하고 운영서버에서는 동작하지 않았다. 이렇듯 환경별로 동작 여부가 달라서 디버깅하기 매우 어려웠다. 또한 아무리 구글링을 해도 동일한 이슈를 겪은 경우가 거의 없었다. 사실 프로덕션 코드는 빠르게 고쳐져서 배포되어야 하므로, 일단 문제를 해결 한 후에 원인을 찾아보았다. 해결 방법은 아래에서도 자세히 언급되지만, 짤막하게 말하자면 Next.js의 useRouter가 아니라 직접 을 참조해서 query string 을 파싱해오는 비교적 간단한 방법이었다. (원인을 찾아보는 과정에서 Next.js의 코드를 직접 찾아보고, 렌더링…

학습 배경 먼저 ‘횡단관심사’라는 키워드에 관심을 가지게 된 계기는, 여러개의 컴포넌트 혹은 페이지가 중복된 일을 가지고 있는 코드에서 비롯되었다. 지금 레벨4인데..레벨2에 기록해놨던 기록장에 내가 ‘횡단관심사 찾아보기’라고 적어놨던 것을 보았고, 그래서 지금에 와서야 공부해보고자 한다. 그런데 횡단관심사를 공부하면서 깨달은 것은, 결국 리액트 개발을 하면서 자연스럽게 이미 해결한 문제라는 것이다. 다만 그 문제와 해결방안을 명명하지 못했을 뿐이다. 그래도 공부하면서 ‘왜’ 이렇게 해야했는지 다시 한번 되짚어 볼 수 있어서 좋았다. 횡단관심사(Cross-Cutting Concerns) 란 횡단관심사는, 하나의 어플리케이션의 여러 부분에 걸쳐있는 기능을 의미한다. 음 아직 와닿지 않는다. 예를 들어.. 은행 시스템이라고 하면 핵심 관심사 (Core Concerns) : 입금, 출금, 이체 횡단 관심사 (Cross-Cutting Concerns) : 입금, 출금, 이체 시 동작되는…