이제 본격적으로 클론코딩이 시작된다.
6명이 같이 프로젝트를 만드는 것이기 때문에, 프로젝트 세팅하는 것도 중요한 단계이다.

개발환경

기본적으로 HTML/CSS/VanillaJS 사용
추가세팅)
Git
SCSS + Vite
ESLint + Prettier

Git branch

팀장인 내가 깃헙에 레포지토리를 만들어 5명의 팀원을 초대하여 클론받아 작업하기로 했다. 나까지 총 6명이라 브랜치 하나로 작업하는 게 문제없을 거라고 생각했다면 큰 오산이었다.
브랜치 하나만 사용하니 6명뿐이어도 충돌이 일어나는 경우가 적지 않았다.

회사 다닐때에는 배포브랜치, 작업 브랜치, 각자의 개인 브랜치를 만들었다. 무조건 작업은 개인브랜치에서, 진행사항이 있으면 작업 브랜치에 push,pull하며 일했다. 이 방법이 왜 이제야 생각이 난건지ㅠㅠ
각자 본인 로컬브랜치 하나씩 만들어서 작업한 사항 push는 본인 브랜치에 하고, master 브랜치는 merge만 하는 용도로 사용하는 아이디어를 냈다.

프로젝트가 진행되면서 merge할때 나도 종종 충돌로 오류가 나는 경우가 있었는데, 로컬브랜치에 내가 작업한 것들이 살아있으니 공들인 시간이 없어질 걱정은 줄어들었다.

vite

SCSS를 사용하지 않는 관계로 Vite는 사용하지 않기로

Vite가 뭐지?

Vite(비트)는 프론트엔드 개발을 위한 도구이다.
Vue에 종속되어 있지 않고 React, Vanilla 등 프론트엔드 개발 어디서든 사용될 수 있다.
Vite에는 여러가지 어썸한 기능들이 있지만, 이번 프로젝트에서는 자동 새로고침을 해주는 개발 서버를 얻고 SCSS를 더하기위해 Vite를 사용할거다.

Vite로 프로젝트 생성하기

터미널을 열고 프로젝트 생성하려는 디렉토리로 이동하여 vite를 생성한다.

$ npm create vite@latest

project명을 입력하고
해당 프로젝트에 사용하는 개발환경을 선택한다.
색이 참 알록달록해서 고르는 맛이 있다.

3스텝을 마치면 해당 스펙에 맞춰 폴더가 생성된다.
만들어진 폴더로 이동후, vite를 설치한다.

$ cd 파일명
$ npm install

디렉토리 정리

각자 화면을 맡아서 각자 파일을 만들며 진행하다 보니 디렉토리 정리의 필요성을 크게 느끼지 못했다. 그러던 중 각자 만든 파일을 합칠 일이 생기자, 가독성을 위해 디렉토리를 정리하는게 좋다는 생각이 들었다.
확실히 같은 항목끼리 폴더를 만드니 보기편하다. 그리고 같은 색끼리 모여있는 걸 보니 묘하게 기분이 좋아진다.

디렉토리 정리 전	디렉토리 정리 후

directory vs folder

갑자기 궁금해졌다. 디렉토리와 폴더를 크게 구분하지 않고 있지만, 의미가 다르지 않을까?

• directory: 파일시스템의 관점에서 파일들을 묶어두는 개념
• folder: 디렉토리와 거의 유사하지만, 조금 더 넓은 의미. 존재하지 않는 특수 항목들까지 아우를 수 있는 것

ESLint + Prettier

사실 ESLint와 Prettier는 생각도 못 하고 있었다. 왜냐하면 나는 하도 오래전에 두 확장프로그램을 설치해 놓은 터라 VSC에서 command+s 를 누르면 나오는 오류표시와 자동정렬을 너무나 당연하게 생각하고 있었더랬다.

header&footer를 맡은 나는 종종 다른 팀원의 화면에 들어갈 일이 있었다. 그러던 중 화면은 잘 나오는데, html에 오류가 있었던 거다. 페이지에는 아무런 지장이 없으니, 팀원은 그걸 모르고 있었고.

따라서 나는 ESLint와 Prettier가 그저 오류표시와 자동정렬을 위한 프로그램인 줄만 알았다. 하지만 찾아보니 그것만을 위한게 아니더라고?

"ESLint는 코드 퀄리티를 보장하도록 도와주고, Prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다."

• ESLint: 여러방식의 코드작성법을 일관성 있는 방식으로 구현할 수 있도록 도와준다.
• Prettier: 코드구현방식이 아닌 줄바꿈, 공백, 들여쓰기등 에디터에서의 '텍스트'를 일관되게 작성하도록 도와준다.

ESLint와 Prettiers는 IDE의 Extensions에서 간단하게 install 할 수 있다.

나는 이미 설치 되어있어서 uninstall이라고 뜨지만 해당 프로그램이 없으면 install이라고 적혀있다.

마치며

해당 글은 작업을 해가며 필요한 것들이 생기면 그때그때 팀원들과 상의하며 반영된 사항들을 적었다. 깃 브랜치때문에 공들여 작업한 코드가 날아간 팀원도 있고, 디렉토리 정리는 다들 html+css를 마쳤을 때 생각난 거라 경로를 하나하나씩 수정하는 데에 고생했다.. 수정 후 지금까지 각자 화면에 문제없이 잘 진행됨에 감사하다.
이렇듯 작업 시작 전 환경을 맞추고 시작하는게 참으로 중요하다고 느낀 한 주였다.

참고
[directory vs folder] https://technote.kr/287
[HTML 오류무시] https://d2.naver.com/helloworld/59361
[ESLint + Prettier]
https://andrill.tistory.com/3
https://helloinyong.tistory.com/325