• 토스 서술형 문제

• 참고 자료

• 컴포넌트 개선(확장성)

  • • atom부터 시작(개선할 컴포넌트 정하고, 부족했던 부분 추가로 필요한 부분을 정리 → 담당자를 정해서 개발 → 사용하던 부분에서 새로운 컴포넌트로 이관 작업)

컴포넌트 리팩토링 규칙

네이밍 규칙

components/refactor/atoms/button

1. 기존 컴포넌트와 별개 파일로 만들기 → 기존 기능에 영향을 주지 않기 위함 → 제작 후 한 부분에서만 새로운 컴포넌트로 바꿔서 테스트하기 → 완료되면 다른 페이지들은 담당자들이 컴포넌트 확인해서 바꾸기
2. 스토리북 만들기(사용방법 문서화) https://storybook-design-system.netlify.app/?path=/docs/button--basic
3. 많이 사용되는 컴포넌트부터 리팩토링 시작하기
4. 인라인 스타일의 사용을 지양 → style 파일을 분리해서 사용할 것

컴포넌트 리팩토링 체크리스트

• [ ] 한 컴포넌트에 코드량이 많지 않은가?
• [ ] 잘 읽히는가? (다른 사람들이 사용하기에 무리가 없는가?)
• [ ] 쓸데없는, 불필요한 로직이 있는가?
• [ ] js 내장 함수로 대체할 수 있는 로직이 있는가?
• [ ] 중복코드를 줄일 수 있는 방법이 있는가?

리팩토링 필요 컴포넌트