Portfolio

컴포넌트 작성 방식, 네이밍 규칙, 프로젝트 폴더와 파일 구조 등 필요한것들을 정하여 일관성 있게 개발합시다!

[중요] 줄임말은 쓰지 않는다. 줄임말은 어떠한 경우에도 사용하지 않습니다. res e(이벤트 객체) i 등 과 같은 모든 줄임말은 금지합니다.

1. 함수 export 방식 선언 후 export 👈VS 선언과 동시에 export

함수 선언 방식은 const 를 사용합니다.


const Component = () => {}

export default Component;

jsx를 반환한다면 확장자 이름을 .jsx를 사용합니다.

3. ASI를 이용하지 않고 세미콜론을 필수적으로 써줍니다. (prettier로 관리).


// Uncaught TypeError: 1 is not a function
let a = 1
(function() {
  console.log("Hello!");
})();

4. 리터럴 값은 상수로 만들어서 사용합니다. 상수는 스네이크 케이스를 사용합니다.


const BASE_URL = 'http://localhost3000';

모든 함수는 화살표 함수로 작성합니다.

var를 쓰지 않고, const와 let을 사용합니다.(단, const를 주로 쓰되 변수의 값 변경이 필요할 경우 let을 쓴다.)

image, svg는 카멜 사용하여 네이밍합니다.(ex. eraseCheck.svg).

변수명은 camelCase로 작성합니다. (issueLabel).

.tsx 파일의 파일(폴더)명은 PascalCase를 사용합니다. ex) LoginPage.tsx.

webpack alias를 이용해서 파일 절대 경로로 import, export 사용합니다. src: @, test: #

export할때 barrel export 방식을 사용하지 않습니다.

타입을 분리할 경우(여러 곳에서 타입이 생성될 경우(2군데 이상)) types 디렉토리에 관리한다.(추후 다시)

최대한 코드에 대한 설명 주석은 적지 않습니다. 이름만 읽어도 무슨 일을 하는 함수인지 알 수 있어야합니다.

만약 주석이 필요한 경우 // TODO: 해야 할 일 혹은 한 일을 날짜와 함께 적어줍니다.(2022.09.01). 신경써서 사용하기

변수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는 최대한 명시적인 변수명을 정해줍니다. 단, 의미없거나 불필요한 접두사나 접미사가 붙는 것은 지양합니다.(ex) currentTodoListData (X) ⇒ todoList (O))

16. 이벤트 핸들러를 정의할때 handle + 메서드명로 정의합니다.

on 접두사가 붙은 경우, 이 Prop에 실제 이벤트가 연결되어 있다는 걸 뜻하고,

handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미합니다.


function DateTypeToggleButton ({ onClick }) {
	return <button onClick={onClick} />
}

function ModalButton ({ onClick }) {
	return <button onClick={onClick} />
}

function Calendar () {
	const handleClickDateType = () => {}
  const handleModalOpen = () => {}

	/* 
		주의!!
		컴포넌트의 props로 핸들러를 넘길때도 handle 접두사를 사용해야 합니다.
	*/
	return (
		<>
			<DateTypeToggleButton onClick={handleClickDateType} />
			<ModalButton onClick={handleModalOpen} />
		</>
	)
}

화살표 함수 작성시 한 개의 파라미터만 사용하더라도 중괄호 사용(prettier로 관리)

선언부, 구현부 사이에는 줄 간격 해줍니다. 이외에 의미가 서로 다른 부분이라면 줄 간격 필수.

18. 인라인 함수는 사용하지 않습니다. 함수를 생성하여 할당해주세요.


function MyComponent() {
	return (
		// ❌
		<button onClick={() => setClose(true)}>버튼</button>
	);
}

후위 연산자 사용하지 않습니다. ++ --

☕️ 논의중인 내용 ☕️ 12.18 커피챗 참고

import 개수 4개로 제한한다. O/X

한 파일 안에 의존성이 너무 늘어나지 않도록 제한 (차라리 파일을 늘린다?)

type코드 분리

https://www.openapis.org/
https://github.com/OpenAPITools/openapi-generator
https://github.com/drwpow/openapi-typescript
API 서버 Open API 스키마 얻을 수 있는지? 확인 필요

18. react 의 for문 고유 키를 유니크하게 만들어줄 값이 없다면 다음과 같은 방법으로 결정합니다.


todoList.forEach((todo, index) => {
	return (
		<li key={${index}-${todo.value}}>
			value
		<li>
	)
});

key 자동으로 넣어주는 API가 있어요(찾아서 공유드릴게요 ㅎ)

index.ts 에 어떤 내용을 작성할 것인가(barrel export의 여파..)

개발 컨벤션