본문 바로가기

전체 글

AI가 코드를 쓰는 시대의 검증, 커버리지 47% → 84%, 그리고 테스트가 찾아준 버그들 같은 팀의 다른 프로젝트와 온라인 추모관 프로젝트의 테스트 수를 나란히 놓고 보다가 좀 뜨끔했다.기능은 계속 늘었는데 그걸 지켜주는 그물은 그만큼 늘지 않았다그런데 더 뜨끔했던 건 그 다음 생각이었다. 요즘 나는 코드를 직접 타이핑하는 시간이 확 줄었다. AI에게 구현을 맡기고 나는 읽고 판단한다. 그러면 내 일에서 가장 중요한 건 뭐가 되나. 이번 이틀은 그 질문에 대한 답을 코드로 남기는 데 썼다.왜 지금 테스트인가? 손이 아니라 눈이 병목이 됐다AI로 개발하면 구현은 빨라진다. 그런데 빨라진 만큼 한 번에 들어오는 코드의 양도 늘어난다. 예전엔 내가 한 줄씩 치면서 자연스럽게 검토가 됐는데, 이제는 다 만들어진 200줄을 받아서 읽는다.문제는 그 코드가 대체로 그럴듯해 보인다는 것이다. 타입도 맞.. 더보기
코드관리와 퍼포먼스 관점에서의 CSS-in-JS vs CSS in CSS CSS-in-CSS빌드타임에서 모든 스타일을 생성되어 빌드의 결과물인 css파일의 클래스네임으로 html에 스타일링된다.ex) bootstrap, tailwinds, sass, less우리 컴포넌트에서 알아보기이미 빌드타임에 만들어져 있는 stylesheet로 스타일이 변경되는 걸 확인할 수 있다. 장점단순한 CSS 작성으로 러닝 커브가 낮다.styled-component나 emotion같은 라이브러리가 포함되어있지 않아 번들 사이즈가 작다.style과 관련하여 가독성을 해치지 않는다.{text}단점초기 로딩에 거대한 stylesheet 파일들이 포함될 수 있다.중복 코드가 발생할 수 있다.더보기List라는 컴포넌트가 아래와 같은 스타일이 필요했고, 이에 row라는 클래스네임을 지정했다. Item이라는 .. 더보기
디자인 시스템을 개발하면서 알게 된 peerDependencies의 역할 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... 더보기
css 애니메이션, position대신 transform으로 하면 좋은 이유(예제 포함) reflow와 repaint가 많을수록 성능저하를 유발한다고 알고있는데, 이론으로 말고 실제로 구현과 측정을 통해서 어떤 차이가 있는지 알아보고 싶어서 테스트를 작성해봤다. 1. DevTool에서 성능(performance)탭에서 알아본다. 2. 레이아웃이 다시 되는지 확인한다. -> reflow를 확인한다. relfow 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다. repaint reflow 과정이 끝난 후, 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 background-color, visibility, outline 등의 스타일 변경시에는 reflow 과정이 생략 된 repaint .. 더보기
i18n(국제화 언어)리액트에서 적용하기 목적 국제화(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.. 더보기
리액트에서 DOM 사이즈 줄이는 최적화 방법 어셋 최적화를 포함한 웹서비스에서의 최적화에 관심을 가지게 되면서 작업했던 것 중 하나이다. 아이템 리스트에서 처음에 썸네일 이미지가 보이기 전에 스켈레톤 UI를 보여주곤 한다. 그래서 스켈레톤 컴포넌트를 공통으로 쓰고 있었다. 그러다 보니 단순 이미지 엘리먼트뿐만 아니라 스켈레톤 UI의 DOM도 포함됨으로써 시각적으로 좀 느린 느낌이 느껴졌다! 물론 사용자 입장에서는 크게 느끼지 못할 수 있으나, 개발자 입장에서는 사소한 느린 로딩도 알아채기가 쉽다.... 그래서 찾게 된 방법이다. 특히나 emotion이나 styled-component 같은 CSS-in-JS를 사용한다면 DOM구조가 나도 모르게 엄청 깊어지는 걸 알 수 있다. 그래서 이 최대한 DOM요소를 줄여 로드되는 시간을 줄이고자 했다. DOM.. 더보기
사파리에서 webm 영상 백그라운드가 투명하게 나오지 않는 이슈 웹에서 비디오 최적화를 위해서는 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 .. 더보기

티스토리툴바