241216 ~ 250106솔로트립 인턴 회고록
이 회고록에서는 담당한 주요 핵심내용, 일정 관리 방식, Git Flow에서의 rebase 전략, 그리고 프로젝트를 진행하며 느낀 소감 등을 포함하여 정리하였습니다.
현재 혼자 여행하는 여행자들을 위한 웹뷰 기반 하이브리드 앱 개발 프로젝트, 솔로트립에 합류하여 인턴으로 활동하고 있습니다. 🤩
1. communication
communication은 Jira, slack, discord를 사용해서 하고 있는데, Jira는 처음 사용해보았습니다.
-> 이런식으로 각각의 에픽에 하위이슈를 만들고 (이걸 티켓딴다 라고 하더라구요?! ) 해당 작업명으로 로컬 브랜치를 생성해서 작업을 진행했습니다.
요즘 Jira를 많이 사용한다는데 그 이유를 알겠더라구요... 타임라인이나 보드를 통해 팀의 진행속도를 한눈에 파악하기 좋았습니다.
github와 slack을 연결해서 pr을 날리거나 merge가 되면 알람이 오니 일일히 확인하지 않아도 되서 아주 편했습니다 ! 특히 공통으로 사용되는 컴포넌트를 npm에 배포했는데 이때 버전이 업데이트 되는 경우를 확인하기 좋았고, 충돌을 최소화 해주었습니다.
2. 첫 작업
우선, 아예 새로운 페이지를 생성해야했기에 퍼블리싱부터 진행을 하였습니다.
Figma를 토대로 하나하나 만들어나갔는데요, 전 그냥 그대로 만들고 css만 만지면 될거라고 생각했는데, 웬걸! 유저 공통 컴포넌트 혹은 글로벌(npm)에 배포된 공통 컴포넌트 를 최대한 사용해서 만들어야했습니다.
3일 정도는 어떤 내용이 있는지 코드 보고 storybook
으로 ui 확인하는데 시간을 보냈던 것 같습니다..
storybook 처음 사용해봤는데 신세계..!
저는 우선, 약 2주동안 숙소 검색 결과 페이지 , 하우스 상세 페이지 , 객실 상세 페이지 , 필터 모달 등의 페이지를 구현했습니다. 이때 api을 연결하지 않아도 되는 작업까지 진행했습니다.
하나의 페이지에도 variation이 상당히 많더라구요.. 뭔가 개인프로젝트나 팀프로젝트를 할때와는 달랐습니다.
3. npm 배포 진행
공통 컴포넌트는 유저, 슈퍼 관리자, 사장님이 모두 사용하는 기능이므로 npm 패키지로 배포하였습니다.
Git 명령어 몇 개만으로 간편하게 배포할 수 있습니다.
📌 배포 과정
(1) 관련 레포지토리 클론
git clone [repo 주소](2) 최신 상태 유지 후 업데이트 진행
항상 최신 상태를 유지한 후 push하는 것이 좋으므로 pull 먼저 수행
git pull origin [최신 브랜치명](3) 변경 사항 반영 (add & commit)
- 커밋 메시지는 회사 내 규칙에 맞춰 작성
- 일반적으로 컨벤션(예: Conventional Commits) 또는 내부 가이드라인을 따름
git add .
git commit -m "feat: 새로운 공통 컴포넌트 추가"
git commit -m "fix: 이미지 슬라이더 버그 수정"
git commit -m "chore: 패키지 업데이트"(4) yarn을 사용한 배포 (yarn publish)
- 저흰
yarn 패키지를 사용하므로,yarn publish를 활용하여 배포했습니다. Git과Slack을 연동하여 버전 업데이트 알림을 실시간으로 전송- ❗ 주의: git push를 먼저 하면 버전 업데이트 알림이 가지 않으므로,
→ yarn publish를 먼저 실행한 후 push 진행
yarn publish- 실행 후, 버전을 입력하면 package.json의 버전이 자동으로 업데이트됩니다.
- 업데이트된 내용이 npm에 반영됩니다.
(5) Git 업데이트 및 Slack 알림
git push origin [브랜치명]- git push를 실행하면 Git에도 업데이트가 반영되고,
Slack으로 배포 완료 알림이 자동 전송됩니다.
이와 같은 방식으로 Semantic Versioning(시맨틱 버저닝, SemVer)을 준수하며 안정적으로 npm 배포를 진행할 수 있습니다! 🚀
-> slack에 위의 사진과 같이 알림이 전송됌
4. 담당한 주요 기능 설명
4-1. 유저단 공통 컴포넌트 생성
(1) 숙소 정보를 가로형 카드 형태로 출력하는 UI 컴포넌트 구현
숙소 검색 결과페이지를 구현하던 도중 리스트를 보여주는 부분이 객실 상세 페이지에서도 사용하고 있다는 걸 알게 되었습니다.
그러자마자 바로 "이건? 공통 컴포넌트 생성해야한다..!"
어떤식으로 공통 컴포넌트 부분을 생성하는지 코드를 확인하고 작성했습니다.
우선, 공통 컴포넌트를 확인해보니 기본이 되는 base 컴포넌트를 작성하고, 이를 확장한 하위 변형 컴포넌트가 구현되어 있습니다. 또한, Storybook과 mock 데이터를 활용하여 각 컴포넌트의 UI를 쉽게 미리 보고 테스트할 수 있도록 구성되어 있습니다.
따라서, 아래와 같이 구성하였습니다.
🏗️ 기본 컴포넌트: CardHouseHorizontalBase
🔹 역할 : 숙소 정보를 보여주는 기본 레이아웃을 구성합니다.
🔹 구성 요소
✔️ 이미지, 제목, 소개, 위치, 가격, 파티 정보, 뱃지 등 다양한 정보를 출력
✔️ 로딩 상태 처리를 위해 스켈레톤 UI 적용
✔️ 북마크 기능: useState를 활용해 활성/비활성 상태 관리, 버튼 클릭 시 토글
✔️ 링크 기능: getLinkComponent를 활용해 카드를 클릭하면 이동 가능
🔹 조건부 렌더링
isVersion (비율에 따라 다른 스타일을 적용하기 위한 props) 값에 따라 특정 요소가 표시됩니다.
✅ 북마크 버튼
✅ 예약 가능한 자리 수
✅ 남은 객실 정보
✅ 추천 숙소 뱃지
🔹 하위 변형 컴포넌트 : CardHouseHorizontalStandardSShortSquare ...etc
- 비율에 따라 적절한 스타일을 적용할 수 있도록 설계
- 각 비율에 맞는 CSS 클래스를 활용하여 스타일링 가능
(2) image-slider 공통 컴포넌트 생성
사용자가 여러 장의 이미지를 스와이프할 수 있도록 확장성을 고려한 이미지 슬라이더 UI를 개발했습니다.
- Swiper 라이브러리 활용 → 필요한 모듈을 동적으로 선택하여 유연한 구성 가능
- 기본 이미지 슬라이더를 기반으로, 다양한 스타일 적용이 가능한 확장형 구조 설계
공통 UI 컴포넌트 개발 및 Storybook 활용에 대한 더 자세한 정리는 노션에 정리되어 있습니다. 필요하신 분들은 참고해주세요! 😊
📌 [공통 UI 컴포넌트 개발 및 Storybook 활용]
4-2. 하우스 상세 페이지의 Tab 자동 스크롤 & 섹션 연동 기능을 개선하여 UX 최적화
사용자가 상세 페이지에서 스크롤을 이동할 때, 해당 섹션에 맞춰 Tab이 자동으로 변경되도록 구현하여 UX를 최적화했습니다.
📌 구현한 기능
- 스크롤 위치에 따라 Tab 자동 활성화 -> 뷰포트 내에서 적절한 섹션 감지
- 사용자가 Tab을 클릭하면 해당 섹션으로 부드럽게 이동
- 가로 스크롤이 끝까지 이동했을 때, 자동으로 Tab이 따라오도록 처리
- 불필요한
useEffect실행을 방지하여 성능 최적화
Tab 자동 활성화 및 스크롤 최적화 기여 내용에 대한 더 자세한 정리는 노션에 정리되어 있습니다. 필요하신 분들은 참고해주세요! 😊
📌 [Tab 자동 활성화 및 스크롤 최적화 기여 내용]
5. Git Flow에서 Rebase 전략과 PR에 대해 정리 및 공유
이번 프로젝트에서는 Git Flow에서 rebase 전략을 활용하여 불필요한 병합 커밋을 제거하고, 커밋 히스토리의 일관성을 유지하는 방식을 도입했습니다.
저를 포함한 모든 인턴이 rebase를 처음 접했기 때문에, rebase의 개념부터, 실제 팀 내에서 적용한 전략과 워크플로우까지 정리해서 공유하였습니다.
제가 작성한 글은 아래의 링크에서 확인할 수 있습니다!
[Git Flow에서 Rebase & PR 보내는 방법 완벽 정리 🚀 | 협업을 위한 깔끔 가이드]
6. 소감
기존에 처음부터 기획하고 배포까지 진행했던 사이드 프로젝트와는 달리,
이미 구축된 UI, Hook, Handler 레포, 그리고 일정 관리 방식, 문서화 등
사전에 확인해야 할 사항이 많았던 점이 새로운 도전이었습니다.
특히, Jira를 활용해 예상 소요 시간과 실제 걸린 시간을 비교하며 평균 소요 시간을 분석했고, 이를 바탕으로 현실적인 일정 계획을 수립하는 방식으로 일정을 관리했습니다.
하지만 팀 전체적으로 Git 관련 오류가 빈번하게 발생하며 많은 시간이 소요되었고, 이를 해결하기 위해 Git 전략 관련 글을 작성해 공유했더니 팀원들 모두가 큰 도움이 됐다며 고마워했고, Git 오류 발생 빈도가 현저히 줄어들었습니다.
또한, 회사 노션에도 해당 글을 공유해 공식 문서처럼 활용될 수 있었던 점이 더욱 뿌듯했습니다.
프로젝트 작업 중 틈틈이 정리하느라 힘들기도 했지만, 처음 경험하는 회사 환경에서 의미 있는 기여를 하고 싶다는 마음이 커, 더욱 열심히 임할 수 있었습니다.
앞으로도 더 나은 협업을 위해 노력하고, 성장하는 개발자가 되고 싶습니다! 🚀✨
