고양이발일기

프론트엔드 리팩토링 이야기: styled-components, 컴포넌트화, 그리고 useMemo 와 useCallback을 활용한 최적화 프론트엔드 리팩토링에 대한 내 경험을 좀 공유해보려고 글을 쓰게 되었읍니다. 특히 styled-components를 사용해서 스타일을 어떻게 깔끔하게 관리했는지, 그리고 코드의 재사용성을 높이고 불필요한 렌더링을 줄인 방법에 대해서 얘기해보려고 합니다. Inline-Style에서 styled-components로 먼저, 지금 현재 Habit Project의 대부분의 코드는 inline-style 방식을 많이 썼었습니다. 이 방식은 스타일을 직접적으로 컴포넌트 안에 적는 건데, 이게 왜 문제냐면, 코드가 엄청 지저분해지고, 재사용성이 떨어진다는 큰 단점이 있습니다. 그래..

회사 일과는 별개로 현재 사이드 프로젝트로 진행 중인 Habit Project 에서 이번에 맡게 된 태스크는 무려 "애플리케이션 최적화" 였다. 지금 회사 프로덕트도 얼레벌레 만들고 있는 것 같아서 optimazation을 잘 할 수 있을까 걱정했지만 차근차근 클린코드화 시켜본다면 분명 많은 도움이 될 것 같았다. 1. 모듈화와 컴포넌트 기반 개발 코드 모듈화: 기능별로 코드를 모듈화하여 재사용 가능하고 독립적인 단위로 관리합니다. 이는 코드의 가독성과 재사용성을 높이며, 변경에 대한 유연성을 제공합니다. 컴포넌트 기반 개발: UI를 재사용 가능한 컴포넌트로 분리하여 개발합니다. React, Vue, Angular와 같은 현대 프론트엔드 프레임워크/라이브러리들은 이를 잘 지원합니다. 2. DRY(Don'..

바벨(Babel) 바벨은 최신 JavaScript(ES6+) 코드를 이전 버전의 JavaScript로 변환(트랜스파일)하는 도구입니다. 이를 통해 개발자는 최신 JavaScript 기능을 사용하여 코드를 작성할 수 있으며, 바벨이 코드를 변환하여 구형 브라우저에서도 동작하도록 합니다. 폴리필(Polyfill) 폴리필은 웹 개발에서 브라우저가 기본적으로 지원하지 않는 최신 API나 기능을 사용할 수 있게 해주는 코드 조각입니다. 폴리필을 사용함으로써 개발자는 구형 브라우저에서도 최신 기능을 사용할 수 있게 됩니다. Node.js Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 이를 통해 개발자는 클라이언트 측(브라우저)뿐만 아니라 서버 측에서도 Jav..

Problem Solving Process i와 j라는 two pointers를 만든 후, (i는 최소값, j는 최댓값을 구분하기 위함이다) i = 0, j = 1 루프를 돌며 j - i 값의 차이를 구한 후, 해당 값이 max 인지를 검사한다. 또한 i 의 값이 j보다 큰 경우는 ( = 진행 하다 최소값이 나온 경우) i의 포인터를 j로 바꿔준다. j가 prices를 다 돌면 루프를 종료하고 max값을 리턴한다. Solution class Solution: def maxProfit(self, prices: List[int]) -> int: i = 0 j = 1 length = len(prices) max_price = 0 while j < length: diff = prices[j] - prices[i..

Problem Solving Process 우선 array를 sort 한 후, k 만큼의 array를 만든 후에 내부의 max - min 값을 추출하는 일이므로 arr[i+k-1] - arr[i] 값을 계산하며 minimum 값을 추출해냈다! sorting 하면 쉽게 풀리는 알고리즘 이었다. Solution def maxMin(k, arr): arr.sort() minimum = sys.maxsize length = len(arr) for i in range(length - k + 1): minimum = min(minimum, arr[i+k-1] - arr[i]) return minimum

Problem Solving Process 이 문제는 결국 내 힘으로는 못 풀었던 문제이다... ㅠㅡㅠ 약 두시간 동안 고민했으나 에러만 잔뜩 맞이하고 결국 답을 참조했던 문제 푸는 방법은 1. 각 노드의 값을 dict, set 등에 저장 한 후 중복을 검사 2. two pointers를 사용해 돌면서 나아가는 방식 둘의 시간 복잡도는 O(n)으로 같지만 공간복잡도는 1. O(n) 2.O(1)으로 두번째 방법이 제일 효율적이다. Solution class Solution: # O(n) time and O(n) space def detectCycle(self, head: ListNode) -> ListNode: dictionary = collections.defaultdict(ListNode) #or ca..