Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[1단계 - 페이먼츠] 병민(윤병인) 미션 제출합니다. #87

Merged
merged 78 commits into from
May 6, 2022
Merged

[1단계 - 페이먼츠] 병민(윤병인) 미션 제출합니다. #87

merged 78 commits into from
May 6, 2022

Conversation

airman5573
Copy link

@airman5573 airman5573 commented Apr 28, 2022 •
edited
Loading

데모페이지

안녕하세요 노스님! 이번 리뷰 잘 부탁드립니다 :D

Tech Stack

  • CRA
  • TS
  • Emotion, SCSS

어려웠던점 및 질문

  • 저희는 카드 번호입력 필드를 4개가 아닌 하나로 만들었습니다. 처음에는 이 방법이 더 편할거라 생각했지만 중간에서 입력하고 지우는 경우와 4글자 마다 하이픈을 넣어주는게 어려웠습니다. 그래도 다행히 input의 selectionStart속성으로 커서의 위치를 알 수 있었고, input의 setSelectionRange로 커서의 위치를 컨트롤 할 수 있었습니다.
  • CRA + Typesctip + Emotion + Storybook 이렇게 같이 쓸때 Emotion의 css props를 쓰기 어려웠습니다. @emotion/babel-preset-css-prop 이 바벨 플러그인을 사용 해야하는데 babel.config.js파일이 안보여서 애를 먹었습니다. 어찌저찌 craco를 사용해서 해당 플러그인을 추가해 주었으나 Storybook은 craco의 craco.config.js파일을 자동으로 인식해주지 않아서 결국 css props는 후반에 포기했습니다. 그런데 생각보다 styled.div이렇게 쓰는것도 괜찮았습니다. 2단계에서 이 부분을 조금 더 공부해 보겠습니다!
  • 저희는 Context API를 사용했는데, Storybook에서 Context API를 사용하는 컴포넌트를 표출하는게 어려웠습니다. 열심히 검색하서 decorators에 설정하는 방법을 찾았고 문제를 해결했습니다. 하지만 아직 다른 기본 옵션들에 대해서 모르는 부분이 많습니다. 이 부분도 2단계때 공부하겠습니다.
  • Atomic Design을 따라가는것이 어려웠습니다. 특히 Presentational Component와 Container Component둘다 Atomic인지 아니면 Container안에 Presentational이 있으니까 molecular인지 판단이 잘 서지 않았습니다. 우선 atoms에 폴더를 만들어서 둘다 같이 넣어 줬는데, 리뷰어님이 보시기에 이렇게 하는게 좋은 분리인지 알려주시면 감사하겠습니다!
  • Emotion을 오래전에 써보고 이번에 호기심에 다시 써보았습니다. JS안에서 CSS를 작성했기 때문에 둘이 같이 붙어다녀서 관리상에는 좋았으나, CSS코드를 작성하는건 조금 불편했습니다. 자동완성은 되지만 backgroundColor 이런식으로 작성해야 하고, 또 자식을 스타일링할때는 '& > .child' 이런식으로 작은 따움표를 매번 써주고 객체형태로 할당해야 하는것도 불편했습니다. 그래도 이름 충돌날 걱정이 없는 부분은 좋았습니다. 혹시 현업에서는 하나의 프로젝트에 SCSS와 Emotion(혹은 styled-component)를 같이 쓰나요? 저는 큰 레이아웃 잡을때는 한눈에 코드를 볼 수있어서 SCSS도 같이 쓰면 좋을것 같다는 생각이 들었습니다.
  • 저희는 이번에 비밀번호 입력 필드에만 Autofocus를 설정해 주었는데, 혹시 현업에서 input이 많은 페이지를 개발할때 autofocus를 많이 지원해 주시나요? 혹 자주 쓰시는 라이브러리가 있다면 추천 부탁드립니다!

