[React/Node.js/scss] 프로젝트 레포지토리 초기 설정과 폴더 구조

이번에 1일 1커밋을 같이 시작한 동기들과 1일 1챌린지 사이트를 만들기로 했다. 웹을 먼저 만들고도 마음이 맞는다면 앱 구현까지 생각 중이다. ( 현재는 react 자체도 접한지 얼마 안 된 친구들의 러닝 커브를 고려해 웹만 하기로 했다. )

 

1. Github Repository 만들기

두 가지 방안이 있다. organization / 개인 repository contributor invite.

우리 팀은 이미 알고리즘 팀블로그 할 때 organization을 만들어서 그 org에서 repository를 만들었다.

레포를 만들면 github desktop으로 다운 받는다.

 

깃허브 repository 협업 방법은 DSC UOS 팀 블로그에 내가 올린 글을 참고하면 좋을 듯 하다.

dsc-university-of-seoul.github.io/how-to-use-git/

Git 초보의 Git 협업하기 | DSC UOS

2. 프로젝트 초기 설정

github desktop으로 다운 받은 폴더 안에서 npx-create-react-app frontend를 해서 frontend 폴더를 만들자!

backend는 백엔드 폴더를 만들어서 npm init을 해주자!

혹은 front와 back 레포지토리 두개를 파도 된다!

우리는 그냥 branch를 따로 파서 작업할 예정이다.

eslint와 prettier는 입맛에 맞게 적용하자!

우리팀은 eslint만 적용한다.

 

2-1. react

폴더 구조는 2021 react folder structure 이런식으로 구글링하면 구조를 좀 볼 수 있다.

우리 파일 구조는 저렇다.

route에서 react-router-dom을 이용해 path를 각 page별로 만들어둔다.

page에서 필요한 컴포넌트는 저 component 안에 적용이 된다.

state 관리는 아직 미숙하고 공부할 시간이 별로 없어서 해당 폴더들은 만들지 못했다.

그래서 mobX를 공부하면서 폴더가 추가될 수도 있다.

css는 scss를 사용하기로 해서, 라이브러리 설치를 하고 base를 설정해뒀다!

css 폴더 구조는

base

pages

main.scss

이렇게 이뤄져있어서 base에는 컬러팔레트, 각 태그들의 초기화 등의 정보를 넣어두고 pages에서 page마다의 scss를 넣는다!

main에서 전부 내보내기때문에 클래스나 아이디 명이 같아져버리면 어떤 게 적용될지 알 수없다.

그래서 page 이름을 클래스명으로 가장 상위에 두고 중첩해서 클래스를 사용하면 된다.

 

2-2. node.js / express.js

내가 back은 한 번도 본 적이 없어서 설정을 그냥 npm init과 npm install express --save 하고 express기본구조만 index.js에 넣어뒀다.

백엔드 역시 폴더 구조가 필요할텐데, 해당부분은 공부하면서 알아갈 부분인 듯하다.

공부가 어느정도 되면 또 포스팅 하겠음!