106일차 TIL : 최종 프로젝트 - 장소명에 해당하는 메모 입력하기

에러

2개 이상의 코스가 있을 때 장소별 메모를 순차적으로 작성하지 않을 시, 메모가 해당 장소에 추가되지 않고 무조건 첫 번째 장소부터 순서대로 추가되는 버그

원인

<p>{lists[key].memo}</p>

인덱스에 해당하는 key값으로 반환하고 있기 때문

해결

memoList의 요소 중에서 item.id와 일치하는 데이터만 반환(실패)

현재 DB 구조

• lists

    [{
      name: 장소명,
      address: 주소,
      road: 도로명 주소,
      phone: 전화번호,
      id: 카카오맵 API에서 제공하는 장소 id,
    }];

• memoList

    [{
      id: 카카오맵 API에서 제공하는 장소 id,
      memo: 유저가 작성한 메모
    }];

     {
       memoList.filter((target: { id: number; desc: string }) => {
         if (target.id === item.id) {
			return target;
            }}).desc
     }

lists와 memoList 안에는 id라는 공통된 값이 있기 때문에 이걸 이용해서 각각의 id가 일치할 때만 해당 아이템을 조회하는 방식을 사용했다.

결과적으로 아무런 아이템도 반환하지 않았다. 그 이유는 모르겠으나 아이템을 반환한다고 해도 의도한 결과가 아니라 memoList에 있는 모든 아이템을 반환할 거라고 판단했다. map 안에서 실행하는 구문이기 때문에 코스 갯수만큼 item을 대입할 것이다. 이렇게 되면 target.id는 item.id와 무조건 일치할 수밖에 없다.

DB 구조 변경(성공)

    [{
      name: 장소명,
      address: 주소,
      road: 도로명 주소,
      phone: 전화번호,
      id: 카카오맵 API에서 제공하는 장소 id,
      memo: 유저가 작성한 메모
    }];

lists의 DB 구조를 위와 같이 변경한 후 {item.memo}로 불러오면 끝!

변경된 lists DB구조를 반영한 post DB 구조

{
	user: 유저 정보,
	location: 지역 카테고리,
    travel_status: 여행전/후 카테고리,
    hashtag: 해시태그,
    title: 제목,
    createdAt: new Date(),
    likes: 좋아요,
    lists: [
    	{
          name: 장소명,
          address: 주소,
          road: 도로명 주소,
          phone: 전화번호,
          id: 카카오맵 API에서 제공하는 장소 id,
          memo: 유저가 작성한 메모
        },
            	{
          name: 장소명,
          address: 주소,
          road: 도로명 주소,
          phone: 전화번호,
          id: 카카오맵 API에서 제공하는 장소 id,
          memo: 유저가 작성한 메모
        },
    ]
}