[Wecode 23일차] 미니터 코드리뷰 & 스타일 적용

1. git issue commit

git commit -m "fixes #이슈번호"

2. HTML 테이블 Tag 사용시 주의사항(양식준수)

  1) tr은 무조건 있어야함.   

  2) tr은 thead 또는 tbody에 있어야함. 

<table>
  <thead>
   	<tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>            
    </tr>
  </tbody>
  
  //코드가 깨지네 -_-

3. 중복되는 path 설정 줄이기

import Title from '../../Components/Title/Title';

위와 같이 import값 복잡하게 나올 경우, page와 component에 index.js를 만들어서

Title>index.js

export {default} from './Title';

위와 같이 작성해주면

import Title from '../../Components/Title';

위와 같이 실제로 줄일 수 있다.

4. import한 컴포넌트에서 CSS 변경시, inline으로 style주는 것은 지양하고, css통해서 줄 수 있도록.

    특정조건에서 클래스 네임 생기게해서 css에서 적용하도록

5. 버튼 이벤트 속성 props으로 줄 경우 이름 다르게 해서 넘겨 줄 것.

6. html에서 "" 사용하고, 자바스크립트는 ''위주로 사용할 것(airbnb 컨벤션)

7. 리액트에서 수정시 어떻게 구성하냐에 따라서 다르겠지만, 나같은 경우는 댓글에서 수정 누르면 기존 트윗 입력창에 기존 입력된 값이 뜨고, 버튼도 트윗에서 수정하기로 바뀐다. 당연히 이벤트를 분리했어야 했는데.. 분리하지 못했었다.

   1) 수정하기 버튼의 기능은 트윗입력창에 기존값만 올리는 역할하고 트윗버튼을 수정하기 버튼으로 바꿔주는 것 까지.

   2) 값 수정하고 수정하기 버튼 누르면 기존 트윗에 수정된 값 전달.

     핵심은 로직분리.!!

8. 리액트에서 개발서버에 올릴때, CSS 파일으 bundle로 하나로 묶는다. 그래서 클래스 네임 잘 지어야함.. 겹치면 바로 적용됨 -_-

 

리액트FontAwsome 사용법

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

설치후 적용하고자 하는 페이지에 가서

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; //기본import
import { faShareSquare} from '@fortawesome/free-solid-svg-icons';

....(중략)

 <span className="wetube-message"><FontAwesomeIcon icon={faShareSquare} /></span>

기본원리는 svg에서 꺼내 쓰는 것.

폰트어썸 홈피에서 원하는 아이템 이름 확인 후 카멜케이스로 추가 import해서 사용하면 됨.

 

CSS 전처리기 : Sass

css를 더욱 편리하게 사용하도록 도와주는 도구이고, less, stylus 등이 있다.

1. 설치는 한줄이면 된다.

npm install -g sass

2. 특징 

    1) 잘쓰는 스타일을 변수에 저장하여 관리할 수 있음.   !global 플래그 사용하면 변수를 전역으로 사용가능

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2) 중첩 : HTML 처럼 부모자식관계처럼 css를 보이게 할 수 있음. 중첩안에서 & 키워드로 상위선택자를 참조해서 치환할 수 있음. 

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3) 연산가능

4) import 가능

5) 재활용가능 (선언하기 : @Mixins, 포함하기 : @include)하며 Mixin은 함수처럼 매개변수 가질 수 있음. @content로 원하는 부분에 스타일 블록 전달 할 수 도 있음. 

6) 확장(Extend) 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 사용.

7) 함수, 조건문, for, while 등도 사용가능하다.

참고자료 :https://heropy.blog/2018/01/31/sass/