[SW 정글 112일차] 나만의 무기 20일차 (프론트엔드 맛보다)

오늘은 이번주 수요일까지 최소한의 기능을 갖추어 우리의 서비스를 사용자에게 보여주어 사용자 경험을 하기 위해서 계획을 잡았다.

잡은 계획은 main flow완성을 위해 챌린지 생성 폼, 인증 수락 페이지, 인증 요청 폼을 완성시키는 것이다.

그래서 백엔드팀도 프론트엔드팀에 붙어 폼, 페이지 만들기에 돌입했다.

이유는 일단 DB 테이블 설계와 API 설계는 완료했기 때문에 프론트 개발이 완성되고 테스트만 해보면 되기 때문이다.

 

내가 맡은 것은 챌린지 생성 폼이다.

기존에는 이중모달로 이루어졌고 다시 와이어프레임을 짰을 때에는 react router를 통해 새로운 페이지에서 챌린지 생성 폼을 보여주기로 했다.

그래서 내가 A-Z까지 짜는 것이 아닌 이전 프론트팀 동료가 짜놓은 코드를 참고하면서 진행했다.

그리고 Redux를 알아야 하거나 deep한 React문법을 알고 있어야 하는 것이 아니여서 초기 진입장벽이 높지는 않았다.

나에게 가장 어려운 것은 CSS였다...

 

평소에 꾸미는 것을 좋아하고 프론트엔드팀의 개발 진행상황을 보면 점점 아름다워지는 모습을 보면서 프론트의 매력을 느끼곤 했는데 이전부터 느꼈왔던 것이지만 CSS는 나랑 친해지기에는 먼 사이인 것같다..

여기에 두고 싶은데 저기에 가있고 저기에 두고 싶은데 여기에 와있고...

그리고 우리 팀은 tailwind라는 CSS Framework를 쓰기로 했는데 tailwind 홈페이지에서 여러 개발자들이 tailwind를 사용하여 만들어 놓은 opensource components들이 많았고 그 중에서 마음에 드는 것을 골라서 우리의 것에 적용시켜보려고 했는데 중구난방으로 배치되었다.

 

그래서 내가 마음에 드는 것은 포기하고 빠르게 개발할 수 있고 적용하기 쉬운 것을 택했고 develop해나갔다.

develop하면서도 내가 원하는 것을 적용시키지 못한게 아쉽지만 사용자 경험을 위한 개발을 위해서라면 지금 당장 필요한 부분인가?라는 생각을 해보면서 나중으로 미룰 것은 미루고 기능만 될 수 있도록 구현했다.

 

내가 원했던 것은 range slider에서 숫자를 표시하는데 tooltip으로 cursor 위에 바로 뜨게 해주는 것이다.

그리고 category(운동, 독서, 공부 등..)을 정하는 input이 있는데 처음에 선택한 예쁜 radio box가 있었지만 responsive하게 개발하는 것이 어려웠고 결국에는 select box로 구현해놨다.

select box도 responive하지는 못하지만 radio box보다는 낫다.

 

다시 백엔드의 품으로 돌아가고 싶다.

그립다 socket 서버야... 그립다 express야...

 

<기존 모달 폼 코드를 가져왔을 때의 모습>

<수정 후의 모습>

 

<해야 할 일>

챌린지 생성 폼에 useState적용하여 api 연결

알림기능 공부 후 도입->인증요청 시 같이 챌린지 인원들에게 알림보내는 것을 구현할 생각임

---

<참고자료>

https://tailwindcomponents.com/component/form-9

https://codesandbox.io/s/react-tailwind-align-range-slider-ghyf0?file=/src/App.tsx:67-105