개인프로젝트로 커뮤니티를 만들고 있는데 단지 서버만 만들면 아무 의미가 없을 것 같아서 서버와 분리된 클라이언트를 제작하려고 한다.
클라이언트는 여러 프레임워크 중 SPA방식을 통해서 구성하기 위해서 react를 사용하려고 한다.
Bootstrap
Frontend를 처음부터 구성하려면 시간이 굉장히 오래 걸린다.
Frontend를 구성할 때에 이미 만들어진 것을 가져와서 생산성을 높이도록 도와주는 것이 Bootstrap이다.
사용법
위 사이트는 Bootstrap 공식 사이트이다.
위 사이트에 들어가서 Bootstrap 소스 파일을 직접 다운을 받을 수도 있고, npm 방식을 통해서 다운을 받을 수도 있다고 한다.
내려받기
나는 2가지 방법 중에서 npm 방식을 통한 다운 방법을 택하였다.
나는 다른 환경에서도 바로 bootstrap을 사용하기 위해서
npm install bootstrap@~ -s
방식으로 설치해주었다. 해당 방법으로 설치를 해주지 않을 경우에는 lock.json에 작성이 되지 않아서 나중에 찾기 힘들어질 수 있다.
불러오기
이렇게 설치가 끝나게 된다면 설치한 bootstrap을 불러와주어야한다.
이렇게 css 파일을 불러오면 된다.
사용하기
이렇게 css 파일도 정상적으로 불러왔다면 이제 필요한 것을 찾아서 사용만 해주면 된다.
Bootstrap 공식 홈페이지 -> Docs -> 검색 창에 필요한 요소 검색 -> 맘에 드는 거 복사 붙여넣기
나는 처음에 시험삼아 해보기 위해서 navigation bar를 생성하였다.
grid로 화면 요소 분할만 끝내고 바로 필요한 요소 가져와서 내용을 채워 넣어야겠다.
