배포하기 전에 해야할 일

배포하기 전에는

1 모든 페이지를 재확인

제목이나 디스크립션, 해드, 헤드 메타데이터를 추가했는지를 확인해야합니다.
콘솔로그 삭제, 불필요한 의존성 삭제

2 구성 재확인

작업하는 환경변수, 개발 단계예서는 더미데이터로 확인하다, 다른 데이터베이스로 전환하는 경우

next 경우 기본 설정외에 다른 것을 쓰고 싶다면 next.config를 작성해 세부설정을 만질 수 있다.
자주쓰는 기능들은 사용자 지정헤더, 환경변수, basePath 를 많이 수정한다.

환경변수
환경변수를 사용하면 각 프로덕션마다 다른 데이터베이스를 적용하거나 API 수정을 원활히 할 수 있는 장점이 있다.

next.js 에서는 dev를 사용하면 개발 모드이고,
build나 export를 사용하면 프로덕션 상태에 있다고 한다.

그래서 이런 상황에 맞추어서 환경변수를 세팅할 수 있다.

여기서 상황에 따른 값을 import해오고
목적에 맞추어 잘 사용할 수 있다.

3 빌드 테스트

애플리케이션 빌드와 실행

npm run build를 이용하면 어떤 페이지가 서버용으로 만들어졌는지

어떤 페이지가 100% 정적인지는 빈원 모양으로 보여준다.

여기서 용량은 CSR 기준으로 적혀있다.

상세페이지 용량이 커서 빨간색으로 표시 되어있다
많은 Javascript 양이 담겨 있기 때문이다.
문제는 일어나지 않겠지만, 최적의 상태가 아니다 라는 이야기이다.

주로 서드 파티 패키지나 요량이 큰 라이브러리를 사용할 때 이런 문제가 발생한다.

react-syntax-highlighter 라이브러리(js나 css 스타일 양식에 맞춰서 보여주는 라이브러리)가 상당히 용량이 큰 라이브러리이다.
실제 깃헙 저장소를 보면 이를 대처하기 위해 Light build를 제공한다.

라이트 빌드를 사용하여 작성하고

npm run build를 사용하면

전

후

용량이 확연하게 줄은 것을 알 수 있다.

마무리

이를 통해 배포 전 여러가지에 대해서 공부해보았다.
인상 깊었던 것은 라이브러리에 대해 거부감이 심했었는데,
이번 계기를 통해서 라이트 빌드를 활용하여 다른 라이브러리들도 용량을 줄이면 좋겠다

항상 라이브러리를 쓸 때 직접 구현할 수 있지 않을까 라는 고민을 했는데,
조금 더 라이브러리를 효율적으로 쓸 수 있다면 좀 더 다른 곳에 집중하는 것에 대해 고민이 될거같다.