🛠PROJECT | 블로그 유지보수 일기 #3

Locomote the world 유지보수 기록

이번 업데이트의 요약은 아래와 같다.

• Nextjs 15로 업그레이드
• Tailwind CSS 4로 업그레이드
• TypeScript 5로 업그레이드
• 색상 팔레트의 약간 변경이 있었다. (기존에는 gray를 neutral로 대체해서 사용).
• Clean coding & Refactoring
• Home hero threejs 애니메이션 추가

Tailwind Nextjs 블로그의 업데이트

이 블로그는 v2 나오기 전 2022년을 시작으로 제작해서, 2년전 바뀐 v2로 반영해서 업데이트 하지 않았었다. 아래는 공식 리포지터리 업데이트 로그 링크.

• Tailwind Nextjs v1 ➡ v2

기존 page router 방식에서 app router 방식으로 변경되었고, 그에 따라 페이지 구조가 바뀌었다. 또한 tailwindcss v4로 업그레이드 되면서, 설정이 변경되었다는 점, 그리고 리팩토링하면서 analytics라던가 function적인 부분들을 전부 pliny로 자체 third party로 만들어서 대대적으로 업데이트한 모양.

원래는 javascript를 사용하면서 기존 것과 비교하면서 조금씩 migration을 진행하고 있었는데, 알수 없는 오류로 그냥 v2 위에서 다시 작업하게 되었다. 그래서 거의 일주일에서 내지는 10일동안 게으름 피우면서 작업을 진행했다.

App router vs Page router

잘 설명되어 있는 블로그 글을 찾아서 아래 링크를 남긴다.

• App router vs Pager router

공식 문서에서는 아무리 찾아봐도.. 새로운 기능들을 이용할 수 있다. 이런식의 설명 밖에 없어서 일단은 새로운 방법을 도입하는 것은 나쁘지 않다는 생각에 app router로 변경했다. 개인적으로는 app router가 더 직관적이게 느껴졌다.

custom api를 사용한다면 따로 api 폴더를 만들고 그 안에 관련 기능들을 넣으면 된다.
바뀐 v2에서도 동일하게 하는데, 구조는 비슷하게 만들고 아래와 같이 handler가 아니라 아래 템플릿과 같이 만들면 된다.

export async function GET(
  _request: NextRequest,
  props: { params: Promise<{ query: string }> },
) {
  try {
    const params = await props.params;

    if (!API_KEY) {
      return NextResponse.json(
        { error: "Missing API configuration" },
        { status: 500 },
      );
    }

    const url = `YOUR_API/?range=/${params.query}/?key=${API_KEY}`;
    const response = await fetch(url);

    if (!response.ok) {
      return NextResponse.json(
        { error: "Failed to fetch data" },
        { status: response.status },
      );
    }

    const data = await response.json();
    return NextResponse.json({ data: [data.values] });
  } catch (error) {
    console.error("Error fetching", error);
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 },
    );
  }
}

api를 사용하고 싶을 때는 아래와 같이 사용하면 된다.

const response = await fetch(`/api/example/${encodeURIComponent(query)}`);

Tailwindcss v4

• Tailwindcss v4 업데이트

tailwindcss v4로 업그레이드 되면서, 더 이상 tailwind.config.js 파일을 사용하지 않는다. 단순 tailwind.css 로 통일되었는데, 이게 생각보다.. 에러가 꽤나 많이 났었는데, 아직도 원인은 파악을 못했다.

관련 오류는 아래 깃 이슈와 같은 이슈들이 여러 차례 있었다.

• Cannot apply utility class

암튼.. 기존 tailwind.config.js있었던 애니메이션 마이그레이션할 때마다 터져서 순서 맞추면서 해결했던 것으로 기억하는데, 찜찜하게 마무리한 것 같아서 흠...

Clean coding & Refactoring

개인적으로 pliny로 기능들을 뺀것이 조금 아쉬웠다. third party다 보니까 이걸 forking해서 개인이 커스텀하는 방법 밖에 없고, 디자인을 너무.. 완성한 상태에서 올리다보니 커스텀이 수정이 어렵다기 보단 귀찮았었다.

UI 기능을 거의 사용하지 않는 기능들 위주(ex. comments)만 사용했고, 그외는 기존에 내가 만들던 것들만 typescript로 옮겼다.
기존 회사에서 배우던 refactoring 방법을 가져오되, convention은 공식 nextjs에 맞게끔 하려고 했었고, typescript의 명시적인 type 지정을 몇부분 소홀히 한게 좀 반성 포인트..

Wrapup & Conclusion

10일 여간 끝에 다시 locomote the world가 v2로 새롭게 2025년에 개편이 되었다. 대대적인 디자인 변경이라기 보단 부산스러운 부분들은 대거 축소했다. 넣고 싶었던 threejs 기능도 home hero에 추가된 거 외엔 크게 없을 것 같다.
일단.. 불필요했던 코드들을 대체로 많이 정리했다는 것을 이번 버전에서 만족하는 것으로.. 다음에는 더 잘 만들어봐야겠다.(회사에서 배운 것들 잘 싸먹었다..ㅎㅎ)

다음 버전에서는 아래와 같은 것들이 수정될 예정이다.

• 포트폴리오 데이터 업데이트
• 포트폴리오 자세히 보기 및 포스트모템 연결
• 블로그 미리보기 이미지 추가