본문 바로가기

분류 전체보기215

웹 페이지 최적화하기 - 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.
자바스크립트의 index.js 우리가 자바스크립트를 사용하여, 정확히는 노드를 이용하여 프로젝트를 만들다보면 굉장히 독특한 파일 시스템 규칙 하나를 자연스레 발견하게 됩니다. 바로 index 파일입니다. index란? 사전에서의 색인과 같은 의미로 프로그래밍에서 널리 사용되는 단어입니다. 메모리 구조 상의 위치를 나타낼때도 많이 사용되고, 반복문의 카운트에 자주 사용되는 i 가 바로 "index" 의 약어입니다. 이렇게 사용하는 인덱스가 자바스크립트에서는 조금 다른 용법으로 쓰이기도 합니다. index를 이용한 간결한 import / export 이러한 파일 구조를 가진 프로젝트가 있다고 하겠습니다. 현재는 많은 파일을 불러오지 않아 import 구문이 그다지 길지 않습니다. 그러나 프로젝트가 점점 복잡해지며 점점 많은 모듈을 불러오.. 2022. 8. 23.
Submodule로 환경 변수 관리하기 모모 팀 기술 블로그에 업로드 된 포스트입니다. 이번 프로젝트의 릴리즈에서, 환경 변수의 관리 방법을 기존의 로컬 파일에 의존하던 방식에서 github의 submodule를 적용하여 관리하는 방법으로 변경하였습니다. 어떤 점에서 불편을 느꼈고, 어떻게 이러한 방식을 적용하게 되었는지 이야기해보려 합니다. 환경 변수? 위키백과에 따르면, 환경 변수란 실행 중인 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이라고 설명하고 있습니다. 물론 틀린 말은 아니나, 이것은 OS의 관점에서 설명했기에 저희 프로젝트에서 적용한 환경 변수에는 다소 와닿지 않는 설명입니다. 현재 프로젝트 상황에 맞도록 조금 다르게 설명해보면, 환경 변수는 “프로젝트의 환경에 따라 다르게 사용되는 변수” 정도로 정의.. 2022. 8. 17.

티스토리툴바