airman5573 added 30 commits April 26, 2022 18:22
@airman5573
chore: initial setting완료
13b0692 
1. cra with typescript
2. emotion
3. commitlint 추가
@airman5573
fix(emotion): jsx pragma와 CRA의 충돌 문제를 해결한다
2cd7296 
babel에 추가 설정 없이 emotion의 기능을 사용하려면
파일에 주석을 넣어줘야 하는데, 매 파일마다 이렇게 할 수 없어서
craco를 사용해 CRA의 바벨 설정을
override했다.
@airman5573
chore(storybook): storybook세팅을 한다
8c1ad38
@airman5573
wip: backup
aac168d
@airman5573
feat(component): 신용카드 번호를 입력화는 필드를 추가한다
d3bff97
@airman5573
feat(component): 만료일자를 입력하는 필드를 추가한다
a9a065d
@airman5573
feat(component): 카드 소유자의 이름을 입력하는 필드를 추가한다
b45d53f
@airman5573
feat(component): 보안코드를 입력하는 필드를 추가한다
30dad6f
@airman5573
refactor(ui): 비밀정보 입력시 표시될 대체문자를 변경한다
3df7ead
@airman5573
refactor(file-structure): 디렉토리를 복수형으로 변경한다
7bf4744
@airman5573
feat(component): 비밀번호 입력 필드에 autoFocus기능을 추가한다
1dc04c9 
첫번째 필드를 입력하면 자동으로 두번째 입력 필드에 focus가 가도록 설정했다.
@airman5573
feat(context): context API를 사용해 전역으로 상태를 관리한다
273a150
@airman5573
refactor(utils): util함수를 파일로 분리한다
b0bef8b
@airman5573
feat(component): 카드 컴포넌트를 추가한다
25208d4
@airman5573
refactor(utils): util함수를 개선한다
05c1fde
@airman5573
refactor(component): 카드 번호를 입력하는 컴포넌트에 불필요한 코드를 삭제하고 바뀐 유틸함수를 사용한다
a73a8b1
@airman5573
refactor(component): presentaional component와 controlled component로 분리한다
f374d71
@airman5573
feat(component): confirm 버튼을 추가한다
186bdf5
@airman5573
refactor(cleanup): 불필요한 console을 삭제한다
c123368
@airman5573
fix(component): 유효기간을 저장할때 순수하게 숫자만 저장하고 보여줄때 변환해서 보여준다
5790a0c
@airman5573
feat(component): navigation을 추가한다
2e04610
@airman5573
feat(utils): util함수를 추가한다
c9028c7
@airman5573
feat(ui): app에 컴포넌트들을 보여준다
a2366af
@airman5573
refactor(component): presentational component와 container component로 분리한다
b2907df
@airman5573
refactor(emotion): styled component로 변환한다
3c3cae6
@airman5573
refactor(component): 카드 비밀번호 입력하는 필드들을 묶은 component를 생성한다
e3337ec
@airman5573
test(storybook): story를 추가한다
ec39615
@airman5573
fix(component): 카드에 표현될 유효기간의 format을 수정한다
b37c160
@airman5573
fix(logic): 카드번호 입력시 16글자를 초과하지 않도록 수정한다
b0b97a5
@airman5573
fix(card-number): 카드 번호 입력시 불편했던 문제들 해결한다
739e86c
airman5573 added 26 commits May 1, 2022 03:59
@airman5573
refactor(ui): 카드 만료일 입력을 개선한다
b196eda
@airman5573
refactor(component): 테스트에 사용했던 컴포넌트를 삭제한다
a19f456
@airman5573
wip: wip
7b0e48d
@airman5573
chore: ts-loader대신 babel로 typescript를 해석하고 사용한다
c572018 
babel의 다양한 플러그인을 사용하기 위함이다
@airman5573
chore(git): dist폴더는 tracking하지 않는다
3f623c8 
CRA를 지우면서 build대신 dist를 사용하기로 했기 때문에 바꿔줘야한다
@airman5573
chore(emotion): css prop으로 스타일을 추가 할 수 있도록 설정한다
b72f635
@airman5573
refactor(lint): ''도 false지만 3항연산자를 쓰고 있으니 boolean으로 처리한다
1bc3f22
@airman5573
refactor(lint): 전반적으로 lint가 제시하는 스타일로 수정한다
ea76029
@airman5573
fix(ui): 비밀번호 입력 필드를 가로로 정렬한다
bb65511
@airman5573
chore(types): react, react-dom type을 추가한다
ff4c6d0
@airman5573
refactor(ui): 카드 입력 필드에 우선적으로 포커스를 준다
531cb6b
@airman5573
refactor(readability): 가독성을 위해 스타일을 뒤로 뺀다
23c8732
@airman5573
chore(lint): 변수 선언 전에 해당 변수를 사용하면 안되는 룰을 수정한다
ae43b69 
styled component를 아래로 내리고 main component에서 사용할때 lint에러가 나는걸 방지한다
@airman5573
refactor(cleanup): 사용하지 않는 코드를 삭제한다
ef19167
@airman5573
refactor(logic): 이름 입력시 처리하는 로직을 단순화한다
d9a2980 
정규식을 사용하니 처리가 단순해졌다
@airman5573
refactor(readability): 만료일 입력 로직을 조금 분리한다
de6e959
@airman5573
refactor(cleanup): 컴포넌트 내부에 함수를 정의하지 않고 유틸함수를 사용한다
fe67ad7
@airman5573
refactor(readability): 카드번호 입력 로직을 분리한다
497fb82
@airman5573
refactor(readability): 다른 input컴포넌트와 일관성 있게 함수를 배치한다
d093c91
@airman5573
refactor: img src에 base64를 직접 넣어주지 않고 svg를 import해서 사용한다
f3476fd
@airman5573
fix: selectionStart가 0인 경우를 고려하여 null체크를 한다
8dfb4aa
@airman5573
refactor(cleanup): console을 삭제한다
a9737ab
@airman5573
refactor(semantic): div대신 form태그를 사용한다
896a8b2
@airman5573
chore(git): build폴더를 tracking하지 않는다
b1daba4
@airman5573
refactor(directory): directory구조를 변경한다
aa048cb
@airman5573
fix(ui): cvc넘버를 안보이게 한다
c7ed7b8
@airman5573
Copy link
Author

