>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를 사용하는 이유
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;
}
Author And Source
이 문제에 관하여(>wecode 12 React: Router & Sass), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@songbetter/wecode-12-React-Router-Sass저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)