ZEJE FrontEnd 개발 문서

📂 폴더 구조

💻 ZEJE-FrontEnd
 ┣ 📑 package.json
 ┣ 📑 App.js
 ┣ 📑 index.js
 ┣ 🗂 node_modules
 ┗ 🗂 src
   ┣ 🗂 assets
   ┃ ┣ 🗂 icons
   ┃ ┗ 🗂 images
   ┣ 🗂 components
   ┃ ┣ 🗂 common
   ┃ ┣ 🗂 home
   ┃ ┣ 🗂 Around
   ┃ ┗ 📑 index.js
   ┣ 🗂 navigation
   ┃ ┣ 📑 StackNavigator.js
   ┃ ┗ 📑 TabNavigator.js
   ┣ 🗂 screens
   ┃ ┣ 🗂 Home
   ┃ ┣ 🗂 Around
   ┃ ┣ 📑 HomeScreen.js
   ┃ ┣ 📑 MyListScreen.js
   ┃ ┣ 📑 AroundScreen.js
   ┃ ┣ 📑 RememberScreen.js
   ┃ ┗ 📑 index.js
   ┗ 🗂 styles
     ┣ 📑 font.js
     ┣ 📑 layout.js
     ┗ 📑 theme.js

01. assets

icons에는 svg파일만 저장할 것

index.js 파일에 아이콘 포함 예시

export {default as GoBack} from './GoBackIcon.svg';
export {default as Map} from './MapIcon.svg';

import 하기 편하도록 'Icon'은 떼고 export 한다.
png파일은 images 폴더에 저장한다.

02. components

특정 탭 바에서만 쓰이는 컴포넌트는 각 폴더에 모아둔다.

Home, MyList, Around, Remember...

새로운 컴포넌트를 만들면 index.js에 포함시킨다.

여러 스크린에서 사용되는 컴포넌트는 common 폴더에 만들어 재사용한다.

common 컴포넌트 사용법

03. navigation

현재 내비게이션 구조

04. screens

특정 탭 바에 해당하는 하위 스크린은 각 폴더에 모아둔다.

Home, MyList, Around, Remember...

새로운 스크린을 만들면 index.js에 포함시킨다.

05. styles

font.js layout.js theme.js

⛓ 내비게이션 구조

ㅇㅇㅇ

💫 common 컴포넌트 사용법

ㅇㅇㅇ