(TIL 26일차) 스타일쉐어 1차 프로젝트 준비 (2) - CRA 초기세팅 (2)

빡기·2020년 2월 22일
0

TIL(Today I Learned)

목록 보기
21/43

25일차에 이어 세팅작업 추가 작업

1. reset.css 적용

  • 각 브라우저 별로 태그에 대한 디폴트 속성 값이 다르기 때문에 모든 브라우저에서 작동한다는 전제조건하에 css를 초기화 해주는 작업을 해줘야 함
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
  letter-spacing: 1px;
}
​ * {
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  color: inherit;
}
​ *:focus {
  outline: none;
  border: none;
}
​ body {
  line-height: 1;
}
​ article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
​ nav ul {
  list-style: none;
}
​ blockquote,
q {
  quotes: none;
}
​ blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
​ a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
​ del {
  text-decoration: line-through;
}
​ abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
​ table {
  border-collapse: collapse;
  border-spacing: 0;
}/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
​ input,
select {
  vertical-align: middle;
}
​ textarea {
  resize: none;
}

2. Eslint와 prettier 연동 작업

Vscode의 extension 기능 중 Eslint와 pretiier라는 것이 존재

Eslint

  • 해당되는 언어에 대한 문법 오류를 잡아주는 역할을 해주는 도구

prettier

Eslint, prettier 연동 방법 정리

1. 우선 extension에서 Eslint와 prettier를 설치한다.
2. .eslintrc.json 파일을 제일 상위 루트 폴더에 생성하여 아래 코드 작성

{
  "extends": "react-app"
}

3 eslint rule에 따라 formatting도 추가or삭제할 것이므로 eslint관련 패키지도 추가

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

4. 그 다음 .eslintrc.json 파일 수정

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

5. pretttier 셋팅

  • 파일->기본설정->설정에 들어간 뒤
  • 우측 상단에 파일문서아이콘(화살표 포함)을 눌러 json형태로 바꾼다

7. 마지막으로 setting.json 파일 안에 아래 코드 추가하면 끝

"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange"

import순서, CSS 구조, className 명명 규칙

BEM(Block Element Modifier)이란?

  • 클래스명을 지을 때 아무렇게나 하는게 아닌 연관성 있고 보기 쉽게 명명하는 구조
<div class="card">
    <div class="card__header">
        <h2 class="card__header__title">Title text here</h2>
    </div>
    <div class="card__body">
        <img class="card__body__img" src="some-img.png">
        <p class="card__body__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="card__body__text">Adipiscing elit.
            <a href="/somelink.html" class="card__body__text__link">Pellentesque amet</a>
        </p>

    </div>
</div>
  

import 순서

1. import react
2. library ex) Link 같은 것
3. util (config.js)
4. component 아래 있는 것들
5. css 관련된것


CSS 파일 구조

예시

  • 같은 타입별로 나눠서 구성하면 나중에 리팩토링 하기에도 편함
.button {
    display:inline-block;
    margin:1em 0;
    padding:1em 4em;

    color:#fff;
    background:#196e76;
    border:0.25em solid #196e76;
    box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3),
               0.5em 0.5em 0 #444;

    font-size:3em;
    font-family:Avenir, Helvetica, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
}

font-face 적용 방법 참고


profile
Front End. Dev

0개의 댓글