[💻 코드스테이츠 FE 44기]main-project - 12일차

😂 타입에러 멈춰!

1. undefined일 수도 있다는 오류

값이 없을 수도 있다

일정 상세 페이지를 보여줘야 하는 과정에
타입 에러로 거의 3시간은 보냈다.

타입 가드도 시도해 봤고
타입 지정도 했는데 계속 이루어지지 않았었다..

undefined일 수도 있다는 오류는
값이 없을 수도 있다는 뜻이다.

 <article>
  {courseData && destinationList && (
    <ScheduleMapDetail
      destinationList={destinationList}
      title={courseData.courseTitle || ''}
      text={courseData.courseContent || ''}
      courseDday={courseData.courseDday || ''}
      />
  )}
</article>

courseData.courseTitle || '' 와 옵셔널체이닝을 해줘 해결 할 수 있었다.

2. 타입 선언은 했으나 다른 타입으로 확인

제일 큰 문제는
타입을 선언에 지정해 줬는데 자꾸 다른 타입과 비교를 했다.
알고 보니 해당 값은 모두 동일한 타입으로 지정해 주어야 한다.

export type PostReadT = {
  courseData: {
    courseDday: string;
    courseTitle: string;
    courseContent: string;
    coureThumbnail: string;
    courseThumbnail: string;
  };
  destinationList: IScheduleListItem[];
};

만약 PostReadT으로 타입을 지정해 주었다면
props값 등 모든 걸 PostReadT으로 지정해 주어야 한다.

3. PostReadT으로만 타입 지정해야 한다면 courseDat만 타입을 어떻게 주지?

객체 형식으로 초반에는 PostReadT.courseData 으로 줬더니 오류가 발생했다.

다른 방식인 PostReadT['courseData']으로 타입을 지정하니 깔끔하게 해결 할 수 있었다.ㅎ

const scheduleDetailSlice = createSlice({
  name: 'scheduleDetail',
  initialState,
  reducers: {
    getCourseData(state, action: PayloadAction<PostReadT['courseData']>) {
      state.courseData = action.payload;
    },
    getDestinationList(state, action: PayloadAction<IScheduleListItem[]>) {
      state.destinationList = action.payload;
    },
  },
});

😂 도대체 경로에 따라 헤더를 어떻게 구분하지...

헤더가 있는 곳, 없는 곳이 있다.
초반에는 location.pathname 를 이용해 경로를 확인했다.
예를 들어 /register경로로 들어오는 경우 헤더를 display: none으로 했다.

하지만 페이지가 늘어나면서 /register/detil/11 이런식으로 들어오면 해결을 하지 못했다...ㅠ

useParams를 사용해 봤지만 useParams를 사용하려면
Routes 내부에 들어가야 하는거 같다...

문자열은 유사 배열

location.pathname.split('/')[1];
/register/detil/11 인 경우 register 값만 반환한다.

display: ${(props) => (props?.isPath === 'register' ? 'none' : 'flex')};

덕분에 따로 로직 작성 없이 편하게 수정 할 수 있었다.
고맙다 bard..!

그렇게 완성!ㅎㅎ.. 힘들다..휴

잊지 말자.. 문자열은 유사 배열...🥹

✏️ 마치며

타입스크립트로 진행하니 타입 오류로 인해
작업하는 시간 보다 오류 해결하는 시간이 더 많았다.

이번 기회를 통해 타입을 지정할 때 선언한 하나의 타입으로 props까지 처리해야 한다는 점과 만약 경로에 따라 헤더 유무를 판단할 때
location.pathname과 location.pathname.split('/')[1]를
사용하면 되는 점을 알게된 계기가 되었다.