본문 바로가기

분류 전체보기217

매일 쓰는 babel-loader에 질렸다면 (ts-loader, esbuild-loader) 이 글은 모두 모여라 기술 블로그에도 업로드 되었습니다. 지금까지 Webpack을 사용한 자바스크립트 프로젝트를 진행하며 babel을 트랜스파일러로 사용해왔습니다. 웹팩의 튜토리얼 문서에서 만날 수 있는 첫 번째 트랜스파일러이자 과거와 현재를 아울러 많은 사랑을 받고 있기 때문에, 대부분의 개발자 분들께서 한 번쯤은 사용해 본 기억이 있는 프로그램입니다. 그런데 얼마 전 팀 프로젝트를 진행하며 새로운 로더를 설치해서 사용하게 되었습니다. 결론부터 이야기하면 굉장히 만족스러웠는데, 왜 다른 로더를 사용하게 되었고, 그 결과가 어떻게 작용했는지에 대해 적어보도록 하겠습니다. 그 전에 먼저 바벨에 대해 간단히 알아봅시다. 바벨이란? 바벨은 최신 버젼의 자바스크립트 문법을 이전 버전에서도 사용할 수 있는 문법으.. 2022. 10. 9.
바닥부터 만드는 블로그 개발기 드디어 미루고 미루던 블로그 프로젝트의 첫 삽을 떴습니다. 그동안 "직접 만든 블로그 하나쯤은 있어야지!" 라고 막연히 생각만 하고 있었는데, 이런 저런 핑계만 대고 있으면 평생 시작도 못할 것 같아서 일단 무작정 시작해보기로 했습니다. 마침 감정 회고나 특별한 이벤트가 없는 근황을 원래 사용하던 이 기술 블로그에 그대로 싣기에는 좀 부끄러워서 새로운 공간이 하나 필요하다 느꼈던 차여서, 이번에 만들 블로그를 그러한 글들을 기록하는 목적의 공간으로 사용해보기로 했습니다. 무작정 레포지토리부터 만들고 있으려니 어떤 분께서 DDD(도메인 주도 개발) 를 "일단 도메인을 사면 개발하게 된다" 로 해석하신 글이 문득 생각났는데, 나중에 재미 붙여서 새벽 시간 쪼개가며 개발하던 걸 보면 정말 시작이 중요한 것 같.. 2022. 10. 2.
웹 페이지 최적화하기 - 3 이전 글에서 이어집니다. 지난 포스트에서는 네트워크 페이로드의 가장 큰 부분을 차지하는 이미지 파일의 최적화에 대해 알아보고, 처리된 이미지를 안전하게 표시해주는 방법에 대해 알아보았습니다. 지금까지의 과정은 공통적으로 서버에서 받아오는 리소스의 크기들을 줄여서 최적화를 진행했습니다. 이번에는 프로젝트의 로직이나 코드의 개선을 통해 사용자 경험을 증진시키는 방향으로 최적화를 진행해보겠습니다. 네트워크 요청 횟수 줄이기 우리가 서버로부터 데이터를 받아온다고 했을때, 그 데이터가 실시간으로 최신 상태를 유지할 필요가 없거나 변경될 일이 거의 없는 데이터들인 경우가 종종 있습니다. 이런 데이터들을 지속적으로 갱신해 주는 것은 의미가 없습니다. 만약 위의 조건이 확실한 데이터들이라면, 다시 요청하는 대신 기존에.. 2022. 9. 18.
웹 페이지 최적화하기 - 2 이전 글에서 이어집니다. 지난 포스트에서는 최적화를 왜 해야하는지 알아보고, 자바스크립트 파일의 최적화를 진행하였습니다. 크게 아래의 세 가지 방법을 적용하였습니다. 자바스크립트 파일 크기 줄이기 코드 사이의 공백 지우기, 변수 이름 줄이기 (난독화) 사용하지 않는 모듈 빼기 (트리 셰이킹) CSS 파일을 분리하여 최적화하기 우리는 자바스크립트 파일의 크기를 줄임으로서 페이지와 처음으로 상호작용 할 수 있는 속도를 앞당겼습니다. 훌륭한 일을 해냈지만, 웹 페이지의 로딩 속도는 여전히 느릴 가능성이 큽니다. 아직 큰 산이 남아있기 때문입니다. 이미지 최적화 하기 웹 사이트에서 이미지는 뗄래야 뗄 수 없는 요소입니다. 전 세계 어느 사이트를 가더라도 이미지가 포함되지 않은 사이트를 찾기는 어렵습니다. 이미지.. 2022. 9. 7.
웹 페이지 최적화하기 - 1 프로그래머들의 바이블이라고 불리는 개발 서적들에서 공통적으로 볼 수 있는 재밌는 점이 하나 있습니다. 바로 성능에 대한 견해인데요. 많은 사람들이 성능은 굉장히 중요한 요소라고 생각하고, 실제로도 아니라고 할 순 없지만 성능 개선이라고 하면 이렇게 말하는 것을 들은 적 있으실 것 같습니다. 최적화를 할 때 두 가지 규칙을 따르라. 첫 번째, 하지 마라. 두 번째, (전문가 한정) 아직 하지 마라. 물론 이 말은 최적화가 나쁘다는게 아니라 쓸데없는 코드 레벨의 최적화를 지양하라는 의미입니다. '성능이 좋은' 코드를 짜려고 가독성과 재사용성과 같은 다른 중요한 요소들을 포기하지 말고, '좋은' 코드를 짜는데 집중하라는 뜻입니다. 그러나 하지 말라면 더 하고 싶은법입니다. 이제부터 이 규율을 어기고, 함께 최.. 2022. 9. 4.
npm, yarn, 그리고 yarn berry yarn 2016년 10월에 출시된 yarn 은 npm과 같은 노드 패키지 매니저 도구 중 하나로, 당시 Facebook에서 근무하던 Sebastian McKenzie가 개발한 패키지 매니저입니다. 기존의 npm이 가지고 있던 문제점들을 해결하기 위해 등장했고, 성공적으로 안착하여 현재 수 많은 프로젝트에서 사용중인 오픈소스 프로젝트가 되었습니다. 이번 글에서는 yarn이 npm의 어떤 문제들을 해결했는지, 그 이후엔 두 패키지 매니저가 어떻게 발전했고 yarn berry 가 등장하며 어떤 점이 달라졌는지까지 알아보겠습니다. npm의 문제점 yarn이 등장하기 전, 과거의 npm에는 여러가지 문제가 있었습니다. 일관적이지 않은 패키지 버전, 고정되지 않은 설치 순서, 순차적인 설치로 인한 긴 소요 시간 .. 2022. 8. 28.

티스토리툴바