기타45 웹 페이지 최적화하기 - 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. Submodule로 환경 변수 관리하기 모모 팀 기술 블로그에 업로드 된 포스트입니다. 이번 프로젝트의 릴리즈에서, 환경 변수의 관리 방법을 기존의 로컬 파일에 의존하던 방식에서 github의 submodule를 적용하여 관리하는 방법으로 변경하였습니다. 어떤 점에서 불편을 느꼈고, 어떻게 이러한 방식을 적용하게 되었는지 이야기해보려 합니다. 환경 변수? 위키백과에 따르면, 환경 변수란 실행 중인 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이라고 설명하고 있습니다. 물론 틀린 말은 아니나, 이것은 OS의 관점에서 설명했기에 저희 프로젝트에서 적용한 환경 변수에는 다소 와닿지 않는 설명입니다. 현재 프로젝트 상황에 맞도록 조금 다르게 설명해보면, 환경 변수는 “프로젝트의 환경에 따라 다르게 사용되는 변수” 정도로 정의.. 2022. 8. 17. Cypress로 E2E 테스트 시작하기 프로그램을 만들며 기능이 정상적으로 동작하는지, 의도에서 벗어난 점은 없는지 테스트하는 것은 매우 중요합니다. 지난 번에 작성한 Jest 기본 사용법에서는 테스팅 프레임워크인 Jest를 사용해 간단한 단위 테스트를 진행하는 법을 알아보았습니다. 이번 글에서는 E2E 테스트에 특화된 프레임워크인 Cypress를 이용하여 테스트를 시작하는 과정을 보겠습니다. E2E 테스트란? 테스트에 앞서, E2E 테스트란 무엇일까요? 지난번에 진행한 단위 테스트의 경우 하나의 기능을 테스트 하는 수준에서 그쳤습니다. 이처럼 큰 프로그램 내에서 하나의 작은 기능 (함수, 클래스 등)을 테스트 하는 것을 단위 테스트(Unit test)라고 부르고, 반대로 유저가 프로그램을 이용하는 시나리오를 따라 프로그램 전체를 테스트 해보.. 2022. 2. 21. AWS S3 에서 POST 메소드 사용하기 (405 Method Not Allowed) 이번에 AWS S3에 프로젝트를 배포할 일이 생겼는데, POST 요청으로 데이터를 전송하려 했지만 정책상의 문제로 405 method not allowed 에러에 막히게 되었습니다. 기존에 리액트 프로젝트를 S3에 올려서 사용하시는 분들이 계시기에 분명 방법은 있을것이라 생각했고, 결국 해결되었는데 어떻게 해결하였는지 제 사례를 공유해보려 합니다. 들어가기 전 저는 AWS 프로젝트를 사용해 본 경험이 극히 적고, 배경지식이 거의 없었다는 점을 감안해주시면 감사하겠습니다. 문제 상황 우선 프로젝트의 구조는 위와 같은 모습입니다. 리액트로 이루어진 프론트 단과, 스프링으로 이루어진 백 단이 서로 요청과 응답을 주고받는 평범한 상황입니다. 기본적으로 유저에 관한 데이터를 주고 받는 회원가입이나 로그인 같은 동.. 2022. 1. 22. 이전 1 2 3 4 5 6 7 8 다음
