JH 기술 블로그

디자인 시스템을 관심을 바탕으로 현재 진행 중인 프로젝트에 있는 컴포넌트들을 라이브러리화 해서 다른 프로젝트에서도 설치 한번으로 컴포넌트들을 사용할 수 있으면 좋을 것 같다라는 생각을 하였다.굳이 이러한 일을 왜하냐면 규모가 있고, 프론트엔드 개발 생산성에 초점을 맞춘 회사라면 다양한 프로젝트에서 라이브러리화 된 컴포넌트를 적극적으로 사용할 수 있겠다는 생각이 들어서이다. 자 그럼 거두절미하고 라이브러리로 만드는 여정을 떠나보자!버튼 컴포넌트 라이브러리로 만들기1. tsconfig 파일declaration 옵션으로 타입 선언 파일(.d.ts) 생성outDir에 컴파일 산출물을 저장라이브러리 소스는 src 폴더에 위치{ "compilerOptions": { "target": "ES5", "li..

서론여전히 프로젝트를 진행 중이다! 프로젝트를 진행하면서 불편한 점이 하나 있었다.나를 포함해 다른 분들이 컴포넌트 작업을 하시고 PR을 올리실 때 파일 첨부 칸에 Figma 디자인 캡처본 하나, 실제 구현한 컴포넌트 캡처본 하나 이렇게 총 2개의 첨부 사진을 올려야 했다는 것이다.스토리북과 피그마를 번갈아가면서 작업을 하신 다는 것이 굉장히 번거롭다고 생각이 들기도 하였고, 이런 사소한 점이 개발 생산성과 개발자 경험을 저하시킨다고 생각을 하였다.📚 Storybook addon/designstorybookjs/addon-designs: A Storybook addon that embeds Figma, websites, or images in the addon panel. GitHub - storybo..

잡담여전히 사이드 프로젝트를 진행 중이다! 현재는 Bottom Sheet에 대한 요구사항이 생겨서 구현해야 하는 상황이다. 그러나 Bottom Sheet을 깡으로 구현하는 것 보다는 라이브러리가 있고, 커스텀이 가능하다면 해당 라이브러리를 가져와도 좋지 않을까? 라는 생각을 하였고, React Spring Bottom Sheet이라는 훌륭한 라이브러리가 존재한다는 것을 알게 되었다.생각보다 해당 라이브러리 사용에 대한 설명이 부족한 것 같아 추가적으로 필요한 정보들을 기록하고자 한다. + 이 글이 아니어도 공식 문서나 아래의 Github 저장소 링크를 참조할 수 있다.react-spring-bottom-sheet/GET_STARTED.md at main · stipsan/react-spring-botto..

좋은 코드란 어떤 코드라고 생각하세요? 개발자라면 개발자끼리의 대화를 할 때나, 면접에서나 아마 한 번쯤은 들어봤을 질문이라고 생각한다. 그리고 그에 대한 답변은 각양각색일 수 있다고 생각한다. 나와 같은 경우에는 면접에서 이러한 질문을 받았을 때  '유지보수 측면에서 가독성이 좋은 코드가 좋은 코드라고 생각합니다.'라고 대답했었던 기억이 있다. 지금 생각하면 구체적으로 생각해본 적이 많이 없기 때문에 근거가 부족한 애매한 답변이었다는 생각이 든다. 마침 토스에서 FE 지침서 만들었다는 소식을 지인에게 들었고 다음에 같은 질문을 받았을 때는 내가 내린 좋은 코드에 대한 정의를 자신있게 말할 수 있기 위해서 해당 글을 읽고 정리하고자 한다. 이번 포스팅에서는 가독성과 관련된 글 위주로 다룰 예정이다.좋은 ..

MSW 도입 배경사실 프론트엔드 개발자에게 가장 이상적인 개발 과정은 MVP 모델 수립 이후 백엔드 개발이 완성되어 있는 상태에서 프론트엔드 개발을 하는 것이다. 그러나 지금까지 겪어 왔던 프로젝트들은 이러한 이상과는 거리가 있었다. 바로 아래의 그림처럼 말이다.  설상가상으로 이전 독서 토론 플랫폼 지성인 프로젝트를 진행하면서 백엔드 개발자 분들이 바쁜 시기가 있어 예정된 시기에 API를 제공 받지 못하였다. 백엔드 개발에 의존적인 프론트엔드 개발의 특성 상, 프론트엔드 개발 일정도 덩달아 길어지게 되었고, 우리 팀은 MSW를 적용해 백엔드 개발에 의존적이지 않은 개발 환경을 구축하기로 하였다.MSW에 대해 알아보기 MSW(Mock Service Worker)는 프론트엔드 개발에서 API를 모킹하기 위..

🔑 무한스크롤 도입 계기요즘 조금씩 시간을 내서 사이드프로젝트를 진행 중이다! 디자이너분이 제공해주신 목업을 보았을 때, 무한스크롤로 구현하면 좋을 것 같다는 생각이 들었다.홈 화면에서는 전체 To Do를 보여줘야 하는 요구사항이 존재하였는데, 만약 To Do가 많아지면 분명 성능적인 이슈가 발생할 것이 분명했다. 그렇기에 기획자 분과 UX적으로 어떤 방법이 좋을 지 함께 고민하고 상의한 끝에, 무한 스크롤을 통해 전체 To do를 보여주는 방식을 채택하기로 하였다. 프론트엔드 분들과 상태관리 라이브러리를 선택할 때, Jotai와 Tanstack Query를 사용하기로 결정하였기에 Tanstack Query에서 제공하는 useInfiniteQuery 를 통해 무한 스크롤을 구현해야겠다는 생각이 들었다...

사이드 프로젝트를 진행하면서 여러 아이콘들을 svg 파일들로 관리해야 했다.svg 파일들을 어떻게 해야 효율적으로 다룰 수 있을까 알아보았고, SVGR을 발견하게 되었다. 이번 포스팅을 통해서 SVGR을 적용하는 방법과 더불어 storybook에서까지 적용해보는 시간을 가져보려고 한다.🔥SVGR을 사용하는 이유SVGR은 SVG 파일을 React 컴포넌트로 변환하여 더욱 직관적이고 재사용 가능한 방식으로 SVG를 다룰 수 있게 한다.SVGR을 적용한 코드와 적용하지 않은 코드를 비교하면 SVGR의 장점을 알 수 있을 듯하다.1)  img 태그를 이용해서 importfunction App() { return ;}기본 태그인 img를 이용하면 파일의 경로만 입력해주면 쉽게 렌더링 할 수 있다는 장점이 존재..

서론지난 주에는 사이드 프로젝트에서 사용할 라이브러리를 선택하고 공부하는 시간을 가졌다. 이제 본격적으로 프로젝트를 세팅하고 있는 중인데, Axios를 세팅하는 김에 블로그에 정리하며 깊이 있게 공부하면 좋을 것 같아 이렇게 글을 작성한다.Axios란?Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. HTTP 요청(GET, POST, PUT, DELETE 등)을 손쉽게 처리할 수 있도록 도와주며, 주로 RESTful API와 통신하기 위해 사용된다.쉽게 말하자면, 백엔드와 프론트엔드 간의 통신을 쉽게하기 위해 존재하는 라이브러리라고 할 수 있다.설치$ npm install axios // npm$ yarn add axios // yarnAxios의 주요 특징P..