🔸 배스킨라빈스 웹 사이트 개선 프로젝트 회고

💡 Repository 링크

: https://github.com/Baskin-Robbins-31/Baskin-Robbins-31

🔹 개발 프로세스

💡 진행 기간

: 8/3 ~ 8/4

◾ CSS 작업

• 메인 페이지, 헤더와 푸터, 메뉴 페이지의 CSS 작업

: 진행 중이었던 CSS 작업 최종 완료 후 원격 repository에 반영 완료

◾ JS 작업

• 모바일 버전 메뉴 바, 캐러셀 기능 JS 작업

: 각각 역할 분담하여 작업 완료

◾ 이미지 관련 작업

• 이미지 사이즈 조정

• Image Sprite 생성

• 이미지 폴더 구조의 구체화

◾ Merge Conflict

• PR 시 발생한 병합 충돌의 해결

: 메인 페이지, 헤더와 푸터, 메뉴 페이지 전체 해결 완료

🔹 참여한 작업

• 헤더와 푸터 CSS 작업

• 모바일 버전 메뉴 바 JS 작업

• 이미지 사이즈 조정

• Merge Conflict 해결

🔹 느낀 점 및 개선 사항

💡 tailwindcss의 단점

: 저번 회고록에도 작성한 부분이지만, 이번 작업에 tailwindcss를 사용하면서 느꼈던 점이 있다. tailwindcss로는 수정 작업이 굉장히 불편하다. HTML 태그의 클래스명이 길어지는 경우 가독성이 너무 저하되기 때문에, 어떤 부분을 수정할지 찾는 시간이 오래 걸릴 수밖에 없다. 그런 이유로 tailwindcss를 복잡한 CSS 작업이 필요하거나, 규모가 큰 프로젝트에 적용하는 것은 쉽지 않겠다는 생각이 든다. 또한 tailwindcss로 background 관련 속성의 조정이 어렵기 때문에, 결국 적절한 사이즈의 다른 이미지를 추가하는 방식으로 해결했다. 이처럼 아직 기존 CSS와 호환되지 않는 부분이 있는데, 이는 tailwindcss가 개선해야 할 점이라고 생각한다.

💡 컴포넌트 단위 개발의 장점

: 사실 각자의 작업을 push하고 PR 하는 과정에서 Conflict 메시지를 보았을 때 '아, 올 게 왔구나...'라는 생각이 가장 먼저 들었다. 그만큼 Merge Conflict를 해결하는 과정이 굉장히 험난하고 복잡하리라 생각했다. 그런데 의외로 쉽게 충돌을 해결할 수 있었는데, 그 이유가 바로 컴포넌트 단위 개발 때문인 것 같다. 각각의 컴포넌트 단위로 작업 내용을 분할했기 때문에 같은 페이지에서 작업했더라도 겹치는 부분이 없어서 충돌이 생긴 부분이 많이 없었다. 아쉽게도 이번 프로젝트에는 Git Flow가 아니라 GitHub Flow 방식으로 Git을 사용했는데, 다음 프로젝트에서는 GitHub Flow 방식을 통해 좀 더 체계적으로 Git을 사용해야겠다.