어제 엊그제 팀원분들과 기획 회의,설계를 진행하고 오늘 오후 부터
프로젝트 폴더 초기 세팅을 진행했다.
폴더 디렉토리 구조,리액트 네이티브,expo,리덕스 셋팅까지 끝냈다.
── src
├── components
├── hooks
├── core
│ ├── api
│ └── utils
│
├── types
├── pages
├── static
├── store
│ ├── module
│ │ ├── index.ts
│ │ └── ....modules
│ └── index.ts
└── styles
해당 글을 참고해서 디렉토리 구조를 짰습니다.
위 글의 토대를 그대로 가져오고
프리젠테이셔널 컴포넌트 방식 대신에 훅스로 리듀서와 연결해주는 방법을 선택했기때문에 컨테이너 위치를 훅스로 대신 했다.
하.. 일단은 이름이 리액트 네이티브 니까 리액트랑 크게 안다르겠찌~ 하고 마음 놓고 있었던게 후회된다 ...
생각보다 많이 다르고 세팅해야 할것도 많았다...
대망의 좌절은 폰트 설정이었는데 커스텀 폰트 적용이 어마어마했다.
웹처럼 그냥 css나 html에 넣는 방식이 아니라 당황했다.
useEffect(() => {
//폰트를 불러오는 async/await함수
//IIFE 방식으로 사용
(async function () {
const custumFont = {
NMedium: require("./assets/fonts/NotoSansKR-Medium.otf"),
NBold: require("./assets/fonts/NotoSansKR-Bold.otf"),
NRegular: require("./assets/fonts/NotoSansKR-Regular.otf"),
};
await Font.loadAsync(custumFont);
setReady(true);
})();
}, []);
이런식으로 assets에 위치시킨 폰트 자체를
loadAsync라는 함수 자체로 읽어와야 했다.