본문 바로가기

전체 글314

타입스크립트 프로그래밍 회고 작년에 사놓고 한참을 방치해 놓았다가 2달 전부터 주말마다 조금씩 읽어본 책입니다. FE 엔지니어로 일을 하면서 타입스크립트를 업무에 적극적으로 활용하고 있지만, 어느 순간부터 자주 사용하는 기능들만 계속 활용하는 것 같아서 혹시 내가 놓친 부분이 있지 않을까 하는 마음가짐으로 읽어봤습니다. 책 전반부에서는 TypeScript 의 타입 시스템에 대한 전반적인 내용을 다루고 있는데, 타입을 집합의 관점에서 소개하는 부분과 평소에 잘 활용해보지 못한 고급 패턴들 (ex 컴패니언 객체 패턴, 명명된 타입 패턴) 등등이 흥미로웠습니다. 그리고 평소에 조건부 타입 이 아리까리 했는데, 책에서 조건부 타입의 분배 법칙 적용 원칙을 통해서 여러 내장 유틸리티 타입들이 어떻게 구현되어 있는지, 나이브하게 파악해 볼 수.. 2023. 5. 29.
LeetCode 328 - Odd Even Linked List (Medium) 💡 문제 LeetCode - 328번 🎯 풀이 과정 O(1) 의 공간 복잡도와 O(n) 의 시간 복잡도를 가지는 알고리즘을 이용해서 홀수번째와 짝수번째에 위치한 노드를 분리한 뒤에 두 리스트를 이어주는 작업을 해야합니다. 리스트의 첫번째 노드는 항상 홀수번째 노드이고 홀수와 짝수는 순서대로 나오는 것은 명백한 사실이니, 제약 조건을 만족하기 위해 한번의 리스트 탐색 도중에 prev 와 cur 포인터를 이용해서 이전 노드의 다음 노드 포인터가 현재 노드의 다음 노드를 가리키도록 변경합니다. 또한 두 리스트를 합치기 위한 mergePointer 도 가장 최신의 홀수번째 노드를 가리키도록 합니다. 모든 순회를 마치면 mergePointer 로 두 리스트를 이어주면됩니다. 이렇게 하면 입력받는 리스트와 별개로 .. 2023. 5. 29.
클린코드 회고 시간이 흘러도 명확하고 유지보수하기 좋은 코드를 작성하는 기준이 없을까요? 이번에 프로그래밍 대표 필독서로 불리는 클린 코드 를 시간내서 읽어봤습니다. 그 동안 코드리뷰 및 여러 아티클들을 통해 익힌 내용들을 일목요연하게 정리된 텍스트로 다시 한번 상기시킬 수 있었습니다. 사실 개발을 이제 막 시작한 사람이라면 이 책의 내용들이 크게 와닿지 않을 수도 있습니다. 배움은 그 필요성을 느낄 때 가장 재미있고 효과적이라고 생각하기 때문에 이 책의 마지막 장에 정리되어있는 코드 악취 의 여러 기준들을 유념하며 실제로 여러가지 코드를 작성 및 리팩토링해보는 것이 이 책의 내용을 체득하는 가장 좋은 방법이라고 생각합니다. 책 중후반부는 레거시 코드의 구조를 함께 개선해보며 저자의 생각의 흐름을 옅볼 수 있었는데, .. 2023. 5. 17.
storybook 에서 styled component css prop 적용이 안된다면? 💡 문제 현상 실행 환경 Next 13 Storybook 7.0.4 Styled component: 5.3.10 Next.js 13 에서 스토리북을 빌드한 결과, styled-component 의 css-prop 이 올바르게 적용되지 않는 이슈가 있었습니다. 🤔 원인은? 기본적으로 css-prop 을 사용하는 컴포넌트는 babel 을 통해서 빌드가 이뤄지는데, Next.js 12 부터는 babel 대신에 swc 로 빌드하기 때문에, 문제가 생긴 듯 보였습니다. 혹시나 해서 관련된 이슈를 찾아보니, 아직 활발하게 논의되고 있는 상태였습니다. https://github.com/vercel/next.js/issues/30802 Port babel-plugin-styled-components to SWC · I.. 2023. 5. 15.
TDD 와 함께 사내 서비스 개선하기 📌 TDD 를 활용해볼까? 이번에 사내에서 사용하고 있는 메일 템플릿 프로젝트를 손볼 기회가 생겼습니다. 새로운 메일 배포 방식 적용이 필요했는데, 이를 위해서는 기존 프로세스에 대한 이해가 필요했습니다. 새롭게 투입된 프로젝트에 기능을 추가하거나 수정하는 것은 영향도에 따라 쉽지 않을 수 있는 작업인데, 이번에 맡은 업무가 해당 서비스 코드 전반적으로 수정이 필요했던 작업이라 더욱 고민이 많았던 것 같습니다. 안정적인 서비스 개발 및 리팩토링을 위해 TDD 를 적극적으로 활용해볼 수 있는 좋은 기회로 보여 적용 및 후기에 관한 포스트를 작성해봤습니다. 💡 이번 포스트에서 TDD 패러다임에 대한 자세한 내용을 다루지는 않습니다. 🤔 TDD 란? 간단하게 TDD 에 대해서 살펴보고 가겠습니다. TDD는 테.. 2023. 5. 15.
DOM event.composed (shadow root 밖으로 이벤트 전파시키기) 📌 CustomEvent 가 shadow root 밖으로 전파되지 않는다? shadow DOM 과 함께 작업하다보면 CustomEvent 로 생성한 이벤트가 shadow DOM boundary 를 벗어나서 전파 되지 않는 이슈를 마주하게 되는데, 이는 의도된 동작입니다. 예시로 살펴봅시다. 다음과 같은 menu 컴포넌트가 있다고 하겠습니다. 재사용성을 위해 공통 메뉴 로직을 담은 컴포넌트입니다. 코드는 단순화시켰지만, open 속성이 true 가 되면 해당 메뉴 엘리먼트의 overlay 선택시에 메뉴를 닫기 위한 커스텀 이벤트를 발생시키는 핸들러를 부착하는 흐름으로 진행됩니다. export default class MyMenu extends HTMLElement { // ... other logics a.. 2023. 5. 15.
LeetCode 704 - Binary Search (Easy) 💡 문제 LeetCode - 704번 🎯 풀이 과정 정렬된 배열에서 특정 target 의 index 를 반환하는 문제입니다. 이분 탐색 을 이용하면 쉽게 해결할 수 있습니다. 👨‍💻 코드 /** * @param {number[]} nums * @param {number} target * @return {number} */ var search = function(nums, target) { let head = 0 let tail = nums.length - 1 let answer = -1 while (head target) { tail = mid - 1 } else { answer = mid break } } return answer }; 2023. 5. 14.
LeetCode 438 - Find All Anagrams in a String (Medium) 💡 문제 LeetCode - 438번 🎯 풀이 과정 문자열 s 에서 p 의 아나그램을 만족하는 모든 부분 문자열의 위치를 찾는 문제입니다. 문자열의 길이를 고려해서 최적의 시간 복잡도로 문제를 해결해야하는데, sliding window 를 활용하면 O(n) 에 모든 위치에서 아나그램을 판단할 수 있습니다. 먼저 p 를 구성하는 문자 빈도수 해시맵을 생성합니다. 이후 두 개의 포인터 left 와 right , 아나그램 구성에 필요한 문자 개수의 합을 위한 count 를 정의합니다. count 가 0이 되면 모든 문자들이 필요한 빈도수만큼 발견되었다는 것을 의미합니다. window 의 크기는 곧 p 의 길이와 같기 때문에 left 와 right 간의 간격이 window size 에 도달하면 left 를 하나.. 2023. 5. 14.
LeetCode 42 - Trapping Rain Water (Hard) 💡 문제 LeetCode - 42번 🎯 풀이 과정 웅덩이를 찾기 위해서는 단조감소 구간을 알아야합니다. O(n) 에 이를 알 수 있는 방법이 무엇일까요? 이를 위해 monotonic stack을 활용할 수 있습니다. height 의 인덱스를 i 라고 하겠습니다. (a) height[i] 가 stack top 보다 작다면 그냥 push 합니다. (b) stack top 값보다 크거나 같다면 push 하기전에 stack 에서 height[i] 보다 작거나 같은 값을 가지는 요소들을 모두 pop 합니다. 물 웅덩이의 크기를 알려면 높이 * 너비 를 알아야합니다. 너비는 index 값으로 쉽게 알 수 있고, 높이는 다음과 같이 구할 수 있습니다. min(height[stack[top-1]], height[i]).. 2023. 4. 30.

티스토리툴바