프로필 페이지

[rhehfl]

🔗 관련 이슈

#81

📝작업 내용

프로필 페이지 퍼블리싱을 진행했습니다.

🔍 변경 사항

• 프로필 페이지 추가
• features/user 폴더 추가

💬리뷰 요구사항 (선택사항)

퍼블리싱이다보니 파일 변경 + 추가 사항 이 많습니다. 가볍게 봐주셔도 괜찮을 것 같습니다!

[zzzRYT]

찾아보니깐, 순서가 바뀌면 의미가 바뀌는 리스트의 경우에는 <ul>보다는 <ol> 을 사용하라고 하네요.
levelList라고 이름을 지어주신 것 보면, 레벨에 대한 리스트를 보여주는 것 같은데, 순서가 바뀌면 레벨의 의미가 달라지는 것 이기 때문에 <ol>이 더 적절해 보이는 것 같습니다. 그게 아니라면 <ul>을 사용하셔도 무방할 것 같네요😊

[rhehfl]

<ol> : ordered list, <ul> : unordered list 이전에 배웠던건데 아직 기본기가 많이 부족한 것 같습니다.
@zzzRYT 님 의견대로 위 리스트는 순서가 중요한 리스트이다보니 <ol>태그를 사용하는게 조금 더 적절한 선택인 것 같습니다. 감사합니다!

[rhehfl]

26d1e68 커밋에서 해당 사항 변경했습니다.

[bluetree7878]

@rhehfl 커밋 해당 사항 변경 코멘트 남기는 습관 좋은 것 같습니다!!
저 또한 그런 좋은 습관을 기르겠습니다 ㅎㅎ

[rhehfl]

저도 9기분중 한분이 이런식으로 코멘트를 남겨주시길레 좋아보여서 습관 들이는 중입니다 ㅎㅎ

[zzzRYT]

Suggested change

	import {
	BadgeLabel,
	JoinDateLabel,
	LevelDiv,
	MyProgressDiv,
	MyQuizInfoDiv,
	UserNameLabel,
	ProfileSection,
	BadgeSection,
	LevelList,
	LevelLabel,
	MyCharacterImage,
	} from './styles';
	import * as S from "./styles";

. . .

//사용시
<S.BadeLabel />
<S.JoinDateLabel />

위와 같이 사용해 보는건 어떨까요?🧐

S-dot이라고 불리는 방식인데, 이런식으로 적으면 아래와 같은 이점이 있습니다.

• 해당 컴포넌트가 styled-componet라는것도 명확해짐
• 스타일을 작성하실 때, S. 으로 접근이 가능하기 때문에 편리함
• import 부분을 간소화 할 수 있다.

생각해보시고, 적용해보시는 것을 추천드립니다!👏

[rhehfl]

미니 프로젝트에서 적용했던 방법인데 프로젝트를 하다보니 이런 세세한 부분을 놓쳐버렸네요 😢
다시 복기시켜주셔서 감사합니다.
@zzzRYT 님 의견대로 import 구문쪽에 간소화되는게 좋은 것 같습니다!
꼼꼼하게 봐주셔서 감사합니다 😊

[rhehfl]

26d1e68 커밋에서 해당 방식을 적용시켰습니다. 확실히 import 구문이 간소화되네요 ㅎㅎ

[bluetree7878]

@zzzRYT 님께서 말씀하신 것처럼 해당 컴포넌트가 styled-componet라는 점, import 부분 간소화 등 장점이 확실한 방법입니다.

아쉬운 점이라면 스타일드 컴포넌트 파일 안에 내가 필요로 하지 않는 스타일까지 있다면 S-dot 방식을 사용할 떄 그런 필요로 하지 않는 스타일까지 import 시키기 때문에 스타일드 컴포넌트 파일 자체가 조금 무거운 편이라면 약간의 시간차가 발생할 수 있다네용😊

[rhehfl]

기존 p태그를 사용해서 레이블을 만들었는데
label 태그 사용해서 시멘틱태그 조금 더 활용하겠습니다