[테크니컬 라이팅] 올리(이예진) 미션 완성본 제출합니다. #579
Conversation
1. 부자연스러운 표현 수정 2. 문장 사이를 더 매끄럽게 연결 3. 특정 용어를 사용하는 방식 통일 4. 반복되는 표현 제거
There was a problem hiding this comment.
안녕하세요 올리!
올리의 글을 읽으며, 올리가 팀 프로젝트를 진행하며 공통 컴포넌트에 대해 깊게 고민하고 생각했구나를 느낄 수 있었어요. 올리의 글을 읽으며 좋았던 점과 아쉬운 점에 대해 코멘트를 남겨봤어요. 올리의 글쓰기에 도움이 되었으면 좋겠네요. 😄🎀
좋았던 점
대상 독자를 짚고 넘어간다는 점이 좋았어요. 또한 단순히 정보를 어디서 찾아와서 그대로 작성하는 것이 아닌, 이를 바탕으로 올리가 고민하고 생각해서 올리의 머릿속에서 나온 글이라고 느껴져서 좋았어요.
아쉬웠던 점
주제와 구조의 일관성이 아쉬웠어요.
재사용 가능한 공통 컴포넌트 만들기가 주제이지만 글 도입부에 공통 컴포넌트를 만드는 법을 안내한다고 적었음에도 컴포넌트가 무엇인지가 헤더1로 되어있고, 글의 제목이 안보여서 헤더만으로 이 글의 주제가 공통 컴포넌라는 것을 일관적으로 파악하는데 살짝 헷갈렸어요.
# 컴포넌트는 무엇일까?
# 공통 컴포넌트란?
## 특화된 컴포넌트
## 공통 컴포넌트
# 공통 컴포넌트에 타입 적용하기
# 공통 CheckBox 컴포넌트 만들기
만약 저라면, 공통 컴포넌트 정의-공통 컴포넌트의 props 타입 자유도 - 공통 컴포넌트 만들기 순으로 글을 작성할 것 같아요.
공통 컴포넌트에 높은 자유도를 주었을 때의 문제점에 대한 논의 부족
공통 컴포넌트를 만드는 법이 주제인데, 공통 컴포넌트에 높은 자유도를 주었을 때의 문제점이 중요한 포인트가 될 수 있다고 생각해요. 제품 설명 시, 해당 제품읠 잘못된 사용법에 대해 설명하는 것에 부록의 어느 정도를 할애하는 것 처럼이요. 공통 컴포넌트에 높은 자유도를 주었을 때의 문제점을 간단하게라도 소개하고 더 자세한 것은 출처를 남기면 어땠을까 싶었어요.
Checkbox 공통 컴포넌트의 재사용성을 보여주는 사례 아쉬움
이왕 공통 컴포넌트인 Checkbox를 만들었으니, 실제로 여러 것으로 재사용하면서 해당 공통 컴포넌트의 재사용성을 보여줬으면 올리가 말하는 재사용성을 잘 들어낼 수 있지 않을까하는 아쉬움이 있었어요. 사례에서 나온 Checkbox는 리뷰미 프로젝트에서만 사용하는 컴포넌트라, 독자들은 해당 컴포넌트의 재사용성을 상상하기 힘들 수 도 있을 것 같네요.
There was a problem hiding this comment.
To. 올리🥰
재사용 가능한 공통 컴포넌트를 만드는 게 익숙하지 않거나 막막하게 느껴지는 분들께 정말 큰 도움이 될 만한 글인 것 같아요. 전반적인 가이드?를 제공해주는 느낌이네요😊 그리고 내용을 쉽게 잘 풀어주셔서 막힘없이 술술 읽을 수 있었어요!
개인적으로 아쉬웠던 부분을 뽑자면 마무리 부분이에요. 마지막에 여러 개의 체크박스 이미지 예시와 함께, 재사용 가능한 공통 컴포넌트로 체크박스를 만드는 코드 샘플을 포함했다면 더 좋았을 것 같다는 생각이 들었어요. 이렇게 하면 공통 컴포넌트를 통해 코드 중복을 줄이는 이점이 더 명확하게 와닿을 수 있을 것 같아요! 그리고 이미지를 적극 활용하면 이해하는 데 훨씬 수월할 것 같아요!
피드백은 반영하지 않아도 괜찮으니 올리가 보고 판단해주세요! 수고했어요~ 올리😉
| 이 글은 React를 사용하는 프론트엔드 개발 초보를 위해 React와 TypeScript를 활용한 공통 컴포넌트를 만드는 법을 안내합니다. | ||
| 여기서 다루는 내용은 기초적인 수준으로, 단순히 '재사용 가능한 공통 컴포넌트'를 만드는 방법을 다룹니다. 그러므로 React를 써 보긴 했지만 공통 컴포넌트를 어떻게 만들어야 할지 막막한 분들에게 추천드립니다. |
| 또한 `rest props`와 결합해 코드를 더 간편하게 작성할 수도 있습니다. | ||
| ```tsx | ||
| const Input = ({ ...rest }: React.InputHTMLAttributes<HTMLInputElement>) => { | ||
| return <input {...rest} />; | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
prop으로 rest를 넣었을 때, 코드가 간편해진다는 장점이 있어요. 다만 너무 편리하다고 남용하기보다는 상황에 맞게 사용하는 게 중요할 것 같아요. 몇 가지 단점도 가볍게 함께 언급해주면 좋을 것 같아요😊
| 이렇게 코드를 작성하면 위와 같은 에러를 방지할 수 있습니다. | ||
| 두 방법은 취향 차이라고 생각하는데, 이 글에서는 첫 번째 방법을 사용하도록 하겠습니다. |
There was a problem hiding this comment.
직접적으로 label을 명시하는 방법과 간접적으로 명시하는 방법은 단순히 취향 차이로 볼 수 있지만, 찾아보니 브라우저에 따라 일부 방법은 지원되지 않는 경우도 있다고 해요!😮
확인해 보면 좋을 것 같아요!
문장들을 더 가독성 좋게 수정했습니다.