#TIL_22.1.26

ISOJ·2022년 1월 26일
0

Today I Learned

목록 보기
43/43
post-thumbnail
post-custom-banner

환율 계산기 구현

https://github.com/krungy/week1-calculator

  • 팀 과제로 환율 계산기를 구현

이슈

정규표현식 SyntaxError

  • 정규표현식의 특정 문법(lookbehind 문법) 이 사파리에서 지원되지 않아 발생한 에러
SyntaxError: Invalid regular expression: invalid group specifier name
  • 브라우저 호환성에 문제 없는 문법을 사용하는 것으로 수정하는 방식으로 해결 가능하다.
    • 일단은 크롬 브라우저로 접속을 유도함..

배포 환경에서의 mixed content 문제

  • 사용된 API 가 무료플랜으로는 https 를 지원하지 않고 http 만 지원하기 때문에 netlify 배포 시, 배포된 환경에서 mixed content 문제가 발생
  • https 로 내려주는 API 로 사용하거나, heroku / aws 등을 사용하여 배포하는 방식으로 해결 가능하다.
    • netlify의 경우 http로 리소스 요청시 https로 강제 리다이렉트를 발생시키기 때문에 겪은 문제로 보인다.
    • access-control-allow-origin: * 으로 CORS를 해결하자.

회고

  • 간단한 과제였지만, API가 내려온 형태가 개인적으로 편한 방식은 아니였다.
    [{id: 1, title: 'title1', content: 'content1'}, {id: 2 ...}, ...]
    위와 같은 방식으로 사용하는게 편했기 때문에, 받은 데이터를 어떻게든 이 방식으로 변환해서 사용하려고 하다보니 이후의 작업들이 꼬인 것 같다.
  • 어떤 데이터를 상태로 관리해야할 지 미리 파악한 후에 진행해야 할 필요성을 느꼈다.
  • 위의 두 시행착오를 겪고 문제점을 파악한 후, 다시 처음부터 만들었을 때 수월하게 진행이 가능했다. 이 경험을 염두해두고 다음에는 프로젝트를 시작할 때 조금 더 체계적으로 진행하도록 해야겠다.
  • 굳이 API 데이터를 내 입맛에 맞춰 변형하여 사용하지말고, 그대로 사용해보도록 해야겠다.
profile
프론트엔드
post-custom-banner

0개의 댓글