코로나 😷

사실 3월은 시간이 엄청 빠른듯하면서 뭘 했지 싶기도 했다. 일단 제일 큰 이유가 코로나이다. 아빠가 코로나(오미크론) 확진이 먼저 되면서, 가족 전체가 결국 3월 초에 코로나 확진이 되었다. 엄청 심하게 아팠던거까지는 아니긴 한데, 그래도 한 3일정도는 몸살, 인후통 등 독감 수준으로 꽤 아파서 고생을 좀 했고, 덕분에 일주일정도는 약간 통으로 날아가버렸다. 그래도 코로나 덕분에(?) 재택 업무도 일주일에 2번정도 가능해졌다. 사실 나는 집이 멀어서 재택을 하는 케이스이긴 한데, 얘기는 2월부터 나왔지만 어쩌다보니 미뤄지다가 코로나 때문에 어쩔 수 없이 재택하는 상황이 생겨버리면서 얘기가 다시 나왔기 때문이다. 쨋든 그래서 3월부터는 일주일에 1~2번정도 재택을 하기 시작했는데, 확실히 왕복 출퇴근 시간이었던 3시간 가량을 아끼게 되었고 그만큼의 체력도 아끼니까 좋았다. 그리고 업무 환경도 회사 맥북보다 내 맥미니 성능이 더 좋고, 모니터도 더 크고, 의자도 더 좋고.. 음 사실 환경은 진짜 집이 훨씬 낫지…ㅎ 그래도 소통이 필요한 업무가 많을 때는 회사 가는게 더 효율적이기도 하고, 아직 부족한 점이 많아서 회사에 사람이 많은 날에는 회사로 출근하는게 더 좋기도 하다. 뭐 쨋든 둘 다 장단점이 있는데, 아마 일이 훨씬 더 익숙해지고 나면 재택이 훨씬 좋아질꺼 같기도 하고..? 🤔

Next.js + React18을 위한 캐럿마켓 클론코딩

회사에서 Next.js를 이용하다보니까 2월부터 계속 들어야지 했던 강의인데, 생각보다 진도가 잘 안나간다 ㅜㅜ 회사를 다니면서 강의를 듣는 것도 한 몫하지만, 내가 당장 궁금한 내용은 프론트에서 사용하는 Next.js 파트 부분인데 이 강의는 풀스택 강의이다 보니까 Prisma, PlanetScale, Twilio, Sendgrid 등등 같이 배우다 보니까 더 느리게 느껴지는 것 같기도 하다. 물론 내가 지금 당장 필요한 지식이 아니라고 생각할지라도 결국은 다 이어져있어서 도움이 안되는 것은 전혀 아닐 뿐더러 이렇게 사용해보지 않으면 처음 사용하는 스택의 경우 사용할 일이 흔치 않기 때문에 여러 스택을 강의를 통해 미리 경험해보는 것은 좋다고 생각한다. 이렇게 이것 저것 자꾸 써봐야 비교가 되고, 그래야 나중에 실무에도 써볼 수 있으니까. 쩃든 그러니까 결론은 핑계대지 말고 열심히 듣자 이거지… 화이팅ㅜㅜ

리액트 상태관리를 위한, Jotai

리액트에서 상태관리를 위해 라이브러리는 꽤 많이 있다. 제일 대표적인게 리덕스이고, 예전에 프로젝트를 할 때 사용했다. 리덕스는 대표적인만큼 자료가 많아서 선택하게 되었지만, 사실 큰 규모의 프로젝트에서 체계적인 상태관리를 할 때 더 적합한 상태관리 도구로 그때 선택할만한 것은 아니였었다. 오히려 Recoil을 선택하는게 제일 적합했을지도 모른다. 리덕스보다 단순하지만 필요한 기능은 다 있으니까. 그리고 지금 회사에서도 기존에는 Recoil을 사용하고 있었지만, 이번에 리뉴얼을 들어가면서는 Jotai로 바꾸게 되었다. 둘 다 atom을 이용하는 상태관리로 같은 컨셉을 가지고 있지만, Recoil은 현재 업데이트 속도가 느린 반면 Jotai는 빠르게 성장하고 있다는 이유에서 바꾸게 되었다. 물론 Jotai에서 제공하는 유틸도 꽤 괜찮기도 하고 말이다. 쨋든 Jotai를 사용하게 되었는데, 자료가 많지는 않아서 오랜만에 공식문서를 열심히 쳐다보고 있는 중이다. 지금은 기본적인 수준에서 쓰고 있지만, 그래도 확실히 리덕스를 사용할때보다는 코드가 적고 단순해서 쓰기 좋아서 만족중이다!

TailwindCSS

TailwindCSS는 CSS 프레임워크로 인라인 스타일을 사용해서 빠르고 쉽게 css를 작성할 수 있게 해준다. 예전에도 한 번 써본 적 있었는데, 이번에 회사에서 본격적으로 사용하기 시작하면서 제대로 공부해보기 시작했다. 처음에는 Tailwind 문법이라고 해야하나? 사용을 위해 필요한 클래스 이름들을 하나씩 다 찾아봐야 해서 시간이 좀 걸렸는데, 지금은 많이 익숙해져서 기존에 사용하던 방식보다 훨씬 빠르게 스타일 작업을 할 수 있게 되었다!! 그리고 생각보다 편리한 기능도 은근 많아서 유용할꺼 같다. 예를 들어서, 요소 사이마다 간격을 줄 수 있는 space-x-2도 있고, ring-2 ring-offset-2 등을 이용하면 버튼의 테두리를 쉽게 만들 수도 있다.

아, 근데 기존에 사용하던 프로젝트에서는 Tailwind를 쓰지 않다가 새로운 프로젝트에서부터 Tailwind를를 씀으로써 Tailwind의 기본 설정이 기존 프로젝트에 영향을 미치던 이슈도 있었따…ㅎ Tailwind에는 기본적으로 reset css처럼 css를 초기화해주는 옵션이 켜져있는데, 그걸 생각못해서 기존 프로젝트의 css를 초기화해준 값이 적용되어버렸던 것이었다. 해당 옵션을 끄고, 새로운 프로젝트에만 css 초기화를 적용해줌으로써 쉽게 해결하긴 했는데 처음에는 갑자기 글로벌하게 css가 적용되는게 있어서 뭐지 싶었닼ㅋㅋㅋ ㅜㅜ 새로운거 쓸 때마다 우당탕탕이랄까