폴더구조2

• 

  [React / TypeScript / API] API 구조 작성은 이렇게 한다. 컴포넌트 호출 시 import { getCoin, getCoinPrice } from "APIs/get"; index가 있어서, 이렇게 선언하면서 사용이 가능해진다. 리액트 템플릿 사면, 이런 구조로 작성된 형태가 종종 있었는데, 왜 그렇게 했는지 이해가 된다. 이 구조가 가장 깔끔하다. index.ts import { getCoins } from "./getCoins"; import { getCoin, getCoinPrice } from "./getCoin"; export { getCoins, getCoin, getCoinPrice }; getCoins.ts import axios from "axios"; export const getCoins = async () => { try { const resp.. React & TypeScript/TypeScript 2022. 12. 16.

• 

  [React] 프론트엔드 폴더 구조 방법론 정리 [펌 + 사견] 이런저런 자료들을 찾아보았다. 결론부터 말하면, 정답은 없다. 정답이 되게 하기 위한 정답에 가까운 구조만이 있을 뿐이다. 오픈소스들 보면서 폴더구조를 참조하는 것도 좋은 방법이다. Ant design Pro https://github.com/ant-design/ant-design-pro 주요 원칙 (결론) 그래도 원칙은 있는 것 같다. 1. 재사용 2. 중복 방지 3. 팀 시너지 증대 위 3가지 원칙을 지키기 위해 나온 것이 multi-Layerd Architecture (다층화 구조) 라고 보면 된다. 리액트에서 추천하는 분류법 (공식문서) 1. 파일의 기능이나 라우트에 의한 분류 최초에 src폴더를 이렇게 만들어봤는데, 폴더별로 가지는 파일 수가 너무 많이 늘어나는 경향이 있었다. 가벼운 프로젝트에.. React & TypeScript/React 2022. 12. 14.