항해 99 일지 (77) - WIL11

WIL (Weekly I Learned)

이번주는 실전 프로젝트 과정 3주차로, 목표로한 MVP를 만들고 배포하였다.

 

이번주에 내가 배운것

• Cloud Front
  • 클라우드 프론트의 캐시 이슈
  • 빌드한 코드가 바로 적용이 되지 않는 문제
  • Cloud Front의 Behavior에서 캐시를 설정
•  HTTPS
  • Mixed Content 이슈
    • API 통신에서 HTTP 통신이 있으면 발생
    • 서버, 클라이언트 둘 다 HTTPS를 적용해야 함
• PWA
  • 스마트폰 환경에서의 사용성을 네이티브 앱에 준할정도로 하기위해서 적용
  • Light House에서의 기준을 충족
    • HTTPS, Service worker, manifest.json
• 리액트에서 SVG확장자 이미지 다루기
  • SVG 이미지의 색상을 적용하기 위해 fill=current를 인라인에 적용
• touchstart 이벤트 stopPropagation 적용
  • 슬라이더에서 input type=range를 조절할 때 슬라이더가 같이 움직이는 이슈
  • 바닐라 자바스크립트 문법으로 해결

• 사용성, 버그 관리
  • 런칭 후, 피드백을 받아 불편한 점을 개선
  • 반응형 디자인에서 미흡한 레이아웃들 수정

 

미흡했던 것

• Service Worker 이해 미흡
  • 프리캐싱이 무엇인지 아직 잘 이해가 안 됨
  • workbox 패키지로 캐시를 통제하고 적재적소에서 사용할 필요가 있음
• 코드 컨벤션
  • 초반에는 잘 지켜졌으나, 프로젝트가 진행될 수록 미흡해짐
  • 리팩토링 과정에서 최대한 해결하기
• 데이터 처리
  • 필요없는 데이터를 불러오거나 중복해서 불러오는 것을 처리할 필요가 있음
  • Detail.tsx 코드 개선하기

•  

내가 잘한 것

• 이벤트 버블링 처리
  • 상기, 슬라이더 안에서 input type=range의 이슈를 잘 처리한 것
  • 바닐라 자바스크립트의 중요성을 다시 한 번 깨달음

---

구현 서비스

https://theweatherlevel.com 

외출 난이도

시연 영상

https://www.youtube.com/watch?v=WWQWBb_dLu0 

 

Repository(Frontend)

https://github.com/greedysiru/weather_level

greedysiru/weather_level

 

이번 프로젝트는 날씨 큐레이팅 서비스를 구현하였다. 마지막 프로젝트이고 실제로 런칭하는 프로젝트인 만큼, 사용자의 사용성을 극대화하기 위해서 처음 구현부터 스마트폰 환경 사용을 우선적으로 고려하였다. 그리고 네이티브 앱과 유사한 경험을 제공하기 위해서 PWA를 도입하였다. 여러 디바이스의 화면을 구현하기 위해서 반응형 디자인을 공부하여 적용하였고 만족스러운 화면을 만들 수 있었다. 앞으로 남은 2주동안도 유저 피드백을 받아서 꾸준히 개선할 것이다.

---

마지막 과정 실전 프로젝트를 런칭하게 되었다.  HTTPS, 캐싱, Sevice Worker 등 우여곡절이 많았지만 포기하지 않고 찾을 수 있는 정보와 지식을 총동원하여 모바일 환경에 최적화 된 리액트 웹 애플리케이션을 만들 수 있어서 기쁘다!