7주차 회고

주말에 너무 실컷 놀아버린나머지 WIL 을 잊었다. 

그래서 월요일 아침 WIL 작성을 못한 팀원들과 함께 한시간정도 WIL 을 적기로..

 

이번주 저번주가 7주차! 드디어 실전프로젝트의 시작.

우리팀은 프로젝트 시작 며칠전 미리 마음 맞는 사람끼리 모여 팀을 이룬 경우인데,

팀을 모은 두분께서 그 전부터 기획을 짜 놓으신 상태로 시작해서 진도가 꽤 빨리 나갔다.

백엔드쪽은 api 거의 다 된거같고, 

프론트쪽은 새로 추가한 페이지와 기존에 짜놓은 페이지, 총 2페이지를 제외하고 기본 골격 짜는걸 완료했고,

그중 한 페이지는 디자이너님의 초기시안이 빨리나와 (최종x) styled-components 로 미리 스타일 작업을 한 상태.

 

이정도면..우리 꽤 수월한걸지도?

엣헴!

 

물론 이런저런 수많은 오류를 보며 눈물을 머금은채 손가락을 굴려 타자를 쳐대긴 했다.

그중 제일 고민되었던건 라이브러리와 외부 API 문제!

우리 프로젝트에서 주요 컨텐츠에 사용되는 외부 API는 날씨나 지도 관련된 것들인데 날씨쪽은 백엔드에서 처리를 했지만 문제는 지도, 그리고 클라이언트의 위치파악이었다.

 

 

위의 이미지는 우리 프로젝트에서 날씨 api 를 사용하는 부분이다.

클라이언트의 현재 위치에서 시와 도를 가져와 api에 요청하면 저 많은 값들을 보내주는건데.. 문제는 이 "클라이언트의 위치"를 가져오는 것.

단순시 위경도로 가져오는건 어렵지 않았다. 당장 검색해도 많은 방법이 수두룩하게 나온다.

위경도를 XY좌표로 변환하는것도 github 검색하면 수식이 나와서 이 수식 파일을 만들어 함수로 사용하면 된다.

근데.. 한글로, "서울시 강남구" 처럼 변경하는건?

지도 api를 사용하여 변경할 수 있다. reverse geocode 라는걸 이용하는건데.. 이걸 네이버 지도 api나 카카오 지도 api를 통해 사용할 수 있다.

근데..그게 그냥 되면 이 글을 안적겠지? 요청하면 CORS 에러가 난다.

api를 통해서 한글로된 주소를 좌표로 전환하는건 어렵지 않다고 한다. 그런데 그 반대는? 에러가 뜬다..!

추측컨데, 아마 보안 관련 문제로 그러는게 아닌가 싶다.

그럼 어찌 해야할꼬? 백엔드분들에게 도움을 요청해야한다.

수많은 검색을 했으나 대게 서버쪽에서 한번 작업을 해주야한다는 답만 보았다.

카카오맵의 경우 카카오 로그인기능을 구현하면 가능하다하지만 이것도 결국 서버에서 해당 기능을 함께 작업해줘야하는것 아닌가?

여튼, 이 문제는 일단 클라이언트의 위치를 위경도로 서버에 보내주면 서버에서 해당 값을 통해 외부api에 요청하는 방식으로 가는걸로 나왔다. 

 

그럼 또 다른 고민거리, 텍스트 에디터 라이브러리이다. 

우리 프로젝트에는 "커뮤니티"가 들어간다.

글을 쓰고, 저장하고, 리스트로 글 목록이 보여지는건데 이때 단순한 textarea로만 사용하면 다른 부분의 퀄리티에 비하여 질이 낮아 보일 수도 있고 사용자의 입장에서는 니즈가 충족되질 않아 불편할 수도 있을 듯 했다.

예를 들어 단순히 textarea를 이용한다면 현재 우리의 실력 상으로는 글의 중간에 이미지를 넣거나 사용자가 원하는 문구를 인용처리, 혹은 bold처리 등을 할 수 없다. 

그래서 텍스트 에디터 라이브러리를 사용하자! 고 해서 이런저런걸 찾다가 어떤 외국기사의 리엑트 텍스트 에디터 라이브러리 탑5 를 발견했다.

https://blog.bitsrc.io/top-5-rich-text-editors-for-react-in-2021-628fecf0f7e0

Top 5 Rich Text Editors for React in 2021

 

일단 소거법으로 진행했다. 

초기비용 최소화를 위해 유료라이브러리를 제외하면 draft, slate, quill, tiptap(기사 작성한 분의 추천)이 남았다.

slate는 위 기사에서도 신뢰가 떨어진다길래 제외하고..

이중 나는 quill과 tiptap을 테스트해보았다.

두가지는 서로 아주~ 달랐다.

quill은 기본 뼈대가 잘 잡혀있지만 그만큼 커스텀을 하려면 손이 꽤 많이 가고 업데이트가 적은 라이브러리지만,

tiptap은 커스텀 하기 좀 더 수월해보이지만 베타라서 그런지 이미지 삽입 기능부분은 손을 더 봐야 했다.

다른 팀원분은 draft를 살펴보고 draft에서 파생된 react draft 라이브러리를 테스트해보았는데 깔끔하지만 사용하기 어렵다는 평을 주셨다.

quill의 xss보안 문제는 백엔드분들이 해결 가능하다고 하셔서 그럼 quill로 진행하기로 했다.

 

이제 오늘 진행해야할 부분이 이 quill.js 을 통해 만은 텍스트 편집란에 넣은 내용물을 가져오고 그 내용물의 형식이 어떠한지 알아보는것.

그리고 작업을 시작해야하는 페이지들의 골격 짜기이다.

 

아직 시간이 꽤 남아서 그런가 조급하지 않게 하니 마음이 편안!

그럼 이번주 WIL도 여기까지. 20000.