[3단계 - 페이먼츠] 호프(김문희) 미션 제출합니다. #152
Conversation
- tsconfig 설정 - eslint 수정
| "@typescript-eslint/eslint-plugin": "^5.26.0", | ||
| "@typescript-eslint/parser": "^5.26.0", | ||
| "chromatic": "^6.5.4", | ||
| "eslint": "^8.14.0", | ||
| "eslint-plugin-react": "^7.29.4", | ||
| "eslint-plugin-react-hooks": "^4.5.0", |
There was a problem hiding this comment.
| @@ -0,0 +1,3 @@ | |||
| { | |||
| "typescript.tsdk": "node_modules/typescript/lib" | |||
| return ( | ||
| <Styled.Container onClick={onClick}> | ||
| <Styled.EmptyCard color={CARD_COLOR_BY_NAME[cardType]}> | ||
| <Styled.EmptyCard color={CARD_TYPE[cardType]?.color ?? 'white'}> |
| const FieldSet = ({ id, description, children, errorMessage, isError }) => { | ||
| interface Props { | ||
| id: string; | ||
| children: React.ReactNode; |
There was a problem hiding this comment.
이건 PropsWithChildren사용하지 않으시나요?!
| children: React.ReactNode; | ||
| } | ||
|
|
||
| const Header = ({ children }: Props) => { |
| export const ENDPOINT = | ||
| 'https://moonheekim-payments-server.herokuapp.com/cards'; |
| <Button type="link" to="/"> | ||
| 🏠 홈으로 가기 | ||
| </Button> | ||
| <Link to="/">🏠 홈으로 가기</Link> |
| firstPassword, | ||
| secondPassword, | ||
| cardType, | ||
| }: Args): ReturnType => { |
There was a problem hiding this comment.
마치 모든 유틸을 다 보관할 것 같은 파일인데 유틸리티 같은 타이핑을 제공하시네요!
| @@ -1,41 +1,40 @@ | |||
| import { REG_EXP } from '../constant'; | |||
|
|
|||
There was a problem hiding this comment.
대부분의 코드들은 추론하는데 문제 없어보입니다 :)
| to: string; | ||
| state: unknown; |
There was a problem hiding this comment.
React Router 타이핑도 찾아보세요 :)
|
호프님 안녕하세요 미션 수행하느라 정말 고생 많으셨어요~ 그 외의 is- 로 시작하는 일시적인 상태값도 꼭 전역에서 관리될 필요가 있는 상태인자 다시 고민해 보시고 꼭 필요한 구조가 되었다면 적절한 위임이 이루어지지 않아서 불필요한 의존성이 생긴것은 아닌지 점검해 보시면 좋을 것 같아요 말씀드린 내용 다시 한 번 고민해 보시면 좋을 것 같고요 |
안녕하세요 YB님! 많이많이 부족하지만..일정상 페이먼츠 3단계 제출합니다 :DD
이전에 정말 좋은 피드백 주셔서 감사드립니다!
다만 ㅠㅠ 일정상 시간이 너무너무 부족해서 피드백을 많이 반영하지 못했고, Context API 사용관련해서도 해답을 아직 찾지 못한 점 알려드립니다. 😭
2단계에 주셨던 카드사명-컬러 상수 관련 피드백 반영하여 적용 하였습니다.
타입스크립트로 몇가지 파일만 마이그레이션 했습니다..!
먼저, 거의 3~4주 전에 작성했던 리액트 코드를 보니 정말이지 감회가 새웠습니다.. 😮
지금보니 명확하지 않게 작성한 부분이 많았기에 고칠점 투성이라서 사실 처음부터 다시 구현하고싶은 마음이 굴뚝같았어요. 😭
하지만 이러한 코드를 이겨내고 고치는 것 역시 개발자로서 갖춰야하는 중요한 역량이겠죠?!
특히나 제가 컴포넌트를 나누었던 방식이나, Context API 를 활용한 방식을 고치고싶은데,
지금 이 상태에서 고치다보면 구현된 기능을 망가뜨려서 기간을 지키지 못할 것 같아서 멈추고 최소한의 요구사항만 충족하였습니다.
하지만..페이먼츠 코드를 이렇게 방치하고 싶지는 않기에, 다음 미션이 끝나고 개인적으로 현재 페이먼츠 코드에 다음과 같은 것들을 도전해보고자 합니다. (저만의 step4?!)
1. 타입스크립트 마이그레이션 끝내기 & 타입 가드 적용
2. Context API 활용방법 다시 생각하기
4. 너무 작게 나누어진 컴포넌트 분리에 대해서 다시 생각하고 리팩토링하기
2단계로부터 개선되지 못한 코드에 대해 리뷰요청을 보내게 되어 많이 죄송스럽습니다 😭
꼭! 다음 미션이 끝나면 혼자서 묵묵히 페이먼츠로 돌아와서 위의 고민거리를 하나씩 쳐내 보려구합니다.
레벨1 미션에서도 그렇고, 페이먼츠 step1, step2에서 정말 좋은 리뷰 감사드렸습니다 🙇 🙇
YB님의 리뷰 덕분에 정말 많이 고민하고 성장 할 수 있었습니다 : ) 👍 YB님도 레벨2 남은 리뷰 화이팅하시길 바랍니다 👍 👍