Jaddong's Lab

CSS-in-CSS빌드타임에서 모든 스타일을 생성되어 빌드의 결과물인 css파일의 클래스네임으로 html에 스타일링된다.ex) bootstrap, tailwinds, sass, less우리 컴포넌트에서 알아보기이미 빌드타임에 만들어져 있는 stylesheet로 스타일이 변경되는 걸 확인할 수 있다. 장점단순한 CSS 작성으로 러닝 커브가 낮다.styled-component나 emotion같은 라이브러리가 포함되어있지 않아 번들 사이즈가 작다.style과 관련하여 가독성을 해치지 않는다.{text}단점초기 로딩에 거대한 stylesheet 파일들이 포함될 수 있다.중복 코드가 발생할 수 있다.더보기List라는 컴포넌트가 아래와 같은 스타일이 필요했고, 이에 row라는 클래스네임을 지정했다. Item이라는 ..

package.json에서는 우리가 해당 프로젝트에 대한 정보 및 의존 정보들을 작성하게된다.name, verson, repository, scripts, dependencies, devDependencies 등의 정보가 json형태로 존재한다.package.json에서 대부분 쓰는 항상 항목들만 쓰는 경우가 많을 것이다.하지만 만약 공통 모듈 패키지나 라이브러리를 개발중이라면 peerDependencies에 집중할 필요가 있다는 걸 알게되었다.  1. 문제 발견my-app 리액트 프로젝트에서 내가 개발한 라이브러리 my-packge와 another-package를 설치해 사용하려고했다.아래와 같은 package.json를 작성하였다. { "name": "my-app", "version": "1.0...

reflow와 repaint가 많을수록 성능저하를 유발한다고 알고있는데, 이론으로 말고 실제로 구현과 측정을 통해서 어떤 차이가 있는지 알아보고 싶어서 테스트를 작성해봤다. 1. DevTool에서 성능(performance)탭에서 알아본다. 2. 레이아웃이 다시 되는지 확인한다. -> reflow를 확인한다. relfow 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다. repaint reflow 과정이 끝난 후, 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 background-color, visibility, outline 등의 스타일 변경시에는 reflow 과정이 생략 된 repaint ..

목적 국제화(internalization)된 애플리케이션은 다양한 언어로 서비스를 할 수 있습니다. 그러기 위해서는 사용자의 언어/지역을 자동으로 감지하거나 사용자가 직접 선택할 수 있도록 합니다. 라이브러리 비교 React에서 사용할 수 있는 국제화(internalization, 이하 i18n) 라이브러리는 두 종류가 있습니다. react-intl react-i18next Next.js지원을 강화한 next-i18next 결론부터 말하자면 다음과 같습니다. Next.js와 Server Side Rendering(SSR)을 사용해야 한다면 next-i18next Next.js의 Static Site Generation(SSG)을 사용해야 한다면 react-i18next SSR이 필요해질 경우 next-i..

어셋 최적화를 포함한 웹서비스에서의 최적화에 관심을 가지게 되면서 작업했던 것 중 하나이다. 아이템 리스트에서 처음에 썸네일 이미지가 보이기 전에 스켈레톤 UI를 보여주곤 한다. 그래서 스켈레톤 컴포넌트를 공통으로 쓰고 있었다. 그러다 보니 단순 이미지 엘리먼트뿐만 아니라 스켈레톤 UI의 DOM도 포함됨으로써 시각적으로 좀 느린 느낌이 느껴졌다! 물론 사용자 입장에서는 크게 느끼지 못할 수 있으나, 개발자 입장에서는 사소한 느린 로딩도 알아채기가 쉽다.... 그래서 찾게 된 방법이다. 특히나 emotion이나 styled-component 같은 CSS-in-JS를 사용한다면 DOM구조가 나도 모르게 엄청 깊어지는 걸 알 수 있다. 그래서 이 최대한 DOM요소를 줄여 로드되는 시간을 줄이고자 했다. DOM..

웹에서 비디오 최적화를 위해서는 webm 확장자를 사용하는 것이 좋았다. 하지만 사파리 브라우저에서 자동 재생 이슈와 배경이 투명한 영상이 정상적으로 보이지 않고 까맣게 백그라운드 처리가 되는 이슈를 발견해서 처리하는 과정을 설명해봤다. 비디오 최적화하기 하나의 소스를 제공하는 것이 아니라, 최적화를 위해 여러 영상을 제공하고 브라우저가 렌더링 할 수 있는 영상을 사용한다. 아래의 예시에서는 브라우저가 webm 영상을 렌더링할 수 있는 경우 선택한 영상 파일이다. 그렇지 않으면 다음 요소로 이동하여 두 번째 요소는 mp4 형식의 영상을 가리키게 된다 . 브라우저가 mp4 영상을 렌더링할 수 있는 경우 해당 영상 파일을 사용하고 webm의 용량이 mp4보다 훨씬 작아 우선순위가 높기 때문에 먼저 선언해주면..

서비스가 심미적이나 기능적으로 모두 구현되었다고 끝이 아님을 대부분 개발자들이 알고 있을 것이라 생각한다. 그중에 꼭 짚고 넘어가야 할 것이 어셋들(image, video, sound 등)에 대한 성능 최적화 작업이다. 성능 최적화 작업은 프론트엔드, 벡엔드, 디자이너 단에서 모두 각자의 방식으로 작업이 가능하나 그중 나는 프론트엔드 쪽에서 작업한 경험을 간단하게 정리해 보았다. 이미지 최적화하기 svg svg 이미지는 sources로 사용하는 것보다 svg그대로 사용하는 것이 성능에 좋다. import { ReactComponent as Logo } from "assets/icons/logo_bg.svg"; const LogoComponent = () => { return ( ); }; sources ..

Throttle 과 Debounce 의 필요성이 나온 이유 1. 검색창에서 "떡볶이"를 검색할 때 타이핑을 할 때마다 텍스트 필드 하단에 입력한 검색어와 맞을 만한 추천 검색어를 하단에 보여주게된다. 이런 경우 매번 입력할 때마다 api를 호출해본다고 생각해보자. 사용자 경험으로는 추천 검색어를 바로 볼 수 있기 때문에 좋을 수는 있으나, 사용자의 의도와 무관한 요청이 계속 된다면 이것은 성능적으로 매우 좋지 않은 결과가 있을 수 있다. 또한 api의 호출이 잦아 로딩이 길어진다면 사용자의 경험에도 안 좋은 영향을 줄 수 있다. 2. Infinite scrolling page(무한 스크롤 페이지) 사용자가 스크롤을 할 때마다 새로운 컨텐츠가 하단에 무한으로 보여지는 되는 UX는 요즘 어디서나 쉽게 찾아볼..

현재 회사에서 디자인시스템을 모노레포로 만드는 작업을 하고 있다. 모노레포에 있는 각각의 라이브러리들을 rollup을 통해 번들링이되는데, 지금 모노레포와 rollup 관련해서 꽤나 삽질을 하고 있다. 그래도 배우는 것이 있어서 정리해보고자 한다. 현재 rollup.config.js파일이다. 여기선 결과물의 경로나 format을 정할 수 있다 cjs로 선택되어 있는 상태이다. // rollup.config.js output: { dir: "lib", format: "cjs", exports: "named", }, 이렇게 나온 번들 결과물을 package.json에서 사용하겠다고 지정을 한다. main은 이 라이브러리를 사용할 때 참조할 파일이고, types는 타입스크립트 파일이 되겠다. 그러면 modul..

문제 Implement a function called countUniqueValues, which accepts a sorted array, and counts the unique values in the array. There can be negative numbers in the array, but it will always be sorted. 정렬이 되어있는 배열에서 고유의 값들의 갯수를 세는 함수를 실행하라. 배열에는 음수가 있을 수 있으나 항상 정렬이 되어있다. Examples: countUniqueValues([1,1,1,1,1,2]) // 2 countUniqueValues([1,2,3,4,4,4,7,7,12,12,13]) // 7 countUniqueValues([]) // 0 count..