Wecode 28일차

Refactoring

1. console.log, 쓸데없는 주석 지우기

2. 함수, 변수, 클래스 이름 직관적으로 짜기

3. css 속성 순서

• Layout Properties (position, float, clear, display)
• Box Model Properties (width, height, margin, padding)
• Visual Properties (color, background, border, box-shadow)
• Typography Properties (font-size, font-family, text-align, text-transform)
• Misc Properties (cursor, overflow, z-index)

4. reset.scss & common scss

• 협업을 시작할 때 처음에 잘 설정해서 동일한 파일을 가진 상태로 시작하여야 한다!
• reset.scss 파일같은 경우는 인터넷에 찍으면 나온다.
• common.scss는 공통으로 사용할때만!

5. Sass nesting

• sass nesting을 사용하면 어디에 어떤 파일이 속해있는지 직관적으로 파악 가능

6. 비구조화 할당, 구조 분해 할당

• 코드를 좀 더 간결하게 사용 가능

handleInput = e => {
   this.setState({
      value: e.target.value,
   })
   ...
}

// 비구조화 할당 적용
handleInput = e => {
   const { value } = e.target;
   this.setState({
      value: value,
   })
   ...
}

// key-value 이름이 같은 경우 (cf. ES6 객체 단축 속성명)
handleInput = e => {
   const { value } = e.target;
   this.setState({
      value,
   })
   ...
}
const {idValue} = this.state;

7. Boolean 데이터 타입 활용

• 두 가지 중 하나의 답을 고를 때는 boolean 타입을 사용하여 간단히 가능

8. 반복되는 코드는 map함수 사용

// footerData.js
// named export (vs. default export)
export const INFO = [
  {id: 1, content: "도움말"},
  {id: 2, content: "홍보 센터"},
  {id: 3, content: "API"},
  {id: 4, content: "채용정보"},
  {id: 5, content: "개인정보처리방침"},
  {id: 6, content: "약관"},
  {id: 7, content: "위치"},
  {id: 8, content: "인기 계정"},
]


// Footer.js (Footer 컴포넌트)
import { INFO } from './footerData.js'

render() {
  return (
    ...
    {INFO.map(el => {
       return (
         <li key={el.id}>
	   <a href="">{el.content}</a>
	 </li>
       )
    })}

9. import 순서

• 라이브러리
• 컴포넌트
• 함수, 변수 설정 파일
• 미디어 파일
• css 파일