전체 글

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

간혹, 버튼이나 스크롤 이벤트에서 디바운스나 쓰로틀을 이용하여 함수의 호출 횟수를 핸들링하고 싶을 때가 있다.그럴 때 나는 lodash 라이브러리를 이용해서 이 라이브러리에서 제공하는 함수를 호출하여 사용했었다.그런데, 쓰로틀과 디바운스만 사용하는데 lodash 라이브러리를 사용해야하는 걸까? 하는 생각이 들었다. 그리고 내가 쓰로틀과 디바운스를 적용했던 것이 과연 적절한 동작이었을까? 한 번 회고하며 알아보면 좋을 것 같다는 생각이 들어서 글을 작성하게 되었다. 아마 많은 분들이 쓰로틀과 디바운스가 뭐야? 라고 물었을 때 거의 반자동으로 답변을 하실 수 있으리라고 생각한다.하지만 ! 모르시는 분들이 있을 수 있기 때문에 한 번 더 정의를 짚고 넘어가려고 한다.그리고 나도 한 번 더 확실하게 정리하고 넘..

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

이번 포스팅에서 다룰 내용은 polymorphic한 컴포넌트를 구현하는 과정이다.이전까지 서비스를 개발하면서 느꼈던 불편함을 먼저 개선, 적용해보신 분의 글을 꽤나 감명깊게 읽어서 직접 구현해보기로 마음 먹었다.구현과정에서 typeScript에 대한 공부도 많이 되어서 관심이 있다면 그 과정을 찬찬히 따라가보면 좋을 것 같다.  뭐가 불편해서 알아본 것일까?우선 내가 어떤 부분을 개선하고 싶었는지에 대해서 먼저 이야기하고 넘어가야할 것 같다.내가 불편하다, 개선하고 싶다고 느꼈던 부분은 바로 Button 컴포넌트와 a 태그의 사용이다.Button 컴포넌트는 특정 이벤트 핸들러를 호출하기도 하고, 때론 a 태그처럼 사용될 때도 많았다. 그럴 때마다 a 태그 안에 Button 컴포넌트를 넣거나 Button ..

앞선 포스팅에서 백엔드에 도전해보겠노라 으럇샤 기합을 남겼었다. 하하 !과연 3일 동안 무엇을 했을지, 시작은 했을지 알아보도록 합시다~ 2024.11.07 - [💡뚝딱뚝딱 만들어보자 ~! :)] - 필요했던 걸 만들 수 있게 되었다면? 만들어보자 ! (with. 조아용 상품소개서) 필요했던 걸 만들 수 있게 되었다면? 만들어보자 ! (with. 조아용 상품소개서)어떤 목적으로 왜 만들고 싶은지에 대해작년 초부터 말까지 나는 시청에서 특례시 마스코트를 이용한 굿즈 디자인 업무를 한 적이 있었다.디자인부터 제작 공장 컨택, 홍보물 제작에 이르기까codingaring.tistory.com 백엔드 프로젝트 세팅에 대해서 공부도 하고 DB 연결도 하고, 기본적인 엔드 포인트와 api 연결 등을 공부하고 돌아와..

어떤 목적으로 왜 만들고 싶은지에 대해작년 초부터 말까지 나는 시청에서 특례시 마스코트를 이용한 굿즈 디자인 업무를 한 적이 있었다.디자인부터 제작 공장 컨택, 홍보물 제작에 이르기까지 전반적인 모든 업무를 수행하다보니, 상품 소개서에 대한 필요성을 많이 느꼈다.이 사업을 잘 모르는 공장주에게 지속 가능하고 신뢰성있는 사업이라고 설득할 때도 필요하고, 단체 주문 손님들에게만 제공되는 상품 옵션들을 쉽게 안내하기 위해서도 필요하다. 물론 인쇄물로 상품 소개서를 제작하기는 했다. 하지만 이는 한 번 제작할 때마다 최소 2만장에서 많게는 3만장 이상 제작해야 했고, 이에 따라 기간과 비용이 큰 부담으로 다가왔다.심지어 우리는 끊임없이 신제품과 기존 제품의 새로운 옵션을 제작했기 때문에 큰 돈 들여 제작한 상품..

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

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

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

문제 설명삼각형의 세 변의 길이가 주어질 때 변의 길이에 따라 다음과 같이 정의한다.Equilateral :  세 변의 길이가 모두 같은 경우Isosceles : 두 변의 길이만 같은 경우Scalene : 세 변의 길이가 모두 다른 경우단 주어진 세 변의 길이가 삼각형의 조건을 만족하지 못하는 경우에는 "Invalid" 를 출력한다. 예를 들어 6, 3, 2가 이 경우에 해당한다. 가장 긴 변의 길이보다 나머지 두 변의 길이의 합이 길지 않으면 삼각형의 조건을 만족하지 못한다.세 변의 길이가 주어질 때 위 정의에 따른 결과를 출력하시오. 입력각 줄에는 1,000을 넘지 않는 양의 정수 3개가 입력된다. 마지막 줄은 0 0 0이며 이 줄은 계산하지 않는다. 출력각 입력에 맞는 결과 (Equilateral,..