02_프로젝트 구조

우선 이 리액트 프로젝트의 큰 구조부터 보도록 하자.

 

필자는 프로젝트를 리액트와 타입스크립트를 이용해서 만들었다. 우선 프로젝트의 큰 구조는 아래와 같다.

 

 

 

src파일 안에 api,components,containers,css,img,module파일로 구분했다. ( 프로젝트 진행시 더 추가될진 모르겠다 )

 

api

백엔드와의 api담당 함수들이 들어있다. 로그인,회원가입 등의 정보 전송할때 api를 받아 객체 정보를 받는용도로 사용된다. 주 용도는 token검사를 해서 내가 로그인 상태인지 아닌지 확인하는것과 해당 유저 정보를 받아오는 것

 

components

리액트의 컴포넌트들을 관리하는 폴더

 

이번 프로젝트는 함수형 컴포넌트들로 관리를 했고 이때 들어가는 컴포넌트들을 관리하는 폴더이다.

 

containers

컴포넌트들을 담은 container들을 관리하는 폴더

 

index page,login page 등등 페이지개념을 관리했다. 프로젝트를 라우터(Router)을 사용해서 페이지 관리를 해서 이 라우터들을 모아둔 폴더라고 생각하면 될 것 같다.

 

CSS

각 컴포넌트나 컨테이너들의 css파일들을 모아두었다. css폴더 안에 componets폴더나 containers폴더를 또 만들어서 보기 편하도록 관리해보았다.

특히 이번 프로젝트에서 최대한 스스로 css를 만들면서 하기로 마음먹었다.

 

img

페이지에 들어가는 배경화면이나 로고같은 파일들이 들어가 있다.

 

module

redux를 활용한 상태관리를 했다. 로그인을 해서 서버에서 유저 정보와 프로젝트 정보들을 받아온 후에 우선 redux를 활용해서 상태관리를 하고 필요할때마다 api 요청을 해서 서버 데이터 값을 바꾸는 방식을 택했다.

 

아직 개발중이라 User module만 구현

 

module은 분리해서 사용하는 방식을 택했다. 이 분리하는 방식은 본 블로그의 아래 글을 참조해도 될 것 같다.

 

https://supersfel.tistory.com/147?category=1063079 

26_타입스크립트 & 리덕스