[FeedB] 기획 소개 및 컨벤션 (feat.구현계획)

어느덧 코드잇 스프린트의 마지막 프로젝트가 시작되었다.

지금까지 마지막 프로젝트에 대한 이야기를 포스팅 한적이 없는 것 같은데, 중간 점검 느낌으로 한 번 정리하고 넘어가면 좋을 것 같아서 이번 포스팅의 주제로 들고 와보았다.

 

FeedB 피드비

웹 서비스의 이름은 '피드비(FeedB)',

배포된 토이 프로젝트를 게시하고 그에 대한 피드백을 사용자에게 받아볼 수 있는 사이트이다.

 

내가 만든 프로젝트가 실제 배포된 환경에서 문제가 있지는 않은지, 어느 지점에서 사용자 경험이 떨어지는지 제작자의 입장에서 알아보는 것은 한계가 있기 때문에, 이러한 프로젝트 주제를 잡게 되었다.

 

프로젝트를 홍보하고 게시하는 입장 뿐만 아니라, 다른 사람들이 어떤 주제로 토이 프로젝트를 진행하는지가 궁금한 사람 역시, 이 웹 서비스를 이용할  것으로 기대된다.

 

 

프론트엔드 개발 환경 세팅

백엔드, 디자이너 분들과 함께 협업하는 만큼 프론트엔드 개발자들끼리 할 수 있는 개발 환경 세팅은 비교적 미리 완료했다. 

기술 스택

Next.js

: react를 사용하지 않고, Next.js를 이용한 이유는 기획한 웹 서비스는 SEO를 챙기는 것이 중요하다고 생각했기 때문에 Next.js를 선택했다.

 

Tailwind CSS

: 파일 분리를 하지 않고도 스타일링을 할 수 있고, 그로 인해 비교적 빠른 속도로 개발이 가능하다는 점, 다크 모드 및 반응형 구현이 손쉽다는 이점으로 선택하게 되었다.

---

Git Branch 전략

이전까지 일반적으로 merge했던 것과는 다르게, git graph를 깔끔하게 유지할 수 있고 작업 중 브랜치 최신화가 가능한 rebase 전략을 사용하기로 했다.

 

실제로 rebase 전략을 쓴다면 어떤 커맨드와 순서를 지켜야하는지 헷갈려서 직관적으로 정리해보았다.

1. dev 브랜치에서 git checkout -b 작업 브랜치 하여 작업
2. 최신화가 필요하면 커밋을 한 후, git checkout dev
3. git pull origin dev
4. git rebase dev 작업 브랜치 또는 git checkout 작업 브랜치 한 후, git rebase dev

 

Commit Message

커밋 목록만 보아도 어떤 작업을 했는지 직관적으로 알 수 있게 해주는 깃모지(Gitmoji)도 사용하기로 했다.

깃모지를 사용할 때 어떤 작업에 어떤 아이콘을 사용하는지도 각각 다르기 때문에 팀원들과 함께 아래의 표로 사용 아이콘을 정의했다.

 

Gitmoji와 커밋 메시지

✨ Feat	새로운 기능 추가
🐛 Fix	버그 수정
✏️ Docs	문서 수정
🎨 Style	코드 스타일 변경 (코드 포매팅, 세미 콜론 누락 등)기능 수정이 없는 경우
💄 Design	사용자 UI 디자인 변경 (CSS 등)
🧪 Test	테스트 코드, 리팩토링 테스트 코드 추가
♻️ Refactor	코드 리팩토링
💚 Build	빌드 파일 수정
👷 Ci	CI 설정 파일 수정
⚡️ Perf	성능 개선
🔧 Chore	빌드 업무 수정, 패키지 매니저 수정 (gitignore 수정 등)
🚚 Rename, Move	파일 혹은 폴더명을 수정만 한 경우 (옮기기만 한 경우 포함)
🔥 Remove	파일을 삭제만 한 경우
📝 Comment	필요한 주석 추가
🎉 Init	초기 파일 생성

 

github의 Issue 및 PR 작성법

작업하기 전 어떤 작업을 진행할 것인지에 대한 이슈를 먼저 작성한 후 그에 대한 작업 PR에 링크를 거는 것으로 작업 흐름을 가져가기로 했다.

 

현재 내가 어떤 작업을 하고 있는지를 open 되어 있는 Issue를 통해서 팀원들이 파악할 수 있고, 그 이슈를 PR에 링크함으로써 매번 작성하는 PR의 내용을 보다 간결하게 만들어주었다.

// Issue example
[Yukyoung] 마이 페이지 UI 구현
## 기능명
마이페이지 UI

## 구현 목표
- [x] 마이페이지 이미지 Input 공통 컴포넌트로 분리
- [ ] 프로필 수정 임시 Input 

