개발 회고

개발 하면서 아쉬운 부분 or 문제를 해결한 부분을 적습니다

1. 다크모드 적용 시 겪은 문제

📌 문제 상황

• 다크모드와 라이트모드를 구분하여 스타일링할 때, 매번 :global을 셀렉터마다 적용해야 하는 번거로움이 있었음.
• 테마 값들이 light, dark 간에 일관된 매핑이 없어서, 각 색상을 하드코딩해야 했음.
  예: light: 100에 대응되는 값이 dark: 100이 아니라 dark: 400 등으로 매번 다름.
• 너무 디테일하게 색상을 분리하다 보니, 구조적으로 대응이 어렵고 유지보수가 힘들었음.

.home-title {
    @include font-style(Main-title);
    color: color(light, black);

    :global(.dark-theme) & {
        color: color(dark, 100);
    }
}

.home-subtitle {
    @include font-style(Main-body);
    color: color(light, 800);
    max-width: 750px;
    text-align: center;

    :global(.dark-theme) & {
        color: color(dark, 400);
    }
}

⚠️ 원인 분석

• 전역 테마 클래스(.dark-theme)를 활용하면서도, 컴포넌트 내부에서 색상 조건을 일일이 분기해야 하는 구조였음.
• 디자인을 그대로 반영하려다 보니, 개발자 입장에서 효율적인 테마 처리가 어려워짐.

💡 개선 아이디어

• 다크/라이트 간 1:1 매핑이 가능한 구조를 갖추자.
• 디자인 단계에서부터 테마 시스템을 염두에 두고, 컬러셋을 통일감 있게 구성하자.
• 다음 프로젝트에서는 유지보수성과 재사용성을 고려한 다크모드 구조를 우선적으로 설계할 계획.

💬 회고

이번에는 디자인 퀄리티에만 집중하다 보니,
다크모드 구현 방식이 비효율적이고 유지보수가 어려운 구조가 되어버렸습니다.
실제로는 개선까지 이어지진 못했지만,
앞으로는 초기 기획 단계에서 테마 시스템까지 함께 고려하는 방향으로
개발과 디자인이 함께 조율돼야 한다는 점을 크게 느꼈습니다.

2. Vercel 새로고침 문제

📌 문제 상황

• 프론트엔드 웹을 Vercel로 배포했는데, URL 직접 접근 또는 새로고침 시 404 페이지가 표시됨.

⚠️ 원인 분석

• Vercel은 기본적으로 정적 파일 기반 라우팅을 사용함.
• 하지만 프론트엔드 프로젝트는 SPA(Single Page Application) 방식이기 때문에
  라우팅 처리를 클라이언트가 담당함.
• 브라우저에서 /about, /detail/1 등으로 직접 접근하면,
  서버가 해당 경로의 정적 파일을 찾지 못해 404 오류가 발생함.

💡 문제 해결

• vercel.json 파일을 추가하여 모든 요청을 루트(/)로 리다이렉트 시켜 SPA 라우터가 처리하도록 설정.

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}