전체 글

[AlgoITNi] 홈 화면 성능 개선하기: 4. 이미지 최적화 (2)

문제점 현재까지의 문제점은 이미지의 크기를 줄이게 되면 렌더링 지연 시간이 감소하지만 그에 따라 로드 지연이 증가하게 되어 전체적인 지연 시간은 변화가 없다는 것이다. 로드 지연이 말 그대로 이미지를 다운로드 받은 뒤 로드 하는데 걸리는 시간이라 생각했으며 이를 개선하기 위해 이미지를 받아오는 시점을 앞당긴다면 더 빠른 로드가 가능할 것으로 생각했다. 개선 컨텐츠 다운로드 시점 설정 최대 콘텐츠 렌더링 시간 최적화 | Articles | web.dev 최대 콘텐츠 렌더링 시간 최적화 | Articles | web.dev LCP 분석 및 개선이 필요한 주요 영역을 파악하는 방법에 관한 단계별 안내 web.dev 위의 사이트의 그림을 확인해보면 LCP 요소를 받아오는 시점을 앞당길 수 있다면 이것이 개선을 ..

[AlgoITNi] 홈 화면 성능 개선하기: 3. 이미지 최적화 (1)

문제점 현재 문제점은 메인 이미지 렌더링 시간이 매우 오래 걸린다는 것이다. 메인 화면에서 사용되는 이미지를 다운로드 받아서 렌더링 하는데 까지 걸리는 시간이 매우 길다. 네트워크 속도에 제한을 두면서 확인해본 결과 빠른 3G에서 유의미하게 속도가 느린 것을 알 수 있었다. 1.7초의 다운로드와 별개로 렌더링에 걸리는 시간까지 함께 고려한다면 사용자의 네트워크 속도가 조금만 느려도 UX에 매우 좋지 않을 것이라 판단했다. 현재 메인 화면의 이미지를 렌더링하는 코드는 아래와 같다. (...) (...) 평소와 같이 img 태그를 사용해서 png 확장자의 이미지를 렌더링 하도록 작성했었다. 개선 이미지 확장자 우리가 자주 사용하는 이미지의 확장자는 크게 세 가지가 있다. 각각 png, jpg, webp이다...

[JavaScript] 커링(Currying)

아래 코드를 보자. function something(arg1: any, arg2: any) { // do something } function somethingWithIndex(index: number, arg1: any, arg2: any) { // do something with index } 두 함수가 하는 역할이 같다고 가정해보자. something 함수는 "어떤 것"을 하는 함수이며 somethingWithIndex 함수는 "특정 인덱스에 있는 요소에 대해 어떤 것"을 하는 함수라고 보면 된다. 위의 상황에서 something과 somethingWithIndex의 차이는 단순히 index를 받는지에 관한 차이점만 있을 것이다. 이러한 경우 기존의 something 함수를 재사용 하기 위해서는 ..

[네이버 부스트캠프] 네이버 부스트캠프 웹・모바일 8기 수료 후기

약 6개월의 기간동안 참여했던 네이버 부스트캠프 웹・모바일 8기를 수료했다. 치열하게 보냈던 6개월이 된 것 같고 입과 전과 비교하면 많은 성장을 할 수 있었던 것 같다. 챌린지 입과 전에는 단순히 작동하는 코드만 작성했던 것 같다. 기능을 만드는 것에만 급급하여 어떤 원리인지도 모르고 코드를 작성했다. 챌린지 첫 주에 내가 얼마나 부족한 부분이 많았는지 깨닫게 되었다. 따라서, 챌린지 기간동안 배웠던 다양한 CS 지식을 내것으로 만들기 위해 많은 노력을 했던 것 같다. 블로그 글을 적어 공유하기도 하고 회고글도 적어 공유하기도 했다. 이 과정에서 CS 지식이 왜 중요한지와 이것이 어떻게 응용되는지 알 수 있었다. 또한, 앞으로 어떻게 학습해야 하는지도 알 수 있었다고 생각한다. 다양한 미션들을 수행하면..