## 특이사항
- 현재 UI 부분에서 체크 박스 추가하면 좋을 것 같습니다~

위와 같은 이슈를 작성해놓으면, PR에서는 중복되는 내용을 기재하지 않아도 되기 때문에 PR을 작성하는 부담이 줄어들 수 있었다.

// PR example
[Yukyoung] 마이 페이지 UI 구현
## 변경 사항
- 피그마에는 없지만, 수정 시 연필 아이콘을 추가했습니다.

## To. reviewers
- 이미지 Input 로직을 조금 더 개선할 수 있을 것 같은데..여러분들의 도움이 필요합니다.

## 이슈 번호 
- #3

## 테스트 결과
[스크린샷]

 

---

Code 컨벤션

변수 명칭 관련

- 명칭은 명사로

const camelValue:string = 'value';

const isBoolean = true;
//const hasBoolean = false; (X)

// 복수형
//cards (X)
cardList (O)
//cardArray (X)

 

함수 export 방법 및 명칭 관련

- 컴포넌트는 함수 선언문으로, 컴포넌트 내 내부 함수는 화살표 함수 사용

- 명칭은 동사로 (컴포넌트 제외)

// 컴포넌트띠
function ExComponent() {
	//...
	
	handleExample { (O)
		//...
		이벤트
	}
	
	exampleHandler { (X)
		//... 
	}
	
	handleLoadExample { (X)
		//...
	}
	
	loadExample { (X)
		//...
		데이터 불러올 때?
	}
	
	getDashboardList 
	deleteDDDDDD ~
	
}

export default ExComponent;

// 일반 함수 및 hook
const camelFunction = () => {
	//...
}

export default camelFunction;

 

상수

- 대문자 및 띄어쓰기는 언더바 ' _ ' 처리

const EXAMPLE_NUMBER = 5;

 

이미지 import

이미지 파일명
- iconArrow (x)
- arrowIcon (x)
- arrow (o)

//image import
import arrowIcon from "이미지_경로띠/arrow.svg";

 

이렇게 프론트엔드 개발 환경 세팅 및 컨벤션은 이와 같다.

그 중에서도 commit 작성할 때, push할 때 검사를 진행해주는 husky도 사용했지만 그와 관련된 내용은 추후에 다루도록 하겠다.

 

내가 맡은 구현 사항

/mypage

프로젝트 R&R 중에서 나는 마이페이지를 맡게 되었다. 이 페이지에서 제공하는 기능은 다음과 같다.

- 내 프로필 확인 (닉네임, 자기소개, 직무, 프로필 이미지)

- 내 프로필 수정

- 내가 업로드 한 프로젝트 목록 조회 (내 프로젝트)

- 찜한 프로젝트 목록 조회 (찜)

 

이 기능 중에서 공통 컴포넌트로 사용하는 것은 프로젝트 목록과 찜 버튼, 프로필 이미지를 보여주는 것이다.

프로젝트 목록은 동일한 UI를 /main 페이지에서도 사용하기 때문에 공통 컴포넌트로 사용할 수 있도록 해야했고, 프로젝트 카드에 hover 했을 때 사용가능한 찜 버튼 역시, 다른 페이지에서도 사용하기 때문에 분리했다.

 

이번 프로젝트에서 코드를 작성할 때는, 최대한 하나의 목적을 달성할 수 있도록 하기 위해서 고민을 많이 했다. 한 컴포넌트에서 여러 역할을 하게 된다면, 계속해서 업데이트 되는 UI의 변동사항을 반영하기 어렵기 때문에 컴포넌트를 잘게 쪼개거나, 컴파운드 패턴을 사용하기도 했다.

 

구현 예정 사항

- Http.client를 활용한 API 연결

- 프로젝트 목록의 무한 스크롤

 

지금까지는 UI 구현이었기 때문에, 특별히 어려울 것이 없었지만 곧 API가 나올 것이기 때문에 이제 본격적으로 로직을 작성해야 한다. 그 과정에서의 고민과 트러블 슈팅은 그때마다 포스팅을 남겨보도록 하겠다.

 

이번 프로젝트 팀원 분들이 아주 소통을 잘 해주셔서, 다른 분들의 로직들이 어떤 과정을 통해서 작성된 것인지를 바로 들을 수 있어서 너무너무 좋았다 !

 

나는 고민하지 않는, 약간 수동적으로 반응하던 부분에서도 고민할 수 있게 만들어주는 팀원 분들을 만나서 너무 좋다.

앞으로 남은 프로젝트도 잘 진행해서 성공적으로 마무리할 수 있었으면 좋겠다 :)

 

그럼 이만 --

안뇽 ~!