🗂️ 개발 이모저모

우리가 흔히 사용하는 공통 컴포넌트(Input, Dropdown 등)를 사용할 수 있도록 제공하는 shadcn에 대해서 알게되어서 소개해보려고 한다.github를 봤을 때, 예전에 구현햇었던 합성 컴포넌트 방식과 약간 유사하다고 생각해서 무엇인지에 대해서 알아보았다. shadcn이 무엇인가?https://ui.shadcn.com shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com컴포넌트 라이브러리가 아니고, 복사&붙여넣을 수 있는 재사용 가능한 컴포넌트의 모음이라고 스스로 정의하고 있다. 이때 컴포넌트 라이브러리가..

재사용을 염두에 둔 컴포넌트를 구현하다보면, 하나의 컴포넌트에 style variant를 정의해야하는 경우가 생긴다.prop으로 어떤 스타일이 적용될지 전달받는 것인데, 전달해주지 않아도 기본값으로 일정 이상의 스타일이 적용되어 있어야 한다. 이전에는 컴포넌트 파일에 size, backgroundColor, textSize 등을 각 각 지정해두고 props으로 넘겨받을 수 있게 구성했었다. 그리고 사용하는 곳에서 스타일을 추가했을 때 그 스타일도 적용되어야 했다. 어느 스타일까지가 공통적으로 적용되고 어디서부터 variant로 나뉘는 것인지 한 눈에 보기도 어렵고, 스타일 속성이 여러 개의 prop으로 나눠져서 받아야해서 사용하는 사람이 한 눈에 이해하기 어려웠다. 이번에는 style variant를 한..

프론트엔드에서 서비스를 개발할 때, 성능 최적화, 패키지 경량화라는 말을 들어본 적이 있을 것이다.node_modules 폴더의 크기를 줄이는 패키지 경량화를 하면 어떤 이점이 있는 것일까? 패키지 경량화 이점직관적으로 생각해봤을 때, 다운받아야하는 패키지의 크기가 줄어들기 때문에 설치 속도가 빨라질 것이라고 예상할 수 있다.설치 속도가 빨라지면 CI / CD 환경에서 설치가 더 빨리 끝나서 배포 속도가 빨라진다. 그리고 패키지 크기가 작아지게 되면 번들 사이즈가 작아질 가능성이 높아지는데 번들 사이즈가 작아지면 성능에 큰 이점이 있다."패키지 크기가 작아지면 사이즈가 작아진다 !" 라고 확신할 수 없는 이유데드 코드 제거트리 쉐이킹 트리 셰이킹(Tree shaking) - MDN Web Docs 용어 ..

프론트엔드 개발을 하다보면, UI 컴포넌트의 변화를 한 눈에 보고 싶을 때가 있다. 그럴 때 사용하기 좋은 것이 바로 스토리 북이다 !하지만, 정확히 이게 무엇인지 왜 사용하는 것이 좋은 지는 잘 몰라서 이번 기회에 알아보려고 한다. 주로 공식 문서의 내용을 참조해서 내용을 정리해보도록 하겠다 !스토리북 공식 문서 : https://storybook.js.org/docs 스토리 북(Storybook)이 뭐야?공식 문서의 소개글을 인용해보면,스토리북은 UI 구성 요소와 페이지를 독립적으로 구축하기 위한 프론트엔드 도구입니다.전체 앱을 실행할 필요없이 접근하기 어려운 상태와 엣지 케이스를 개발하고 공유할 수 있도록 도와줍니다. 이 말을 설명해보면, 애플리케이션 속에서 비즈니스 로직과 분리된 상태에서 UI를 ..

이전 게시글로 카카오톡 메시지 템플릿을 이용하여 카카오톡 공유하기를 구현해보았다.그런데, 아래의 비빔밥 이미지를 클릭했을 때도 "방명록 남기러 가기" 버튼을 클릭했을 때와 동일한 링크로 이동해야하는데, 서비스 도메인 링크로 이동이 되는 문제가 있었다.메시지 템플릿 설정에서는 이미지와 함께 링크를 넣을 수 있는 설정이 별도로 없었기 때문에 기획자 분의 의도에 맞게 메시지 템플릿을 수정하기로 했다. 미리 메시지 템플릿을 지정해놓는 방법 대신, 직접 클라이언트에서 템플릿 양식에 맞춰 공유하기를 구현하고자 했다.직접 커스텀하고는 싶은데, 방법이 헷갈리는 분들을 위해서 차근차근 설명해보려고 한다. 지금 우리에게 필요한 것은 듀얼 모니터 두 개의 창(링크)이다.   ** 카카오톡 SDK 설치 및 초기화 단계는 이전..

