[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프로젝트 준비(2)

강경서·2023년 7월 13일

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

목록 보기

33/50

📜 코딩 컨벤션

코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약입니다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가능)를 가지기 때문에 개발자 간 통일된 규약이 없다면 코드의 의도를 파악하거나 오류를 찾기 어렵습니다. 코딩 컨벤션을 준수하면 가독성이 좋아지고, 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄여줍니다. 특히 규모가 큰 프로젝트일수록 유지보수 비용을 줄이는 데 도움이 됩니다.

커밋 메시지 컨벤션

Github에 커밋을 할 때 메세지를 더해 로그를 남깁니다. 만약 팀원들과 프로젝트를 진행할 때 어떠한 규칙없이 메세지를 남기게 된다면 서로의 작업을 이해하기 힘들고 유지 보수작업에 어려움이 생길 것입니다.

 //규칙이 없는 커밋 메세지
로그인 폼 추가
[fix]회원가입 이벤트처리 수정
Refactor fetch login api 
feat:소셜로그인 로그인 추가함

팀원들과 일관된 형식의 커밋 메세지의 규칙을 정한다면 프로젝트를 보다 효율적이고 안정적으로 관리할 수 있습니다. 일관된 커밋 메세지는 가독성을 높여 다른 팀원들의 작업 내역이나 변경 사항을 쉽게 파악할 수 있고, 코드 리뷰 및 버그 수정과정에서 불필요한 의사소통을 줄여 프로젝트 관리에 대한 시간을 줄일 수 있습니다. 또한 커밋 메세지를 통해 코드의 변경 이력을 효율적으로 추적이 가능하여 문제 발생시 보다 빠르게 원인을 찾아 수정하는 등 프로젝트의 안정성을 높일 수 있습니다.

//규칙이 있는 커밋 메세지
feat:로그인 폼 추가
fix:회원가입 이벤트처리 수정
refactor:로그인 api 개선
feat:구글 로그인 추가

네이밍 컨베션

변수명, 파일명, 폴더명등 개발을 하면서 네이밍은 필수 요소입니다. 네이밍 컨벤션또한 팀원들과 코드를 읽고 이해하는데 필요한 규칙입니다. 네이밍 컨벤션에는 몇가지 대표적 케이스가 있습니다

Lower Camel Case
첫 단어는 소문자로 시작하고 다음 단어부터는 대문자로 표시합니다. ex) userName
Pascal Case
각 단어의 첫 문자를 대문자로 표시합니다. ex) UserName
Hungarian Notation
이름 앞에 변수 타입을 접두어로 넣어주는 표기법입니다. ex) bIsLoading
Snake Case
각 단어의 사이를 언더바( _ )로 구분하는 표기법입니다. ex) input_value
Kebab Case
각 단어의 사이를 바( - )로 구분하는 표기법입니다. ex) logo-image

코드 컨벤션

소스 코드를 작성하는데에도 팀원들간의 규칙은 매우 중요합니다. 무엇보다 정해진 규칙으로 인해 프로젝트의 성능을 해쳐서는 안됩니다. 이를 위해 prettier 와 ESlint와 같은 익스텐션등을 사용하기도 합니다.

//코드 컨벤션 예시
들여쓰기는 space를 사용하지 않고 tab을 사용한다.
한 줄에 하나의 문장만 허용하며, 문장 종료 시에는 반드시 세미콜론(;)을 사용한다.
값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.
외부 모듈과 내부 모듈을 구분하여 사용한다.
함수 선언시에는 화살표 함수를 사용한다.
...

📝 후기

다음 주 부터 진행 될 팀 프로젝트는 지금까지 혼자서 만들었던 프로젝트와는 큰 차이가 있습니다. 팀원들과 같이 코드를 작성해야하고 정해진 마감 기한도 있습니다. 이를 위해 코드를 팀원들과 효율적으로 작성할 수 있는 코딩 컨벤션에 대해 알아보았습니다. 이를 십분 활용하여 이번 프로젝트뿐만 아니라 다음의 협업 프로젝트에서도 사용할 수 있도록 익숙해져야겠습니다.