부스트캠프 회고 - 5주 그룹프로젝트 3주차 day3

Today I Learned

• sourceMap
  • 트랜스파일된 파일을 다시 원본 파일로 mapping 시켜주는 라이브러리
  • 실제로 mapping을 위해 구성된 .map 파일을 지칭하기도 한다
  • .map 파일이 있다면 sourceMap 라이브러리를 cdn, npm으로 받아서 직접 맵핑을 할 수 있다. 
  • 빌드된 파일 맨 뒤에 //# sourceMappingURL=main.js.map 주석이 붙어서 브라우저에게 sourceMap을 찾을 수 있는 위치를 알려준다. 상대경로가 아니라 별도의 cdn 등으로 설정해도 작동한다. 
• object storage(S3, NCP)
  • 파일을 브라우저, Postman으로 GET 하는 것은 잘 지원한다. 
  • 스크립트 내부에서 GET 요청으로 받아오는 것은 CORS를 허용해주어야 쓸 수 있다. 
  • 별도의 API를 이용해서 Bucket에 CORS 허용 설정을 해 줄 수 있다. 
  • CDN을 사용할 경우, CDN에서 응답하는 요청에 CORS 헤더를 세팅해주어야 한다. (클라우드에서 지원한다면)

오늘의 느낀점

• GitHub OAuth를 팀원들과 한참 붙잡고 있었다... 몇 번을 했는데도 OAuth는 계속 발에 걸리는 것 같다. 
• sourceMap이 궁금해져서 밤에 파봤는데 정말 신기하다. 우리 프로젝트가 webpack으로 번들링 된 파일을 풀어서 에러 위치를 알려줘야 하는데, 잘 써야 할 것 같다. 사용자에게 sourceMap을 올리도록 요구하는 것은 조금 무리인데... sentry 처럼 webpack 플러그인으로 올리는 방식이 정말 기막히다고 느껴졌다. 
• nCloud의 CDN+ 는 OPTION 요청을 받아주지 않는다. CORS로 사용할 수 없다. 한참을 삽질하다가 velog에서 다른분이 하루를 투자하고 nCloud에도 문의한 결과 안된다는 결론을 내렸다고 한다. 분명 나와 같이 CORS로 쓰고싶은 사용자들이 있었을 텐데 왜 방법이 없는지 의아했다. 

오늘의 칭찬

• sourceMap과 object storage를 열심히 연구해 보았다. 

개선점 & Reminder

• sourceMap 공부한 내용을 팀원, 다른 캠퍼들과 나누기 위해 정리해보자