코딩하는 고릴라

⏰ WHY로그인 여부에 따라 페이지 접근 시 라우팅 할 LoginGuard 컴포넌트 내에서 if - else 문을 활용해 코드를 작성했었습니다.이는 가독성 측면에서 좋아보이지 않아 최근에 학습한 lookup table 패턴으로 보다 유지보수가 용이한 코드로의 리팩토링을 시도해보았습니다. 🦍 WHATLookup table? - 객체 내에 조건을 key로, 실행시켜야 할 함수를 value로 하여 if문 순회 없이 조건에 부합했을 때의 함수를 O(1)에 실행시킬 수 있도록 하는 디자인 패턴 초기 코드  먼저 lookup table 패턴과는 무관하지만 배열 형태로 되어 있는 loginLimitPath 를 set 형태로 변환해 경로를 체크하는 로직의 시간 복잡도를 O(n) 에서 O(1)로 줄였습니다. 다음으로는..

🐖 Why프로젝트 진행 중 녹음 기능 관련하여 평균 음량을 도출해내야 하는 요구사항이 있었습니다. 이를 계산하기 위해 도출된 음량의 합(volumes)과 음량을 측정한 횟수(count)를 필요로 했는데 평균 음량 측정에만 필요한 해당 변수들을 컴포넌트에 남겨두고 싶지 않아 함수 작성 방식에 대해 고민해봤습니다. 🐄 What위와 같은 내용들을 충족시키기 위해 최근에 학습한 렉시컬 환경과 클로저 개념을 활용했습니다. 변수의 유효범위와 클로저ko.javascript.info 🐌 Howexport function getAvgVolume() { let count = 0; let volumes = 0; function getAvg(volume: number) { volumes += volume; count++; r..

🦍 Why프로젝트 진행 중, props로 전달된 값에 따라 div의 크기를 조절하는 스타일을 Styled-components를 활용해 작성했습니다. props로 전달되는 값은 수시로 변화하는 값이었으며, 이에 따라 무수히 많은 클래스가 생성되었고 이는 성능적 이슈를 일으켰습니다. 🐕 What기존에는 스타일드 컴포넌트가 어떤 원리로 동작하는지 이해하지 못했습니다. 이 문제를 해결하기 위해 크롬 관리자도구에서 DOM 요소를 확인해 봤을 때, 계속해서 클래스명이 변화하는 것을 통해 props가 변할 때 마다 새로운 클래스를 생성하고, 이를 적용시키는 과정이 반복됨을 확인했습니다. 따라서 계속되는 클래스 생성을 막으면 되지 않을까 생각했습니다. 문제 상황// 문제가 됐던 기존 코드// 스타일 코드export..