feat(app) 8000 : emotion 기반으로 공용 푸터 로직을 변경합니다. #84
Conversation
| vertical-align: middle; | ||
| `; | ||
|
|
||
| export const AttributedText = styled.span` |
There was a problem hiding this comment.
적절한 이름을 잘 모르겠어서 모바일에서 주로 쓰는 네이밍으로 사용했습니다 😅
There was a problem hiding this comment.
프론트엔드에서는 Attributes, Property 라는 키워드를 태그에 쓰는 것을 다들 피하고 있는데요, 태그 속성과 혼동되기 떄문이 아닐까 싶습니다.
FooterIntroduceText 등은 어떨까요?
만약 Footer가 아래와 같이 확장된다면... Attributed는 너무 추상적일 것 같아요😳
There was a problem hiding this comment.
프로젝트가 커지는걸 생각해보면 범용적인 이름으로 사용하면 너무 헷갈릴 것 같네요..! FooterIntroduceText 로 수정했습니다!
| </a> | ||
| <span className="attribution"> | ||
| <FooterContainer> | ||
| <Container> |
There was a problem hiding this comment.
이렇게 이중 중첩보다 더 좋은 방식이 없을까.. 고민이 되네요. 일단은 있는 그대로 매핑하긴 했습니다만 🤔
There was a problem hiding this comment.
그런 고민 포인트가 생긴 이유에 대해 몇 가지 고민해봤어요.
- Container라는 동일한 이름이 사용되었다.
- 둘 다 모종의 이유로 wrapped 를 의도한 태그이다.
그렇다면 저는 위계를 정할 것 같습니다.
일반적으로 감싸는 태그들은 CSS box, position 등의 쌓임 맥락에 의한 스타일링 때문에 생기기 때문인데요, 가끔은 정말 불필요하게 하나의 컨텐츠를 여러 박스로 감싸는 경우가 있어요.
그래서 저는 아래와 같은 위계를 주는 편입니다.
Container > (Wrapper) > Area > Box > (LeafNode... ex. Text, Content, Child Components)
괄호는 생략 가능 또는 다른 명칭을 사용해도 무방이라는 뜻입니다.
우성님이 보기에 "좋은" 컨벤션을 가져간 뒤에, 다른 분들에게 피드백 받는 게 정말 좋은 러닝이 될 것 같아요👍
There was a problem hiding this comment.
@InSeong-So 상세한 의도 설명 감사합니다. 현재 고민점은, 저도 인성님이 말씀주신 위계를 따라가는게 좋아 보이는데, Container 라고 realworld 에서 이미 네이밍을 해둔 부분이 있는지라 저로서는 최상위 Wrapper 를 XXXContainer 라는 네이밍으로 앞으로 가져가고 싶은 마음에 충돌이 나는 상태인데요,
그러면 이 경우는 Container 를 Wrapper 로 리네잉을 하는 방향이 좋으려나요? 아니면 공통이라는 의미로 BaseContainer 같은 래퍼 네이밍을 써야 하나 싶기도 하구요.
There was a problem hiding this comment.
공통 컴포넌트가 같이 엮여 있는지라 요 부분은 추후 논의되는 대로 별도 PR로 개선하겠습니다!
| width: 100%; | ||
| `; | ||
|
|
||
| export const Logo = styled.a` |
There was a problem hiding this comment.
더 적절한 이름이 있을까 고민되었습니다. 예컨대 LogoAnchor? 같은 식이 더 나으려나요 🤔 Logo 라고 보는게 맞나.. 싶기도 하구요.
There was a problem hiding this comment.
다른 분들은 어떨 지 모르지만, 저는 에디터 레벨에서 "find keyword" 시 동일한 이름들이 많이 나오는 결과에 대해 굉장히 피로를 느끼는 편입니다.
만약 저라면 FooterLogo 라는 네이밍을 가져갈 것 같아요.
Anchor를 명시해도 좋겠지만, 그럴 경우 푸터에서 클릭 시 다른 페이지로 랜딩되는 링크 컴포넌트는 어떻게 표기할 지 망설이게 될 것 같아서요!
There was a problem hiding this comment.
저도 가능한한 자세한 네이밍을 추구하는 편이었는데 그 관점에서 FooterLogo 좋은 것 같습니다!!
| width: 100%; | ||
| `; | ||
|
|
||
| export const Logo = styled.a` |
There was a problem hiding this comment.
다른 분들은 어떨 지 모르지만, 저는 에디터 레벨에서 "find keyword" 시 동일한 이름들이 많이 나오는 결과에 대해 굉장히 피로를 느끼는 편입니다.
만약 저라면 FooterLogo 라는 네이밍을 가져갈 것 같아요.
Anchor를 명시해도 좋겠지만, 그럴 경우 푸터에서 클릭 시 다른 페이지로 랜딩되는 링크 컴포넌트는 어떻게 표기할 지 망설이게 될 것 같아서요!
| vertical-align: middle; | ||
| `; | ||
|
|
||
| export const AttributedText = styled.span` |
There was a problem hiding this comment.
프론트엔드에서는 Attributes, Property 라는 키워드를 태그에 쓰는 것을 다들 피하고 있는데요, 태그 속성과 혼동되기 떄문이 아닐까 싶습니다.
FooterIntroduceText 등은 어떨까요?
만약 Footer가 아래와 같이 확장된다면... Attributed는 너무 추상적일 것 같아요😳
| </a> | ||
| <span className="attribution"> | ||
| <FooterContainer> | ||
| <Container> |
There was a problem hiding this comment.
그런 고민 포인트가 생긴 이유에 대해 몇 가지 고민해봤어요.
- Container라는 동일한 이름이 사용되었다.
- 둘 다 모종의 이유로 wrapped 를 의도한 태그이다.
그렇다면 저는 위계를 정할 것 같습니다.
일반적으로 감싸는 태그들은 CSS box, position 등의 쌓임 맥락에 의한 스타일링 때문에 생기기 때문인데요, 가끔은 정말 불필요하게 하나의 컨텐츠를 여러 박스로 감싸는 경우가 있어요.
그래서 저는 아래와 같은 위계를 주는 편입니다.
Container > (Wrapper) > Area > Box > (LeafNode... ex. Text, Content, Child Components)
괄호는 생략 가능 또는 다른 명칭을 사용해도 무방이라는 뜻입니다.
우성님이 보기에 "좋은" 컨벤션을 가져간 뒤에, 다른 분들에게 피드백 받는 게 정말 좋은 러닝이 될 것 같아요👍
|
Container 부분 외에는 반영 완료해서 머지하겠습니다! 해당 부분은 추후 개선점을 찾아보려 6DB6 합니다. |
📌 이슈 링크
📖 작업 배경
🛠️ 구현 내용
💡 참고사항
🖼️ 스크린샷
기존과 동일하게 스타일이 잘 표시되고 있는 상태