Web Ground Rule

Web 그라운드 룰 🙋‍♀️🙋‍♂️

✅ 필수 협업 시간을 주중 10:00 - 23:59 정한다
이 시간을 제외하고는 서로 합의 하에 양해를 구하고 연락 및 소통을 한다.
추가적으로 필수 작업 시간은 10:00 - 21:00 로 정한다.

✅ 의견이 갈리는 경우, 다수결을 따르되 나머지 사람들이 설득이 될 때 다음 단계로 진행한다.

✅ 프로젝트의 궁극적인 목표는 기획서의 필수 요구사항을 모두 구현하는 것이며, 명시되지 않는 상황과 관련해서는 학습을 우선으로 한다.
목표는 학습이지만 기본적인 동작에 대해서는 완벽하게 작동하는 결과물을 만들 것.

✅ 둥글게 살자 :)

코드 리뷰 👀 (매일!)

• 자율적으로 작성하되, 매일 아침 리뷰를 체크하며 피드백을 남기는 시간을 가진다.
• 의견은 항상 강요가 아닌 제안으로 작성하자.
• 리뷰어의 의견엔 적극적으로 좋아요 버튼을 눌러주자(강요) - 👍(3)
• 개선해야할 점을 포함해서 잘한부분은 적극적으로 칭찬해주자!

Web 코딩 컨벤션 🤙

네이밍 컨벤션

클래스

• PascalCase
• 명사 또는 명사구문으로 표기

나머지

• 그 외의 모든 명명은 camelCase로 통일합니다. (예. 변수명, db명, 테이블명, 칼럼명 등)

함수명 컨벤션

[리액트 함수]

• 함수명은 어떤 기능을 하는지 바로 알수있도록 직관적으로 명명한다 (예: onSubmitIssue, onChangeTitle)

변수명 컨벤션

• 가급적 단어는 축약형으로 쓰지 않는다. (예외: promise -> prom, event -> e, error -> err)
• 반복문을 도는 객체의 이름은 가급적 명확하게 해주되, 불명확한 경우 elem으로 통일한다.
• 들여쓰기 두 칸
• 세미콜론 사용
• 문자열은 홑따옴표 사용 ('')
• 컴포넌트 선언시에 function / 이하 나머지 함수는 Arrow Function을 사용

참고링크

타입 컨벤션

• enum (PascalCase) enum Color { red } (X) enum Color { Red } (O)

• 네임스페이스 값 (PascalCase) namespace Foo { }

• 인터페이스 (PascalCase) interface Foo { }

• 클래스 class Foo { bar: number; hello() {} } (O) class Foo { Bar: number; Hello() { } } (X)

• 함수이름 function helloWorld(){ ... } (O) function HelloWorld{ ... } (X)

• 프로퍼티(property) 이름 var fooVar; (O)

• 지역 변수 이름 인터페이스 이름 앞에 I를 붙이지 않는다. 예) IFoo(X) 비공개 프로퍼티 앞에 _를 붙이지 않는다. 예) _foo(X)

• 지역 메세지 사용 message.json을 만들어서 모든 문자열을 관리한다.

// 예시
{
    commentSuccess: "comment 등록 성공",
    ...
}

일반적인 구성

• ECMA Script 6+를 준수하여 함수를 작성한다.
• 스타일

타입 앞에 공백을 넣는다. const foo: string = "hello";

세미콜론, 콜론, 컴마 뒤에는 항상 공백을 둔다. for (var i = 0, n = str.length; i < 10; i++) { }

변수는 단일 선언을 한다. (i.e. use var x = 1; var y = 2; over var x = 1, y = 2;)

• 화살표 함수

(x) => x + x (X)
x => x + x(O)
(x,y) => x + y(O)
<T>(x: T, y: T) => x === y(O)

• Null과 Undefined

null을 반환하지 말고 undefined로 반환할 것

return null;         (X)
return undefined;    (O)

null / undefined를 체크할 때는 ==, undefined / !=를 사용하고 === / !==는 사용하지 말것

if (error !== null) (X)
if (error != undefined) (O)

타입에 undefined를 두지 말고 y?로 처리할 것 let foo = {x:123, y:undefined};

출처: https://happygrammer.tistory.com/156 [happygrammer]

버전 관리

1. 11/24 그라운드 룰 수정