react 기본 구조 생성 및 bootstrap연동
front-end 관련 작업은 react를 이용 하려고 합니다.
window react 개발 환경 설정
window10 환경에서 react 개발환경을 셋팅하는 방법을 간단하게 작성 합니다. 1. node js 2. yarn 3. vscode 3가지를 설치하고 실행하는 상황까지를 정리 합니다. node js 설치를 위해서 https://nodejs.org/ko/do..
kooremo.tistory.com
의 내용을 참고 하여 PC설정 및 초기 페이지 생성을 해주시면 됩니다.
저는 디자인 및 CSS에 대한 지식이 많지 않기 때문에 화면 구성을 위해 bootstrap을 사용할 예정 입니다.
react 에서 bootstrap 사용하기
react에서 bootstrap을 사용하기 위해 우선 bootstrap 패키지를 설치 해줘야 합니다. -npm을 사용하는 경우 아래와 같이 npm install react-bootstrap bootstrap -yarn을 사용하는 경우 아래와..
kooremo.tistory.com
내용을 참고해서 bootstrap관련 모듈을 추가 해주시고 작업을 진행 해주시면 됩니다.
우선 작업할 페이지의 기본 화면을 bootstrap을 이용해서 만들어 주고 해당 화면을 잘라 붙이는 작업을 진행 하겠습니다.
작업한 샘플 페이지는 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>bootstrap test</title>
</head>
<body>
<div class="container">
<div class="row mt-2">
<div class="card w-100">
<div class="card-header bg-primary text-white">DATA SEARCH</div>
<div class="card-body">
<form class="form-inline">
<div class="form-group mb-2 mr-1">
<label for="exampleInputName1">년도</label>
<select class="form-control" id="exampleInputName1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group mb-2 mr-1">
<label for="exampleInputName2">시군</label>
<select class="form-control" id="exampleInputName2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group mb-2 mr-1">
<label for="exampleInputName3">구군</label>
<select class="form-control" id="exampleInputName3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type="submit" class="btn btn-primary mb-2">search</button>
</form>
</div>
</div>
</div>
<div class="row mt-2">
<ul class="nav nav-tabs w-100">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#main_area_1">main1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#main_area_2">main2</a>
</li>
</ul>
</div>
<div class="row mt-2">
<ul class="nav nav-tabs w-100">
<li class="nav-item nav-link active">
main1
</li>
<li class="nav-item nav-link">
main2
</li>
</ul>
</div>
<div class="row mt-1" id="main_area_1">
<div class="card w-100">
<div class="card-header">SEARCH RESULT</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">test1</li>
<li class="list-group-item">test2</li>
<li class="list-group-item">test3</li>
</ul>
</div>
</div>
<div class="row mt-1 d-none" id="main_area_2">
<div class="card w-100">
<div class="card-body">NO DATA.</div>
</div>
</div>
</div>
<footer class="container mt-2">
<div class="row"><div class="col-12 text-center">©2022 Copyright: KOOREMO</div></div>
</footer>
</body>
</html>bootstrap5가 나온지 한참 지났는데 익숙하지 않아 bootstrap4로 진행 하겠습니다.
해당 소스는 cdn으로 작업해서 브라우저에서 확인이 가능 합니다.
상단 검색 영역, 목록 지도를 구분하는 탭, 그리고 데이터가 출력되는 메인, 마지막 바닥글로 되어 있습니다.
지금 설명한 저 영역에 맞게 화면을 자르고 자른 영역별로 폴더 및 파일들을 구성할 예정 입니다.