React-router 협업 셋팅 TIL #day 30

Styles폴더 아래에

• reset.scss
• common.scss
• config.js
  : 협업을 위해서 만든 공동 react-router파일에 위 3 파일을 첨부
  (파일 이름은 편하게 바꾸셔도 괜찮습니다.)

용도

Reset.scss

모든 페이지에 들어갈 페이지 레이아웃과 관련된 css
예를 들어

* {
    box-sizing: border-box;
    margin: 0px;
}

위와 같이 모든 페이지에 공통적으로 들어가는 레이아웃 셋팅을 한 곳에 정리하여 각 페이지의 코드를 더 간결하게 만드는 용도

Common.scss

자주 사용되는 색상, 폰트 사이즈/ 글꼴/ 두께 등을 변수로 정의(scss형식)하여 다른 페이지에서도 사용하기 용이하고 수정이 편하게 만든다.

$mainColor: #ffffff;

.ifThisIsSCSS {
	background-color: $mainColor;
}

이후에 페이지 디자인 변경으로 mainColor를 바꿀 경우, 변수에 정의된 색상만 바꾸면 모든 페이지에 해당 변수로 적힌 색상이 동시에 변환된다.

$mainColor: #444444;

이렇게 변수의 값이 변하면 해당 변수를 사용한 모든 css 색상 적용이 변환된다.

장점 :

• 통일성을 주기 쉽다.
• 수정이 편리하다.
  
  

Config.js

모든 웹사이트에서 사용되는 이미지 파일을 정리해 넣어두어서 관리와 수정을 용이하게 하고 코드를 보다 깔끔하게 관리할 수 있다.

Config.js 파일 내 이미지 링크 관리

export const 정하고 싶은 이미지 변수이름 = "이미지 경로"

해당 이미지를 사용할 파일
ex) 로그인 페이지

Login.js 파일 내 Config파일 불러오기

import './Config.js' -> './'은 파일 경로에 따라 변경해야 함
import {사용한 이미지 변수이름} from './Config' ->보통 자동으로 생성되지만 안될 경우 보강해줘야 함

이미지 변수 간은 콤마로 구분함 ex) 만약 이미지 경로 이름을 Facebook과 Google로 지정한 경우 {Facebook, Google}