1. 터미널에서 client 디렉토리로 이동 후 react-router-dom 설치 2. Routing 파일 내에 react-router-dom과 routing 할 component import 3. 함수에서 Router를 return 4. 복습 겸 이해를 돕기 위한 App.js (Routing) 전체 코드
짜구's WIKI
Studying Front-end
Studying Front-end
1. 터미널에서 client 디렉토리로 이동 후 react-router-dom 설치 2. Routing 파일 내에 react-router-dom과 routing 할 component import 3. 함수에서 Router를 return 4. 복습 겸 이해를 돕기 위한 App.js (Routing) 전체 코드
레이아웃 잡을 때, flexbox를 즐겨쓰는데 가끔 헷갈릴 때가 있다. 그럴 때마다 참고하는 사이트가 있는데 https://heropy.blog/2018/11/24/css-flexible-box/ 여기이다! 제목답게 진짜 완벽하다. 그 외에도 좋은 글이 많아서 시간 날때마다 보면 좋을 것 같다.
오늘의 정리 1. Navigation을 클릭하면 해당 Section으로 부드럽게 이동하는 기능 구현 2. Coding HTML (먼저 HTML에서 Navigation에 dataset을 이용해 이동할 section name을 넣어놓는다.) JS nav__menu.addEventListener(“click”, (event) => { const target = event.target; const link = target.dataset.link; const elem = document.querySelector(link); elem.scrollIntoView({ behavior: “smooth” }); }); 3. 설명 navbar에 click event를더하고, event parameter의 target을 이용해 클릭한 […]
오늘의 정리 프로젝트를 하면서 Branch를 사용하게 되어서 까먹지 않게 정리해놓기! 브랜치 확인 브랜치 생성 브랜치 이동 (master <-> branch) 브랜치 생성과 체크아웃 한번에 하기 원격저장소에 브랜치 push하고 로컬-원격저장소 브랜치로 setting하기
오늘의 정리 1. 스크롤을 내릴 때 transparent => 색상이 변하는 기능을 구현하기 2. Coding const header = document.querySelector(“#header”); const headerHeight = header.getBoundingClientRect().height; window.addEventListener(“scroll”, () => { if (window.scrollY > headerHeight) { header.setAttribute(“style”, “background: white;”); } else { header.setAttribute(“style”, “background: transparent;”); } }); 3. 설명 해당 DOM의 높이를 변수로 잡는다. – getBoundingClientRect().height; window에 scroll 이벤트를 더한 […]