입증된 마음을 돌보는 방법들을 누구나 쉽게 행동으로 옮길 수 있게 하자
코칭을 하고 회사를 다니다보니 다들 마음의 문제로 힘들어하는듯 합니다. 세상은 위험하고 힘든 곳이라고 불안감을 조성하고, 성공하고 상위 1% 부자가 되어야 한다고 부추기기도 합니다. 사람들은 늘 "더 잘 해야 하는데" 스스로 다그치고 "나만 뒤쳐졌다"고 두려워하기도 합니다.
세상에 마음을 돌보는 방법은 많습니다. 누군가는 운동을 하기도 하고, 명상을 하는 사람도 있고, 받아들이고 싶지 않은 걸 알아차리고 수용하거나, 인지 왜곡을 알아차리는 연습을 하는 사람도 있습니다.
이런 연습을 도와주는 앱도 많습니다. 운동 앱, 명상 앱, 인지치료 앱, 습관 앱, 수면 앱, 도전 앱... 연구하고 조사하고 이런 앱을 만드는 건 어려운 일이고, 회사들은 구독이나 챌린지 벌금 등을 통해서 돈을 법니다. 마음 돌보기는 자기개발의 일부가 된 듯도 싶습니다.
저 역시 이런 앱을 이용하고, 여러 책도 읽어왔는데요. 늘 아쉬웠던 점이 이것저것 많았습니다. 일단 이것저것 너무 많다는 것도 고민이었고요. 예를 들어 운동만 하더라도 근력 운동 하는 앱과 달리기만 전문으로 하는 앱, 스마트 체중계로 체지방을 측정하는 앱이 따로 있습니다. 운동을 제대로 해보고 싶은 사람에게는 이런 앱이 도움이 되겠지만, 그저 잘 살기 위해서,마음의 근력을 기르고 싶은 분들에게는 크고 복잡하지 않나 싶습니다.
마음 돌보기 카드(가제)는 보다 단순하면서도 다양한 방법들을 한 곳에 모아놓은 앱입니다. 오픈소스이고, 수익은 내지 않습니다. 개발을 학습하는 분들의 기여로 키워가려 합니다. 그래서 이곳은 새로운 기술을 배우고 실험하는 장이기도 합니다.
왜 카드인지 궁금해하시는 분이 있을지도 모르겠습니다.
저는 게임에서 예쁜 카드나 앨범, 도전과제 배지 등을 수집하는 걸 좋아합니다. 특히 돈을 내기보다는 직접 이곳저곳 모험을 하면서 하나 둘 모아가는 것을 좋아합니다.
마음을 돌보는 일도 그렇게 생각해주시면 좋겠습니다. 전에 해보지 않았던 행동들을 시도해보고, 해보았더라도 자세히 들여다보진 않았던 곳을 다시 찾아가서 카드를 모아보세요.
pnpm으로 의존성을 설치합니다
pnpm installpacakage.json의 "scripts"에 있는 명령어들을 해설하자면 다음과 같습니다.
pnpm dev # next dev 서버 시작
pnpm build # next prod 빌드
pnpm start # next prod 서버 시작
pnpm lint # eslint 로 린트
pnpm format # rome 으로 format (prettier와 비슷합니다)
pnpm preview # react-cosmos로 컴포넌트 스토리북 프리뷰
pnpm unit # vitest로 unit, component 테스트
pnpm e2e # playwright로 e2e 테스트저희가 사용하는 기술 스택을 간단히 설명하고, 선택한 이유를 정리해보려 합니다. 대부분은 안 써봐서 한 번 써봐야지인데요. 실제로 사용해보면서 여러모로 더 보강되지 않을까 싶습니다.
저도 예전에는 npm을 쓰다가, 최근에는 yarn을 주로 쓰고 있습니다. 가능하면 yarn berry로 pnp 모드를 쓰기도 했는데요. pnp 모드가 처음에는 괜찮아 보였지만, 이런저런 호환성 이슈를 겪으면서 여러모로 힘들었습니다.
마침 pnpm이 좋다는 글도 읽어봤는데요. 한 번 실험해봐서 나쁘지는 않지 않을까 싶어서. 이번 프로젝트는 pnpm 을 써보게 되었습니다.
요즘은 회사에서도 이곳저곳 typescript를 쓰는 곳이 많습니다. 저는 rescript에도 관심이 있어서 나중에 일부 도입하게 될지도 모르겠습니다만. 많은 분들의 기여를 받고 실제로 도움이 되려면 주류인 typescript를 써야 하지 않을까 싶었어요.
Next와 React 생태계는 빠르게 발전하고 있습니다. use client와 use server를 이용하는 app router는 여러모로 이상하고 유용한 혁신이었는데요. 저도 아직 pages router 밖에 써보지 않았기 때문에, 한 번 도전해보려 합니다. 특히 SSR보다는 되도록 SSG를 CSR과 결합해서 JAMStack 처럼 가보려 해요.
Jotai는 여러 상태 출처에서 온 상태들을 동기화하는데 탁월한 기량을 뽐내는 친구입니다. Client에서 유지되는 UI 상태나, 이런저런 상태를 합성한 파생 상태를 관리하는데 쓰려 합니다.
서버와 동기화되는 캐시는 이제 전문 라이브러리에게 맡겨야 하는 시대가 아닌가 싶습니다. 저는 주로 tanstack-query를 써왔습니다. react-query는 react 뿐만 아니라 vue나 svelte 등의 다른 프레임워크도 지원합니다. 무한 스크롤을 비롯해서 여러 강력한 기능도 제공하고요. SSR과도 궁합이 잘 맞습니다.
https://react-spectrum.adobe.com/react-aria/ native html element는 디자인에 이런저런 제약이 많죠. 그렇다고 div에 onClick만 달아놓을 수는 없는 노릇입니다. 접근성과 시맨틱을 지키면서, 키보드 동작 등 복잡한 일을 처리해주는 헤드리스 컴포넌트 라이브러리가 많습니다. 로직은 헤드리스 컴포넌트 라이브러리를 쓰고 나면, 이제 스타일만 잡아주면 됩니다.
저는 주로 Zagjs나 Radix를 써왔는데요. react-aria가 훌륭하다는 말도 여러 번 들어와서 이번에 시도해보려 합니다.
린트는 여러 문제를 알아서 잡아주고, 예방도 해줍니다. 일단 next 가 제공하는 strict config를 적용하고요. unicorn 같은 플러그인도 쓰고, 코드 리뷰를 하면서 생기는 문제 등을 예방해줄 플러그인이 있으면 같이 써보려 합니다.
prettier 같은 포매터는 코드를 일정한 양식에 맞춰 유지해줘서, 같이 개발할 때에는 특히 더 편리합니다. 저는 코드리뷰로 탭이나 공백을 컨벤션에 맞게 고쳐달라고 하나하나 지적하는 게 피곤하거든요!
문제는 prettier가 느리다는 것인데요. 특히 eslint와 같이 모든 파일에 prettier 체크를 하는 건 끔찍한 일입니다. 그래서 저는 개인 프로젝트에서도 회사에서도 rust로 만든 빠르고 날씬한 rome을 도입해서 쓰고 있습니다. 0.1초도 걸리지 않는 rome의 포매팅 속도는 감동적입니다.
저는 test를 좋아합니다. jest도 나름 장점이 있긴 합니다만. 저는 득보다 실이 더 크다고 생각해서 요즘은 vitest를 쓰고 있습니다. (셋업이 번거롭다는 점이나 느린 watch mode 등)
컴포넌트 테스트는 이제 업계 전체가 @testing-library로 정착되지 않았나 싶습니다. @playwright/test도 요즘은 컴포넌트 테스트 기능을 지원하고 브라우저 api 를 모킹할 필요가 없어서 편리하긴 한데요. 아무래도 속도가 느려서 테스팅 라이브러리를 주로 쓸 것 같습니다.
브라우저에서 돌아가는 테스트는 보통 e2e 테스트에 집중하고, 큰 흐름만 확인합니다. 저도 예전에는 cypress를 썼었지만, 요즘은 회사에서도 개인 프로젝트에서도 성능도 빠르고 기능도 날로 강력해지고 있는 playwright를 쓰고 있습니다.
- 백로그에서 이슈 만들기
- 스토리와 테스트 케이스 만들기
- 브레드 보드나 와이어프레임(excalidraw)
- 구현하고 테스트하기
- PR 올리고 리뷰 주고 받기