230511(목)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

storybook

스토리북은 UI 컴포넌트를 개발하고 테스트하는 도구이다. UI 컴포넌트를 개발하면서 빠르게 테스트를 할 수 있고, UI 컴포넌트를 문서화할 수 있다. 또한 스토리북은 UI 컴포넌트를 개발하면서 발생하는 문제를 빠르게 찾아낼 수 있게 도와준다. 처음엔 단순히 UI를 기록하는 도구 정도로만 생각했다. 하지만 스토리북은 단순히 UI를 기록하는 것보다 UI에서의 상태를 바로 확인하고 테스팅해볼 수 있다는 점에서 정말 강력한 테스팅 도구라는 생각이 들었다. 아무래도 이번 개발 방식은 동료인 릴리가 추천해준대로, UI를 우선순위로 개발하고 추후에 props와 state에 대한 책임 분배를 하는 방식으로 했기 때문에 스토리북의 힘을 더 느낄 수 있었다. 코드만 잘 작성해두고 해당 컴포넌트에 전달한 props만 코딩해두면 해당 컴포넌트의 모든 상태를 확인하면서 개발할 수 있다.

husky

husky는 git hook을 사용할 수 있게 도와주는 도구이다. git hook은 git의 특정 이벤트가 발생했을 때, 특정 스크립트를 실행할 수 있게 해준다. 다만 이번 우리의 프로젝트에서는 husky를 적용하기 애매한 이슈가 생겼다. 먼저 husky는 git hook을 사용할 수 있게 해주는 라이브러리인 만큼, .git이 위치한 폴더에서만 사용할 수 있다. 하지만 우리의 프로젝트는 fe, be, ios의 3개의 폴더가 하나의 깃헙 레포지토리에서 관리되고 있었기에 husky를 적용하기에는 애매한 상황이었다. 그래서 저장 시 마다 prettier 및 lint를 적용하는 방향으로 진행했다. 추후에 개인 프로젝트 때, husky를 사용해볼 예정이다.

tailwindCSS와 storybook

tailwindCSS와 storybook을 위한 설정을 해야하는 걸 처음 알았다. 이걸 알게된 계기는 storybook을 통해 ui 테스팅을 진행하던 중 발생했다. storybook을 통해 보고 있는 ui에는 코드에 작성해놓은 tailwindCSS 스타일링이 입혀지지 않고 있었다. storybook - tailwindCSS 연동을 참고하면 된다.

📝 요약 및 하루 간단 회고

이번 프로젝트에서 배우는 게 참 많다. 다양한 도구들도 있겠지만, 사람들과 함께 개발하고 일하는 방법을 많이 배우고 있다. 또, 협업을 하면서 자연스럽게 동료의 코드를 읽다보니까 사람마다 정말 다르구나하면서 느끼는 또다른 재미도 있다.

오늘의 잘한 점

• 목표했던 내용들을 거의 다 달성한 점
• 동료와 잘 소통한 점

오늘의 아쉬운 점

• 없음!

참고

• storybook - tailwindCSS 연동