뚠뚜 개발일지

프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요. 핵심 키워드 : 압축, 캐싱, 비동기 처리, 지연 로딩, 렌더링 개선 프론트엔드 성능최적화를 위한 방법 첫 번째는 이미지 최적화입니다. 웹 페이지의 의도와는 다르게 이미지 용량이 큰 경우 사용할 수 있습니다. 두 번째 방법은 코드를 컴포넌트 기반으로 번들을 분할하여 필요한 시점에만 로드하는 방법이 있습니다. 세 번째는 브라우저 캐싱을 활용하는 방법이 있고, 마지막으로는 쓰로틀링과 디바운싱을 활용해서 서버에 요청하는 횟수를 제한하는 방법이 있습니다. 제가 프로젝트를 진행하면서 사용했던 최적화 방법은 React를 활용하여 컴포넌트 기반으로 코드를 작성하는 것이었습니다. 이 방법을 사용하면, 렌더링이..

이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요. 이미지를 저장할 때 적절한 파일 형식을 선택하는 것이 중요합니다. 일반적으로는 JPEG는 사진에, PNG는 로고나 투명 이미지에 WebP는 모든 종류의 이미지에 효과적입니다.그리고 이미지 크기를 조절해서 필요 이상의 공간 차지 및 로딩 시간을 단축시킬 필요가 있습니다.이를 위해 웹에서는 레이지 로딩(Lazy Loading)을 적용하여 페이지가 처음 로딩될 때 모든 이미지를 불러오는 대신, 사용자가 스크롤하여 이미지가 보일 때까지 로딩을 지연시키는 방식 등을 사용하여 초기 로딩 시간을 단축 시키며 페이지 성능을 향상 시킬 수 있습니다.또는 이미지 캐싱을 활용하는 방법도 있는데, 이는 여러 이미지를 하나의 이미지로 결합하여 서버 요청 수를 줄이는 ..

쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요. 이벤트는 계속 일어나지만 함수는 한번만 호출되는 경우가 있는데 이처럼 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay) 로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것을 쓰로틀링이라고 합니다. 예를 들어 버튼을 막 누르는데 누르는대로 동작하지 않는 경우가 쓰로틀링에 해당한다고 볼 수 있습니다. 이러한 쓰로틀링 방식을 사용하는 이유는 특정 동작이 자주 발생하는 경우 이를 일정 주기로 제한하여 브라우저의 부하를 줄이고 성능을 최적화 하기 위해 사용합니다. 이와 달리 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정시간(delay)이 경과한 후에 한..

Server Side Rendering, Client Side Rendering, Static Site Generation 의 장단점을 설명해주실 수 있을까요? SSR은 서버에서 페이지 전체 내용을 렌더링하여 클라이언트에게 HTML을 전송하는 렌더링 방법입니다. 이 방법의 첫 번째 장점은 자바스크립트 파일을 해석하지 않아도 되기 때문에 초기 페이지 로딩 속도가 빠르다는 점입니다. 두 번째는 크롤러가 완전히 렌더링 된 페이지의 내용을 쉽게 파악할 수 있기 때문에 SEO에 유리한 점입니다. 단점으로는 첫 번째로 각 요청마다 서버에서 렌더링을 수행해야 하므로 부하가 증가할 수 있다는 점입니다. CSR은 브라우저에서 자바스크립트를 사용하여 페이지를 렌더링하는 방법입니다. 이 방법의 장점은 첫 번째로 서버에서 정..