Admin 시작 (회사구조)

기본 정보

• 프로젝트명 : 위메프오 어드민
• 프로젝트 성격 : 반응형
• 기준 브라우저 : 크롬 최신 버전

[web.platform] - 어드민 1

• php phalcon 라이브러리를 사용, nginx로 웹서버를 띄운뒤 php, phtml, javascript로 화면 구성

[web.admin] - 어드민 2

• React.js로 화면을 구성 후(CRA), WMPO gateway에 올라가 있는 webService를 직접호출하여 API 통신

React 참고 자료

• cra : https://ko.reactjs.org/docs/create-a-new-react-app.html
• flux : https://haruair.github.io/flux/docs/overview.html
• redux,reducers : https://d2.naver.com/helloworld/1848131
• atomic Design : https://brunch.co.kr/@ultra0034/63
• eslint : airbnb, prettier : https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb - Connect to preview
• evn : https://create-react-app.dev/docs/adding-custom-environment-variables/ https://m.blog.naver.com/legend25/222033372402
• reactHook : https://ko.reactjs.org/docs/hooks-reference.html
• axios : https://www.npmjs.com/package/axios
• immutable.js : https://immutable-js.github.io/immutable-js/

어드민2 사용방법(사전에 yarn 설치)

저장소에서 web.admin을 받은 위치로 가서 yarn i 실행 시킨다.(yarn 설치 권장)

.env.sample 파일을 복사하여 .env 파일을 생성한다. (도커 셋팅에 맞춰 포트번호를 맞춰야 함.)

yarn start로 실행.

 

구조

 

build : 최종 빌드 된 파일, npm build는 서버에서 배포시 스크립트 실행

node_modules : 실제 설치된 package 파일들

public : index

src/component : atomic Design이 적용된 구조(공통 컴포넌트는 코드 리뷰, 회의를 통해 수정 가능, 페이지 개발시엔 수정하지 않는다.)

• atoms: 최소단위 ex)icon, button 등
• molecules: atoms의 모음 ex)input, paging, tooltip 등
• organisms: molecules의 모음 ex)form, modal, tab 등
• templates: 최종레이아웃 ex) loginLayout, listLayout 등

src/library : Utils 성 파일들

src/page : 페이지, 컴포넌트

src/store : redux store (현재 어드민엔 spinner 만 적용되어있음.)

src/styles : 프로젝트 내부 공통 basic css (Scss)

src/App.js : React-route-dom 으로 페이지 관리 및 컴포넌트 연결

src/Route.js : 프로젝트 내 사용 URL Route 모음

.env : evn 셋팅 파일

package.json : 프로젝트 내 사용 할 package 정의

 

 

 

 

 

 

 

 

 

 

src/page

 

여러 페이지 폴더로 이루어져 있음.

api : 공용 api 모음

component : 기본 atomic Design(atoms, molecules, organisms, templates)을 따름.

store : Redux 필요시 사용, 현재는 ContextHook을 주로 사용(https://ko.reactjs.org/docs/hooks-reference.html#usecontext)

utils : 공통 function, constants

container : Database, data 관리, API 통신을 주로 사용. container에서 데이터를 받아 정리하여 하위 컴포넌트들에게 props로 데이터, Function을 내려주는 구조.

 

• 컴포넌트 내부에서 해당 컴포넌트에서만 사용 되는 데이터일경우 컴포넌트 내부에서 API 호출.
• 페이지 내부에서 필요한 component는 개별 생성. 필요시 회의 후 공용 component로 올림.
• 모든 폴더는 index.js로 모아주는 개발방식 선호.
• Class Component 방식보단 Function Component 선호.
• 가이드일뿐 정해진 룰은 없으니 편한식으로 개발해도 상관 없음, 개취

 

 

 

 

 

 

 

 

 

 

 

개선사항

• Store/ContextAPIHook를 적절히 활용한 고도화 적용 - 과도한 props 전달 방지
• SessionStorage 데이터 (좌측 메뉴데이터, 매니저정도) 저장 시점 변경 - 앵귤러에서 admin2 모달창만 띄우는 경우 할때 필요데이터가 없어 재호출 해야하는 상황이 발생
• Route.js 폴더 개선 - 조금더 나은방법이 있을거같은..
• Constants 관리 개선 - Route.js 처럼 상단에 빠져서 공통 상수 관리 - devops 프로젝트엔 시도하려다 완료못한 케이스있음 참고.
• 공통 컴포넌트 고도화 - datePicker, sortable Tree 등등(시홍님이랑 알고있음)
• Immutable.js 활용 - 간단한 오브젝트, 배열은 사용 안해도 되지만 복잡한 데이터엔 적극 활용 추천