분류 전체보기

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..

[후기] 함께 자라기

많은 분들로부터 추천받은 김창준 님의 책 '함께 자라기' 내용을 정리하고 느낀 점을 공유해보고자 합니다. 함께 자라기 | 김창준 - 교보문고 함께 자라기 | 모두가 함께 발전하기 위한 제안‘함께’는 협력을 말하고, ‘자라기’는 학습을 말합니다. 무엇이건 실제 바깥세상(야생)에 임팩트를 남기려면 혼자 힘으로만 되는 게 없습니다. product.kyobobook.co.kr 책에서는 '자라기', '함께', '애자일' 총 세 부분으로 나눠 학습과 협력의 중요성을 설명하고 있다. 다양한 주제의 연구와 구체적인 사례를 들어 우리가 실제로 겪어봤을 만하거나 경험해볼 수 있는 상황을 제시하고 있는데 '자라기' 부분이 가장 인상적이었다. 불확실성이 높을수록 학습이 중요하다. 목표로 다가가기 위해 방향과 길을 조정하지 않..

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

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

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

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

2023년 회고

예상치 못한 일정들로 정신없이 연말연시를 보내며 차마 갈무리하지 못한 2023년을 돌아보고 조금은 늦었지만 2024년 목표를 정해보려고 한다. 작년의 아쉬운 점들을 보완해서 올해에는 목표들을 이루며 매 달을 좀 더 만족스럽게 보내고 싶다. 프로그래머스 데브코스 수료 22년 10월부터 23년 2월까지 5개월 간 강의와 프로젝트, 스터디를 통해 프론트엔드 개발 역량의 기반을 다질 수 있었다. 본격적으로 취준을 시작했던 시기라서 어떻게 준비해야 할지 고민이 많았는데 함께한 팀원들과 매니저님, 멘토님과 강사님 덕분에 힘들 때마다 마음을 다잡고 다시 일어날 수 있었던 것 같다. 개발을 좋아하고 개발자로 일하고 싶어하는 사람들과 함께 디스코드에서 프로젝트와 공부로 밤새어 가며 열심히 했던 것들이 기억에 오래 남을 ..

Node.js와 TypeScript, Selenium으로 웹 스크래퍼 만들기 (1) 준비와 설계

최근에 사내 프로젝트에 필요한 데이터를 주기적으로 수집하는 웹 스크래퍼를 개발했습니다. 클라이언트가 API를 별도로 제공하지 않아서 클라이언트가 제공하는 웹 사이트로부터 실시간으로 추가되는 데이터를 수집하여 사내 DB의 데이터를 업데이트해야 하는 상황이었는데요. DB의 데이터를 업데이트하는 API를 통해 전달되는 데이터 형태는 동일하지만 클라이언트 웹 사이트가 10곳 이상 추가될 예정이었습니다. 그래서 구조 설계를 할 때 언제든지 새롭게 추가된 사이트에 대한 코드를 작성하여 기능을 추가하더라도 일관된 구조로 개발하고 유지할 수 있게 하는 것을 가장 중요하게 생각했어요. 현재는 개발 및 배포를 마쳐 모니터링을 진행하고 있는데 지금까지의 개발 과정을 되짚어보려고 합니다. 이번에는 웹 스크래퍼 개발 전 준비 ..

프로그래머스 데브코스 프론트엔드 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를 렌더링합니다. ..