리액트2 모달 컴포넌트 설계하기 지난번에 설정했던 컴포넌트 개발 규칙에 맞춰 모달 컴포넌트를 설계해 보려고 한다. 수립한 Action item은 다음과 같다. [Action Item] 1. 컴포넌트를 설계할 때 이 컴포넌트가 어떻게 사용되어야 하는지 먼저 정의한다. 2. UI 요소와 데이터 기반 요소를 정리하고 분리하여 각각의 컴포넌트로 구성한다. 3. 컴포넌트의 의도를 정의하고 이를 검증할 수 있는 테스트 케이스를 작성한다. 4. 테스트 케이스를 통과할 수 있는 컴포넌트를 작성한다. 5. 컴포넌트를 리팩터링 하며 정리한다. 한 항목씩 진행해보자! [어떻게 사용되어야 하는가?] 먼저 모달 컴포넌트는 스크린 위에 레이아웃을 씌운 것처럼 보여야 한다. 구현 방식에는 여러 가지가 있는데 css를 이용할 수도 있고, react DOM 트리에 .. 2022. 5. 17. 컴포넌트 개발 규칙 설정하기 이번 글에서는 현재 진행하고 있는 사이드 프로젝트의 컴포넌트 개발 규칙을 설정해 보고자 한다. 프로젝트의 초반 단계에서 어떤 규칙을 가져갈 것인지 결정하는 것은 무척 중요하다. 지난 개발 경험에서 느낀 문제점들을 개선할 수 있도록 고민한 규칙들을 정리해보고자 한다. [문제점] - 컴포넌트는 사용자 UI와 직접적으로 맞닿아있는 부분이고 변경사항도 잦다. 그때그때 필요할 때마다 덧붙이듯 개발을 진행한 결과, 일관성이 없고 코드를 모두 읽어봐야 파악할 수 있게 되었다. 일관된 규칙이 없기 때문에 확장성도 매우 떨어진다. - 코드를 수정할 때, 기존 코드가 제대로 작동하는지를 보장할 수 없다. [개선 방향] - 어떻게하면 확장성을 향상할 수 있을까? 이러한 규칙을 정하면 이를 지키면서 일관성도 얻을 수 있다. .. 2022. 4. 24. 이전 1 다음