2. BootStrap 템플릿을 React 서버에 적용하기.

hong030·2023년 3월 14일
  1. BootStrap 템플릿파일로 React 서버 홈페이지 세팅하기.

부트스트랩이란 웹사이트 디자인을 돕는 프론트엔드 프레임워크이다.
원하는 템플릿을 다운받고, 색깔이나 이름 등 원하는 파츠를 바꾸면 된다.

https://startbootstrap.com
위의 사이트에서 Freelancer이라는 무료 템플릿을 사용했다.

강의 자료를 다운받고, 해당 파일에서 cmd를 통해 npm i 커맨드로 패키지를 다운 받는다

해당 파일에서 client 파일로 이동해 다시 npm i를 다운받는다.

상위 폴더로 이동해 yarn dev 명령어를 통해 서버를 실행한다.

이렇게 서버를 다운받고 실행하는 과정은 똑같다.
해당 파일로 이동 > npm i > cd client > npm i > cd .. > yarn dev

  1. 레이아웃 header, footer 처리하기.

header에는 사이트 이름, 로고 등이 노출되고 내비게이션 메뉴를 통해 원하는 페이지로 이동하게 한다.
footer에는 주소, 라이선스, 공용 등 정보를 노출한다.
header과 footer은 늘 변함없이 노출되어야 한다.

  1. React 페이지 라우팅 적용하기.

컴포넌트를 호출 경로에 따라 매칭해 연결해주는 게 라우팅이다.
이를 가능케 하는 파일이 App.js이다.
route path를 설정하여 사용한다.
줄의 위치에 따라 path의 우선순위가 달라지기 때문에, 잘 입력해야 한다.

profile
자바 주력, 프론트 공부 중인 초보 개발자. / https://github.com/hongjaewonP

0개의 댓글