왜 mainpage는 한번에 작동이 안되는 걸까?
아마 내가 onClick에 삼항연산자를 너무 많이 써서 그런게 아닐까 하는게 첫번째 의심이다.
그리고 5개로 포스터 정해둔걸 지우니까 작동을 했다.
그리고 Jumbotron에서만 모든 콘서트 정보를 받아와서 밑의 mainConcertInfo와 댓글이 target이 잡힐때까지 getAllConcerts함수의 모든 과정을 기다려주지 못하고 undefined가 뜨는 것이었다. jumbotron뿐만아니라 mainpage 영역에서도 전체 콘서트를 받아야 밑의 다른 컴포넌트들도 정보를 다 받아올 수 있다.
무엇보다 가장 확실한건 redux로 상태관리를 하는데 action을 이용해서 상태를 바꾸면 store를 다녀오기때문에 action을 주는대로 바로바로 변하지 않는다는 점이다. redux로 상태를 변화시켜서 탭바를 눌렀을 때 원하는 대로 바로바로 데이터가 변하지 않았다. dispatch를 막 쓰지 말자 ㅎ..
그래서 axios로 정보를 불러오는 것을 메인페이지에서 하지 않고 랜딩페이지에서 미리 불러오기로 했다. 그랬더니 다행히 mainpage의 컴포넌트 들에서 undefined가 나오진 않았다. 이게 정석적인 방법이 아님을 잘 알지만 프로젝트 마감이 얼마 남지 않아서 일단 임시방편으로 이렇게 데이터를 받아오기로 했다.
새로 알게된 점
- 타입이 Date인 함수를 만들고 있는데 오늘도 타입에러가 떴다.
Argument of type 'Date | undefined'is not assignable to parameter of type 'Date' -ts(2345)
타입이 Date가 아니고 undefined로 들어올 경우에 대해서 작성해 주지 않아 일어난 에러같다.
그래서 handleOpenDate(target.open_date) 함수의 인자에 Non-null assertion operator를 사용해 주었다.
Non-null assertion operator
햬당 피연산자가 null이나 undefined가 아니라고 명시해주는 표시이다.
-
typescript에서 타입을 설정할 때
id?:number라는건 id가 number타입이라는 뜻이면서 들어올 수도 있고 안들어올 수도 있다고만 알고있었다. 하지만 정확하게는 id가 null이나 undefined라면 받지 않는다는 뜻이었다. -
react에서 텍스트 줄바꿈 하는법
css에서white-space:pre-wrap을 입력해주면 개행문자('\n')이 먹힌다.
그 외
vscode에서 터미널 위치를 잘못해서 바닥이 아니라 파일들처럼 왼쪽으로 옮겨버렸다. 구글링해도 잘 안보이고 어떻게 해야하는지 몰랐는데 terminal 글씨와 filter 사이를 우클릭 하면 move panel bottom이 나온다 ㅎㅎ..
참고
