코딩하는 고릴라

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

힙완전 이진 트리 구조를 가지며 정해진 조건에 따라 항상 정렬된 상태를 유지하는 비선형 자료구조항상 정렬되어 있는 상태를 유지하기 때문에 최대값, 최소값 등을 수시로 조회해야 할 경우 속도상 이점을 가집니다. 🐇 시간복잡도- 조회 : O(1)- 삽입 : O(logN)- 삭제 : O(logN) 🦙 구현자바스크립트에서 힙 자료구조는 제공되지 않기 때문에 직접 구현하는 방법에 대해 학습해봤습니다.조회, 삽입, 삭제 메서드 위주로 구현해 보도록 하겠습니다.여기서는 최대값을 바로 바로 뽑아낼 수 있는 최대힙을 구현해 보겠습니다. 1. 기본 구조class MaxHeap { constructor(){ this.storage = [null]; }}1번 인덱스부터 사용하기 위해 0번 인덱스는 null 값..

🐖 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..

** 원인 파악중인 에러로 아직 해결하지 못했습니다,,, 🦙 WHY- 프로젝트 진행 과정에서 특정 PC에서만 렌더링 오류가 발생하는 버그를 마주쳤습니다. - 오류가 크게 발생하는 PC는 GPU 성능이 우수한 PC로 GPU 성능이 낮은 PC보다 훨씬 더 눈에 띄는 렌더링 오류가 발생했습니다. -> 성능 낮은 PC에서는 계속해서 윈도우 리사이징을 반복해야 GPU 사용률이 상승하는 정도이나 성능이 좋은 PC에서는 input에 텍스트를 입력할 때 화면 일부가 사라져 보이는 등의 심각한 에러가 발생했습니다. - 여러 스타일이 적용된 가상 요소 ::after를 적용시킨 페이지에서 렌더링 오류가 발생했으며, 리플로우와 리페인트 과정에서 GPU 점유율이 크게 뛰는 원인을 파악하기 위해 여러 시도들을 진행했습니다. 🦓 ..

🐶 WHY 기존 프로젝트에서는 디렉토리 구조를 크게 [assets / pages / components]로 구성하였습니다. pages 폴더 내부에는 URL 라우팅에 따라 출력될 페이지들을, components 폴더 내부에는 해당 pages 내부에 들어갈 컴포넌트들을 작성했습니다. 이 과정에서 UI와 로직을 담당하는 함수들을 분리해놓지 않아 한 파일 내에 너무나도 많은 코드들이 얽혀있어 필요한 부분을 찾는데 다소 어려움을 겪었습니다. 이와 같은 어려움을 해소하기 위해 어떤 방법이 있나 찾아보던 와중 FSD 아키텍처를 알게 되었고 이를 간소화하여 프로젝트에 적용해보았습니다. 🦍 WHAT FSD(Feature-Sliced Design, 기능 분할 설계) 아키텍처는 크게 Layers, Slices, Segmen..