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 복습할 겸 댓글 기능 만들어보기
profile
포기하지 않는 이상 도착하게 돼있다

0개의 댓글