🖋️ 학습 일지 (고민과 해결) - codesquad-masters2025-team01/issue-tracker GitHub Wiki

주요 고민(문제)과 해결과정

설계 및 초기 세팅

🤔 고민: 에자일에서 사용하는 Epic - Story - Task 방식으로 할 일을 나누어 정리하였다. 백엔드와 통합해서 작업하는 것이 좋을까?
✅ 해결: 최종적으로는 백과 프론트 따로 작업하였다.
처음에는 에픽과 스토리를 같이 공유하고 Task만 백과 프론트 따로 정리하는 방식으로 하기로 했으나, 당시 에픽은 화면 단위였는데
백엔드 팀원을 통해 에픽은 도메인 단위로 이루어진다는 것을 알게 되었다. 그렇게 해서 에픽과 스토리를 갈아엎고 다시 정하게 되었다.
그런데 생각해보니 이대로 Task를 정리한다면 나중에 내가 작업할 때 어려움을 겪을 것 같다는 생각이 들었다.
(Task가 화면 단위가 아니다 보니 주어진 기획서와 Task의 통일성이 떨어져 내 작업 파악에 어려움을 겪을 우려↑)
그래서 프론트엔드는 Epic - Story - Task을 따로 정리하는 방향으로 하기로 했다.

🤔 고민: 초기 세팅을 얼추 마무리하고 앱을 돌려봤는데, createContext only works in Client Components.같은 에러가 난다. "use client" 명시자를 달라고 하는데, 근데 내 코드엔 createContext가 없는데..??
✅ 해결: 📚 NextJS 환경에서, 코드엔 createContext가 없는데, createContext only works in Client Components.같은 에러가 나는 이유 및 해결 과정

🤔 고민: 위 에러를 해결하고 화면을 띄웠는데 콘솔에 처음 보는 경고가 찍혀있다. A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used: ...
✅ 해결: <에러의 정체 ― SSR Hydration Mismatch 경고>
Next.js(React 18 +)에서 SSR (서버 사이드 렌더링) → 클라이언트 Hydration 단계에서, 서버가 만든 HTML과 브라우저-측 React가 계산한 가상 DOM이 일치하지 않으면 React가 다음과 같은 경고를 띄운다.
A tree hydrated but some attributes of the server rendered HTML didn’t match the client properties. This won’t be patched up …
즉 “이미 내려보낸 마크업과 클라이언트가 만든 마크업이 달라서 React가 어떻게 고쳐 줄 수 없다” 는 뜻이며, 이 차이를 수정하지 않으면 예측할 수 없는 UI 깜빡임·이벤트 불발 등이 일어날 수 있다고 한다. 이번 케이스는 cz-shortcut-listen 속성 탓일 확률이 높다고 하는데, 확장 프로그램과 연관이 있는 것 같다. 정확한 원인 파악이 안되서, 일단은 이 상태로 개발을 해봐야겠다.

🤔 고민: Emotion으로 theme을 가져와 사용하려고 했는데, theme이 적용되지 않는 문제가 발생했다. (background-color: ${({ theme }) => theme.colors.surface.default};에서 colors 속성을 읽을 수 없다는 에러)

✅ 해결: 타입을 읽지 못하는 문제. emotion.d.ts 파일을 만들어 해결하였다.

import "@emotion/react";
import type { ThemeType } from "@/styles/theme";

declare module "@emotion/react" {
export interface Theme extends ThemeType {}
}

Epic 2: 이슈 목록 (메인 화면) 작업

🤔 고민: /frontend/public/mockDatas/issueMockData.json 경로에 위치한 mock 데이터를 fetch로 가져오려 하는데, console 창에 아무것도 나오지 않는다. 개발자 도구의 네트워크 탭을 확인해보니 404 Not Found 에러이다. 어떻게 해결해야 할까?
✅ 해결: 📚 fetch 경로 404 에러 대응 정리

🤔 고민: mock 데이터가 로컬에 제대로 연결되는지 확인하는 작업 중 Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:이런 에러를 마주했다. “서버가 그린 HTML”과 “클라이언트가 처음 렌더링한 DOM”이 서로 다를 때 발생하는 에러인 것은 알겠는데, 어디가 문제인 것이며 어떻게 해결해야 할까?
✅ 해결: 📚 hydration mismatch 대응 정리

🖋️ 학습 일지 (고민과 해결) - codesquad-masters2025-team01/issue-tracker GitHub Wiki

주요 고민(문제)과 해결과정

설계 및 초기 세팅

Epic 2: 이슈 목록 (메인 화면) 작업

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️