📖 Font Awesome 패키지 설치 SVG Core SVG Core 패키지를 설치하면, Font Awesome에 있는 아이콘(SVG)를 이용할 수 있다. npm i @fortawesome/fontawesome-svg-core Icon Packages Icon Packages를 설치하면, Font Awesome 무료 아이콘을 이용할 수 있다. # 무료 아이콘 npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/free-regular-svg-icons 만약 유료 아이콘을 사용하려면, 밑의 코드를 작성해 추가로 설치하면 된다. # 유료 아이콘 npm i @fortawesome/pro-solid-svg-icons npm i @fortawesome/pro-..

📖 React Router 이해 로딩시 모든 자바스크립트 다운 → 규모가 크면 로딩 속도 느려짐 특정 페이지만 리렌더링 가능 → 속도 빠름, 자원 낭비 X 서드파티 라이브러리로, 공식 라이브러리가 아니다. 설치 및 불러오기 명령어 import 실습 App 컴포넌트 감싸기 실제 index.html에 반영되는 App 컴포넌트를 전역으로 사용하기 위해 scr/index.js 파일에 있는 App 컴포넌트를 감싼다. Home, About 페이지 만들기 Route 특정 주소에 컴포넌트 연결하기 url이 localhost:3000/ 으로 끝나면, Home 컴포넌트를 불러오고 url localhost:3000/about으로 끝나면, About 컴포넌트를 불러온다. 태그로 새로고침 방지 태그를 사용하면, 새로고침이 되기..

🎉 성과 완성한 부분 1. 포트폴리오 웹사이트에 프로젝트를 등록했다. 2. jQuery로 구현한 내비게이션 바를 JavaScript로 구현했다. 완성한 이유 1. 트위터 클론코딩 개발이 끝났기 때문에, 프로젝트 단락 부분에 추가했다. 2. 네비게이션바를 구현하기 위해 jQuery를 이용했는데, 웹사이트가 실행되자마자 메뉴 버튼을 누르면 내가 원한 위치랑 다르게 이동하게 되어서, 고치게 되었다. ✨ 느낀 점 👍 알게 된 점 JavaScript를 이용하여 버튼 클릭하면 부드럽게 해당 위치로 이동시키기 버튼에 해당되는 id를 querySelector로 가져와 homebtn변수의 값으로 넣는다. 이동시키고 싶은 위치의 태그의 id값을 querySlector로 가져와 homescroll변수의 값으로 넣는다. 버튼..

✨ 느낀 점 👍 알게 된 점 window.confirm코드를 이용해 웹페이지 확인창 띄우기 위의 코드는 다른 곳에 함수를 작성하고 함수를 호출하는 형식으로 작성했는데, 바로 함수를 작성해도 상관없다. 바로 함수를 작성하는 방법은 아래와 같다. const Fn = () => { if(window.confirm('메시지')) { () => {...}// 확인을 누를경우 실행할 함수 } else{ () => {...}// 취소를 누를경우 실행할 함수 }} 탭 닫기 전 확인창 띄우기 protect버튼에는 onClick으로 enablePrevent함수를 호출하도록 한다. enablePrevent함수는 이벤트 함수로 탭을 닫기 전(beforeunload)에 listener함수를 실행한다. listener함수는 ev..

Watch Now – 노마드 코더 Nomad Coders nomadcoders.co ❓ 상황 React를 이용해 트위터를 클론코딩하기 전에 hooks에 대해 사전학습이 필요하다는 얘기로 hooks를 공부하기 시작했다. ✨ 느낀점 👍 알게 된 점 특정 조건이 걸린 useInput만들기 const {value} = event.target;은 onChange될때 해당 이벤트가 발생한 태그의 value값을 받는겠다는 의미이다. 유효성 검사 함수를 통해 willUpdate의 값이 true냐 false로 바뀐다. willUpdate가 true일때는 setValue함수로 value값을 넘겨주어 input값이 입력이 되지만, willUpdate가 false가 되면 input에 value값을 넘겨주지 않게된다. 결과적으..