데브매칭 연습 - 쇼핑몰 SPA

🔗 쇼핑몰 SPA

 

 

로컬 VSCode에서 작성하고 붙여넣기를 하려고 했는데
로컬에서 테스트를 하니 CORS가 떠서 진행할 수가 없었다.

테스트환경인 온라인 vscode에서 API호출을 하니 정상적으로 작동이 되길래
시간을 더 지체할 수 없어서 테스트 환경에서 문제를 풀었다.ㅠ_ㅠ

초반부 세팅 때문에 시간을 좀 날리기도 했고 테스트 환경이 조금 불편하기도 했고,,
무엇보다 어제 했던 프로그래밍 언어 보다 난이도가 있었다.

쨌든 결국 다 못풀었다 3페이지를 구현해야하는데 마지막 페이지는 아예 손도 못댔고
2페이지의 3분의 2정도만 풀었다.... ㅠ_ㅠ

 

이후 팀원들과 이야기해보니 나와 비슷한 상황이었고 결과도 비슷했다...

 

💡 그래도 알게된 점!

 

1. 확장프로그램을 통해 Allow CORS 처리

팀원 중 한분이 Allow CORS: Access-Control-Allow-Origin 확장 프로그램을 사용해서

로컬에서 하셨다고 했는데 나도 설치하고 테스트해보니 API호출이 정상적으로 되었다.

일단 이번과 같은 상황이 생길 것을 방지할 수 있을 듯 하다.

 

2. DOMContentLoaded

과제에서 제시하는 기본 route경로가 '/web/'이었는데 테스트 환경에서는 문제가 없지만

local에서 첫 페이지를 확인하기위해 '/web/'으로 이동하면 404가 나타난다.

✅ 해결

팀원 중 한 분이 제안해주신 DOMContentLoaded를 사용하여

임시로 테스트 환경과 비슷하게 세팅할 수 있었다.

  window.addEventListener('DOMContentLoaded', (event) => {
    push('/web/');
  });

 

 

 

마크업 구조나 class name을 변경하지 말라는 이야기가 있었는데 (0점처리가 될 수 있다는..!)
selected 된 option을 찾기 위해 value값을 추가해도 되는지 확신이 안서서
selectedIndex를 활용해서 선택된 option값을 찾도록 우회해서 구현을 했는데
프로그래머스에서 제공하는 문제 해설지를 보니까 option에 value가 추가 되어있는 것을 보니
tag 속성 정도는 추가해도 되는 모양이다.