[TIL] #23. 231006

어제 목표 & 오늘 완료한 한 일 

• 알고리즘 문제
• 웹개발 A to Z 응용
  • 리뷰 수정 기능 구현
• 내배캠 Chap1 팀프로젝트
• 뉴스레터 읽기

 
내일 목표

• 알고리즘 문제
• 웹개발 A to Z 응용
• 팀 프로젝트 회의 준비
• 뉴스레터 읽기

 

구현 내용

리뷰 수정

 

발생한 문제와 해결

코드의 중복되는 내용을 다른 파일에 옮겨 연결시키는 과정에서 CORS에러가 발생했었다.

확실하지는 않지만 내가 찾아보고 이해한바로는, 파이어베이스 사용을 위해 import 한 상태에서 내 로컬 컴퓨터에 있는 파일도 import 하려고 하다보니 웹 브라우저는 이를 다른 곳에서 접근하는 것으로 생각하여 보안 정책에 따라 해당 에러를 발생시킨 것으로 보인다.

서치 중 블로그를 통해 해당 에러는 로컬 웹 서버를 실행하면 해결이 가능하다는 것을 알게 되었다.

npm install http-server -g 

터미널에 위의 명령을 입력하여 http-server를 설치한 후,

npx http-server

를 실행해 서버를 실행하게 되면 오류가 해결된다.

 

느낀점

'자릿수 더하기' 문제를 풀었는데 코드를 너무 비효율적으로 작성한 것 같다. 단순한 방법으로 풀면 좋을 문제를 괜히 어렵게 생각하다가 오히려 더 제대로 풀지 못하게 된 것 같아 아쉽다. 그리고 Math.log10() 메서드는 이번에 처음 알게 되었는데 앞으로 많이 사용하게 될 것 같으니 잘 기억해둬야겠다.

 

오늘 팀 프로젝트하면서 블로그(https://fl0wering.tistory.com/65)를 통해 CORS 에러를 해결하는 법을 알았다. CORS 에러에 대해서는 이후 더 공부해볼 예정이다. CORS 에러 해결 방법은 알았지만 내가 원래 계획했던 파이어베이스 세팅 관련 코드를 따로 빼서 기존 파일에 연결시키는 것을 불가능할 것 같다 ㅋㅋ.. 왜냐하면 JS를 분리시키면 로컬에서 값을 찾는데 데이터베이스는 HTTPS 프로토콜로 import 되기 때문에 로컬에서는 이를 못 찾아 오류가 발생한다는 사실을 팀원분께서 알려주셨다.. 이 이야기를 듣고 그 부분을 제외하고 JS를 분리하려고 해봤지만 import 관련 문제 등 몇 가지 에러가 발생하는 것 같았다. 오늘 이거 하면서 엄청난 답답함을 느꼈기 때문에 뭐가 어떻게 되는건지 꼭 알고싶다..

그리고 팀원분이 데이터를 삭제하는 기능을 구현하기 위해 작성하신 코드를 보며 공부를 했다. 해당 코드를 보면서 새롭게 알게 된 것은 closet(), find() 등이 있다. 

 

지브리 영화 사이트는 댓글 수정 기능까지 완료하였다. 어제 팀 프로젝트를 하면서 구현한 내용들을 토대로 코드를 작성하였더니 정말 쉽게 문제를 해결할 수 있었다. 이제 해결할 것보다 해결한 부분이 더 많은 것 같아서 빨리 마무리 짓고 싶다는 생각뿐이다..!