프론트엔드 설정하기

루트 디렉토리에 nextjs app을 만든다.

npx create-next-app@latest --typescript

나는 src 폴더가 있는게 편해서 만들었다. 근데 이 녀석 cra랑 폴더 구조가 생각보다 많이 달라서 약간 당황했다.

./src

├── apis
├── pages
├── components
│   │   ├── CamelCase
│   │   │   ├── index.tsx
│   │   │   ├── styles.ts
│   │   │   ├── types.ts
├── apis
├── App.tsx
├── index.tsx

약간 이런 convention에만 익숙해져있는데 좀 달랐는데 대충 보니까 하던대로 폴더 만들어도 될 거 같아서 큰 문제는 못 된다.
근데 이 새끼 build가 안 된다. shell이 next를 인식 못 하고 있는데 npm i -G next 하니까 npm run dev가 제대로 작동한다. 근데 이상한게 shell은 아직도 next를 못 찾고 있는데 alias가 잘못된건지 아님 내가 뭘 덜 설치한건지 잘 모르겠다.

백엔드 설정은 이미 해본거라 10분정도 걸렸는데 지금 next <- 이 새끼 이해하느라 시간이 좀 걸리고 있다. 일단 빌드랑 실행은 별 문제가 없는데 cra의 folder structure를 만들면 안되는 거 같다. 컨벤션은 이 글따라서 만들 생각이다.

하아

글로 보면 3줄 차이지만 시간으로 보면 존나 오래 걸렸다.

걍 nextjs 다들 좋다길래 새로 시작했는데 약간 어려웟따. 일단 필요없는 거 다 지우고

npm install gh-pages --save-dev

이걸로 얘 깔았다. 얘가 대충 뭐해주냐면 빌드한 놈을 github에 push 해주면 gh-pages라는 새 브랜치에다가 html과 static 모아둔 폴더 대충 다 만들어줘서 github에서 사이트를 배포하게 해준다. nextjs로 만든 앱을 github에 연결해야되는데 repository 이름은 <아이디>.github.io로 잘 정해주자. 안 그러면 url conf가 더럽게 된다.

그 후에
package.json 에 다음과 같이 추가해준다.

{
  "homepage": "https://jae8259.github.io/",
  ...,
  "scripts": {
  	...,
    "predeploy": "npm run build",
    "deploy": "gh-pages -d out"
  },
  
}

그리고 이건 맞게 한 건지 자신이 없지만 next.config.json 에 다음과 같이 추가해준다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  assetPrefix: "/",
};

module.exports = nextConfig;

이러고 나선

git add .
git commit -m '<대충 알아서 ^^**>'
npm run build
npm run predeploy
npm run deploy
git push origin main

을 하면 될 거다(아마...)
지금 자신감이 없는 이유가 내 깃헙 페이지에는 readme가 뜨는데 이 이유가 처음에 build 할 때 순서가 꼬여서 readme로 html을 만들어서 그럴 거다(아마...) cra로 플젝 진행했을 때도 같은 문제를 겪었는데 수정 사항 추가하고 새로 publish 하니까 제대로 작동했엇기 때문에 높은 확률로 되지 않을까 싶다.

그리고 지금 맘에 되게 걸리는 게 nextjs ghpage ㅎㅏ면 몇몇 한국 블로그들에서 css 적용 안된다고 config 좀 바꾸던데 styles를 쓰기 전이라 같은 문제가 생길 지는 모르겠따. 일단 여까지만 하고 백엔드부터 끝내보려고 한다.

!! 역시나 잘 됐따. 깃헙에다가 블로그 배포하면 반영하는데 시간이 좀 걸리는데 그거 땜에 생긴 문제다.