Next.js
-
[Next.js 마이그레이션 2편] 나혼자 마이그레이션하다Next.js 2023. 2. 5. 13:52
1. 상황 22년 8월경 우리는 react.js로 운영중인 서비스를 next.js로 대대적인 마이그레이션 작업을 2개월 가량 작업 후 배포했다(중간에 직매입, 선물하기 프로젝트와 병행) 저번 포스팅은 Next 프로젝트를 시작한 배경에 대해 다루었다.(안봤다면 참고) 이번 포스팅은 Next 마이그레이션 프로젝트를 왜 혼자 시작하게 된 글이다. 2. 문제 / 원인 지난 글에서 Next 마이그레이션의 필요성은 경영진과 CTO께 제안드려서 충분한 공감대가 이루어졌다. 하지만 필요에 대한 공감과 당장 리소스를 투입할 수 있는 지는 별개의 문제이다. 왜냐면 우리처럼 개발팀의 인원이 얼마되지 않은 소규모의 스타트업의 경우 개발팀의 작업이 곧 마일스톤과 밀접하게 연관이 있다. 그렇기 때문에 개발팀의 모든 리소스를 투입..
-
[Next.js 마이그레이션 1편] 프로젝트 도입배경Next.js 2023. 2. 4. 17:56
1. 상황 22년 8월경 우리는 react.js로 운영중인 서비스를 next.js로 대대적인 마이그레이션 작업을 2개월 가량 작업 후 배포했다(중간에 직매입, 선물하기 프로젝트와 병행) 이번 포스팅은 Next 마이그레이션 프로젝트를 시작한 배경에 대한 글이다. 우선 프로젝트 시작 전 당시의 상황은 이랬다. 우리 서비스는 앱 출시를 위해 힘쓰고 있었다. 앱 개발은 외주에 맡겼었는데 기존의 플랫폼 코드 베이스에 하이브리드 앱으로 씌우는 형태로 제작하기 때문에 결과물을 확인하기 까지 긴 시간이 필요하지 않았다. 2. 문제 / 원인 1. 하지만 결과물을 확인해 보니 문제가 있었는데, 바로 앱 진입 시 초기 로드 속도가 너무 느리다는 것이었다. 느림의 정도가 체감적으로 느껴지는 정도였기 때문에 치명적이었다. 2...
-
[Next.js] SEO 그것이 알고 싶다(NEXT의 필요성)Next.js 2023. 2. 3. 13:17
상황 22년 8월경 우리는 react.js로 운영중인 서비스를 next.js로 대대적인 마이그레이션 작업을 2개월 가량 작업 후 배포했다(중간에 직매입, 선물하기 프로젝트와 병행) 문제 물론 순탄치만은 않았다. 이렇게 큰 프로젝트의 경우 대다수의 프로젝트가 비즈니스 단의 니즈에서 시작해 기획 -> 디자인 -> 개발로 오게된다. 즉 개발팀은 시작의 주체가 아니라 제일 끝단에서 결과물을 내야하는 팀이다. 근데 이 경우 순수하게 개발팀의 니즈에 의해서 시작됐다. 물론 마일스톤 급으로 큰 프로젝트기 때문에 팀의 CTO가 경영진과 얘기를 나누어 진행하기로 했다. 그렇게 시작하게 됐지만 막상 시작하고 보니 타팀에서 이 마이그레이션을 왜 하는 지 전혀 이해하지 못하고 있었다. 심지어 이 마이그레이션의 중요 목표인 S..
-
[Next.js] On-Demand-Revalidation 고군분투 적용기Next.js 2023. 1. 31. 22:02
이전 줄거리 상황은 이랬다 22년 8월경 우리는 react.js로 운영중인 서비스를 next.js로 대대적인 마이그레이션 작업을 진행 후 배포했으나.. SSR로 작업한 상품 상세 페이지 진입 시 로드속도가 체감될 정도로 느려진 것이다. 해결책으로 ISR이라는 정적 증분 생성 함수를 사용하여 정적 페이지 생성으로 갖는 성능상의 이점과, revalidation으로 업데이트 시에도 변경이 가능한 이점을 동시에 가지며 이 문제를 해결했다. 하지만 이 또한 완벽하진 않았는데... 문제 / 원인 문제는 바로 업데이트가 revalidation 타임에 의존한다는 것이다. 이 말은 두 가지로 풀이될 수 있다. 첫 번째로 관리자가 정보를 업데이트 하더라도 revaliation 타임만큼 기다려야 한다는 의미를 가지고 두 번..
-
[Next.js] ISR(Incremental Static Regeneration) 적용기Next.js 2023. 1. 30. 22:16
상황 상황은 이랬다(이 글은 뒤늦은 회고이다.) 22년 8월경 우리는 react.js로 운영중인 서비스를 next.js로 대대적인 마이그레이션 작업을 진행 후 배포했다. 프론트팀이 모두 달라 붙어 약 2달 간의 리소스를 투입한 개발팀 입장에서 정말 중요하고 큰 프로젝트였다. (물론 중간에 다른 프로젝트와 병행했기에 시간이 더 소요된 측면이 있다). 문제 대망의 프로젝트 배포 날이 되었는데, 아니 이게 무슨 일인가? nextjs의 이점 중 더 빠른 렌더링 및 로드 속도도 분명 있었는데.... 상세페이지 진입 시 오히려 더 느려진 것이 아닌가? 고백하자면 개발 중에도 느림을 체감했으나 dev환경에서는 서버가 코드를 먼저 컴파일하기에 느리고 production 환경에서는 더 빨라진다는 안일한 생각도 있었다. ..