[React] 템플릿 코드(Code) 살펴보기

Template Code 살펴보기

React 개발 환경 구성 01/02를 통하여 형상관리 툴을 이용하여 개발할 수 있는 환경을 구축하였습니다. 템플릿의 첫 페이지를 보았고 정상 작동하는것을 확인 하였습니다. 코드는 메뉴들과 페이지들이 어떻게 구성 되어 있고 어느 부분을 수정하는지를 살펴볼 것입니다. API를 통하여 통신하는 방법과 MariaDB에 직접 접속하여 핸들링을 하는 방법도 살펴봅니다. MariaDB는 WSL MariaDB 서버 환경 구성 01/02에서 구성한 환경을 이용하여 테스트를 하겠습니다.

작업 내용

로고 변경
페이지 연결
API 통신
DB 핸들링

모든 작업은 vscode에서 실행합니다. vscode에서 Control + ` 를 누르고 터미널이 실행된 상태로 #npm start 를 입력하여 브라우저에 실행시킵니다.

1. 로고 변경

vscode를 이용하여 왼쪽 위의 로고를 변경하도록 하겠습니다.
Command+Shift+F 또는 왼쪽의 돋보기 버튼을 누르면 찾을 문자와 변경 문자를 넣을 수 있는 공간이 나옵니다. 여기서 찾을 문자는 brand="Material Kit React" 변경 문자는 brand="LINGSSOFT" 로 입력 후 전체 변경을 누릅니다.

실시간으로 로고 네임이 변경된것을 확인할 수 있습니다. 로고는 원하는 문자를 넣어주세요.

2. 페이지 연결

explorer window 의 views폴더와 index.js 파일에 작업을 하게 됩니다.
페이지는 페이지와 섹션으로 구성이 됩니다.

페이지를 연결하는 순서

views 폴더에 새로운 폴더와 작업 파일을 만듭니다.
index.js 파일의 page를 import를 합니다.
<Switch> 태그안에 import한 page 이름을 넣습니다.

3. API 통신

DB편 작성 시 내용 추가 예정

4. DB 핸들링

DB편 작성 시 내용 추가 예정

여기까지 템플릿 코드 살펴보기 과정이 끝났습니다.

다른 부분이 있으면 문의하기를 통하여 남겨주세요.

다음글은 사이트맵 작성 글을 올리도록 하겠습니다.

PS. 퇴근후 틈틈히 글을 쓰고 있느라 업데이트가 늦어지고 있습니다.

작성되는데로 내용을 채워놓고 추신글은 삭제하겠습니다. 😓😓😓

이전 목록 다음

history

20230205 : ps 글 추가

20231007 : 목록 네비게이션 추가