React 파일 구조 세팅 (+ VSC ES7 React/Redux/GraphQL/React Native snippets)

기본 로그인 기능을 보일러플레이트(Boiler Plate)로 만들기 위해 리액트 앱을 만든 후 파일 구조를 세팅했다. (보일러플레이트: 자주 쓰이는 기능을 재사용할 수 있게 만들어 놓은 후 재사용하는 코드)

처음 create-react-app을 이용해 리액트 앱을 만들면 다음과 같은 파일 구조가 생성된다.

개발은 주로 src 폴더에서 진행된다. public 폴더에 저장된 파일들은 퍼블릭 환경에서만 쓰일 수 있기 때문에 Webpack이 처리할 수 있도록 src에 파일들을 저장해 주어야 한다.

 

로그인 보일러플레이트 만들기

src 폴더를 다음과 같이 수정한다.

1. 테스트를 위한 App.test.js와 로고 이미지인 logo.svg를 삭제
2. Redux를 위한 폴더인 _actions와 _reducer 생성
3. components 폴더 생성
   1. 웹 페이지들을 저장할 components/views 생성
   2. components/views/(페이지)/Section : 해당 페이지에 관련된 css파일이나 components 저장
4. App.js: Routing 관련 일 처리
5. Config.js: 환경변수 등 저장
6. hoc(Higher Order Component) 폴더 생성
   • 예를 들어 Auth hoc를 생성한다면, 이 안에 넣은 컴포넌트들은 해당 유저가 해당 페이지에 들어갈 자격이 되는지 검사한 후에 진입할 수 있다.
   • hoc는 function
7. 여러 곳에서 쓰이는 것들을 저장할 utils 폴더 생성

---

ES7 React/Redux/GraphQL/React Native snippets

리액트 개발자라면 거의 필수라고 한다. 키워드를 입력하면 바로 컴포넌트를 만들어 준다.

• rce : class componet 생성
• rafce : allow function component 생성
• rfce : function component 생성

짱 편함