오늘의 문제
- html페이지의 main부분을 js파일에서 db에 있는걸 가져와 뿌려주는데 querySelector로 뿌려준 코드의 상태에따라 style을 변경하려고 하니 뿌려지기전에 변수선언이 먼저되고 그걸 바꾸려고 하니 Uncaught TypeError: Cannot read property 'style' of null 에러가 뜸.
- 내가 신청한 리스트 + 내 신청을 진행한 shopname들의 리스트를 가져오고 싶은데(fk로 연결되어있음) 내가 신청한 리스트는 가져오는데 이 여러개의 리스트의 개별 shop_name은 어떻게 가져와야할지 모르겠었다.( 내가신청한리스트[0].shopname 이런식으로 해야 출력이 되어서)
- (2) 에서 해결한 문제를 가공하여 response로 보내주려고 하는데 map()메서드를 사용해서 보내는데 console.log에서는 잘 찍히는데 리턴보낼때 자꾸 에러가뜸.
내가 시도해본 것
1-1. 변수선언의 위치를 바꿔봄
1-2. append할 html코드에 ${}으로 인라인 스타일 값을 줘볼까 함.
2. 레파짓토리 부분에서 for문을 돌려봐야하나 서비스 부분에서 map함수를 돌려야 하나 시도해봤다.
3. 변수에 담아 보내보려고 시도해보고, 콘솔로 찍어봄
어떻게 해결했나
- 프로젝트 마감시간 때문에 아직 구현하지 못했다.
- 내가신청한리스트를 가져오는 부분에서 include: { model: shop } 을 하니 innerJoin이 되었다.
- 출력값이 null이라 발생하는 문제였다. optional chaining이란걸 튜터님이 알려주셨는데 기존에 shop_name: data.dataValues.shop.dataValues.shop_name
이런식으로 작성했는데 만약 shop이 null || undefined 이면 그부분에서 ^ 에러가 발생하였다. 하지만 optional chaining을 사용하면 data가 없을시 에러를 발생시키지 않고 undefined를 리턴한다. 연결된 객체사이에 ?를 넣어주면 된다.
shop_name: data?.dataValues?.shop?.dataValues?.shop_name
MDN 참고문서
새롭게 배우거나 깨달은건 무엇인가
- 어제도 비슷한 경험을 했었는데, 조금 더 컴퓨터의 언어로 생각해봐야 겠다.
- innerJoin으로 데이터를 여러번 가져왔는데, 항상 join된 데이터를 가져오는 메서드를 따로써서 return을 시키고 있었다. 그동안 내가 효율적이지 못하게 사용하고 있었구나 라고 깨달았다.
- 옵셔널 체이닝이라는 정말 나에게는 혁명적인 기술같이 느껴졌다. 정말 내가 공부하고 알아야할게 너무나도 많다는걸 느꼈다.