m1ndy5's coding blog

[미니 프로젝트] 우리FISA Calendar 만들기 본문

프론트엔드/java script

[미니 프로젝트] 우리FISA Calendar 만들기

정민됴 2023. 5. 6. 17:27

Github 주소 : https://github.com/minsungChung/2th-FISAgenda
HTML, CSS, JavaScript를 배운뒤 3명의 팀원과 함께했던 미니프로젝트 입니다.

이 프로젝트는 아래와 같은 순서로 진행하였습니다.

  1. 프로젝트 아이디어 생각하기
  2. 서로 구현할 파트 분배하기
  3. github의 issue와 pr을 사용하여 리포지토리 및 코드 관리
  4. merge했을 때 나타나는 에러 해결하기
  5. 다시 2번으로 돌아가서 반복

1. 프로젝트 아이디어 생각하기

2.5일만에 구현해야하는 미니 프로젝트였기 때문에 너무 복잡한 프로젝트는 배제하였고 그 결과 교육일정을 보여주는 우리FISA Agenda를 만들기로 하였습니다. 가장 중점으로 뒀던 부분은 기본적인 기능 (Calendar, Agenda 보여주기)를 구현하는 것이었고, 한 분을 제외하고 모두 깃을 잘 사용해보지 않은 상태여서 깃의 issue와 pr에 template를 정해 사용해보기로 하였습니다.

2. 서로 구현할 파트 분배하기

처음에 분배해야했던 task는 calendar을 만드는 부분과 날씨 api를 가져와 해당 날짜의 날씨를 보여주는 부분을 만드는 것이었습니다.
일단 저는 자바스크립트를 더 사용해보고 싶었기 때문에 날씨 api를 가져와 해당 날짜에 표시하는 task를 맡았습니다.

첫번째 문제 : 기상청 api가 하루의 날씨밖에 보여주지 않음

일단 회의했을 때는 좀 많은 날의 날씨정보를 가져오기로 하였으나 기상청 api는 하루의 날씨정보밖에 제공하지 않았습니다. (중기도 제공하지만 상세하게 제공하는 것이 아니라 원하던 api가 아니었음)
따라서 openweather이라는 사이트의 날씨 api를 사용하였고 5일정보를 가져올 수 있었습니다.(무료는 최대 5일까지)

3. Github의 issue와 pr을 사용하여 협업

Git branch 전략

지금까지 깃허브를 사용하여 팀원들과 함께 협업했을 때는 branch를 따로 신경을 쓰지 않아 merge할 때 충돌이 나는 등의 아주 짜증났던 상황을 많이 겪었습니다. 하지만 이번에 Git Flow 전략을 알게 되고 사용했을 때는 굉장히 편리하다는 것을 알게 되었습니다.


Git flow 전략에 따르면 일단 메인 브랜치와 보조 브랜치를 나눕니다.

  • 메인 브랜치 : main(master), develop
  • 보조 브랜치 : feature, release, hotfix
  • main : 에러가 없어야함 실제 구동되는 코드*
  • hotfix : main에서 오류가 생겼을 때 임시로 구동하는 코드*

이번 프로젝트는 배포는 따로 신경을 쓰지 않았기 때문에 사용했던 브랜치는 main, develop, feature입니다.
일단 자신이 해야할 일을 issue 탭에 작성을 합니다. (issue template을 사용하면 통일화된 format 사용 가능)


그리고 그에 해당하는 코드를 구현하게 되면 push를 할 때 해당하는 브랜치를 따로 만듭니다
ex) feat/databasecrd -> 기능구현/데이터베이스 생성, 조회, 삭제 란 뜻
이후에 feat/databasecrd 브랜치에서 develop브랜치로 pr(pull request)를 보냅니다. (팀원들이 ok 해주면 merge가능)

이또한 pr template을 만들어 사용하면 통일화 된 format을 사용가능합니다.
files changed 탭에 들어가면 어디 부분을 추가하고 변경됬는지 뜨면서 충돌이 날 예정이라면 아주 친절하게 어떤어떤 부분에서 충돌예정이다 라고 알려줍니다. (개인적으로 이 부분에서 조금 신기했던 것 같습니다ㅎㅎ)
그러면 이 때는 손수 비교하면서 알려준 부분을 고치면 됩니다^^
그리고 merge가 완료되면 만들었던 브랜치는 삭제해주면 됩니다.

4. 느낀점

처음으로 깃허브의 기능들을 사용하면서 협업다운 협업을 해본 것 같아 신기했습니다.
좋은 팀원들을 만나서 많이 배우고 진행하는데 재미있었습니다!
한 가지 아쉬운 점은 프론트의 코드에는 관여를 하지 않아서 혼자 짜라하면 못짤 것 같다는 점입니다ㅎㅎ...
그래도 다음주에 뷰 배우고 또 프로젝트를 진행하게 되면 그 때는 프론트도 도전해야겠다는 생각을 했습니다!!!ㅎㅎㅎㅎㅎ