221025_TIL | map 오류 해결

오늘한 일

• [항해 99] 미니프로젝트 로그인/회원가입(서버 통신) 구현 – 수정 필요함
• [항해 99] 메인화면 구현 완료(이미지 불러오는 건 더 해봐야할 듯)

내일 할 일

• [항해 99] 로그인/회원가입 최적화 하기
• [항해 99] 미니프로젝트 기능 추가하기

오늘의 배운 점

오늘의 오류

일단 오류는 아래의 캡쳐본처럼 오류가 떴다. 해석하자면 map을 돌리려면 배열형태가 되어야하는데 배열 형태가 아니라서 생기는 문제였다.

// 해결법 1 ) 옵셔널 체이닝 사용

<div>
    {postList.data?.map((post)=> {
        return(
            <div
                onClick={()=>
                    navigate(`/detail/${post.id}`)
                }
                    key={post.id}
                >
                    <Post post={post}/>
                </div>
                );
        })}
</div>


// 해결법 2 ) 조건부 렌더링

<div>
    {postList.data &&
        postList.data.map((post)=> {
        return(
            <div
                onClick={()=>
                    navigate(`/detail/${post.id}`)
                }
                    key={post.id}
                >
                    <Post post={post}/>
                </div>
                );
        })}
</div>

위의 2가지 방법을 이용하면 undefined로 뜨는 부분을 해결할 수 있다.
여기서는 data가 도착하지 않았는데 map 함수가 실행되었기 때문에 undefined이 뜨는데 이 부분을 옵셔널 체이닝과 조건부 렌더링으로 에러를 방지해준다.

원래 옵셔널 체이닝으로 진행했었는데 뒤로가기를 누르면 오류가 떠서 조건부 렌더링으로 진행해봤고, 그 이후에 다시 옵셔널 체이닝으로 하니까 조건부 렌더링과 동일하게 작동했다(왜지,,?)

내일 한 번 더 돌려봐야 확실할듯
콘솔도 열심히 찍자!

---

오늘 로그인 구현을 어찌어찌 성공했다. 근데 혼자의 힘으로 하기 보다는 다른 분들이 짠 코드나, 옆 팀(성욱님 미안 ㅎ) 코드 염탐 및 우리팀 프엔 대장님(휘린님)한테 물어보기…로 해결했다..
혼자힘으로 진짜 진짜 하고 싶었는데 어떻게 짜야할지 처음을 모르겠어서 엄청 힘들었다. 구글링해서 알아보기는 했는데 막상 적용해보려고 하니까 오류가 너무 많이 떠서 너무 난감했다..
진짜 5-6가지 방법을 써봤는데 오류 대파티!@ 이전에 써놨던 코드랑 달라진 부분들이 많아서 수정한다고 아직 로그인/회원가입 부분은 미숙한데 이 부분은 내일 중에 확실하게 최적화까지 해볼 예정!

낮까지만 해도 아무고토 안되서 진짜 우울했는데 하나 해결하고 뭔가 이해를 하고 나니까 기부니가 좋아졌다.. 내마음 너무 갈대… 멘탈 관리가 제일 중요할 것 같은데 너무 어렵다
부디 내일은 스무스한 하루가 되기를

– 해결법 1, 2 출처

https://velog.io/@chaerin00/JS%EC%98%B5%EC%85%94%EB%84%90-%EC%B2%B4%EC%9D%B4%EB%8B%9D