221209 Day12

김혜진·2022년 12월 15일

Project-Naru

목록 보기

7/23

Day12

상세 설정

SCSS vs Styled-Components

우선 전역 스타일을 설정하고 싶었다. 폰트 설정이나 태그의 기본 설정을 해두면 하나하나 스타일을 지정해 줄 필요가 없기 때문이다.
그런데 SCSS와 Styled-Components 중 어떤 것을 쓸 것인지에 대해 고민을 하다가 둘을 섞어 쓰기로 했다.

SCSS는 괄호를 중첩함으로써 좀 더 간편하게 작성할 수 있으며 변수 사용이나 공통 스타일을 import해서 사용할 수 있는 장점이 있고,
Styled-Components는 GlobalStyle을 사용해 전역스타일을 사용할 수 있고 클래스명 단위가 아닌 컴포넌트 단위로 스타일 지정이 가능하다는 점이 장점이 있다.

그래서 둘을 적절히 섞어서 스타일링 해보기로 했다.

Global Styles

styled-components를 이용해서 기본 스타일 세팅을 마쳤다.
그런데 분명 폰트와 이미지를 public 폴더에 저장해두었는데 경로를 자꾸 못찾는 것이다.

@font-face {
	font-family: SUIT-Light;
	src : local('SUIT Light'),
		url('fonts/SUIT-Light.woff2') format('woff2')
    }

src 폴더 안 js 파일에서는 public 폴더를 기준으로 상대경로를 잡는다고 했는데 이상하다..? 제대로 한 것 같은데...
"라고 할 뻔"
src : 가 써져있는 부분을 주석처리해놔서 안됐던 거였다.

local에 폰트가 없으면 url에 있는 파일을 다운받게 하는 코드를 작성하고 싶어서 테스트 해본다고 local을 주석처리 한다는게 한 줄을 통째로 주석처리했던 것 😇

레이아웃 컴포넌트 구조 설계

컴포넌트 이름은 항상 대문자로 시작해야한다.
리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

기초 세팅이 끝났으니 이제 레이아웃 컴포넌트들을 만들 것이다.

배너가 페이지별로 바뀌어야하고, Body 부분도 계속 바뀌어야한다. 그냥 path로 어떻게든 되겠지~~ 싶었는데 내가 직접해본 적이 없으니 좀 머리를 써야되는 부분이란 걸 알았다 🥲..

BrowserRouter은 SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어준다. (= 리렌더링이 되지 않음)

Routes 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
Route 는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.

그리고 경로 변경시마다 바뀌는 Banner와 Content는 children을 활용해 하위 페이지중 변경되는 곳만 렌더링 되도록 한다.
메인 페이지의 인기글, 찾아보기 페이지의 인기 순위, 커뮤니티 페이지의 인기글이 해당한다.

내가 잘 이해한 게 맞다면, 상위 컴포넌트가 렌더링이 되고 props로 전달된 children 컴포넌트들은 렌더링이 되지 않는다는 것이다.

App.js

function App() {
  return (
    <BrowserRouter>
      <GlobalStyles />
      <Header />

      <Banner>
      <Routes>
        <Route path="/" element={<MainBanner01 />}/>
        {/* <Route path="/" */}
      </Routes>
      </Banner>
      
      <Contents>
        <Routes>
      {/* <Aside/> */}
        </Routes>
      </Contents>
      <Footer />
    </BrowserRouter>
  );
}

Banner.js

const Banner = ({ children }) => {
    return <div className="banner">{children}</div>;
  };

export default Banner;

일단 이렇게 할 계획이라는 느낌으로 세팅만 살짝 해놓았다. 후에 더 수정해야한다.

디자인 할 때 최대 가로사이즈를 1200px로 정했기 때문에 max-width를 1200px로 주고 width를 %로 지정.

그런데 className을 지어주려고 보니 같은 이름을 다른 컴포넌트에 쓰고 있으면 스타일이 같이 변경되는게 아닌가..? 스타일 import를 한 것도 아니었는데?
이래서 styled-components가 컴포넌트 단위로 스타일을 지정할 수 있는 장점이 있다고 했었구나 싶다.
할 수 없이 이름을 정하는 방법에 대해서 또 생각해야했다.

이름을 붙이는 방식 중 BEM 방식을 따라보기로 했다.
Block(재사용 가능한 기능적으로 독립적인 페이지 컴포넌트) , Element(블럭을 구성하는 단위), Modifier(블럭이나 엘리먼트의 속성)로 나눠진다.

블럭은 - 엘리먼트는 __ 속성은 -- 으로 표시한다.

배열 안 객체로 입력한 후 map으로 뿌리는 방식을 선택했다. 카테고리가 추가, 변경될 때에 유지보수가 더 간단할 것 같다는 생각에서 적용했는데, 사실 메뉴가 몇 개 안돼서 그냥 해도 될 것 같기는 하지만 😀