전체 글

tailwind-merge로 클래스 충돌 해결하기

TL;DR tailwind-merge, twin.macro와 같은 NPM 패키지를 활용하면 하나의 요소에 같은 속성을 정의하는 className이 두 개 이상일 경우, 가장 마지막에 위치한 클래스가 최종적으로 적용되게 할 수 있습니다. 문제 상황 저는 요즘 React, TailwindCSS, TypeScript를 이용한 UI 공통 컴포넌트 라이브러리를 만들고 있는데요. BaseButton이라는 기본 Button UI 컴포넌트를 만든 후에 BaseButton 컴포넌트를 사용하는 기본 Chip 컴포넌트를 만들었습니다. 스토리북으로 문서화하기 위해 스토리를 작성하던 중에 예상한 대로 동작하지 않아서 개발자 도구를 함께 열어보고 확인해보았습니다. // BaseChip.tsx interface Props { ch..

IndexedDB 활용해보기

사내 백오피스 웹 페이지를 개선하는 작업을 진행하던 중에, 서버에서 관리하기에는 비용이 많이 들고 임시로 관리하면 되는 데이터이면서 URI에는 노출되지 않아야 할 데이터를 클라이언트에서 관리하게 되었습니다. IndexedDB API를 활용하여 데이터를 관리하면서 고려했던 점과 예시 코드를 정리해보고자 합니다. IndexedDB는 파일이나 blob 등의 데이터를 클라이언트에 저장할 수 있는 API로 JavaScript 기반의 객체지향 데이터베이스입니다. 인덱스 키를 통해 데이터를 저장하고 검색할 수 있기 때문에 빠르게 탐색할 수 있습니다. 보안에 취약하고 용량이 제한되어 있는 Web Storage API(Local Storage, Session Storage)에 비해 IndexedDB는 다음과 같은 장점을..

requestAnimationFrame() 알아보기

최근에 이벤트 루프의 개념을 다시 짚어보던 중에 requestAnimationFrame을 접하게 되어 좀 더 자세히 알아보았습니다. 효율적인 페이지 렌더링이나 매끄러운 애니메이션과 인터랙션 구현에 관심 있으시다면 requestAnimationFrame을 활용해보셔도 좋을 것 같아요. requestAnimationFrame은 웹 애니메이션을 구현할 때 자주 사용되는 Web API 중 하나입니다. 우선 어떤 방식으로 사용하는지 살펴보겠습니다. window.requestAnimationFrame() 메서드 프레임(frame)은 화면에 표시되는 이미지 단위를 의미합니다. 움직이는 애니메이션을 보여주기 위해서는 연속적으로 조금씩 변화하는 이미지를 표시해서 하나의 연속된 동작으로 인식하도록 합니다. requestA..

[유데미(Udemy)] TDD로 배우는 웹 프론트엔드 강의 후기

TDD(Test-driven Development, 테스트 주도 개발)는 테스트를 먼저 만든 후, 만든 테스트를 통과하도록 코드를 작성하는 개발 방법입니다. TDD 방법론의 핵심은 '작성한 실제 코드가 원하는 대로 동작하는지에 대해 자주 빠르게 피드백을 받는다'라는 것인데요. 유데미(Udemy)의 'TDD로 배우는 웹 프론트엔드' 강의에서는 TDD 방법론의 장점과 best practice, 그리고 예제를 통해 프론트엔드에서 TDD로 개발하는 방법에 대해 배울 수 있습니다. 강의에서 언급하고 있는 TDD의 장점은 다음과 같습니다. 결정과 피드백 간 간격을 좁힐 수 있습니다. TDD의 개념을 널리 알린 켄트 벡(Kent Beck)은 TDD를 '결정과 피드백 사이의 갭에 대한 인식', '결정과 피드백 사이의 ..

[유데미(Udemy)] 기술블로그로 알아보는 테크니컬 라이팅 후기

테크니컬 라이팅에 대해 들어본 적 있으신가요? 테크니컬 라이팅(technical writing)은 말 그대로 기술 문서를 쓰는 모든 글쓰기 활동을 가리킵니다. 실제로 회사에서 업무를 하다 보면 기술 블로그, API 레퍼런스 등 기술 정보가 담긴 글뿐만 아니라 기획서, 보고서, 메일, 회의록도 자주 접하게 되는데 넓게 보면 모두 기술 문서에 속합니다. 특히 개발자라면 회사나 개인이 운영하는 기술 블로그의 글을 자주 접하실 텐데요. 글을 읽을 때 비슷한 내용이더라도 술술 잘 읽히는 글이 있는가 하면, 도입부부터 이해하기 어렵고 머릿속에 잘 들어오지 않는 글도 있습니다. 막상 글을 쓰려고 하면 쉽게 이해할 수 있는 간결한 글을 쓰는 것이 참 쉽지 않습니다. 어떻게 하면 제 의도를 명확히 전달하고 잘 읽히는 글..

