🦊 FE Guide

🍀 PR 가이드

• PR은 4야 개발팀 가이드에 맞춰서 진행.
• Merge 진행시에는 Squash Merge를 진행한다. Squash Merge 진행시 History를 더 깔끔하게 볼 수 있음.
• 코드 리뷰는 상대방이 기분나쁘지 않게 친절하게 진행하며, 리뷰 외에 궁금한 점은 Slack으로 질문한다.
• 리뷰할 게 없으면 이모지라도 남겨준다.

🍀 Component 가이드

• React 컴포넌트 제작시 function 키워드를 사용하며, 그 외의 함수 작성 시 Arrow Function(() ⇒ void) 키워드를 사용한다.

type LoginButtonProps = {
	text: string;
};

function LoginButton({ text }: LoginButtonProps){
	const handleClick = () => {
		console.log('click');
	};

	return (
		<button onClick={handleClick}>
			{text}
		</button>
	);
}

🍀 TypeScript 가이드

• 개인적으로 interface 키워드 보다는 type 키워드를 선호한다.
• [타입 별칭과 인터페이스의 차이점](https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%ED%83%80%EC%9E%85-%EB%B3%84%EC%B9%AD%EA%B3%BC-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90)
• 타입 별칭은 타입을 확장할 때 교집합(&)을 사용하지만, 인터페이스는 extends 키워드를 통해 확장한다.
• 인터페이스는 기존의 인터페이스에 새 필드를 추가할 수 있지만, 타입은 생성된 뒤에 달라질 수 없다.

🍀 Test 가이드

• Test Code는 꼭 작성하도록 하자.
• 정말 작성하기 어렵다면, ChatGPT 의 힘을 빌려보자.(ChatGPT 가 완벽한 테스트코드를 작성해주지는 않지만, 케이스는 어느정도 잘 제공하는 것 같음.)
• 테스트 코드는 jest-plugin-context 를 사용하여 BDD 형식으로 테스트 코드를 작성해보자. (TDD는 어렵다면 안해도 됨.)
• describe 키워드가 설명하기 위한 목적이라면 context 는 문맥에 해당하는 것으로 jest 가 기본적으로 context 키워드를 제공하지 않기 때문에 jest-plugin-context 를 사용하는 것이다.
• describe 는 한 기능에 대한 테스트 세트를 래핑하는데 사용되고, context 는 동일한 상태에서 하나의 기능에 대해 테스트 세트를 래핑하는데 사용된다.

describe('Test Component', () => {
  const renderComponent = () => render((
    <Test />
  ));

  context('모바일인 경우', () => {
    it('버튼이 보여야 한다', () => {
	  const { container } = renderComponent();

	  // ...
	});
  }

  context('모바일이 아닌 경우', () => {
    it('버튼은 보이지 않아야만 한다', () => {
	  const { container } = renderComponent();
	  // ...
	});
  }
});

• 위 테스트 코드는 컴포넌트에서 모바일인 경우 버튼이 보여야 하고, 모바일이 아닌 경우 버튼이 보이지 않아야만 하는 문맥으로 읽을 수 있다.
• 테스트 코드의 가독성 향상을 위해 given2 도 사용한다. 좀 더 선언적이게 작성할 수 있다.

describe('Some Component', () => {
  const renderComponent = () => render((
    <Test isMobile={given.isMobile} />
  ));

  context('모바일인 경우', () => {
	given('isMobile', () => true);

    it('버튼이 보여야 한다', () => {
	  const { container } = renderComponent();

	  // ...
	});
  }

  context('모바일이 아닌 경우', () => {
	given('isMobile', () => false);

    it('버튼은 보이지 않아야만 한다', () => {
	  const { container } = renderComponent();
	  // ...
	});
  }
});