팀 프로젝트 경험 및 문제 해결

1. 깃허브
2. 컨벤션
3. 프로젝트 이해
4. 파일 구조
5. 코드 리뷰
6. 뒤로가기, 새로고침
7. 동료 평가

1. 깃허브

• 상황 :
  팀원 중 한 명이 feature 브랜치에서 develop 브랜치로 머지할 때 코드 충돌이 발생했다. 이때, 해당 팀원은 기존 local에서 작업한 데이터를 다른데 옮겨놓고 디벨롭에서 풀 받은 후 브랜치를 다시 만들어 푸시 및 머지하는 방법을 선택했다. 결론적으로 feature 브랜치에서 개발 진행 상황이 많지 않은 경우, 이 방법이 효율적일 수도 있다고 생각한다. 하지만 이미 개발을 많이 한 상황이고 feature 브랜치에 커밋이 많이 누적된 상황이라면 커밋 메세지를 하나하나 다시 만들어줘야 하는 불합리한 상황이 발생된다.
• 해결 및 생각 :
  팀원이 위 방법으로 진행할 때 알아볼 시간이 부족해서 도움이 될 만한 정보를 주지 못했지만 이후 찾아본 내용에 의하면 fetch와 rebase로 feature 브랜치에 최신 내용을 반영할 수 있다는 걸 알았다.
  fetch와 merge --no-ff 조합으로 충돌을 잡고 최신 내용을 반영하는 것도 좋을 것 같다.
  그리고 마지막으로 충돌에 너무 많은 겁을 먹었던 것 같은데 최대한 피해야되는 것은 맞지만 충돌을 해결할 수 있다는 자신감을 가질 필요는 있다고 생각한다.

2. 컨벤션

• 상황 :
  팀원 모두가 협업이 처음이고 어디서부터 어디까지 컨벤션을 맞춰야 될지 몰랐다. 정의한 컨벤션 또한 기존에 혼자 작업하던 방식이 아니기 때문에 혼선이 있었다.
• 해결 및 생각 :
  인터넷을 찾아보고 대표적으로 정하고 있는 컨벤션만 정했다. 우리가 정한 컨벤션은 클래스명, 커밋, VSC 프리티어 설정이었다.
  간략하게 컨벤션을 정하면서 컨벤션에 대한 혼선은 줄었고 컨벤션이 필요한 부분이 있을 때마다 팀원들끼리 공유하고 정하면서 프로젝트를 진행했다.

3. 프로젝트 이해

• 상황:
  기존 감귤마켓 프로젝트 이해도가 낮은 상태에서 60''마켓으로 변경하고 기능도 조금씩 추가 및 변경되면서 프로젝트 기능 구현 시 문제점이 하나 둘씩 발견되었다.

  첫 번째 문제는 타임 마켓의 컨셉상 시간을 사고 팔아야되는데 제공된 API에는 시간을 저장할 수 없었다. 시간을 저장하려면 다른 API 서버를 직접 만들어 사용해야되는데 프로젝트 기간내에 API 서버까지 만드는 것은 불가능하다고 판단되었다.
  두 번째는 감귤마켓 페이지와 60''마켓 페이지가 달랐다. 이 문제로 필수 구현 내용이 누락되어 마크업을 끝내고 기능구현을 하다가 다시 마크업 업무를 진행하는 일이 발생되었다.

• 해결 및 생각 :
  큰틀은 감귤마켓 프로젝트와 동일하게 진행하고 디자인이나 프로젝트명은 60''마켓 프로젝트처럼 진행하는 것으로 해결 방법을 제시하였고 의견 수렴하여 이후 큰 무리 없이 진행되었다.
  나를 포함한 전체 팀원들이 감귤마켓 프로젝트를 이해하고 컨셉을 변경해서 우리만의 프로젝트를 만들었다면 "더 좋은 결과가 있었지 않았을까?" 하는 아쉬움이 있다.

4. 파일 구조

• 상황 :
  내가 맡은 부분은 프로필 파트인데 피그마에서 내 프로필, 다른 사람 프로필로 나눠져있어 첫 마크업할 때 내 프로필.html, 다른 사람 프로필.html로 파일을 2개 만들어 작성했다.
• 해결 및 생각 :
  프로젝트 진행 중 두 파일의 마크업과 기능 구현이 비슷하다는 생각을 하게 되어 profile.html 이라는 파일을 만들어 하나의 파일로 관리하는 게 좋다고 생각했다.
  기능과 마크업이 조금 다른 것은 JavaScript로 구현했고 동일한 부분은 HTML에 작성했다.
  결과적으로 html파일과 JS 파일 2개씩 나눠져있던 것을 html 파일과 JS 파일 1개씩으로 수정했다.

5. 코드 리뷰

코드 리뷰는 나의 또는 동료의 코드를 보고 이해하여 개선점을 찾는 과정이라고 생각한다. 이 과정에서 내가 느낀 어려움은 동료의 코드를 이해하는 부분이었는데 코드 리뷰 과정에서 내가 가장 오랜 시간을 할애한 부분이었다. 동료의 코드를 내가 이해 못 하는 경우도 있었고 동료의 코드 설명이 부족한 경우도 있었다. 이러한 어려움을 해결한 방법으로 통화와 console.log를 적극적으로 사용했다. 동료가 원하던 결과는 뭐였는지, 실제로 어떤 값이 나왔는지를 실시간으로 같이 확인해보면서 서로 코드 리뷰를 진행했었다. 아래 상황은 해당 코드 리뷰를 통해 해결된 코드이다.

• 상황:
  동료가 맡은 파트에서 게시물 이미지가 업로드 되지 않는 문제 발생.

• 해결 및 생각 :

1. API URL 주소가 잘 못 되어 있어 정상적인 주소로 변경.
2. 이미지 주소가 undefined 되어 정상 출력되지 않는 문제가 있어 이미지 URL 생성 함수 내부에 이미지 주소 저장하는 코드 추가.
3. 이미지가 중복으로 올라가는 문제가 있어 아래와 같이 로직 변경.
   기존 프로세스 :
   브라우저에 이미지 파일 업로드 ➡ 이미지 url 받아오기 ➡ 받아온 이미지 URL을 변수에 저장 ➡ API에 업로드 버튼 클릭 ➡ 다시 이미지 받아오기 ➡ 받아온 이미지 URL을 변수에 또 저장 ➡ API에 데이터 전송
   변경 프로세스 :
   브라우저에 이미지 파일 업로드 ➡ API에 업로드 버튼 클릭 ➡ 이미지 URL 받아오기 ➡ 변수에 이미지 URL 저장 ➡ API에 데이터 전송

6. 뒤로가기, 새로고침

• 상황 :
  뒤로가기를 눌렀을 때 새로고침이 되지 않아 변경된 값이 아닌 이전 값이 보여지는 현상이 있었다.
• 해결 및 생각 :
  history.back() 대신에 window.location = document.referrer;를 사용하여 해결했다.

7. 동료 평가

• 장점 : 책임감이 강한 성격이라고 스스로 생각하고 있어 혼자할 때 보다 더 적극적인 태도가 되고 이로인해 더 많은 경험(코드 리뷰, 교학상장)과 성장을 할 수 있었다. 프로젝트를 진행하면서 팀원들끼리 잘 안 되는 코드를 왜 안 되는지 도움을 요청하고 반대로 도움을 주는 경우가 많았다.
  아래는 동료 피드백에 대한 일부분이다.
  

단점 : 개선점에 대한 동료 피드백이 없어 스스로 성찰해본다면 생각과 고민을 길게한다는 점이 있을 것 같다.