안녕하세요! Croco에서 코로나인포의 프론트엔드단 개발을 담당하게 된 도다라고 해요! 😋
오늘은 코로나인포의 총 접속자가 1k를 넘은 기념으로...!
개발할 때 어떠한 스택을 사용하였고, 왜 그 기술을 사용하게 되었는지에 대해 글을 작성해볼까 해요!!
✅ 해당 글에서는 프론트엔드만 다뤄요!
코로나인포를 기획하게 된 이유!
2020년 새해에, '신종 코로나바이러스'라고 불리는 전염병이 돌기 시작했어요.
뉴스, 온라인 커뮤니티 등지에서 계속 이야기가 나오는 것을 보고 기획하기 시작하였지만...
특유의 게으름으로 인하여... 개발은 2월 3일부터 시작했어요.
적용되게 된 기술들?
- React.js
- Next.js - 검색 엔진 최적화를 위해 사용하는게 좋다고 판단하여 사용하게 되었어요!
- TypeScript
- @emotion -
styled-component와 매우 비슷한 라이브러리에요. - ZEIT (now.sh) - 배포를 위해 사용하고 있어요!
개발의 편의를 위해 적용한 기술들!
- ESLint
- Prettier - 설치 후, VSCode 플러그인과 함께 사용했어요!
개발의 시작, 디자인
React 등의 프론트-엔드 프레임워크를 사용하지 않고 정적 페이지로 구성을 할 때에는 디자인 구상 없이 뚝딱뚝딱 만들었는데, 지금은 컴포넌트 구조도 생각을 해야되서 디자인 없이는 구조를 짜는데에 오랜 시간이 걸려요.
그래서 초기 레이아웃 디자인을 미숙한 실력으로 직접 만들어봤는데...
모바일 사용성을 살리겠다고 요즘 디자인의 트렌디함을 살리지 못한 것 같아요. 나중에 기회가 된다면 디자인을 개선해보고 싶답니다 🙄
어찌되었든, 이 간단한 레이아웃 스케치를 가지고 우선 구조 작업을 시작했답니다.
디자인을 가지고 코드로 옮기기!
스케치 된 구조를 유심히 생각해보니, 모바일과 데스크톱 레이아웃이 꽤 많은 부분에서 다르더라구요.
@media 태그로만 대응하기엔 너무 일이 커질 것 같은 직감과 귀찮음 때문에 레이아웃에서 width로 구분해서 레이아웃 구조를 변경해요. resize 이벤트가 발생할 때마다 변경하는 방식을 사용했어요.
🔼 현재 코로나인포 디자인 상태.
고생했던 점 😭
네이버 지도 로딩, react-naver-maps
네이버 지도를 처음에 띄우는 데에서 삽질을 많이 했습니다.
최근 네이버 지도가 제공하는 v3 API가 종료되고, Naver Cloud Platform 으로 넘어가게 되었는데요.
props에 넣을 key를 clientId만 보고 고생하다가 ncpClientId로 바꾸니까 되는 것 보고 머쓱... 😓
반성할 점 😦
정형화되지 못한 구조, 컴포넌트
React를 쓰는 장점 중에 하나는 Component를 사용하여 요소를 재사용할 수 있다는 점이죠.
하지만 개발이 급했던 나머지, 페이지에 styled-component 등까지 복붙이라는 재사용을 해버렸어요. 앞으로는 급하더라도 export와 import를 애용하기로 했답니다.
다음 스타일 수정 시에 크게 고생했거든요... 😭
현재는 리팩토링으로 대부분의 재사용되는 컴포넌트를 컴포넌트로 분리시켰어요.
왜 나는 styled-component를 도입했지? 😷
@emotion 으로 CSS in JS를 사용하였는데, 왜 사용한지 이해가 되지 않는 구조로 사용할 때가 있어요.
styled-component도 그렇고 @emotion도 모두 Scss 방식의 하위 클래스를 지원하는데요!
제가 사용하는 방식은 styled-component로 크게 페이지를 Layout? 쯤으로 감싸고 클래스로 처리하는 버릇이 있어요. (물론 저에겐 이 방식이 편하긴 해요.)
그래서 이 방식을 버리려고 노력중이에요. 다음부턴 이렇게 사용하지 말아야지...
개선할 점 🤐
아직 서비스가 매우 초기 단계이기도 하고 개선할 점이 너무 많아요. 그래도 눈에 띄는 개선점을 적어보려구요!
컴포넌트 비동기 로딩 시에 로딩 상태 표시
일부 컴포넌트 (특히 지도!!)는 Dynamic Import라는 Next의 기능을 사용하여, 비동기로 늦게 처리하고 있어요. 근데 공식 문서를 보니, loading시에 커스텀 컴포넌트를 설정할 수 있더라구요!
그래서 해당 기능도 나중에 도입해보려고 합니다.
지도 기능 추가
이동경로 지도가 선으로만 표시되고, 추가적인 기능은 없어요. 이 부분도 개선이 필요할 것 같더라구요.
제일 중요한 부분인 만큼, 어떻게 하면 좋을지 고민중이에요
커뮤니티 기능 추가
초기부터 기획했지만 개발 단계에서 빠진 기능인데요, 커뮤니티 기능이에요. 사용자들이 자유롭게 토론할 수 있는? 🤔
마치며
코로나인포를 프론트엔드 개발을 맡은 도다였습니다.
다음 편엔 백엔드 개발자분께서 백엔드 후기를 작성해주실 예정이니, 관심이 있으시다면 하트 부탁드려요!
백엔드 편도 기대해주세요!