230616 TIL Pre-project Day6

✅ 오늘 한 일

✔️ 폴더구조 정리
원래는 컴포넌트폴더에 컴포넌트 줄세우려고 했는데 막상 코드를 짜다보니까 어느정도 길어지면 쪼개는 버릇때문에 파일이 점점 많아지기 시작했습니다.. 나중에 쓸 공용 컴포넌트들도 폴더링을 시켜놔야 나중에 쉽게 찾아 쓰겠죠? 처음 회의때는 이렇게까지 할 필요 없지 않을까 했는데 결국엔 이렇게 되어버렸습니다. 혼자 할땐 몰라도 다른사람들과 프로젝트할때는 폴더링을 꼭 해야하겠습니다.

 

✔️ 글로벌 스타일 스타일 컴포넌트로 설정

style/GlobalStyle.jsx
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  :root{
    --color-black : rgb(36, 39, 41);
    --color-gray : #BBC0C4;
    --color-orange : #F48024;
    --color-blue : #0095FF;
}
`;

export default GlobalStyle;

드림코딩 시절부터 요긴하게 사용하는 글로벌 스타일 변수선언입니다. 스타일드 컴포넌트에는 적용되는지 몰랐는데 갓드림오구님께서 그런것이 있다고 알려주셨습니다. 폰트 글씨나 마진등도 설정할 수 있지만 연습용으로 자주 사용되는 색깔을 적용해 보았습니다. 이렇게 작성된 파일을 최상위 파일에서 import 해준뒤 컴포넌트로 넣어줍니다.

사용할 때는 var키워드를 사용하여 해당 스타일을 적용시킬 수 있습니다.

color : var(--color-orange);

✅ 해야할 일

✔️ 프로젝트 시작후 첫 주말입니다. 레이아웃은 얼추 마무리를 하고 목업 데이터와 api를 간단하게 만들어 테스트 해 볼 생각입니다. 저는 코스동안 배웠던 json-server를 활용할 생각이었는데 생각보다 다양한 방법이 있었습니다.. 역시 동기분들과 이야기만해도 지식이 샘솟는 사랑혀 SEB FE.. 🥹👍🏻