[React] 리액트 숙련주차 개인과제 (FanLetter 만들기 - 에러 발생 및 해결_2) / toISOstring()

🔥 React 숙련주차 개인과제 🔥

 

 

✔️ 구현해야 할 기능

· 팬레터 CRUD 구현 (작성, 조회, 수정, 삭제)

· 아티스트별 게시물 조회 기능 구현 (Home - Read) 

· 원하는 아티스트에게 팬레터 등록 구현 (Home - Create) 

· 팬레터 상세 화면 구현 (Detail - Read)

· 상세화면에서 팬레터 내용 수정 구현 (Detail - Update)

· 상세화면에서 팬레터 삭제 구현 (Detail - Delete)

 

 

✔️ 과제는 Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출해야 한다.

 

 

💡Hint (과제 진행 순서)

(1) 프로젝트 셋업

(2) “props-drilling” 브랜치 생성 및 이동

(3) Router 셋업

4) 전역스타일링 적용

(5) 홈 화면 UI: 배너 및 헤더 파트 UI 구현

(6) 홈 화면 UI: Dummy Data(fakeData.json)를 이용한 리스트 UI 구현

(7) 팬레터 입력창(AddForm) 작성하여 팬레터 등록 기능 구현

(8) 홈화면의 팬레터 클릭 시 상세화면으로 이동 구현

(9) 상세화면 UI 구현

(10) 팬레터 삭제 기능 구현

(11) 팬레터 수정 기능 구현

(12) “context” 로 브랜치 생성 및 이동

(13) props drilling으로 불편하게 관리하던 state를 context api 로 리팩터링

(14) “redux” 로 브랜치 생성 및 이동

(15) context 로 관리중이던 모든 것을 redux 로 리팩토링

(16) 15단계까지 모두 완료하셨다면 선택구현사항들에 도전

 

 

---

 

⛔ 에러 발생

 

 

 

 

상세페이지로 넘어가서 값들을 불러내는 과정에서 에러가 발생하였다

     {letter.map((item) => {
            if (item.id === params.id) {
              return (
                <div>
                  <div>{item.id}</div>
                  <div>{item.writedTo}</div>
                  <div>{item.createdAt}</div>
                  <div>{item.nickname}</div>
                  <div>{item.contents}</div>
                </div>
              );
            }
          })}

 

 

배열 letter에 들어있는 요소들을 map 함수로 순회하여 조건을 충족하는 값들을 출력하기!

 

 

 

❗해결과정

 

 

 

 

 

 

---