>wecode 12 React: Router & Sass

0. 8:30 필라테스

엉덩이 주사맞은 느낌. 오늘도 새로운 근육을 찾았다.
엉덩이 기억상실증 치료중

1. CodeKata with 정원님

오늘 나의 역할은 Driver !

x: 숫자
return: 뒤집어진 숫자를 반환!

  if (x<0){
    let toString = x.toString();
    let sliceX = toString.slice(1);
    let arrX = sliceX.split('');
    arrX=arrX.reverse();
    let joinArr = arrX.join('');
    return Number((toString[0]+joinArr))
  }

  else {
    let toString = x.toString();
    let arrX = toString.split('')
    return Number(arrX.reverse().join(''))
  }
}

python은 [-1::] 이면 거꾸로 뒤집어지던데ㅠㅠ javascript의 숫자는 뒤집을 수 없나....ㅎ.....

2. React: Router & Sass by 멘토 신영님 (오후 세션)

• Framework vs Library
  개발자가 Framework(=개발의 주체) 안에서 개발할 수 있다.
  Library는 개발자가 주체가 되어 필요한 부분을 추가로 받아 사용한다.

Router

import 순서. 패키지 > 컴포넌트 > css등

• BrowserRouter as Router -> Router라고 정의해 줌.
• Switch
• Route 각 경로에 따라 보여질 컴포넌트를 지정한다.
  -> 가독성을 위해 컴포넌트에 쓰여지는 순서대로!

  각각의 역할 찾아보기
  BrowserRouter / Switch / Route

• Higher Order Component 컴포넌트를 감싸주는 것.

  더 알아보기

• onClick 함수이기 때문에 조건문을 추가할 수 있다.

  this.props.history 정보 확인하기

• 같은 route에 있는 css는 모두 같은 기능을 한다. -> Sass를 사용하는 이유

(참고) React-Router

Sass

• nesting 기능. 가장 최상단 ClassName을 component이름으로 하는 게 좋다.
• 변수활용 $ 반복하는 속성.
• %flex-center{} {@extend flex-center;}
• & 선택자 this기능

각코각코

Component 중첩 연습

Header, Feeds, MainRight 각 부분을 Component로 만들면 아래와 같이 간단하게 나타낼 수 있다 !!!!!!!! ㅉㅏ릿해

react의 body 사이즈

body 사이즈가 브라우저 사이즈와 같도록 해야 가운데 정렬을 할 수 있다.

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}