정말 정신없는 하루하루를 보내고 있다. 그러던 중 오지 않을 것이라고 생각했던 새해를 94카르텔과 함께 맞이했다.
사랑했던 핀토스가 끝나고, 정신없이 나만 무 팀이 짜였고, happy marriage algorithm에 의해 5기 동기들 모두가 행복한(?) 팀이 결성되었다.
나만무에 들어와서 했던 고민들이 값지다는 생각이 들었다. 앞으로 나만무 시리즈는
- 내가 고민했던 내용과
- 고민에 대해 내가 무엇을 하였고, 결과는 무엇인지에 대해서 정리하려고 한다.
나만의 무기 1주차 ☠️
프로젝트를 개발이 아닌 '기획'을 하다 보니 정말 재밌었지만 그만큼 힘들었다.
우리가 상상하는 서비스에 대해 어떤 기술이 필요하고, 구현이 가능한 지가 가늠이 가지 않았기 때문에 더 어려웠다고 생각이 든다.
우리 팀은 운 좋게 첫 발표에 준비했던 아이디어 두 개 모두 통과하였고, 둘 중 고민이 많았지만 우리가 더 재밌는 쪽을 선택했다.
고민 🧐 → 결과😎
Tailwind CSS?
내가 경험했던 프레임워크는 부트스트랩이 전부였기 때문에 그냥 써야 하나 고민이 많이 되었다.
그러던 중 카카오 FE 팀에서 Tailwind CSS 도입하는 과정에 대한 글을 보았고, 나도 대세(?)에 따라가야겠다는 생각에 Tailwind CSS 결정하였지만 이게 왜 좋고, 많이 사용하는지에 대해서 궁금해졌다.
먼저 내가 경험했던 부트스트랩은 디자인이 정형화되고, 세부적인 디자인에 불편함이 있다.
Tailwind CSS는 부트스트랩처럼 className으로 작업하는 것은 같지만 세부적인 디자인이 가능했다.
실제 내가 작성한 코드이다. m은 margin이고, sm: 같이 디스플레이 사이즈마다 설정도 가능하다.
결론은 손이 많이 가지만 부트스트랩처럼 정형화되지 않고, 더 다양한 스타일을 줄 수 있다는 장점을 가진다는 것을 몸소 느꼈다.
하지만 Tailwind CSS가 손에 익는데 꽤 오랜 시간 걸렸다..
State Management?
react에서 가장 중요하다고 볼 수 있는 상태 관리 라이브러리에도 많은 고민을 하였다.
협력사나 많이 사용하는 redux, 예전부터 배우고 싶었던 recoil 사이의 고민이었다.
Redux
리덕스는 전역 상태관리 라이브러리이다.
리덕스 장점을 요약해 보면 데이터가 중앙화되어 있어 예상 가능하고,
데이터 흐름이 단방향이라 디버깅이 쉽다.
특히 리덕스의 생태계가 구축되어 있어 필요에 맞게 유연하게 구현 가능하다.
보안적 측면으로 볼때는 기본적으로 해킹의 위험으로 client에 데이터(상태)를 두지 않는데,
리덕스라는 미들웨어를 client 와 server 사이에 두고 데이터를 관리해주는 것이다.
또,리덕스는 reducer라는 것을 사용하는데, 쉽게 말해 사용자의 action에 맞는 상태를 반영해 주는 것이다.
하지만 리덕스는 뭔가 부족한 점이 많은지 비동기 문제 즉, side-effect 처리를 위해서는 redux-saga 같은 추가적인 api를 사용해야 했다.
Recoil
리덕스와 달리 리액트가 만든 리액트만을 위해 태어난 놈이다.
짧게 소개해서 데이터(상태)를 atom이라는 작은 데이터 조각을 만들어서
변화시에 해당 상태를 사용하는 컴포넌트들만 rerendering 해주는 것이다.
우리 프로젝트가 어느정도 사이즈일지 감이 안왔지만,
recoil의 atom을 통해 변화가 필요한 컴포넌트들만 리렌더링해주는 점에서 큰 차별점이라는 생각이 들었고,
"이거 안쓰면 바보아니야?" 라는 생각이 들어서 recoil을 선택했다.
