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

✔️ 시작

OAuth를 받아오는 작업을 먼저 진행하기 위해
로그인 페이지 먼저 진행하기로 했다.

나는 헤더를 담당하게 되었다.

---

📍 Header

Header.jsx

import Logo from "../../assets/images/logo-stackoverflow.svg"

import { HeaderContainer, LogoContainer, LogoImg, Nav, LoginBtn } from "../common/Header.styled"

const Header = () => {
  return (
    <HeaderContainer>
      <LogoContainer>
        <a href="#">
          <LogoImg src={Logo} alt="logo" />
        </a>
      </LogoContainer>
      <Nav>
        <LoginBtn>로그인</LoginBtn>
      </Nav>
    </HeaderContainer>
  )
}

export default Header

로그인 전 컴포넌트만 구현했고
만약 로그인 후, Router 까지 진행한다면 태그나 코드 구조가 변경 될 것 같다.

Header.styled.jsx

import tw from "tailwind-styled-components";

export const HeaderContainer = tw.header`
  w-full
  flex
  top-0
  sticky
  justify-between
  items-center
  drop-shadow-lg
  bg-white
  space-x-0
  py-5
  px-40
`;

export const LogoContainer = tw.h1`
  
`

export const LogoImg = tw.img`
  w-52
`

export const Button = tw.button`
  text-lg
  text-white
  rounded-full
  px-6
  py-2
  transition duration-300 ease-in-out
`

export const Nav = tw.nav`
  flex
  gap-2
`

export const LoginBtn = tw(Button)`
  bg-[#FFA564]
  hover:bg-[#FF7E22] 
`

로그인 후의 배치도 있어야하기에
<Nav>에 display: flex를 미리 넣어주었다.

tawilwind css에서 hover, active 주는거 어려울 줄 알았는데
생각보다 간단하게 작성 할 수 있었던거 같다.

export const LoginBtn = tw(Button)`
  bg-[#FFA564]
  hover:bg-[#FF7E22] 
`

만약 원하는 색상이 없을 경우
bg-[색상 코드] 이런 식으로 [원하는 내용]으로 작성하면 되는 것 같다.

---

✔️ Keep

아직 기능 개발이 이루어지지 않아 로그인 후, Router를 적용하지 않았지만 이점을 고려하며 작업을 진행했다.

tawilwind css를 처음 접하게 되었는데 좀 더 익숙해진다면 코드 작성 시간이 단축 될 것 같다.

• 또한 커스터마이징이 되니 이점도 좋다 생각한다.

Git push 하고 PR 할 때 구체적으로 작성하려고 했다.

• 내가 왜 이런식으로 작성했는지 작성을하면 다른 개발자가 봤을 때 의문점을 줄 일 수 있다 생각했다.
• 작업한 캡처본을 첨부해 굳이 해당 파일을 clone하지 않아도 내가 어떤 작업을 했는지 알 수 있도록 작성했다.

---

✍️ Problem

clone 후 화면을 확인하기 위해 npm run dev를 했는데 오류가 났다.

• client 파일에서 진행하지 않아서 그랬다.. (기초적인 실수였다ㅠ)

공통 스타일 객체를 만들어 적용하려고 했으나 오류가 발생했다.

export const CommonColor = {
  orange500 : "#FF7E22",
  orange200 : "#FFA564",
  green : "#03B800",
  gray900 : "#797979",
  gray700 : "#CACACA",
  gray500 : "DCDCDC",
  gray200 : "F7F7F7"
}

공통 색상을 객체로 만들어 관리하려고 했다.

export const LoginBtn = tw(Button)`
  bg-[#FFA564]
  hover:bg-[${CommonColor.orange500}] 
`

템플릿 리터럴로했는데 자꾸 오류가 났다.
근데 hover:bg-[#FF7E22] 이런식으로 작성하면 되는 거였다.

원인
Tailwind는 사용되지 않는 CSS는 제거합니다. 따라서 당신의 코드가 컴파일링 되는 시점에서, Tailwind는 동적 할당을 인식하지 못하고 stylesheet에서 지워버릴 겁니다.

원인 해결하려면
항상 완성된 하나의 클래스를 사용하라는 공식 문서의 권고

참고
https://broheat.tistory.com/29

https://velog.io/@arthur/Tailwind-CSS-%EC%97%90%EC%84%9C-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0

알아보니 tawilwind에서는 템프릿 리터럴를 지원하지 않는 것 같다.
따로 관리하길 원하다면 tailwind.config.js라는 파일을 만들어야 하는것 같았다.

우리는 대신 이미 색상을 정해 두었기 때문에 우선는 hover:bg-[#FF7E22] 이러한 방식으로 진행하기로 했다.

---

🚀 Try

앞으로도 Git push 하고 PR 할 때는 구체적으로 작성하려고 한다.

폴더, 파일 생성, 오류가 발생할 경우엔 즉각 팀원들과 공유하도록 한다.

API 요청하는 부분이 아직 부족해 틈틈히 공부를 진행해야 겠다.

• Redux Toolkit으로 진행하기 때문에 집중적으로 확인할 필요가 있다.

---

✏️ 마치며

우리 팀원들이 다른 팀원들과 비교했을 때 진행이 빠른 거 같다.

git에 대해 아직 익숙하지 않아 초반에 많이 헤맸던거 같다.

어느 것을 branch로 따야하는지,
commit 작성할 때 명칭을 어떤식으로 작성해야하는지,
images 폴더가 필요한데 본인 branch에 작업해야하는지 등 여러 고민을 했던 날이였다.

그만큼 나 혼자가 아닌 여러명에서 진행하는 프로젝트로
하나 하나 작업하는데 신중해 지고 어떻게 작성을 해야
팀원들이 알아보기 쉬울지 고민하게 된다.

협업을 자주 해보면 어느 정도 익숙해 지지 않을까 싶다.