airman5573 commented May 3, 2022 •
edited
Loading

안녕하세요 노스! 피드백 너무 감사드립니다.

  • CVC 코드 안보이게 만들기 : c7ed7b8
  • directory 구조를 기능 중심으로 변경 : aa048cb
  • 카드번호, 만료일 중간부터 수정시 제대로 반영 안되는 문제 해결 : 962b5e4 / b196eda
  • CRA없이 React + TS + Webpack + Babel + Stroybook + Emotion + SCSS 설정했습니다!

첨부해주신 링크 잘 읽었습니다. 캐시 메모리에 빗대어 어떤 방식으로 디렉토리 구조를 짜야하는지 설명하는 방식이 독특하고 또 글에서 말하는 취지에 많이 공감했습니다. 어떤 기능을 수정하기 위해서 접근하는 디렉토리에는 그 기능과 관련된 컴포넌트들을 같이 놓으면 우리 뇌가 덜 피곤해진다는걸 알게되었고 실제로 그렇게 될것 같습니다. 좋은글 공유해주셔서 감사합니다 :D

@airman5573
refactor(naming): fieldset내부 컴포넌트의 이름을 변경한다
9146df0 
Head -> FieldsetHead , Body -> FieldsetContent
woowapark
woowapark approved these changes May 6, 2022
View reviewed changes
Copy link

@woowapark woowapark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

병민 안녕하세요~! 마지막까지 꼼꼼히 피드백 반영 잘해주셨네요! 👏
추가 피드백이 있으시거나(cc. @hyoungnam) 추가로 반영하고 싶으신 부분이 있으시다면
2단계에서 이어서 의견 나눠주셔요 🙂
2단계 진행을 위해 요 PR은 머지하도록 할게요! 고생 많으셨습니다~

@woowapark woowapark merged commit 77b3cbd into woowacourse:airman5573 May 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hyoungnam hyoungnam hyoungnam requested changes

@woowapark woowapark woowapark approved these changes

Assignees

@hyoungnam hyoungnam

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@airman5573 @hyoungnam @woowapark