전체 글

거대한 앵귤러 어플리케이션을 리팩토링하기 위한 가장 베이직한 방법들. 이 글은 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..

최근 우연한 기회로 글쓰는 개발자 모임, 글또에 참여하게 되었다. 모임의 목적은 단순하다. 개발자들이 모여서 글을 쓰고 디벨롭시켜가는 것이다. 평소 노션에 공부한 걸 정리하고 가끔씩 Draft를 블로그로 옮기는 작업을 해오긴 했지만, 보다 완성도 있는 글을 쓰고 많은 사람들에게 보여주고 싶다 라는 니즈가 있었다. 마침 글을 쓰고 피드백을 받는 것에 대한 욕구가 있었던 상태라 글또 신청 마감날에 부랴부랴 지원을 했고, 운좋게 7기를 함께하게 되었다. 왜 혼자서는 글을 잘 쓰지 못했을까 그동안 좋은 글을 꾸준히 쓰지 못했던 이유를 생각해본 결과는 다음과 같다. 내가 쓴 글이 다른 개발자들에게 도움이 될 만한 수준인가에 대한 의문이 있었다. 주니어 연차에 불과한 내가 공부하는 지식들은 대부분 웹 개발자라면 당..

바닐라 자바스크립트로 웹 애플리케이션을 만드는 고된 과정 속에는 DOM 조작이 필수적으로 들어간다. 그런데 이 DOM 조작은 때로는 안티 패턴(Anti-Pattern)으로 인식되기도 한다. 이번에는 DOM을 조작하는 Web API에는 주로 어떤 것들이 있고, 어떻게 하면 DOM을 조작하는 과정을 최적화할 수 있을지에 대해 알아보려고 한다. DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 기본적으로 HTML로 된 문서에는 웹페이지의 설계도가 그려져 있는데, 이 구체적인 구조를 웹페이지에 접속할 때 HTML이라는 형식을 통해 브라우저에 전달하게 된다. 그러면 브라우저는 이 형식을 보고, 그 안의 HTML..