FE 개발환경 세팅

이슈/트러블슈팅

백엔드 서버 test하기

마지막 에러 점검

CSS 스타일링

공통 컴포넌트 사용법

배포관련

KakaoTalk_20240403_115036681.jpg

<aside> 📌 • 각 담당자별 개별 branch입니다. • 각자 담당 branch 파서 그안에서만 작업하기

손민혁 : hyuk 임기택 : taek 이유림 : yurm 이보미 : bom

</aside>

<aside> 📌 [코드 작업 시 merge 규칙]

  1. dev 브랜치 : 매일 1번씩 merge하기 + 끝나면 다같이 pull 받기
  2. master 브랜치 : 매주 금요일 저녁에 코드리뷰용으로 업데이트 (건들지 않게 주의!!)
  3. 작업 중 **dev**에 업데이트 할 것 생기면 디스코드 또는 미팅 열기 ✋ </aside>

커밋

**❗❗❗ push하기 전에 꼭 pull 받고 push하기 ❗❗❗

[커밋 관련 참고할 명령어]**

//최신 커밋은 삭제하되 변경 사항은 유지 (커밋했는데 하나씩 빠트려서 커밋 돌리고 합쳐서 커밋할때사용)
git reset --soft HEAD~1

//커밋 메세지 잘못 입력했을때, 가장 최근 커밋의 메세지 수정하기
git commit --amend -m "새로운 커밋 메시지"

//삭제한 디렉토리, 파일 반영하기
git add -u

담당 페이지

네이밍 규칙

분류 예제 설명
공통 숫자 ⭕ img01, img02 …
❌ img1, img2 … 숫자는 1자리수가 아닌 2자리수로 표시.
→ 깔끔하고 쉬운 정렬을 위해!
파일명/img main_banner_01.jpg
main_banner_02.jpg
order_info_01.jpg
폴더를 생성하지 않고 파일명에서 폴더를 표시.
→ 파일의 경로를 통일해서 관리!
CSS class명 ⭕ error-message
❌ errorMessage 2개 이상의 단어 조합 시 하이픈(-) 사용.
카멜케이스 X.
id명 ⭕ errorMessage
❌ error-message 2개 이상의 단어 조합 시 카멜케이스 사용.
DOM 선택한 변수명은 앞에 $ 붙여서 돔객체라고 정의해요
예시) const $headerMenuBtn = document.

git 명령어 정리

`상황1. Feature -> dev`

1. Git add .
2. git status
3. git commit
4. git push origin [내 피처 브랜치]

(아직 피처 브랜치 작업이 미흡할때) git stash

`상황2. 깃랩 데브 상황을 내 로컬 데브로 받아오고 싶을때`

1. Git checkout dev (내 위치를 데브로 만든다 )
2. Git pull origin dev
-> git pull origin [내 브랜치명] (깃랩의 피처를 가져오고 싶을 때)

`상황3. dev에 내 피처 브랜치 merge하고 싶을때`

1. Git checkout dev (dev로 이동)
2. Git merge [내 피처 브랜치]

`상황4. 원격 저장소 dev 가져올 때`

git remote add origin  <https://kdt-gitlab.elice.io/sw_track/class_08/web_project_ii/team07/fe.git>

git remote -v

git fetch origin dev:dev

git pull origin dev

`상황5. 원격 dev pull 받을 때`

내 로컬 브랜치에서

git pull origin dev

`상황6. 현재 git log 상태 확인하기`

git status

`상황7. 현재까지의 commit 기록 확인하기`

git log