최적화
3 posts
CDN 서버를 이용한 이미지 최적화

CDN이란? 콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 경우 시간이 오래 걸릴 수 있는데, 클라이언트와 웹 사이트 서버 간에 를 두어 효율성을 높일 수 있다. CDN 서버를 통해서 를 할 수 있음 이미지 CDN의 URL을 이용하여 최적화 옵션을 나타내는 방법 이미지 CDN에서의 URL에는 이미지에 대한 변환 및 최적화에 대한 중요한 정보를 전달하게 되는데, URL의 형식은 보통 아래와 같다. url 예시 Origin: 도메인(자체 도메인 또는 이미지 CDN의 도메인이 있을 수 있다.) Image: 이미지(일반적으로 필요할 때 기존 위치에서 이미지를 자동으로 검색하도록 구성할 수 있다.) Security key: 이미지의 새 버전마다 고유한 보안 키를 필요로 하게하여, 다른 사람이 이미지의 새 버전을 만드는 것을 방지 Transformati…

December 11, 2022
개발지식
최적화
React 대규모의 서비스 최적화 방안

면접에서 기술질문으로 아래와 같은 질문을 받게되었다. 나는 위와 같은 질문을 받고 와 관련된 최적화 방안에 대해 질문한 것이라고 생각은 들었지만, 알지못하여서 답변으로는 아래와 같이 말을 하게 되었다. 아직까지는 대규모 프로젝트를 진행해본 경험이 없다. 하지만 2차례의 프로젝트를 진행하면서 최적화 방안으로 사용하거나 학습한 바로는 관심사의 분리나 단일 책임원칙을 적용하여, 컴포넌트가 최대한 한개의 기능을 수행하게 작성하거나 분리를 하고 공통으로 사용되는 코드는 분리하여, 코드의 양을 줄이고 최소화는 방법을 이야기하였다. 그 후 추가적으로 와 , 에 대해 말을 하였지만 면접관의 질문에 대한 답변을 말한 것이 아니여서 이 글을 작성하게 되었다. 지금 드는 생각 단순하게 최적화를 하기위해서는 코드를 적재적소에 사용한다. 라는 생각이 들게 되었는데 이유는 작성한 코드들이 항상 사용되는 것이 아니여서 필요할 경우에만 사용하면 된다 라는 생각이 들었다. 그래서 다음 면접시, 모르는 답안이 나…

December 10, 2022
React
개발지식
최적화
트리 쉐이킹(Tree Shaking)

정의 애플리케이션을 트리의 각 노드들 즉, 일종의 나무와 같이 보고 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 이라고 명명하였다고 한다. 사용하지 않는 코드를 제거하는 기법 방법 import시, 필요한 것만 작성하여 사용 사용하는 모듈로부터 으로 한다. Babel이 ES6 모듈을 commonjs module로 변환하지 않도록 조치(.babelrc 설정) Babel은 대부분의 웹 애플리케이션에서 필수로 사용하는 도구 중 하나 이지만 를 사용중에 있다면 를 자동으로 로 한다. 좋은 기능이지만 트리 쉐이킹 관점에서는 그렇지 못하다고 한다. 에서 로 변환하지 못하도록 설정을 추가해 줘야한다. 또한 위와 같이 설정을 하면 웹팩은 코드를 광범위하게 호환되는 형식으로 변환하므로, 이 프로세스는 호환성 문제를 일으키지 않는다고 한다. 프로젝트의 모듈들이 Tree Shaking시, 해야 한다.(package.json 설정) 예측 가능한 입력을 가지고 동일하게 함수의 스코프 밖에 어떤 …

December 09, 2022
개발지식
최적화