55일차 (CS 35, 36)

프론트엔드 개발 시 개발자 도구를 활용한 경험

 기본적으로 콘솔을 찍어서 오류를 확인하고, 데이터가 잘 들어오는지 확인을 하기 위해 개발자 도구를 주로 사용한다. 또한 디자이너와의 협업 과정에서 와이어프레임의 디자인과 실제로 내가 만든 웹 페이지를 비교하면서 CSS를 수정할 때 사용한다. 그리고 서버에 요청이 잘 전달되지 않을 때 네트워크 탭을 통해 어떤 부분이 문제인지 확인하고자 할 때 사용한다. 

 

 

프론트엔드 성능최적화를 위한 방법과 프로젝트 경험

 프론트엔드 성능최적화를 위한 방법 첫 번째는 이미지 최적화이다. 웹 페이지의 의도와는 다르게 이미지 용량이 큰 경우 사용할 수 있다. 두 번째 방법은 코드를 컴포넌트 기반으로 번들을 분할하여 필요한 시점에만 로드하는 방법이 있다. 세 번째는 브라우저 캐싱을 활용하는 방법이 있고, 마지막으로는 쓰로틀링과 디바운싱을 활용해서 서버에 요청하는 횟수를 제한하는 방법이 있다.

 

 내가 프로젝트를 진행하면서 사용했던 최적화 방법은 React를 활용하여 컴포넌트 기반으로 코드를 작성하는 것이었다. 이 방법을 사용하면, 렌더링이 필요한 페이지만 렌더링을 할 수 있기 때문에 프론트엔드 성능을 높일 수 있다. 두 번째 방법은 React-Query를 활용하는 것이었다. 리액트 쿼리는 요청한 데이터를 캐시에 저장하기 때문에 저장된 쿼리키로 요청을 하면, 서버에 요청을 보내지 않고 캐시에 저장된 데이터를 불러오기 때문에 서버와의 요청 횟수를 줄일 수 있고, 이에 따라 성능을 높일 수 있다.