여러 서비스를 이용하다보면, 카카오톡으로 이를 공유하고 싶을 때가 있다.그런 순간 서비스들은 카카오톡 공유하기를 통해서 사용자가 공유할 수 있도록 기능을 제공하는데, 이때 첨부되는 정보는 공유 받은 사용자가 서비스에 새롭게 유입되는지, 안되는지를 결정하기 때문에 꽤나 중요하다고 생각한다. 그래서 나는 카카오톡 공유하기 기능을 통해서 사용자가 우리의 서비스를 널리 공유할 수 있도록 하려고 한다. 카카오톡 공유하기카카오톡 공유하기를 구현하기 위해서는, 우선 카카오 Developer에 내 애플리케이션이 등록되어 있어야 한다.https://developers.kakao.com/카카오톡 공유하기 문서만약 미리 등록해두지 않았다면 등록해두고, 등록하는 법은 내 애플리케이션을 누른 뒤에 차근차근 단계를 따라가면 충분..

이번에 구현하고 있는 서비스에서는 카카오와 구글, 이렇게 두 가지의 OAuth를 지원하고 있다.나는 그 중에서도 카카오를 맡게 되었으나, 구글의 OAuth 플로우도 거의 동일한 것 같아 전반적인 OAuth에 대한 공부를 해보았다.프론트 단에서 처리하는 방법만 알기보다는, 서버에서는 어떤 과정을 거치는 지도 알아야할 것 같아서 백엔드를 담당하시는 분과도 이야기한 후 정리해보았다. 그렇다면 우선 OAuth가 무엇인지부터 알아보자 ! OAuth란?OAuth (Open Authorization)는 제 3자 애플리케이션이 사용자의 비밀번호를 알지 않고도 해당 사용자의 정보를 안전하게 접근할 수 있게 해주는 인증을 위한 개방형 표준 프로토콜이다.이를 통해 로그인 정보와 같은 민감한 데이터를 노출하지 않고도, 다른 ..

개발 환경에서는 잘 로드되던 작은 이미지 하나가 배포 환경에서는 로드되지 않는 문제가 있었다.스타일적인 요소이기도 해서 img 태그의 src로 넘겨주지 않고, background로 처리해주고 있었는데 위와 같은 문제가 발생한 것이었다.  원인을 찾고 싶어서 크게 원인으로 예상되는 것을 뽑아두고, 찾아보았다. 원인 추측1. 경로를 잘못 써주었다 !?간혹가다 파일명이나 경로의 대소문자를 변경하고 바로 반영이 되지 않아 적용이 되지 않는 경우가 있기는 하다.하지만 내가 사용한 이미지 경로에 대소문자만을 변경한 적도 없고, 절대 경로를 통해서 import 하고 있었기 때문에 상대 경로로 인한 문제도 아니었다. 2. 파일 형식에 문제인가?이때 사용한 방식과 똑 ! 같은 방식으로 사용하고 있던 bacground-i..

react-query는 데이터 패칭과 상태 관리를 간편하게 처리할 수 있게 해주는 정말 좋은 라이브러리이다.이번 프로젝트에서도 react-query를 이용한 데이터 패칭을 하게되어서 열심히 사용해보고 있다. 현재 진행하는 프로젝트는 다른 분과 함께하다보니, 그 분이 특정 query-key를 통해서 데이터 패칭을 하고 있다면, 나는 그 쿼리를 무효화할 때 그 분이 어떤 query-key를 쓰고 계시는 지 열심히 찾아서 주워야하는 불편함이 있었다. like 헨젤과 그레텔... 이 뿐만 아니라 query-key를 변경해줘야 할 때도 그 쿼리 키를 사용하는 곳을 여기저기 돌아다니면서 query-key를 변경해줘야 하는 끔찍한 경험이 나를 기다리고 있었다.(쿼리 키만 바꿨을 뿐인데 늘어나는 파일 체인지...) 그..

이번에 (어느덧 한 달이 지난 시점이지만) 프로젝트 목록을 불러오는 로직을 작성하게 되었다.Next.js의 App router을 이용하기로 해서, react-query를 쓸지 안쓸지 팀원분들과 이야기를 나누어보았다.토론의 결과는 react-query를 사용하자는 것으로 귀결되어 무한스크롤 역시 react-query를 사용해서 구현했다. 구현 계획은 프로젝트 리스트의 가장 아랫부분에 div를 넣어두고, 이 요소가 보이는 순간 새로운 데이터를 패칭하는 것이다.그럼 바로 로직을 작성해보자. Intersection Observer 이용하기사용하려는 컴포넌트에서 intersectioin observer 설정을 해도 되지만, ProjectList.tsx는 데이터를 받아서 UI로 보여주는 UI컴포넌트이자, 여러 곳에..