하리하링웹

최근 개발도중 파일 비교 작업을 하고있는데 아무리 봐도 같은 파일인데 자바스크립트상에서 비교시 파일이 다르다는 문제가 발생하였다. 기존에는 아래와 같은 코드로 content를 얻어 사용하고 있었는데 디버깅을 위해 utf8 방식의 디코딩을 사용하지 않고 버퍼 상태 그대로 받아 차이점을 비교해보았다.const content1 = fs.readFileSync(file1.fullPath, 'utf8');const content2 = fs.readFileSync(file2.fullPath, 'utf8'); [결과] const content1 = fs.readFileSync(file1Path); const content2 = fs.readFileSync(file2Path); console.log('file1'..

개요웹 애플리케이션에서 초기 렌더링이 늦어지는 문제의 원인은 매우 다양하다. 이번에 해결한 이슈는 그 중 하나인 번들 사이즈 관련 문제이다. 일반적으로 개발자들은 다양한 오픈소스 번들러나, 경우에 따라서는 직접 개발한 번들러를 사용하여 자바스크립트 파일을 번들링한다. 그렇다면 왜 번들링 과정이 필요할까? 적절히 큰 규모의 프로젝트에서는 코드의 양이 수 기가바이트, 많으면 수십 기가바이트에 이를 수 있다. 사용자가 프로그램에 접속할 때 마다 모든 코드를 한 번에 가져오는 것은 현실적으로 부담이 너무 크기 때문에, 번들러에서는 이 과정에서 중복되는 코드 혹은 현재 상황에 필요 없는 코드를 제거하는 트리쉐이킹(Tree-shaking) 과정을 거친다. 이를 통해 큰 사이즈의 코드들을 아주 작은 단위로 줄여서 가..