자기소개 페이지 2일차 @틀 완성, 팀 내 git 규칙 준수

오늘은 메인 프레임 틀을 짜고 git을 이용해서 git push, git pull을 여러 번 한 뒤 추후에 구현해야 하는 다른 html 파일과 연결하기 기능에 대해 검색하고 학습해 보았다. 아래는 메인 프레임의 대략적인 틀이고, 이 중에서 슬라이드 카드와 팀원 캐릭터는 다른 팀원이 맡았으며, 나의 남은 과제는 링크 기능을 구현하는 것이다. 

 

 

=> 지금까지 짠 메인프레임 코드 링크(다른 팀원의 디자인대로 구현한 것)

 

이 코드를 구현하는 데에 약간의 문제가 있었다면, 처음엔 position:relative와 position:absolute로 구현했다가 같은 페이지 구현에 힘쓰는 다른 팀원의 의견으로 display:flex로 정렬하여 구현했던 것이다. flex를 요즘 많이 쓴다고 들었는데, 과연 position을 쓸 때보다 코드가 좀 짧아지고 단순해진 게 보였다. 

 

<비교>

position : relative;

top:50%;

left:50%.......

 

=>

 

display : flex;

justify-content: center;

align-items: center;

 

position에서는 %로 위치를 조정해야 했던 것이 각 축의 center로 지정만 해주면 가운데로 정렬된 모습이다. 또 flex는 자식 요소들을 가로, 세로 정렬도 쉽게 해주니 확실히 편리했다. 앞으로도 flex를 많이 쓰게 될 것 같다. 

 

또 글자 굵기인 font-weight에 대해서도 들었는데 

 

400 - regular 

500 - 

700 - bold

 

의 규격으로 되어 있다고 들었다. 이건 또 font-weight:bold가 아니라 font-weight:700을 사용해달라는 요청을 받았는데, 아직은 이렇게 굵기를 지정해야 하는 이유가 크게 실감이 되지 않지만 형식이 크게 바뀌는 것도 아니니 숫자로 지정하는 게 혹시 모를 때를 위해서 나은 것 같기도 하다. 

---

 

오늘 팀 회의에서는 어제 못다한 팀 내 git 이용규칙을 정했다. 코드 충돌 시 회의를 통해서 수정, git commit 메세지의 형식 규정, 코드 변수, 함수 등의 명명 규칙 규정을 했다. 그 과정에서 feat와 refactor, 카멜 케이스와 파스칼 케이스라는 개념을 알게 되었다. 

 

feat는 새로운 기능 추가이고, refactor는 실제 페이지에는 변화 없이 코드를 새로 구성하는 것이다. 내가 여태까지 해온 프로젝트들을 되짚어 보자면,

 

feat란 숫자 기억 게임에서 '시작'버튼을 누르면 랜덤한 수가 생성되고 입력창이 비활성화 되는 등의 기능들을 처음으로 구현했을 때 사용하는 것이고, 

refactor는 저번 주에 to do list 페이지 구현에서 본 페이지의 .append(``)으로 백틱 내의 코드를 그대로 갖다 붙이던 것을 풀어서 재구성한것과 같은 행위를 의미한다. 

 

이외에도 fix, style 등등의 일반적인 커밋 메시지 컨벤션에 대해서도 알게 되었다. 

 또 git 이용규칙에는 변수명 등의 규격을 정하는 것도 만들었는데, 여기서 등장한 것이 카멜 케이스와 파스칼 케이스이다. 

 

변수명이 delicousredapple일 때 

카멜 케이스란 delicousRedApple과 같이 첫번째 단어의 첫글자를 소문자로 쓰는 변수 형식이고

파스칼 케이스란 DelicousRedApple과 같이 첫번째 단어의 첫글자도 대문자로 쓰는 변수 형식이다. 

 

보편적으로

카멜 케이스는 함수 등 js 같은 곳에서 사용되는 변수명이고, 파스칼 케이스는 css 같은 곳에서 사용되는 변수명이라고 한다. 

 

 

 

이후 브런치 강의도 들었는데, 브런치는 원본 파일이 손상되지 않도록 하는 부가적인 저장소로 실제 업무 환경에서 필수적으로 사용되는 기능이다. 아래는 브런치를 사용하는 방법이다. 

 

저장소에 내 <브런치>를 생성한 다음

=> main 원본 파일을 clone하고

=> git checkout -b <브런치 이름>으로 브런치를 생성+바꾸고 

=>평소처럼 add+commit+pull을 한 다음

=> push를 하면 된다. 

 

이러면 메인저장소에는 push가 되지 않아 원본 파일이 손상되지 않고 <브런치>라는 별개의 저장소에 코드를 저장해 두고 공유할 수 있게 된다. 메인저장소와 <브런치>저장소는 git hub에서 merge pull request로 합칠 수 있다. 

 

---

마지막은 링크 기능 구현이다. 한 번 살펴보기로는 <a href="파일명.html"></a>로 구현할 수 있는 간단한 기능이라고 한다. 신경써야 하는 것은 링크가 절대 경로인지 상대 경로인지인데, 경로를 잘못 지정하면 올바른 파일명이라도 해당 페이지로 넘어가지 않을 것이다. 

 

일단 오늘은 여기까지 했는데, 팀원 분이 코드 리뷰해주셔서 코드를 고친 것 말고는 메인 페이지 제작이 너무 싱겁게 끝나버렸고, 이미 3번이나 조언해주신 것에 따라 코드를 고쳤으니 이제 내가 할 일은 거의 없는 거나 마찬가지인 것 같다. 아무래도 프로젝트에 기여하려면 자체적으로 추가 기능을 기획해보아야할 것 같다.