프로그래머스 데브코스 프론트엔드 3기 6주차 회고(11/21 - 11/27)

공부한 것 VanillaJS로 웹 앱 만들기(고양이 사진첩, 고양이 사진 검색기) API 연동 전 더미 데이터를 적용해서 컴포넌트 만들기 main.js와 App 컴포넌트를 분리해서 구현하면 컴포넌트를 선언하는 부분과 컴포넌트를 초기화해서 실행하는 부분을 분리할 수 있다. App 컴포넌트를 여러 곳에 재사용할 수도 있다. Java나 C언어는 main 함수로 실행과 구현부를 분리하는 게 자연스러운 반면 JavaScript는 그 경계가 모호하다. 선언부와 실행부가 분리되어 있으면 나중에 유닛 테스트할 때 편리하다. 자동 완성 UI 만들기 타이머로 이벤트를 지연시키는 중에 같은 이벤트가 발생하면 이전 이벤트를 취소하고 다시 타이머를 거는 방식으로 디바운스를 적용할 수 있다. 검색 키워드를 session stor..

VanillaJS 노션 클로닝

11월 8일부터 16일까지 프로그래머스 데브코스에서 VanillaJS로 노션(Notion)을 클로닝하는 개인 프로젝트를 진행했습니다. 프로젝트 배포: https://yuri-notion.vercel.app 매일같이 쓰는 툴이라서 익숙하지만 한편으론 편리한 만큼 구현해야 할 기능이 많아서 걱정됐습니다. 그래서 강의를 다시 듣고 이해하는 데 집중하느라 초반엔 빠른 속도로 진행하지 못했습니다. 더 이상 지체되면 안 될 것 같아서 구현 사항을 참고하여 설계부터 조금씩 시작했습니다. 최소 구현 사항 - 글 단위를 Document라고 합니다. Document는 Document 여러 개를 포함할 수 있습니다. - 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다. ..

프로그래머스 데브코스 프론트엔드 3기 1차 단위기간 회고(10/14 - 11/13)

벌써 1차 단위기간 마지막 날이라니! 한 달 동안 온라인 강의와 과제, 특강, 세션 등으로 알차게 보냈다. 지금은 개인 프로젝트를 진행하고 있는데 곧 이 프로젝트에 대한 회고도 남겨보려고 한다. 🔗 데브코스 프론트엔드 데브코스 3기 합격 후기 🔗 개인 프로젝트 VanillaJS 노션 클로닝 온라인 강의 코어타임(보통 13~19시)에는 디스코드의 보이스 채널에 팀별로 모여 각자 할 일을 한다. 나는 주로 온라인 강의를 듣거나 알고리즘 문제를 풀었다. 중간에 각자 하고 있는 것을 스크린샷으로 인증하는데 다른 분들이 하고 계시는 걸 보고 자극받아 더 열심히 하게 됐다. 1-2주에는 문법과 함께 자료구조와 알고리즘 전반에 대해 정리할 수 있었다. 이론뿐만 아니라 실제 알고리즘 문제도 풀어볼 수 있어서 도움이 많..

가상 DOM 없이 효율적으로 DOM 요소 추가하기 (feat. DocumentFragment 노드)

가상 DOM을 사용하지 않고 성능을 위해 최적화를 한다면 어떻게 해야 할까? → DocumentFragment 노드를 사용하자. DOM을 변경하는 처리에 비용이 많이 든다. 특히 DOM 요소 노드를 반복해서 추가(e.g. appendChild)하는 건 매우 비효율적이다. 따라서 가급적 DOM을 변경하는 횟수를 줄이는 게 성능에 유리하다. 미리 가짜 document를 만들어 여기에 요소들을 추가한 다음, 한번에 document에 추가해서 진짜 document는 한 번만 조작하도록 해보자. DOM 변경 자바스크립트 코드에서 DOM API로 DOM이나 CSSOM을 변경하면 → 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 → 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 리플로우(refl..

[구름/JavaScript] 알고리즘 먼데이 챌린지 3주차

챌린지 소개 구름LEVEL 코딩테스트에서 가장 높은 비중을 차지하는 알고리즘 문제를 제작하고 풀이할 수 있는 온라인 저지 서비스입니다. 기업에서 선호하는 C, C++, 파이썬(Python), 자바(Java), 자바스크립트(Javascript) 이 level.goorm.io 문제 및 해설 알고리즘 {먼데이} 챌린지 해설 - 구름EDU 구름LEVEL에서 진행되는 알고리즘 {먼데이} 챌린지 해설 강좌입니다. edu.goorm.io 10월 3일부터 12월 4일까지 구름LEVEL에서 알고리즘 먼데이 챌린지를 진행하고 있습니다. 8주 동안 매주 월요일마다 새로운 문제가 출제되는데 문제를 풀거나 이전 주의 문제를 복습하면 스탬프를 모을 수 있습니다. 스탬프 개수에 따라 다양한 상품도 받을 수 있어서 알고리즘 공부에 ..