🔍Project Overview

1. Summary

👉 Purpose

기본적인 커뮤니티 기능을 오직 자바스크립트와 리액트로!!

리액트의 기본기를 충실히 다지는 것을 목표로 상태관리 라이브러리(리덕스, 몹액스, 리코일 등)를 빼고 만들어보기!

Develop function of basic community with Javascript, CRA without state management library (redux, mobx, recoli,,) aiming to strengthen the basics of React.

코드의 확장성을 생각하며 개발을 진행하기!

Thinking about the extensibility of the code in developing.

디자인에 따라서 컴포넌트 분리를 효율적으로 할 수 있는 방법을 고안해내기!

Inventing a efificent way to seperate components according to design.

폴더의 구조에 대해서 알아보고, 나만의 폴더 구조를 구성해보기!

Learn about the folder structure and build my own folder structure.

Atomic Dseign에 대해서 알아보고, 왜 리액트는 Atomic Design인지 생각해보기

Think about why React use Atomic Design.

👉 About

Title : "MintCamp"

Base : CRA, JavaScript

Styles : styled-component

2. Folders Structure

> components
> containers
> pages
> routers
> utils
> styles
> > assets
> > ui

Components (presentation components)

UI의 여러조합, 목록 밑 차트 같은 기능단의 가장 작은 단위

Smallest unit of functional groups such as multiple combinations of ui and charts below the list.

Containers (container components)

컴포넌트의 모음으로써, 데이터를 컴포넌트에 전달하고 사용자 행동에 따른 액션을 수행

Collections of components (1:N) transfers data to the components and performs actions accoring to user actions.

Pages

하나의 페이지, 헬멧의정보와, 초기 요청할 서버 테이터, 컨테이너를 1대1 대응함

Responsible for one page, Basically responds 1:1 with Helmet information, server data initially requested from the server, and container.

Routers

SPA를 라우팅하는 곳으로, react-router-dom을 사용함

Page to route SPA, Using 'react-router-dom'
Base : RootRouter

Utils (common utility)

공통으로 사용하는 커스텀 훅이나 기능들이 있는곳으로,
서버통신에 필요한 axios파일이나, 기타 날짜변경 등과 같은 공통함수가 만들어져있는 파일들이 존재

A file of functions that are commonly used including custom hooks.
Include axios module setting file, that makes a request ro the server.
ex) api.ts or setupAxios.js
Include commafy, lpad, commondate, history function file.

api call sample

import api from 'src/utils/api';

api
.get('url', {
  data: 'value',
})
.then(response => {})
.catch(e => {});

Styles

assets : A file containing images and fonts file..

ui : smallest unit of ui (ex)Button.js)

3. Setting file

원활한 개발진행을 위해 린트와 프리티어 설정을 하였고, env파일을 두어 BaseUrl 및 기타 리소스들을 관리하였다.

.env .prettierrc.json .eslintrc.json package.json jsconfig.json

4. DO NOT COMMIT FOLDER & FILES!!

아래 파일들은 깃헙에 커밋&푸시 하지않도록 한다!

.vscode
.idea
.eslintcache
node_modules
build
pakage-lock.json
yarn.lock
yarn-error.log