Arcane (3) - 역할 분담 및 개발 시작

1. 역할 분담

- 본래는 기능별로 역할을 분담했어야 했지만 당시 우리는 화면별로 나누어서 구별하기로 하였다.

• 나
  1. 메인 화면 및 기능
  2. 전적 검색 화면 및 기능
  3. 커뮤니티 페이지 화면
  4. 로그인 페이지 화면
• 상훈
  1. 챔피언 정보 화면 및 기능
  2. 커뮤니티 페이지 기능
  3. 로그인 페이지 기능
  4. 마이페이지 화면 및 기능

원래는 화면만 가지고 나누었었지만 개발하면서 서로 부족한 부분을 매꿔주고 한명이 일이있어서 작업이 밀릴때에는 다른 사람이 맡은 부분도 서로 도맡아서 작업하다보니 문서상으로 보기엔 서로 다른 부분을 개발한것 같아도 프로젝트의 전체적인 코드 진행 구성이나 다른사람이 코딩한 부분도 서로 잘 이해하고있다.

(+ 원래는 개발 진행 과정을 문서로 기록해 뒀어야했는데 처음이라 그런거 생각 않하고 개발만 무작정 하다보니 gitHub의 커밋 말고는 기록된게 없다 ㅠ,ㅠ 다들 프젝 진행하실땐 귀찮더라도 꼭 문서화해서 기록 남기세요!!)

 

2. 개발 시작

드디어 대망의 개발 시작....

처음에 개발은 금방할 줄 알았다. (이땐 몰랐지 점점 기간이 늘어날줄은...)

원래 첫단추를 잘 끼우는게 중요했지만 우린 그저 열정만 가득해서 빠르게 개발에 착수하다보니까 첫단추를 좀 삐둘어지게 끼웠다...

해당 포스팅은 이미 종료된 프로젝트에 대한 간략한 정리 및 후기 글이므로 너무 상세한 개발 방법이라던가 코드 작성법 및 그 외 상세한 설명은 생략되어 있습니다. (궁금하시거나 물어보실게 있으시면 메일주시거나 댓글로 달아주세요!)

 

본래라면 대략적으로

• DB 구상 및 작성 → API 설계 → 서버 구현 → 프론트 구현 → 배포 → 개발 진행

위와 같은 순서로 개발하는게 이상적이었을거라 생각한다. (중간중간 테스트코드 작성해서 테스트도 꼭 했어야했는데..!)

하지만 우리는... 개발 (서버 구현 + 프론트 구현 + API 설계 + db 구현, no 테스트코드...) → 배포

순으로 끔찍하게 해버렸다 ㅋㅋㅋ;;;

 

단순히 개발이라는것에 모든걸 한번에 하려 했던것이다.

지금돌이켜 다시 보면 참 못나게 개발했지만 그래도 이런 경험이 한번 있었기에 좀 더 나은 내가 된거라 생각한다 :)

 

2-1. 개발 준비

개발에 들어가기에 앞서 우선 깃허브 repository를 생성해준다.

우리는 하나의 repository를 가지고 2명이서 개발을 하려 했기에 한명이 repository를 생성하고 다른 한명을 초대해서 공동협업 repository로 사용하였다. 

https://github.com/ 

GitHub: Let’s build from here

repository 생성

폴더 이름은 Arcane으로 하고 README 파일은 폴더 생성시에는 하지 않았다 (먼저 체크해도 상관은 없음).

.gitignore은 처음엔 추가하지 않았지만 개발하고나서 추가해줬다 (나중에 생길 node_module 넣어주면 댐)

 

repository 협업

폴더 생성 이후 해당 폴더로 들어가서 Settings으로 가서 좌측의 Collaborators에 들어가서 Manage access를 통해 같이 작업하고자 하는 사람을 초대해주고 상대방이 이를 수락하면 서로 하나의 repository를 가지고 같이 작업할 수 있다.

단, 단점은 repository는 직접 생성한 사람의 깃허브에만 남기때문에 본인의 깃허브에도 이를 가지고 오고 싶다면 본인의 깃허브에 따로 폴더를 만들고 해당 폴더에 같이 작업한 폴더를 clone해주면 된다.

 

위처럼 작업소를 만든 후에 해당 작업소를 각자의 컴퓨터에 clone해서 작업을 진행하였다.

우리는 이번 프로젝트에선 gitHub Desktop을 사용해서 깃을 관리해 보았다. (나름 편리한듯 불편한 느낌? 다음엔 안쓸듯)

https://desktop.github.com/

GitHub Desktop

 

본 개발 이전에 우선 폴더를 분할 해주었다.

프로젝트 폴더 분할

크게 Arcane이라는 폴더 내에 front와 server로 나누어서 폴더를 생성해었다 (node_modules는 gitignore에 들어갈꺼라 신경 안써도 됨).

front에선 create-react-app을 통해 react 프로젝트를 생성해 주었고

server에서는 router별로 폴더를 분할해주고 app.js 파일을 생성해 메인으로 서버를 작동시키도록 했다.

2-2. 서버 구현 (node.js + express)

우리는 프론트를 react를 사용해서 구현하기로 했기에 서버 또한 같은 javaScript를 사용하는걸로 구현하고자해서 node.js를 사용했고 프레임워크로썬 express를 사용했다. 서버와 프론트 개발 모두 VSC(Visual Studio Code) 로 진행하였다.

https://nodejs.org/en/

Node.js

 

node.js + express로 서버를 구현하는 방법은 따로 적진 않겠다 (위에서 말한것도 있고 구글에 검색하면 좋은 정보가 넘쳐 흐른다.) 

기본적인 서버를 구현한 다음엔 우리가 구현할 페이지를 기준으로 크게 router를

• auth(로그인 관련)
• post(커뮤니티 관련)
• summoners(전적 검색 관련)
• mypage(마이페이지)

로 나누었다.

 

router폴더를 따로 만들어서 router.js 파일들을 관리하고 각 라우터 별로 사용할 데이터와 데이터를 활용해 작동할 동작들을 data 와 controller로 분리해서 관리하였다.

폴더와 파일들의 포함관계를 표현하자면 아래와 같다.

• server
  • app.js
  • router
    • auth.js
    • post.js
    • summoners.js
    • mypage.js
  • controller
    • auth.js
    • post.js
    • summoners.js
    • mypage.js
  • data
    • auth.js
    • post.js
    • summoners.js
    • mypage.js

역할별로 파일들을 나눠서 관리하면 후에 유지보수하기도 편리하고 개발시에도 오류 수정 및 관리가 훨씬 용이했던것 같다.