전체 글

요즘에 코딩 테스트를 풀면서 최적의 알고리즘이 무엇일지 공부하고 있다.이번 문제를 풀면서 비교적 간단한 문제이지만 이 알고리즘 기법을 사용하면 조금 더 쉽게 문제를 풀 수 있어 공부하려고 가져와 봤다. 슬라이딩 윈도우란?Sliding window는 배열이나 리스트 같은 연속된 데이터에서 특정 구간의 값을 효율적으로 계산하거나 탐색할 때 사용하는 알고리즘 기법이다.여기서 특정 구간을 윈도우라고 지칭한다. 코딩 테스트 중에서 특정 구간의 합, 연속된 숫자의 조합 같은 키워드가 있을 때는 이 알고리즘을 생각하며 문제를 접근하는 것이 좋을 것 같다. 이 알고리즘 기법을 사용하면 전체를 매번 계산하지 않고, 이전 결과를 사용해서 반복적으로 계산을 갱신해나갈 수 있다.function slidingWindowSum(..

우리가 흔히 사용하는 공통 컴포넌트(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컴포넌트 라이브러리가 아니고, 복사&붙여넣을 수 있는 재사용 가능한 컴포넌트의 모음이라고 스스로 정의하고 있다. 이때 컴포넌트 라이브러리가..

문제를 풀 때마다 그 문제에 적합한 알고리즘이 무엇일지 찾으면서 공부하고 있는데, 알고리즘은 참 다양한 것 같다.두 개의 예제를 통해서 이 알고리즘을 어떻게 적용하는지 알아보려고 한다. 두 포인터(Two Pointers)란?배열이나 리스트에서 두 개의 포인터(인덱스)를 사용하여 효율적으로 문제를 해결하는 알고리즘이다.주로 정렬된 배열이나 리스트에서 특정 조건을 만족하는 값을 찾거나, 병합, 탐색할 때 사용된다. 두 개의 포인터를 사용배열이나 리스트의 특정 위치를 가리키는 두 개의 포인터를 사용해 문제를 해결주로 시작점과 끝점, 또는 두 배열의 각각 첫 번째 요소에서 시작 효율성배열 전체를 한 번만 순회하거나, 필요한 만큼만 순회하기 때문에 시간 복잡도가 O(N) 또는 O(N + M)으로 매우  효율적 주..

문제 설명 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다.-1+1+1+1+1 = 3+1-1+1+1+1 = 3+1+1-1+1+1 = 3+1+1+1-1+1 = 3+1+1+1+1-1 = 3  사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한 사항주어지는 숫자의 개수는 2개 이상 20개 이하입니다.각 숫자는 1 이상 50 이하인 자연수입니다.타겟 넘버는 1 이상 1000 이하인 ..

재사용을 염두에 둔 컴포넌트를 구현하다보면, 하나의 컴포넌트에 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만장 이상 제작해야 했고, 이에 따라 기간과 비용이 큰 부담으로 다가왔다.심지어 우리는 끊임없이 신제품과 기존 제품의 새로운 옵션을 제작했기 때문에 큰 돈 들여 제..