이번에는 또 다른 스터디다. 살려주세요리액트 딥다이브 책 같이 읽은 분들과 아쉬워서 Next.js 공부도 살짝? 하고 결국 이 스터디까지 이어지게 됐다.이것저것 스터디라는 이름답게 진짜 이것저것 다 공부한다. 요즘 디자인 시스템 최적화와 관련된 전반적인 지식과 컴포넌트 개발만 하다 보니, 전체적인 구조를 설계하는 능력이 떨어짐을 몸소 느껴버렸다.이걸 회사 과제 테스트 보면서 느껴버려서 좀 더 많이 와닿았던 거 같기도?어쨌든 그래서 뭔가 특단의 대책 같은 게 필요했고, 단순히 기한에 맞춰서 제대로 된 설계도 없이 프로젝트 개발만 하는 거 말고, 좀 내부 구조도 생각해 보고 설계도 고민을 한참 해볼 수 있는 능력이 필요하다고 느꼈다. 그래서 나와 다른 스터디원들이 많이 부족하다고 느끼는 것들 위주로 한 주차..

바로 이전에 enum은 어떻게 써야 하는지에 대한 글을 쓴 적이 있었다. https://gugu76.tistory.com/130 enum과 const enum을 비교하는 내용이 있었는데, 해당 글을 작성하다 보니 직접 트랜스파일링해서 결과를 보고 싶다는 생각이 들었다. 그래서 Rollup 번들러를 사용해서 간단하게나마 enum을 트랜스파일링해보고 결과를 확인해 보았다. Rollup Rollup도 Webpack 같은 자바스크립트 번들러 중 한 종류이다. Rollup은 빌드 결과물을 ES6 모듈 형태로 만들 수 있다. 이는, 사용자가 라이브러리의 코드 일부만 사용하게 되면 해당 부분만 번들 결과물에 포함시킬 수 있게 되는 것이다. 그래서, 사용하지 않는 코드를 빌드 단에서 제거하는 트리 쉐이킹 기법을 활용해..

이번에 프로젝트를 진행하면서 상수 값을 저장할 때 계속해서 enum 타입을 사용해 왔다. 그런데, 타입스크립트를 계속 공부하다 보니 enum 타입에 대한 논란이 있는 것을 알게 되었다. 그 논란에 대해서 좀 자세히 알아보고 앞으로 어떻게 enum을 사용할지 생각해 보면 좋을 거 같아서 글을 쓰게 되었다. 일단, 나는 아래 글을 보고 나서 해당 문제에 대해서 알아보게 되었다. https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking 위 글은 라인 기술 블로그 글인데, 한 줄 요약하자면 enum 타입을 쓰면 tree-shaking이 되지 않으니 const enum이나 union 타입을 쓰라는 것이었다. 이렇게만 말하면 무슨 뜻인지 모르겠으니..

타입의 중복 제거 태그된 유니온에서 다음과 같은 타입의 중복이 발생할 수 있다. interface SaveAction { type: 'save'; // ... } interface LoadAction { type: 'load'; // ... } type Action = SaveAction | LoadAction; type ActionType = 'save' | 'load' // 타입 중복 그런 경우 아래와 같이 변경해 주면 좋다. type ActionType = Action['type']; // 타입은 'save' | 'load' 이렇게 타입을 지정해주면 Action 유니온에 타입을 더 추가한 경우 ActionType은 자동으로 해당 타입까지 포함하게 된다. 또한, 제네릭 타입을 사용하면 타입의 중복을 ..

이전에 이펙티브 타입스크립트를 한 번 읽어본 적이 있었다. 하지만, 그때는 타입스크립트는 그냥 타입만 지정하는 정도로만 알고 있었기 때문에 하나도 이해를 못 했었다. 요즘 TIFY 프로젝트를 진행하며 타입을 명확하고 안전성 있게 써보는 것에 관심이 많아졌고, 이제는 이 책을 다시 읽어볼 수 있는 단계가 된 것 같아 다시 읽어보게 되었다. 이전보다 훨씬 더 넓은 시야로 타입스크립트를 이해할 수 있는 시간이었다. 책에 있는 설명들과 내가 이해한 개념을 합쳐 글을 써보았다. 구조적 타이핑자바스크립트는 덕 타이핑(구조적 타이핑) 기반으로 동작한다. 타입스크립트 또한 이 방식을 모델링해서 동작하는데, 필요한 매개 변수 값이 요구 사항을 만족한다면 신경 쓰지 않고 실행시킨다. 아래 예시를 한 번 살펴보자.inter..

병목 코드 최적화 이미지 모달 분석 병목 코드를 찾기 위해서 Performance 패널을 이용해보자. 서비스 이용 과정에서 느리거나 문제가 있다고 판단되는 부분을 찾아서 검사해볼 것이다. 이미지 갤러리 서비스에서는 페이지가 최초로 로드될 때, 카테고리를 변경했을 때, 그리고 이미지 모달을 띄웠을 때로 크게 3가지를 알아보면 된다. 이미지를 클릭해서 이미지 모달을 띄웠을 때는 이미지도 늦게 뜨고 배경 색도 늦게 변하는 것을 볼 수 있다. 모달이 뜨는 과정에서 메인 스레드의 작업을 확인하려면, 화면이 완전히 로드된 상태로 Performance 패널의 기록 버튼을 클릭하면 된다. 그리고 이미지를 클릭해서 모달을 띄운 뒤 기록 버튼을 다시 누르면 기록이 종료된다. 페이지에서 이미지 클릭을 하면 이미지 모달이 뜬..

리덕스 렌더링 최적화 리액트의 렌더링 리액트는 렌더링 사이클을 갖는다. 서비스의 상태가 변경되면 화면에 반영하기 위해서 리렌더링 과정을 거친다. 그래서 렌더링이 오래 걸리는 코드가 있거나 렌더링하지 않아도 되는 컴포넌트에서 불필요하게 리렌더링이 발생하면 메인 스레드의 리소스를 차지해서 서비스 성능에 영향을 준다. 이번에 React Developer Tools를 사용해서 이미지 갤러리 서비스는 어떤 상황에서 리렌더링이 발생하는지, 또한 불필요한 렌더링은 없는지 분석해보자. 리렌더링 시 테두리가 나타날 수 있게 Highlight updates when components render 옵션을 클릭해서 어떤 컴포넌트가 어느 시점에 리렌더링되는지 알아보자. 확인해보면, 이미지를 클릭해서 이미지 모달을 띄울 때 모..

레이아웃 이동 피하기 레이아웃 이동이란? 레이아웃 이동이란 화면상의 요소 변화로 레이아웃이 갑자기 밀리는 현상을 말한다. 이미지 갤러리 서비스를 새로고침해보면 레이아웃 이동 현상을 볼 수 있다. 이미지가 로드될 때 아래 이미지보다 늦게 로드되는 경우, 뒤늦게 아래 이미지를 밀어내면서 화면에 그려진다. Lighthouse에서는 웹 페이지에서 레이아웃 이동이 얼마나 발생하는지를 나타내는 지표로 CLS(Cumulative Layout Shift)라는 항목을 두고 성능 점수에 포함했다. CLS는 0부터 1까지의 값을 가지고, 레이아웃 이동이 전혀 발생하지 않은 상태를 0, 그 반대를 1로 계산한다. 또한 권장하는 점수는 0.1 이하이다. Performance 패널을 좀 더 살펴보면 Layout Shift라는 막..