Daily Atelier

Map과 Hash Table  Map은 배열 다음으로 가장 많이 접하는 자료구조인 것 같습니다. 개발을 할때는 물론이고 알고리즘 풀이를 할 때도 Map을 사용하면 쉽게 풀리는 문제가 많습니다.  Map 자료구조의 중요성이 매우 강조되는 만큼 본 포스트에선 Map의 개념과 Hash Table의 동작 원리를 깊게 파악하고자 합니다. Map  Map이란, key-value 쌍을 저장하는 추상 자료구조 입니다. 같은 key를 가지는 pair는 최대 한 개만 존재해야 합니다. 즉, key는 중복될 수 없고 unique합니다. 반면, value는 중복될 수 있습니다.  Map이 활용되는 예시는 전화번호부 입니다. ... Read More

React Query로 Hook 개선하기  현재 프로젝트로부터 Redux를 걷어내고 React Query를 도입하여 서버 상태를 관리하고 있습니다. React Query를 사용하면서 data fetching, caching 그리고 syncronization 기능을 매우 편리하게 구현할 수 있었습니다. 이러한 장점 때문에 redux뿐만 아니라 useEffect안에서 api를 호출하고 useState를 사용해 서버 상태를 관리하던 코드도 점진적으로 React Query로 대체하고 있는 중입니다. 그중 React Query로 DX를 개선했을 뿐만 아니라 성능과 UI/UX 측면에서도 개선한 사례가 있어서 소개하고자 합니... Read More

난잡해진 프로젝트의 코드 개선 필요성  2명이서 프로젝트를 진행하면서 급한 기능 구현에 많은 시간을 할애했습니다. 기능 구현을 진행하면서 전체 코드 중 약 10에서 30 정도만 건드렸고, 나머지는 몇 개월 전의 상태 그대로 유지되고 있습니다.  일부 코드는 ‘hot’ 또는 ‘warm’에 속하며 코드 컨벤션, 함수명 또는 변수명 개선 사항이 적용되었습니다. 그러나 나머지 코드는 레거시 코드로 남아있어 수정되지 않았습니다. 이를 전체적으로 수정하기 위해 eslint와 husky를 도입했으나, 이것이 감지하지 못하는 레거시 코드도 있습니다. 예를 들어, 이름만으로 파악하기 어려운 함수 또는 잘못된 이름의 함수가 ... Read More

Chapter 1: Asynchrony: Now & Later  자바스크립트와 같은 언어의 프로그래밍에서 가장 중요하지만 종종 오해를 받는 부분 중 하나는 일정 기간에 걸쳐 퍼져있는 프로그램 동작을 어떻게 표현하고 조작하는가 입니다.  이는 for 루프의 시작부터 for 루프의 끝까지 발생하는 작업에 대한 것이 아닙니다. 이것은 프로그램의 일부가 지금(now) 실행되고 프로그램의 다른 부분이 나중에(later) 실행될 때 발생하는 현상에 대한 것입니다. 지금과 나중 사이에 프로그램이 능동적으로 실행되지 않는 간격이 있습니다.  실제로 지금까지 작성된 모든 프로그램들이 사용자의 입력을 대기하기든, 데이터... Read More

 현재 진행중인 프로젝트의 공수 일정을 맞추기 위해 기능 구현만 신경쓴 나머지 코드 품질 개선에는 많은 힘을 쓰지 못했습니다. 특히 style 관련 코드가 매우 난잡하게 작성되어 있는 상황입니다. 저희 프로젝트에선 inline-style이 많으며 styled-component도 사용하지만 적극적으로 쓰이진 않았습니다. 무분별한 inline-style을 사용했고 체계 없는 style 코드를 작성했더라도 지금까지는 치명적인 문제를 입지 않았지만, 이 상태가 지속된다면 여러 방면에서 잠재적인 문제가 하나둘씩 발생할 것입니다. 이를 해결하기 위해 여러 방안을 찾아보았는데요, 본 포스트에선 그 중 scss에 대한 개념과 N... Read More

React Hooks  함수형 컴포넌트에선 Hooks를 사용해 상태를 관리합니다. Hooks를 이용해 상태를 변경하고 Hooks는 이를 감지하여 컴포넌트를 리렌더링시킵니다. React 내부적으로 이러한 과정들이 어떻게 일어나는지 모른채 그저 편하게 사용해왔지만, 이러한 과정들을 블랙박스로 남겨두고 Hooks를 사용하기엔 찝찝한 기분이 듭니다. 이를 해소하기 위해 찾아본 영상이 Can Swyx recreate React Hooks and useState in under 30 min? 입니다. 이 영상에선 React의 useState와 useEffect Hooks를 직접 구현해보면서 Hooks는 마법이 아니라 단지 배... Read More