[💻 코드스테이츠 FE 44기]pre-project - 6일차

✔️ 시작

기능을 넣기 전 마크업 작업 부터 진행했다.

📍 태그, 유저 정보

Tags

tag 영역은 너무 간단했다.
대신 하나가 아닌 여러개가 들어간다는걸 고려해 작업을 진행했다.

export const TagContainer = tw.div`
  flex
  gap-1
`

태그를 감싸주는 영역에 gap을 주었다.

UserInfoOwner

tailwind를 이번 프로젝트 때 처음 접하게 돼서 가상 선택 클래스에서 많이 헤맸던 거 같다.
결국 시간내에 해결하기 어렵다 판단해 우선 중간에 span태그를 넣어 임시 방편으로 작업했다.

<UserInfoData>
	<UserData>JIEUN</UserData>
	<Line/>
	<UserData>23.06.16</UserData>
</UserInfoData>

하지만 이건 임시 방편으로 추후 다른 내용이 추가 될 때 마다 <Line/>을 넣을 순 없었다.
이것저거서 찾아보니

export const UserData = tw.span`
  text-sm
  base
  text-[#797979]
  pr-2
  relative
  
  after:absolute
  after:top-2/4
  `

이런식으로 가상 선택 클래스를 반복적을 넣어주면 되는거 같다.
분명이전에도 동일한 방법으로 해결하려고 했으나 해결하지 못했다...
position 차이인지 생각해 본다..🤔

이후 다른 내용이 추가 되어도 <Line/>을 넣을 필요가 없어졌다!

✔️ Keep

• <Line/> 넣고 넘어갈 수 있었지만 나중을 고려해 수정했다.
• github에 PR할 때 최대한 세세하게, 이미지를 같이 첨부해 다른 개발자가 봐도 이해할 수 있도록 작성했다.
  - 내가 왜 이렇게 작성했는지 이해를하고 코드 리뷰를 진행하면 좋다 생각했다.

✍️ Problem

• tailwind가 진짜 복병이다... 내가 알고 있던 css 문법을 사용할 수 없으니 힘들다.
  - 공식 문서로 찾기는 힘들고 구글링하기에 자료가 잘 나오지 않았다..ㅠ (따로 정리할 필요가 있다.)

🚀 Try

• tailwind 틈틈히 구글링해서 내 것으로 만들기
  - 가상 선택 클래스, 그룹 요소, 자기 자신 요소 등의 경우 어떻게 스타일을 주는지 확인하기
• 코드 리뷰를 작성할 때 작성할 내용이 없어도 왜 이런식으로 작성했는지 물어봐야겠다.

✏️ 마치며

각 팀원 마다 작업 영역을 나눠 진행하니 속도는 빠르지만
머지를 하는 부분에서 시간소요가 되고 페이지 단위로 파트를 나누니
누구 한 명이 작업 진행을 못하면 다음을 진행하는데 문제가 발생했다...

아무래도 다들 프로젝트가 처음이고 반복되는 컴포넌트가 많아서 더 그런거 같다.
이번 프리프로젝트의 경험을 통해 메인 프로젝트에서는 잘 진행 되었으면 좋겠다.