7-17 TIL

부족한 프로젝트 개선

사이트 개선사항을 통해 몇가지를 개선했다.

이미지 렌더링

이미지를 많이 렌더링 하는 SNS프로젝트이다 보니 초기 렌더링 속도가 느린 문제가 있었다.
해당 태그들을 전무 Next.js에서 제공하는 Image 태그로 변경한뒤 테스트를 해보니 1.8~2초가 넘게 걸리는 렌더링이 1.1초까지 떨어졌다.
이는 용량 자체를 줄여서 가져오는 Next.js Image태그 능력으로 네트워크를 확인해보니 용량이 매우 압축된 부분을 볼 수 있었다.
하지만 image 크기가 크고 Image태그에서 width와 hight값을 정해주는 부분이 있어 image파일들의 크기 또한 태그에 알맞게 조정했더니 0.16까지 렌더링 속도가 빨라지는 것을 경험할 수 있었다.

다만 아쉬운 점은 캡처로 떠온 이미지들이다 보니 이미지 사이즈를 줄이거나 압축할 경우 품질이 떨어지는 문제가 있었다.
꼭 디자이너가 보내주는 이미지가 있다면 그것들을 활용하자

보안 문제

url을 통한 접속등을 단순히 컴포넌트 렌더링에서 막는 게 효율적인가 생각했는데 프론트에서만 보안을 막는다는 것은 불안한 점이 있는 것 같다.
물론 백엔드에서 데이터를 불러올 때 체크하긴 하지만 완벽한건 아니기에 Next.js 공식문서를 찾아보니 middleware를 활용할 수 있는 걸 찾았다.
Next.js13 부터는는 기본적 페이지 로딩값을 SSR로 잡고 있기 때문에 layout이나 큰 페이지들을 SSR로 처리 하였고 이때 middleware가 현재 url을 확인하여 토큰을 확인하도록 보안 절차를 만들었다.
이로 인해 url을 통한 접속이나 스토리지 변경을 통한 페이지 뚫기는 막을 수 있었다.
다만 부족한 부분이 많아 서버에서 보안 강화를 하는 부분을 더 찾아볼 예정이다