[Team23] 컴포넌트 트리 구조 추가 및 수정, 범용 Button, Label, Card 생성, Header, CarouselSection 생성

[deprecated-hongbiii]

Jenny

1. 오늘 한 내용
   • Header 부분 전반적인 구조 및 styled-components 적용
   • mouseLeave, mouseEnter 적용
2. 궁금한 내용
   • <ThemeProvider theme={theme}><ThemeProvider/> 이런식으로 컴포넌트를 감싸고 color: ${(props) => props.theme.colors.gray};를 적용하나, 윗단에 import theme from "파일경로" 해서 color: ${theme.colors.gray} 이렇게 주나 둘 다 작동해서 상관없어 보이는데 그게 맞는걸까용?

Adela

1. 오늘 한 내용
   • 범용 Button, Label 컴포넌트 생성
   • styled-component 적용
2. 궁금한 내용
   • 현재 Label.jsx, Button.jsx에서 variable처럼 사용하는 객체를 가지고 있는데, contant.js 에다가 저장하는게 좀 더 자연스러울까요?
   • fetch 받아오는 데이터는 각 탭 혹은 버튼을 누를 때마다 그에 해당하는 데이터를 요청하는 것이 더 나은가요? 아니면 한꺼번에 받아와놓고 필요한 부분만 조건부로 렌더링 하는 방식으로 구현하는 것이 더 좋을까요?

Autumn

1. 오늘 한 내용
   • Card, Price 컴포넌트 생성
2. 궁금한 내용
   • Styled component와 그냥 tag에 className=""를 혼용해서 써도 괜찮을지, 한 가지로 통일하는 게 좋은지 궁금합니다. 지난 프로젝트에서는 모든 태그를 다 Styled component로 썼었는데, 개인적인 느낌으로는 컴포넌트가 너무 많은 것 같기도 하고 Styled component 안에서 중첩해서 태그 또는 클래스이름을 넣을 수 있어서 굳이 다 styled component로 만들 필요가 있나 싶어서요!
     혼용해서 쓴 예시는 1b7f635 커밋 -> Card.jsx 에 있습니다.
   • Styled component에 괜찮은(?) 네이밍 컨벤션이 있는지 궁금합니다. 검색해봐도 잘 모르겠어요 😓

현재까지 구상한 컴포넌트 구조

일감 나누기 스프레드 시트

👉 바로가기

[crongro]

• <ThemeProvider theme={theme}><ThemeProvider/> 이런식으로 컴포넌트를 감싸고 color: ${(props) => props.theme.colors.gray};를 적용하나, 윗단에 import theme from "파일경로" 해서 color: ${theme.colors.gray} 이렇게 주나 둘 다 작동해서 상관없어 보이는데 그게 맞는걸까용?

그러네요. 성능상의 미미한 차이가 있을지모르겠지만, 같은 효과네요.
import를 했을때는 만약 path가 바뀌면 다 바꿔줘야 하니 좀 귀찮은 정도?

[crongro]

• 현재 Label.jsx, Button.jsx에서 variable처럼 사용하는 객체를 가지고 있는데, contant.js 에다가 저장하는게 좀 더 자연스러울까요?

상수값이 컴포넌트안에서만 사용하는 것이면 컴포넌트 안에 표현하는게 좋고요.
그렇지 않다면 밖에 선언해서 다른곳에서도 사용하고요.

그리고 만약 그 컴포넌트가 재사용 돼야 하고, 그 과정에서 방해가 되는 코드라면, 역시 빼는게 좋겠고요.

[crongro]

• fetch 받아오는 데이터는 각 탭 혹은 버튼을 누를 때마다 그에 해당하는 데이터를 요청하는 것이 더 나은가요? 아니면 한꺼번에 받아와놓고 필요한 부분만 조건부로 렌더링 하는 방식으로 구현하는 것이 더 좋을까요?

이건 장단점이 있겠네요.
그때그때 상황에 맞춰서 선택할 수 있어야겠습니다.
둘 다 괜찮고요.

물론, 기준이 되는 사항은, 사용자 경험(UX)입니다.

[crongro]

• Styled component와 그냥 tag에 className=""를 혼용해서 써도 괜찮을지, 한 가지로 통일하는 게 좋은지 궁금합니다. 지난 프로젝트에서는 모든 태그를 다 Styled component로 썼었는데, 개인적인 느낌으로는 컴포넌트가 너무 많은 것 같기도 하고 Styled component 안에서 중첩해서 태그 또는 클래스이름을 넣을 수 있어서 굳이 다 styled component로 만들 필요가 있나 싶어서요!

혼용하는건 좋지 않습니다.
스타일을 수정할때 여기저기를 찾아봐야하고요.
하나로 합치고 그 안에서 CSS 파일을 분리한다거나, 코드를 재사용하는 방법등으로 리팩토링하는 게 좋을 거 같습니다.

[crongro]

• Styled component에 괜찮은(?) 네이밍 컨벤션이 있는지 궁금합니다. 검색해봐도 잘 모르겠어요

팀이 한번 고민해보세요 ㅎ
좋은 방법을 찾아도 없으면, 나에게 , 우리에게 지금 직관적이고 쉬운 규칙이 뭘까? 생각하시고 결정하고,
일관성있게 그 규치을 따라서 하시면 될 듯.

[crongro]

컴포넌트 잘 나눴네요.
한 명이 구현한것처럼 깔끔합니다.

[crongro]

GlobalStyle 적용좋네요. 내용이 커지면 App.jsx에서 분리하는 것도 좋겠네요.

[crongro]

useState가 스타일선언 중간쯤 있기보다 별도 위치하는 게 더 좋겠어요.

[crongro]

스타일코드는 컴포넌트 함수 안에 선언하기 보다 밖에 선언하시죠.
컴포넌트내에는 JS로 로직만 표현하면 좋겠네요.

[crongro]

반복적으로 theme를 import하고, 여러컴포넌트에서 Provider를 제공하는거 같은데,
상위 컴포넌트쪽, 한군데에서만 Provider를 등록하면 되는거 아닌가요?

[crongro]

특별한 경우가 아니면 async 함수로 통일하는 것도 좋죠.
마지막 error 가 들어오나요? catch 메서드를 사용하셔야..

[deprecated-hongbiii]

어떤 예제를 보고 따라했는데 에러 처리도 생각해보고 바꿔보겠습니당!! async로 통일도 해보겠습니다 👍

[crongro]

저도 네이밍에 Styled를 붙이는 것이 좋다고 생각하지만,

많은 개발자들이 이런 추가적인 타입(형태)을 이름에 붙이는 건 추천하지 않더군요.

[crongro]

theme만 존재하니 constant.js 라고 하지 말고, theme.js 라고 하시죠.
constant.js 라고 하면 여기에 다른 상수들을 모두 다 모아둘 거 같아서요.
style은 JS에서 사용되는 값과는 조금 다르게 관리해도 될 거 같아요.