전체 글

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

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

거대한 앵귤러 어플리케이션을 리팩토링하기 위한 가장 베이직한 방법들. 이 글은 Stefan Haas의 Refactoring Angular Applications(https://levelup.gitconnected.com/refactoring-angular-applications-be18a7ee65cb )를 번역한 글입니다. 원작자의 허락을 받고 올리는 글임을 밝힙니다. 리팩토링은 소프트웨어 개발에 있어서 가장 중요한 테크닉 중 하나다. 오직 리팩토링만이 프로젝트의 수명을 연장시킬 수 있기 때문이다. 특히 어떤 타입의 소프트웨어라도 장기적으로 유지보수할 목적이 있다면, 과거의 코드를 리팩토링하는 것은 기술부채를 줄이기 위한 필수요건이다. (수백번 말해도 입아프지 않은 상식이다!) 모든 코드는 리팩토링의 대..

Content Delivery Network의 약자인 CDN. 속도 개선을 위해 CDN을 써야 한다는 말은 자주 들리는데 정확히 어떤 배경에서 나온 건지, 어떻게 동작하는지가 궁금했다. 이번 포스팅에서는 CDN의 개념과 원리, 그리고 장점에 대해 알아보고자 한다. CDN이란? 콘텐츠 전송 네트워크(CDN)는 본래 지리적으로 분산된 여러 개의 서버 네트워크를 말한다. 우리가 사용하는 웹 어플리케이션은 웹 페이지, 이미지, 동영상 등의 여러 가지 콘텐츠들을 포함한다. 이들 콘텐츠는 서버에서 클라이언트로 인터넷망을 통해 전송되는데, 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸린다. 이때 CDN이라는 분산된 서버를 각지에 배치하면 속도상의 ..

프론트엔드 개발자로서 데이터 처리를 할 때 가장 거슬리는 부분들 중 하나는 지나치게 많은 데이터를 불러와서 가공해야 하는 것, 그리고 데이터가 부족해서 더 많은 HTTP 통신을 해야 하는 상황이다. 백엔드 API를 아무리 Restful하게 구성한다고 해도 복잡한 UX를 구현해야 하는 현대 웹 어플리케이션에서는 현실적으로 데이터의 Overfetching, 그리고 Underfetching이 존재할 수밖에 없다. 서로 다른 모양의 다양한 요청들에 효과적으로 응답하기 위해, 결국 페이스북에서는 2015년 GraphQL이라는 쿼리 언어를 발표하게 된다. GraphQL이란? GraphQL은 API를 위한 쿼리 언어이자, 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임이다. 쿼리 언어라고 하면, 우리는 흔히 SQ..