프론트엔드 프로젝트 목표 및 규칙

🏅 프로젝트 목표

• 챌린지보다는 완성도 높게

• 신기술도전에 의해서 오버하지만 않았으면!!

• 휘식님은 도전하는것도 조아~.~ 너무 죠아~~

• 라이브러리 + 디자인 시스템 + tailwind (+ 각자 생각하는 페이지 모습을 피그잼or와이어프레임 도구에 기록은 해두자!)

• 테스트 jest?

• 애자일하게 진행하자

• 버전관리를 진행하자! (기록으로 남기기!)

🤔 결정권자 & 담당

🤙🏻 개발 규칙

브랜치 전략

prefix 목록

// 이슈 컨벤션 깃허브에 저장할 컨벤션
# 📌 작업 내용
- task 1

// PR 컨벤션
# 📌 작업 내용
// 구현 내용 및 작업 했던 내역, 사진필요한 경우 선택적으로 첨부
- [x] 작업 내용

# 🚦 특이 사항
//주의깊게 봐야하는 PR 포인트 & 말하고 싶은 점

components
hooks
constants
types
utils

├── app
│   └── _common
│       ├── components
│       ├── hooks
│       ├── constants
│       ├── types
│       └── utils
│   ├── api
│   └── main
│       ├── page.tsx
│       ├── _component
│       ├── _util
│       ├── _type
│       └── _api
└── public

function Component() { ... }

export default Component;

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} />
		</>
	)
}

interface CommentListItemProps{...}

const CommentListItem = (props: CommentListItemProps) => {
	const { id, author, loginId, createdAt, comment, isMyComment } = props;
}

프리티어 설정

module.exports = {
  printWidth: 80, // 한 줄 최대 문자 수
  tabWidth: 2, // 들여쓰기 시, 탭 너비 (js 표준인 2 indent를 권장함)
  useTabs: false, // 스페이스 대신 탭 사용
  semi: true, // 문장 끝 세미콜론 사용
  singleQuote: false, // 작은 따옴표 사용
  trailingComma: "all", // 꼬리 콤마 사용
  bracketSpacing: true, // 중괄호 내에 공백 사용
  arrowParens: "avoid", // 화살표 함수 단일 인자 시, 괄호 생략
  proseWrap: "preserve", // 마크다운(ex.readme.md) 포매팅 제외
  endOfLine: "auto", // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
  jsxSingleQuote: false, // JSX에 single Quotation 사용 여부
  plugins: ["prettier-plugin-tailwindcss"] // tailwindcss 정렬
};

Automatic Class Sorting with Prettier - Tailwind CSS

People have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS.

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier