전체 글

최근 작업했던 프로젝트에서 유저의 시간대 별 스케줄 데이터를 요일별로 다룰 필요가 있었다. 이때 10진수 값으로 들어오는 요일별 시간 데이터를 2차원 boolean 배열로 변환한 뒤, 실제 화면에 요일 별 몇 시부터 몇 시까지 가능한 스케줄의 범위를 문자열로 출력해줘야 하는 기능이 추가되었다. 이때, 10진수 값으로 구성된 스케줄 객체를 화면에 렌더링 시 요일별 시간대를 보여주도록 변환하는 로직을 Angular의 Custom Pipe를 사용하여 개발하였다. 따라서 유저가 요일별 스케줄을 업데이트하고 나면, 전역에서 관리되는 스케줄 객체가 업데이트되고, 이 값을 참조해서 화면에 바인딩하는 홈 화면에서는 변경을 감지해서 pipe를 실행시켜주어야만 했다. 그런데 최초 스케줄 업데이트 시에는 정상적으로 변경된 ..

npm을 사용한다면 무조건 보게 되는 파일이 있다. 바로 package-lock.json 이다. package.json 에 명시된 의존성 패키지들의 히스토리를 관리해주는 파일 정도로만 인지하고 있었는데, 점점 프로젝트의 복잡도가 높아지면서 package.json을 통해 패키지를 설치하더라도 환경에 따라 빌드 또는 실행이 안 되는 문제가 종종 발생하게 되었다. 패키지 버전을 수정하지 않았는데도 다른 개발자와 package-lock.json 에서 코드 충돌이 나는 경우도 발생했다. 왜 package.json 만으로 의존성 관리가 되지 않는 것일까? package.json의 한계 규모가 큰 프로젝트의 경우, 여러 명의 개발자들이 동일한 개발 환경을 가지는 것이 중요하다. 이때, package.json만으로는 ..

자바스크립트 환경에서 디버깅하면서 한번쯤 삽질해봤을 부분 중 하나로, 불변성이 지켜지지 않는 객체를 들 수 있을 것이다. 나는 분명 건든 적이 없는 객체라고 생각했는데, 어디선가 예기치 못한 곳에서 값이 바뀌어있을 때 코드 구석구석을 찾아보면서 디버깅하기란 쉽지 않은 일이다. 불변성을 지키지 않는다면 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고, 이는 예기치 못한 버그나 사이드이펙트로 이어진다. 따라서 우리는 코드의 가독성을 높이고 버그를 예방하기 위해 불변성을 지켜야만 한다. 원시값과 참조값 불변성을 이해하기에 앞서, 자바스크립트에는 원시값과 참조값 두 가지 데이터 타입이 존재한다는 점을 짚고 가보자. 원시값이란, Number, String, Boolean, Null, Undefi..

하나의 컴포넌트를 만든 뒤, 컴포넌트를 여러 번 반복해서 보여주는 목록 화면을 개발한다고 해보자. React에서 권장하는 배열 렌더링 방법은 JavaScript의 map() 함수를 활용하는 것이다. 예를 들면 다음과 같다. function Expenses() { return ( {EXPENSES_MOCK.map((expense) => ( ))} ); } map() 함수를 통해서 엘리먼트의 모음을 만들고, 이걸 JSX에 포함시키기만 하면 된다. 그런데 이 상태로 실제로 서버를 띄워 실행해보면 다음과 같은 경고를 만날 수 있을 것이다. 직역해보면, 리스트에 존재하는 각각의 자식 컴포넌트들은 고유한 “key” 값을 가지고 있어야 한다는 것이다. 실행은 가능하지만, 냅두기에는 빨간 색 경고라 약간 찜찜하다. 대..

HTTP 완벽 가이드의 7장 캐시 챕터를 읽고 기억에 남는 것만 정리해보는 글. 사견이 들어가 있음 주의. 캐시란 개념은 상당히 광범위하다. 프론트엔드를 주로 다룬다면 보통 프레임워크단에서 제공하는 Store, 그리고 HTTP 통신 시 사용할 수 있는 브라우저 캐시 정도는 접해본 적이 있을 것이다. 이번 글에서는 이들 중 HTTP 캐시란 무엇인지, 그리고 어떻게 사용하면 좋을지에 대해 다뤄보고자 한다. HTTP 캐시란? 웹 캐시란 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치다. 웹 요청이 캐시에 도달했을 때, 캐시된 로컬 사본이 존재할 경우 그 문서는 원 서버가 아니라 그 캐시로부터 제공된다. 이는 불필요한 HTTP 요청 또는 데이터 전송을 줄여주고, 거리로 인한 레이턴시를 줄여주는 효과가..