[기본 레이아웃 컴포넌트] 고니(정우시) 미션 제출합니다. #1
Conversation
There was a problem hiding this comment.
안녕하세요 고니 😊
미션하느라 고생하셨습니다! 궁금한 점 위주로 소소하게 리뷰 남겼습니다.
질문
컴포넌트 API 설계: 사용자의 입장에서 각 컴포넌트가 어떻게 사용되어야 하는지 고려하여, 필수 및 선택적인 props를 정의했습니다. 또한 TypeScript의 인터페이스를 활용하여 타입 안정성을 보장했습니다.
어떤 기준으로 필수 및 선택적인 props를 정의하셨나요?
npm 배포 외에도, 각 컴포넌트의 사용법을 볼 수 있는 페이지를 배포해주세요. 자세한 설명은 README에 작성할 예정이므로, 실제 동작되는 UI 렌더링을 보여준다고 생각해주시면 됩니다. 페이지의 양식은 각 컴포넌트에 있는 MUI docs 페이지들을 참고해주세요.
LMS에 각 컴포넌트의 사용법을 볼 수 있는 페이지를 배포하라는 요구 사항이 있었는데, 이 부분이 빠진 것 같아요!
- 단위 유연성 개선 - `margin` 프로퍼티 삭제 - 사용자가 필요한 CSS 스타일을 직접 지정할 수 있도록 수정 - 사용자가 시맨틱 태그를 사용하고 싶을 때를 대비하여 `as` 프로퍼티 추가
- 단위 유연성 개선 - 사용자가 필요한 CSS 스타일을 직접 지정할 수 있도록 수정 - 사용자가 시맨틱 태그를 사용하고 싶을 때를 대비하여 `as` 프로퍼티 추가
- 단위 유연성 개선 - 사용자가 필요한 CSS 스타일을 직접 지정할 수 있도록 수정 - 사용자가 시맨틱 태그를 사용하고 싶을 때를 대비하여 `as` 프로퍼티 추가
|
안녕하세요 애슐리~!! 애슐리의 친절한 리뷰 덕분에 많은 것을 배울 수 있었습니다. 😊 리뷰에 대한 답변은 코멘트의 댓글과 아래의 내용에 첨부하였습니다! 그럼... 확인 부탁드립니다.
컴포넌트가 제공하는 주요 기능을 고려하여 필수 props를 정의하려고 노력하였습니다. 주어진 미션에서는 사용자의 요구 사항을 보면서 제가 판단하기에 많이 사용될 props는 필수, 아닌 것은 선택으로 나누었습니다.
아핫... 넹넹 빠진 부분과 수정된 부분 첨부하였습니다.
|
| @@ -0,0 +1 @@ | |||
| export type Unit = "px" | "rem" | "%" | "vw"; | |||
There was a problem hiding this comment.
타입을 만들어주셨네요! vh, em 같은 단위들도 추가적으로 사용할 수 있을 것 같아요!
| ...style, | ||
| }; | ||
|
|
||
| return createElement(Element, { style: containerStyle }, children); |
There was a problem hiding this comment.
지금 이렇게 createElement를 사용해서 html 요소를 만들어주고 있는데, https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/ 이 블로그를 참고하면 JSX를 사용해서 사용자가 입력한 태그로 요소를 만들어 줄 수 있어요!
| const meta = { | ||
| title: "Container", | ||
| component: Container, | ||
| } satisfies Meta<typeof Container>; |
There was a problem hiding this comment.
npm 배포 README.md를 엄청 자세하게 작성해 주셔서 이해하는데 많은 도움이 되었어요! 스토리북에도 그런 설명들이 포함되어 있으면 좋을 것 같아요! 이 라이브러리를 실제로 사용할 사람들이 리듬이 보다는 스토리북을 참고해서 어떻게 사용할지를 살펴볼 것 같은데, 이때 props에 대한 설명과 이 컴포넌트가 뭘 하는지 알 수 있으면 좋을 것 같아요.
이런식으로 jsdoc 주석을 추가해주면 스토리북에서도 각 props에 대한 설명을 볼 수 있어요! 그리고 https://storybook.js.org/docs/react/writing-docs/mdx 이 링크를 참고하면 스토리북 문서도 더 풍부하게(?) 만들 수 있을 것 같아요 😊
안녕하세요 애슐리~!!
리뷰어로 만나뵙게 되어 영광입니다. 잘 부탁드립니다. 😊
🎯 1단계. 기본 레이아웃 컴포넌트 (npm 배포 링크)
공통
Container 컴포넌트
minWidth,maxWidth속성 적용Grid 컴포넌트
rows,columns,gap속성 적용Flex 컴포넌트
direction,justify,align,gap속성 적용📌 구현한 내용 설명
고민과 어려웠던 점
컴포넌트 API 설계: 각 레이아웃 컴포넌트의 API를 어떻게 디자인할지 고민이 필요했습니다. 사용자가 쉽게 이해하고 사용할 수 있는 API를 제공하기 위해 다양한 옵션을 고려하였습니다.
CSS 스타일링 관리: 컴포넌트 내부에서 CSS 스타일을 관리하고 적용하는 방법을 고민했습니다. 각 컴포넌트의 스타일을 동적으로 생성하고 적용하는 방법을 선택했습니다.
해결책과 구현
컴포넌트 API 설계: 사용자의 입장에서 각 컴포넌트가 어떻게 사용되어야 하는지 고려하여, 필수 및 선택적인 props를 정의했습니다. 또한 TypeScript의 인터페이스를 활용하여 타입 안정성을 보장했습니다.
CSS 스타일링 관리: 컴포넌트 내부에서 CSS 스타일을 동적으로 생성하고 적용하기 위해 React의 style 속성과 CSSProperties를 활용했습니다. 이를 통해 스타일을 컴포넌트와 함께 캡슐화할 수 있었습니다.
추가적인 고려 사항
문서화: README.md 파일을 작성하여 라이브러리의 사용 방법과 API를 상세하게 문서화했습니다. 또한 예제 코드와 함께 제공하여 사용자들이 라이브러리를 쉽게 사용할 수 있도록 하였습니다.
패키지 구조: npm 배포를 위해 패키지 구조를 설계하고 package.json, .npmignore, dist 디렉토리 등을 설정하여 패키지의 버전 관리와 배포를 관리했습니다.
📸 스크린샷 (선택 사항)
(필요하다면 구현한 내용을 보여주는 스크린샷 첨부)
🔗 참고 링크 (선택 사항)
아래의 링크를 참고하여 npm 배포를 진행했습니다.