강원대 FE_김정윤_1주차 과제 Step2, 3 #80
Conversation
There was a problem hiding this comment.
안녕하세요 정윤님 만나서 반갑습니다~~ 첫 번째 리뷰네요 ㅎㅎ
step을 나눠서 올려주신걸 못 보고 이전 step PR에도 리뷰를 남겼으니 같이 확인해주시면 좋을거 같아요 PR본문에 남겨주셨던 질문들은 여기서 같이 답변 드리도록 하겠습니다
폴더 구조
폴더 구조는 어느 정도 규모인지, 어떤 서비스인지, 몇 명이 협업하는지 등에 따라 달라질 수 있는 부분이라 한 가지 방법으로 정해진 부분은 없습니다. 보통은 작업의 편의를 위해 사용되는 곳과 가까운 곳에서 선언하는 방법을 기본으로 하는거 같기는 하네요 ㅎㅎ
현재의 구조를 보면 components 안에 모든 파일들이 flat하게 존재하는데요. 각각 역할에 따라 폴더를 묶어주셔도 좋을거 같습니다
ex)
- Button (folder)
- - Button.tsx
- - Button.css
- - Button.stories.tsx
패키지 설치와 환경 설정
프로젝트 세팅이 처음이었군요 ㅎㅎ 고생 많으셨습니다 👍 👍 👍 이번에 고생하신만큼 다음에 프로젝트를 새로 세팅 할 일이 있을 때는 훨씬 수월하게 진행하실 수 있을거에요
기본적으로 누군가가 정윤님이 세팅해 둔 프로젝트를 로컬에서 실행하기 위해서 패키지를 설치할 때 lock 파일을 토대로 설치를 진행하게 되는데요. 지금은 package.json과 package-lock.json 파일만 잘 관리해주셔도 충분하다고 생각합니다 ㅎㅎ
ESLint와 Prettier 설정
저는 개인적으로 import/order 설정과 웹 접근성과 관련된 설정을 추가해보시는걸 추천드리고 싶네요 ㅎㅎ
현재 하나의 컴포넌트에 대한 파일 3가지를 모두 components 폴더에 모아놓은 상태인데, 폴더 구성에 더 좋은 방법이 있는지 궁금합니다.
요거는 위에 답변 참고 부탁드리겠습니다!
storybook 설치 후 실행하는 과정에서 컴파일 오류가 났고, eslint 룰 때문에 발생한 것으로 파악하여 storybook에서 eslint를 무시하도록 .storybook/main.ts에 설정해둔 상태입니다. 이를 이대로 유지해도 될까요? 다른 방법을 찾아보는 게 좋을까요?
일시적으로는 문제를 해결할 수 있으나 장기적으로는 좋은 방법으로 보이지는 않습니다. eslint룰을 무시하는 방법으로도 main.ts에서 설정을 해주는게 아니라 eslintrc 파일에서 exclude와 같은 설정을 통해서 해주시면 좋을거 같아요!
첫번째 과제 진행하느라 고생 많으셨습니다 정윤님~~ 리뷰와 코멘트 확인하시고 다시 리뷰요청 부탁드립니다! 👍 👍 👍
.eslintrc.cjs
Outdated
| @@ -0,0 +1,17 @@ | |||
| module.exports = { | |||
| extends: ['airbnb', 'plugin:prettier/recommended', 'plugin:storybook/recommended'], | |||
There was a problem hiding this comment.
eslint-plugin-prettier github README를 보면 아래와 같은 내용이 있는데요
사용하시기 전에 이런 README를 한번씩 읽어보셔도 좋을거 같네요 ㅎㅎ
src/components/Button.css
Outdated
| background-color: #fee500; | ||
| color: #000000; |
There was a problem hiding this comment.
이런 색상들이나 font-size, z-index 등은 한군데에 모아서 관리하면 애플리케이션 전체에 일관된 스타일을 적용하기 용이하니 참고하시면 좋겠네요 ㅎㅎ
src/components/Button.tsx
Outdated
| theme?: 'kakao' | 'default'; | ||
| size?: 'small' | 'large' | 'responsive'; |
There was a problem hiding this comment.
optional한 prop들을 사용할 때는 default value를 활용해보셔도 좋을거 같아요
src/components/Button.tsx
Outdated
| export interface ButtonProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement> { |
src/components/Image.tsx
Outdated
| } | ||
|
|
||
| const Image: React.FC<ImageProps> = ({ radius, ratio, src, ...rest }) => { | ||
| let imageClassName = 'image'; |
There was a problem hiding this comment.
let이 등장하면 let이 존재하는 해당 코드 블럭을 읽는 동안 값이 어떻게 변하는지 계속 신경써야 하기 때문에 읽기 좋지 않은 코드가 되는데요. let을 사용하지 않는 방법을 고민해보셔도 좋을거 같습니다
src/components/Button.tsx
Outdated
| } | ||
|
|
||
| const Button: React.FC<ButtonProps> = ({ children, theme, size, ...rest }) => { | ||
| let buttonClassName = `button ${theme} ${size}`; |
src/components/Image.tsx
Outdated
| radius?: number | 'circle'; | ||
| } | ||
|
|
||
| const Image: React.FC<ImageProps> = ({ radius, ratio, src, ...rest }) => { |
src/pages/Page.tsx
Outdated
안녕하세요. Step2, 3 과제 제출합니다.
storybook 설치 과정에서 eslint의 영향으로 컴파일 에러가 발생하여, 이를 해결하는데 오랜 시간을 보내버려서 우선 미완성 상태로 제출하게 되었습니다.
현재 컴포넌트는 Button, Image, UnderlineTextField까지만 구현한 상태이고, 아직 구현하지 못한 GoosItem 컴포넌트와 Grid, Container 컴포넌트는 꼭 주말동안 구현해보려고 합니다. 이미 구현한 것들도 수정해야할 것들이 많이 남아있다고 생각되어, 꼭 공식 문서로 공부한 뒤 수정해오겠습니다.
궁금한 점
스텝3 과제는 README.md 파일에 작성하였습니다.