[TIL] 2020/10/10
Today, I Learned
- fetch vs axios
- props check module : prop-types
- 노마드 코더의 클론 코딩(영화 웹 서비스) 해보기 clear : 내가 만든 사이트 링크
- react에서 라우팅을 하도록 도와주는 패키지 : react-router-dom =>
HashRouter와 Route 컴포넌트를 이용해서 라우팅을 해주기. 최상위 js파일에 라우팅을 해주는 식!.
이 때, 라우터 컴포넌트에는 path와 component props를 넣어줄 수 있다(임의의 변수는 넣어줄 수 없음).
또한, a태그와 유사한 Link(react-router-dom으로부터 import)태그를 이용해서 라우팅을 해줄 수 있다(a태그처럼 클릭했을 때).
그리고 이 Link 태그에 to 옵션으로 pathname, state props를 넘겨줄 수 있다.
Link to로 라우팅할 때는 디폴트로 props 가 전달됨!
이러한 props에는 history 키가 있는데 여기에는 각종 메서드가 있고,
이번에는 push를 이용해서 리다이렉트 요청을 해보았다. push('/') 이런식으로 사용.
- 구조 분해 할당을 더욱 효율적으로 이용해보았다. react를 쓸 때는 웬만하면 구조 분해 할당으로 변수를 할당받자
- 오늘 배운 그리고 복습한 css :
1) box-sizing: border-box; => padding, border을 자동으로 없애줌
2) border-radious : Xpx; => 모서리 부분의 둥근 정도를 픽셀 값으로 나타내어 설정
3) @media only screen and (max-width : 600px) {} => max-width가 됐을 때(가로 폭이) 중괄호 안의 설정이 적용됨(반응형)
4) not selector => <tag>:not(.className) {} => 모든 태그에 적용하되(tag에 지정해준 태그만) not()안에 있는 태그만 제외하고 적용할 때 씀
5) text-transform : uppercase or lowercase
6) property value 종류 : initial(dafault), inherit, length, %, auto
Planning to Study
- 클론 코딩을 가지고,
1) 검색기능 구현해보기
2) 각 디테일 페이지에 받아온 영화 개별 정보로 꾸며보기 + 예고편 링크로 연결해주는 a태그 만들기
3) express.js 복습할 겸 댓글 기능 만들어보기
Author And Source
이 문제에 관하여([TIL] 2020/10/10), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@0715yk/TIL-20201010
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
HashRouter와 Route 컴포넌트를 이용해서 라우팅을 해주기. 최상위 js파일에 라우팅을 해주는 식!. 이 때, 라우터 컴포넌트에는 path와 component props를 넣어줄 수 있다(임의의 변수는 넣어줄 수 없음). 또한, a태그와 유사한 Link(react-router-dom으로부터 import)태그를 이용해서 라우팅을 해줄 수 있다(a태그처럼 클릭했을 때). 그리고 이 Link 태그에 to 옵션으로 pathname, state props를 넘겨줄 수 있다. Link to로 라우팅할 때는 디폴트로 props 가 전달됨! 이러한 props에는 history 키가 있는데 여기에는 각종 메서드가 있고, 이번에는 push를 이용해서 리다이렉트 요청을 해보았다. push('/') 이런식으로 사용.
1) box-sizing: border-box; => padding, border을 자동으로 없애줌 2) border-radious : Xpx; => 모서리 부분의 둥근 정도를 픽셀 값으로 나타내어 설정 3) @media only screen and (max-width : 600px) {} => max-width가 됐을 때(가로 폭이) 중괄호 안의 설정이 적용됨(반응형) 4) not selector => <tag>:not(.className) {} => 모든 태그에 적용하되(tag에 지정해준 태그만) not()안에 있는 태그만 제외하고 적용할 때 씀 5) text-transform : uppercase or lowercase 6) property value 종류 : initial(dafault), inherit, length, %, auto
- 클론 코딩을 가지고,
1) 검색기능 구현해보기
2) 각 디테일 페이지에 받아온 영화 개별 정보로 꾸며보기 + 예고편 링크로 연결해주는 a태그 만들기
3) express.js 복습할 겸 댓글 기능 만들어보기
Author And Source
이 문제에 관하여([TIL] 2020/10/10), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0715yk/TIL-20201010저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)