원래 이번 주차에 소셜로그인을 맡았지만 역할을 다시 분담해서 메인 CRUD를 만들기로 했다.

백쪽에서 api가 나오지 않았고, 와이어 프레임도 나온 바가 없기 때문에 간단하게 기능 구현만 해보기로 했다.

오늘은 Read 기능만 있는 메인페이지를 간단하게 구현했다.
구현하면서 발생했던 문제와 다시 한 번 직면해보는 시간을 가지겠다.

---

1. map is not a function

처음에 map을 돌릴 때 postList.map 으로 했더니 "map is not a function" 에러가 났다.
map은 배열일 경우에만 돌려져서 배열이 아니라는 뜻이다.

그럼 postList에 저장한, useSelector로 가져온 list가 배열이 아니라는 뜻일까?

하지만 initialState의 list는 [] 빈 배열이 맞았다.

그래서 db.json 의 형태를 확인했다.

post를 불러올텐데, boardList와 forderList가 각각 배열이 아닌 객체로 불러와져서 발생하는 문제였다.

이를 해결하기 위해

postList.map --> postList.boardList.map

으로 코드를 바꿨더니 에러가 사라졌다.

map으로 돌리는 대상이 배열이 아닐 경우 발생하는 에러이므로 잘 확인해야 될 것 같다.

---

2. TypeError: Cannot read properties of undefined (reading 'map')

map의 타입에러가 났다. 이를 고치기 위해서는 두가지 방법이 있다고 한다.

'&&' 를 사용하거나 '?'를 사용하는 방법이 있는데, 나는 후자를 택했다.

'? : 옵셔널체이닝(optional chaining)'을 활용한 코드를 짰다.

'?' 뒤에 있는 코드가 무조건 참일 경우에만 실행하며,
프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
즉, 어레이가 있을 경우에만 코드가 실행된다.

명세서에 ?.이 추가되기 전엔 이런 문제들을 해결하기 위해 && 연산자를 사용하곤 했지만, 코드가 아주 길어진다는 단점이 있기 때문에 옵셔널 체이닝을 주로 이용한다.