목적

리액트로 웹 사이트의 구조를 구현하는 데 익숙해지기 위함이다.

사용한 기술

• react18+ ( react function components )
• react-icons
• 기본 CSS의 flex / grid
• CSS BEM Model
• media queries

느낀점

여러 section들로 구성된 웹 페이지를 구현하다 보니, jsx파일 및 css파일들의 구조화가 필요하다는 것을 느꼈다.
찾아보니 리액트 사용자들은 이미 어느정도 정형화된 폴더구조를 사용하고 있었다.
src폴더 밑에 기본적으로 components폴더와 containers폴더를 두고 리소스들은 asset폴더에 포함시킨채 확장해나가는 방식이었다.

containers 폴더를 예로 들어보자.

• containers
  • Header
    • Header.jsx
    • header.css
  • Footer
    • Footer.jsx
    • footer.css
  • Blog
    • Blog.jsx
    • blog.css
  • index.js

위와 같이 구조화 한다.
index.js 는 container폴더의 파일들을 app.js에서 쉽게 import하기 위해 export를 해주는 역할을 한다.

// 📄containers/index.js

import Header from './Header/Header';
import Footer from './Footer/footer';
import Blog from './Blog/blog';

export {Header, Footer, Blog};

// 📄app.jsx

import {Header, Footer, Blog} from './containers';

위와 같이 한 번에 import를 할 수 있다.
이름을 index.js로 한 이유는 from 뒤에 ./containers/index.js 가 아닌 ./containers 만 해도 되기 때문이다.

또한 새롭게 알게된 CSS 프로퍼티들도 있다.

• background-clip: text; : 배경 이미지를 텍스트 위치에만 표시한다.
  텍스트 위치에만 배경이 표시되기 때문에 텍스트를 투명하게 해야 배경이 보인다.
  아직 표준화 되기 전이라 -webkit- 을 사용하도록 한다.
  -webkit-background-clip: text;
  
  위의 이미지는 gradient 배경을 사용하고 텍스트를 투명처리한 모습이다.

결과물

• 깃헙 저장소 : 깃헙↗️

• 라이브 데모 사이트 : 깃헙 배포↗️

PC 화면

모바일 화면

[사용된 이미지 출처] : Dall-E로 만든 이미지