1. index.html
- SEO 최적화
- (기종별) 바로가기는 manifest.json에
<div id="root"></div> <!-- 리액트로 구동되는 곳 -->
2. index.js
컨텐츠 섹션별 컴퍼넌트 세팅 (헤더 & 푸더 & 슬라이드)
Fd.js
Hd.js
Slide.js
3. 웹기능사 상단
3-1. Header 상단 네비 만들기
header#hd>.container.d-flex.justify-content-between.align-items-center>h1>a>img^^ul#gnb.d-flex>li*4>a
3-1-1) Hd.js
Hd.js를 export하는 두가지 방법
3-1-2) Hd.js를 App.js에 임포트하기
App.js는 index.js에 연결되겠지
다음과 같이 화면 노출
3-2. 자바스크립트 x 부트스트랩
3-2-1) 부트스트랩 설치하지 말고, index.html에 cdn 붙여넣기
3-2-2) 퍼블릭에 CSS 폴더 만들고, index.html에 연결
리액트 컴파일이 필요없는 소스( ./css/millet.css)는 퍼블릭 폴더 안에 넣어 렌딩 최적화
3-2-3) Hd.js에 부트스트랩 작업
테두리 없애고
검게 버튼은 흰색+검은배경
하얗게 버튼은 반대로 처리
4. onClick 연결
onClick = 온클릭 이벤트 안에.. 실행식?NOoooo
{ "실행하겠다~"는 함수선언 }을 저장
4-1. 두 가지 방법
4-2. 매개인자가 있는 함수를 사용한다면?
onClick = { ( ) => { bgColor('bg-dark') } 만 사용할 수 있음 (매개인자 有)
결과물
