[TIL] 24_0108 피드백 반영, import 와 export 그리고 휴먼 에러

 

피드백 반영

검색 기능을 구현하는 개인 프로젝트의 피드백 해설 영상과 참고 및 추가 사항들을 보며 피드백 반영 중이야.

 

 

휴먼 트러블 슈팅

live-server로 웹을 봐도 script type을 module로 설정해 줬는데 import, export가 안 되서 충격이었어..

뜰리가 없는 cors에러는 뜨고, 분명 환경은 갖춰지고 문법도 잘 쓰고 있는데 왜 안 될까 고민했어.

그래서 결국 팀원분들과 코드리뷰를 하면서 같이 코드를 살펴보는데 import할 때나 import해온 값을 코드로 치면 경로까지 자동 완성이 되거든. 그래서 거기까지하고 이게 맞는데? 하다가 결국 팀원분이 js를 안 붙이셨네요 하고 보니 그 js 안 붙인 걸로 저 오류들이 다 난 거였어. 어휴ㅎㅎ

 

그래서 신나게 파일을 분리하고 기능들과 변수들 분리해서 바로 import, export 해줬지. 

 

 

해결

1. import { cards } from "./cards" // <= 사용하려고 코드 내에서 cards치면 자동완성으로 불러와지는 것

2. import { cards } from "./cards.js" // <= 하지만 이렇게 반드시 뒤에 .js를 붙여줘야 연동됨

 

 

1번은 코드 내에서 import해 온 cards란 값을 쳤을 때 문서 최상단에 import 경로가 자동완성이 되는데 그때 써지는 import문이야. 

이렇게 쓰면 절대 import가 안 되고 cors오류나 경로로 파일을 가져올 수 없다고 오류메세지가 console.log()에 뜨게 돼.

 

그러니 2번 처럼 자동완성이 되더라도 끝에 .js 를 꼭 붙여줘야 import, export로 모듈화할 수 있어. 

 

느낀 점

- 피드백 영상보면서 아 내가 다 완성하면 추가해야지나 찜찜해서 수정해야하겠다거나 예상한 것들이나 추가로 이것도 해야겠다했던 게 전부 피드백으로 나와있어서 정말 즐겁?게 피드백 순서대로 구현하고 있어.

-  사실 이 검새 기능 하나 구현하면서 갖은 트러블 슈팅은 다 겪는 것 같아 어이없게도 휴먼 에러들도 꽤나 있어서 새삼 깨닫게 돼ㅋㅋ튜터님과 아이고! 하면서 골머리 앓던 휴먼에러 import, export도 js하나로 그랬고 target으로 객체 하나만 지정할 때도.

- 이렇게 복기하면서 오류도 다시 생각해보고 아차하면서 왜 안 됐는 지도 알게 되고 좋은 것 같아.