1. 연속된 실패의 시작
사이드 프로젝트를 본격적으로 시작한지 한 달 정도가 되었다.
야심차게 Next.js 13.3 버전으로 프로젝트를 시작했고,
새로운 라우트 방법인 app directory를 사용했는데 정말 큰 실수인 것 같다.
현재 static으로 빌드해서 cloudflare page에 배포하고 있는데
총 39번의 배포가 실패했다.
간단한 퀴즈 앱을 배포하는 데에 이렇게 어려운 길이 있는지 몰랐다.
단순히 리액트로 개발을 시작했다면 벌써 다 배포하고 SEO까지 끝냈을 지 모른다. (젠장)
새로운 기술을 시도한다는 것이 이렇게 어려울 줄이야.
2. 내가 겪어온 실패들
배포가 실패하면서 크게 3가지의 어려움을 겪었는데,
첫번째, 내가 찾는 모든 Next.js 자료는 12버전이거나 그 전 버전인 경우가 많았다.
두번째, 서버사이드렌더링을 해주는 프레임워크로 static 빌드를 하고 있으니 대부분의 답변이 소용이 없다.
세번째, 이미지 CDN 및 프로젝트 이미지 경로 설정이 어렵다.
이 3가지를 해결하는 데에만 거의 2주를 날린 것 같다.
빠르게 개발해서 시장에 나아갈 생각을 해야하는데, 설정 자체에서 지체가 되니 너무 짜증이 난다.
얼마나 절박했냐면 Stackoverflow에도 질문을 올렸다.
The image path is weird and I cannot see any image after deploying my Next.js application
I'm new to web development. This might be a stupid question, but I can't figure it out after consulting countless pages, so I'm plucking up the courage to ask. I've built the source code with Next....
stackoverflow.com
When I do npm start after build in nextjs, I get an error. (Could not find a production build in the "example/out" directory
I got error after npm run build. (local build) error message is this. Could not find a production build in the '/Documents/nextjs_projects/project_name/out' directory. Try building your app with 'n...
stackoverflow.com
Next.js 개발하다보면 문제점이 이 것이다.
내가 원하는 결과를 도저히 찾을 수가 없다.
특히 13.3을 쓰고 있는 경우에는 app 디렉토리 뿐만 아니라 next.config.js에서 output: "export"도 생겼다.
이 뿐만이 아니다.
yarn berry를 사용해서 next.js app directory 빌드가 안된다. 깃허브에서도 논의되고 있는 문제로 보인다.
새로운 버전의 프레임워크를 사용해서 프로젝트를 진행하는 것이 별로 좋지 않는 경험이라는 것을 깨달았다.
이렇게 또 한 번 실패를 경험했다.
여기서 새로운 것들을 배워서 더 발전해 나가야지.
3. 그래도 배운 것들
웹 개발을 독학 및 여러 예제를 보면서 꽤 많은 것들을 알게 됐다.
첫번째, CSS를 어느 정도 익히게 되었다.
예전부터 블럭요소, 인라인 요소 정도는 알고 있었고 CSS 스타일링은 나름 수월하게 할 줄 알았다.
문제는 이게 리액트에 적용될 때가 문제다.
특히 프레임워크 단에서 스타일링이 또 변하게 된다면?
Next.js 13에서는 모듈별로, 전체가 적용되는 글로벌도 있다.
스타일링이 적용되는 파일이 여기저기 다 독립되어 있으면서도 엮여있다보니 엄청나게 헷갈린다.
어떨 때는 style에 객체 형태로 적어 놓은 것을 class명을 넣어서 안되기도 했고,
className에 style을 직접 넣어서 문제가 생기기도 했다.
styles.클래스명을 쓸 때는 또 어땠냐면, 여러 클래스에 명시해둔 것을 어떻게 사용하는지 알 수 없었다.
지금은 모두 헷갈리지 않고 사용할 수 있게 되었다. ( 스타일링 삽질만 3일정도 집중해서 했다. )
두번째, 리액트 구조를 짤 때 한 번 더 생각하게 된다.
일단 막 하나의 컴포넌트에서 개발하다가 중복해서 여러 곳에 삽입하고 있는 나 자신을 발견하고 컴포넌트를 분리하게 되었다.
이 과정을 반복하고 있다보니 이제는 개발하기 전에 생각하게 되더라.
생각보다 공통 컴포넌트와 props, 폴더의 구조를 스스로 짤 수 있는 능력은
꽤나 개발을 해본 뒤에야 생기는 것 같다.
4. 결론
빠른 개발을 위해 App Router를 버리기로 과감히 결정.
다시 page로 개발하는 방법을 공부해야겠다.
끝.