스파르타코딩클럽 내일배움캠프 41일차

오늘 일과 간단 요약

1. 프로젝트
2. ....

 

 

 

 

 

 

Github Pull Request 하기

주말 내내...는 아니고 금요일과 토요일 그리고 일요일 오전까지 열심히 기능 구현 완료한 것들을 이체 합칠 차례였다.

 

우리는 크게 두 가지 기능으로 나누고 시작했었는데,

 

• Board (게시판)
• Comment (댓글)

 

이렇게 나누고 아래에 기능에 따라 세부적인 브랜치를 만들어서 거기서 작업을 했었다.

처음에는 제대로 된 git flow를 이해하지 못해서 브랜치를 잘못 나눠서 update를 제외하고 만들었던 기능을

그냥 board에 합치고 board-update 브랜치에 나머지 추가 기능을 합쳤다.

 

브랜치는 이런 식으로 구성되어 있다

• feature/board-update (board 기능 최종 버전)
  • feature/board-img
  • feature/board-patct
• feature/comment (comment 기능 최종 버전)
  • feature/comment-create
  • feature/comment-update
• style (CSS 관련 작업)

 

develop 브랜치를 제외한 기능들 브랜치였다.

사실 두 번의 프로젝트를 하는 동안 제대로 git flow를 따라서 해본 적이 없었고, 브랜치 역시 이런 식으로 세분화해서 이용해 본적이 처음이라서 이번 프로젝트 내내 화면 공유하면서 다같이 했었다 ㅋㅋㅋ

그런데 그래서 더 좋았던 것 같다.

내가 실수할 것 같으면 조원들이 바로 알려주기도 하고 나도 다른 사람 PR 만들 때 봐주기도 하고...

이런게 바로 집단지성의 힘이릴까...ㅋㅋㅋ

 

지금 현재는 모두 병합되어서 develop 브랜치에 모든 기능을 합친 상태이다.

아직 CSS는 되지 않아서 오늘과 내일 중으로 모두 완료할 예정이다.

 

 

 

 

 

CSS 작업

우리는 그래도 기능을 전부 완료했기 때문에 조금 여유롭게 CSS를 할 수 있었다.

초반에 UI를 먼저 작업하는 팀들도 있었는데, 우리는 우선 기능부터 만들어보고 결정하기로 했었어서 오늘 오전 내내 관련 회의들을 했다.

 

최종적으로 만들어진 페이지

그래서 다시 피그마에 들어와서 이런저런 회의를 하고 색상도 정하고,

어떤 식으로 화면을 구성해야 예쁠지 고민하고 결정한 페이지이다.

 

확실히 다같이 적극적으로 의견을 내면서 통일해가니까 좋았다.

(우리 조 최고...!)

 

그러고 나서 다시 CSS 역할을 분담했다.

메인페이지/디테일 페이지로 역할 나누고 그 안에서 또 역할을 나눴다.

어제 지영님이 미니홈피 틀을 만들어주신 덕분에 디테일한 부분만 수정하면 되었다...!

 

나는 메인페이지 아래에 사진이 뜨는 boardlist 부분 css를 맡아서 진행했다.

 

 

 

 

 

css hover event

https://freefrontend.com/css-card-hover-effects/

22 CSS Card Hover Effects

 

카드 컴포넌트를 어떤 식으로 예쁘게 꾸밀까 하다가 우리는 반려동물 이미지가 포인트니까,

메인페이지에서는 이미지만 나오고 마우스를 그 사진에 올렸을 때 제목이 보이게 하도록 만드는 걸 맡았다.

 

처음에는 카드 뒤집기 처럼 flip card 형식을 쓰려고 했는데, 조금 정신사나울 수 있어서

hover event를 하는 걸로.

그래서 부트스트랩이나 material UI 찾아보다가 우연히 저 사이트를 보고 이걸 리액트화(?) 시켰다.

 

사이트 들어가보면 다양한 hover effect들이 있고 이 중에 내가 하고 싶은 demo에 들어갔다.

html, css 코드들로 되어 있어서 스타일 컴포넌트를 이용하려고 리액트 형식으로 바꿨다.

생각보다 어렵지 않게 바꿔서 메인페이지도 예쁘게 바뀌었다!

 

아직 style 전부 바뀐게 아니라 내 껏만 commit 하고 push해버렸다.

 

 

 

 

우리 조 git flow

아까 언급했던 것처럼 처음으로 깃허브로 제대로 협업하는 기분이 든다.

브랜치도 나눠서 각자 작업하고 병합도 해보고, issue도 만들어보고 pull reqeust도 제대로 보내보고...

프로젝트 끝나고 협업하는 흐름을 글로 정리해봐도 괜찮을 것 같다.

 

현재까지의 git graph

이런 식으로 브랜치가 새롭게 나왔다가 병합되고 등등...

처음 해봐서 너무 신기하고 재미있다!

그거랑 별개로 혹시나 터미널에서 마음대로 명령어 쳤다가 삭제될까봐 두렵기도 했었다 ㅋㅋㅋㅋ

 

심지어 초반에 저 feature/board 부분을 실수했었기 때문에...ㅋㅋㅋㅋㅋ

그래도 그 이후에 잘 수습할 수 있어서 다행이다. 물론 지금도 아직 팀원들과 함께 화면 공유하면서 하기는 한다.

이런 다채로운 브랜치들 처음 보기도 하고 사소한 내 실수 때문에 전체가 사라질 수 있기 떄문에...ㅠㅠ

다른 기능 구현이나 css 부분보다 깃허브 쓰는 부분이 더 어려웠다.

진짜 프로젝트 끝나면 꼭 협업할 때 깃허브 쓰는 부분을 꼭 정리해둬야겠다.

그리고 소스트리 공부해보기...!!

 

예전부터 나는 아예 터미널로만 명령어 치고 깃도 터미널에서 커밋하고 푸쉬했었는데,

소스트리라는 좀 더 쉬운 걸 가지고도 깃허브를 사용할 수 있다는 걸 알게 되었으니 한 번 사용해봐야지.

터미널이 확실히 더 편하긴 한데 전체 git flow 흐름을 볼 때는 좀 모르겠어서 소스트리로 보는 법도 배워야지.

새로운 걸 알아간다 ㅎㅎ

 

 

 

 

 

 

짧은 일기

기능 구현 완료는 어제 끝났는데 전부 합치고 그 과정에서 일어난 충돌을 해결하고...

CSS를 오늘 안에 끝낼 줄 알았는데 브랜치 합치는 과정이 생각보다 길어서 내일 안으로 style 역시 마무리 될 것 같다.

 

그래도 우리조는 소통도 진짜 많이하고 거의 하루종일 마이크를 키고 있는 것 같다.

바로바로 소통하고 바로 화면 공유해서 물어보고...너무 즐겁게 프로젝트 하는 중이다.

비록 몸은 피곤하지만...ㅋㅋㅋㅋㅋ 그래도 아직까지 프로젝트 하는게 재미있어서 다행이다ㅋㅋㅋ