[20210629] 스터디 프로젝트 제작기 - React 프로젝트 구조 설정과 로그인 페이지 작성중

 

이번 스터디 프로젝트 주제 : 주차장 공유 웹어플리케이션

 

 

[ UI React 프로젝트 생성 ]

 

구름ide 컨테이너를 깃과 연결하여 이용중

 

- index.js
src 폴더에서 메인 프로그램 역할을 해준다.

여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표출한다.

- App.js
src 폴더에서 컴포넌트를 정의하는 파일. 실제로 화면에 표시되는 내용 모두 여기서 정의.

- index.html
사진 상으로 안보이지만 public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다.

이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다.

- Root.js

Router 역할. 웹어플리케이션에 BrowserRouter를 적용할 파일.

 

 

 

src 내부 패키지 구조는 내가 편한대로 설정한 것이다.

- Container

store와 view사이에 위치하여 데이터 매핑을 돕는 container.js 파일들의 모음.

state 를 props로 받아서 변경 및 저장하고 데이터의 유효성 체크 또는 여러가지 스크립트가 돌아갈 파일들이다.

- Store

redux 작업을 위한 폴더, 내부에 actions, reducers 로직들이 담겨있는 파일들 모음.

- View

진짜 그냥 딱 html 코드와 화면상 보여질 파일들 모음.

- Repository

axios 로 rest api 호출을 직접할 수 있는 파일들 모음.