Portfolio

기술 스택

언어 typescript

컴포넌트 문서화 storybook

프로젝트 구성 Next.js

디자인 프레임워크 Mui

상태관리 Context API

기타 개발 편의성 Eslint, Prettier, Comment Anchor(vscode extension)

컨벤션

네이밍

컴포넌트 이름: 파스칼 케이스 (ComponentName)

타입 이름: 파스칼 케이스 (Props)

배열 타입은 string[] 처럼 사용

상수 이름: 대문자와 언더바 (MAX_NUMBER)

변수 이름: 카멜케이스 (name, myName)

style-component 이름: Wrapper 또는 Container

첫 껍질만 Wrapper, 그 위부터는 Container

boolean 타입으로 변환시 Boolean(state) 아니고 !!(state) 처럼 작성한다

컴포넌트 작성 예시

컴포넌트 작성은 retto님이 만든 vscode 확장 supergen 을 통해 만든것을 기본으로 한다

+ 추가로 컴포넌트 코드를 깔끔하게 하도록 1회성 hook 등 을 helper.ts 에 저장한다


// components/Test/index.ts
export { Test } from "./Test";

// components/Test/style.tsx
import styled from "@emotion/styled";

interface StyledTestProps {
  string: string;
}

export const StyledTest = styled.div<StyledTestProps>`
  background-color: ${({ string }) => (string ? "black" : "yellow")};
`;

// components/Test/Test.stories.tsx
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Test } from ".";

export default {
  title: "components/Test",
  component: Test,
} as ComponentMeta<typeof Test>;

const Template: ComponentStory<typeof Test> = (args) => <Test {...args} />;

export const Default = Template.bind({});
Default.args = {};

// components/Test/Test.tsx
import * as S from "./style";

interface TestProps {
  string: string;
}

export const Test = ({ string }: TestProps) => {
  return <S.StyledTest string={string} />;
};

Eslint

airbnb 룰을 기반으로 수정


{
	rules: {
		'prettier/prettier': "off",
		// 선언만 하고 사용 안한 변수 경고
		'no-unused-vars': "warn",
		// 콘솔 경고
		'no-console': "warn",
		// import 확장자 error를 ts, tsx에서는 제외
		"import/extensions": [
			  "error",
			  "ignorePackages",
			  {
			    ts: "never",
			    tsx: "never",
			  },
			],
		// import ts 관련
		'import/no-unresolved': "off",
		// 1개만 export 할때 에러 => 경고
		'import/prefer-default-export': "warn",
		// jsx문법은 jsx파일에서만 사용해야 한다는 에러 => tsx 허용
		'react/jsx-filename-extension': ["error'", { extensions: [".tsx"] }],
		// 삼항 연산자 금지 => 무시해서 허용
		'no-nested-ternary': "off",
		// 화살표 함수, 함수 선언, 함수 표현 등 컴포넌트 선언 코드를 통일할 수 있음
		"react/function-component-definition": [
		  2,
		  { namedComponents: "arrow-function" },
		],
		// Component.defaultProps 사용 안함
		"react/require-default-props": "off",
		// if, else if, else, for, while 블록의 내용이 1줄이면 중괄호를 생략한다
		curly: ["error", "multi"],
		// 외부 의존성 import 관련 룰 사용 안함
		"import/no-extraneous-dependencies": "off",
		// JSX 문법을 사용할 때는 React를 import 해야하는 룰 => 사용 안함
    "react/react-in-jsx-scope": "off",
	},
	/*
	기존의 'import/no-unresolved': 0를 제거하고
	'npm i -D eslint-import-resolver-typescript' 설치 후
	아래와 같이 셋팅하면 관련 에러가 발생하지 않습니다
	*/
	settings: {
	  "import/resolver": {
	    typescript: {},
	  },
	},
	// storybook
	overrides: [
	     {
	      files: ["*.stories.js", "*.stories.jsx", "*.stories.ts", "*.stories.tsx"],
	      rules: {
	        "react/jsx-props-no-spreading": "off",
	      },
	    },
	  ],
}

선언만 하고 사용은 하지 않은 변수와 console은 vscode의 problems를 통해 확인해서 커밋 전에 지운다

깃 컨벤션

소문자로 작성

feat: 새로운 기능의 추가 + UI 스타일

fix: 버그 수정, console.log, css 버그 수정

docs: 문서 수정, 주석제거….

Vscode 확장 ‘Comment Anchor’
커밋 메시지 제목에 ‘feat: 로그인 페이지 추가’, 내용에 ‘docs: TODO api 반영’ 처럼

fmt: 코드 스타일 (세미콜론, 코드 수정이 안됐을 때, 공백)

refactor: 코드 기능 수정 (변수명 수정, 컴포넌트 분리, 가독성 + 효율성이 향상되었을 때)

test: 테스트 코트, 리펙토링 테스트 코드 추가

build: eslint, prettier, 라이브러리..…

css도 하나의 기능으로 보고 feat, fix

console.log도 사용자 입장에서는 에러기 때문에 fix

Conventional Commits

A specification for adding human and machine readable meaning to commit messages

https://www.conventionalcommits.org/en/v1.0.0/

깃 브랜치 전략

main / dev
파스칼 케이스로 작성
ex)

#237/Feat/DummyData

#76/Refactor/Card-to-BaseCardContainer

머지 전략

approve 2 이상
all resolve

리뷰 댓글에 대해

merge는 본인이
dev로는 그냥 merge
release는 sqush merge

라벨

우선순위 (높음, 낮음)
상태 (예정, 진행중, 리뷰 대기, 완료)
유형 (버그, 문서, 기능 추가, 기능 개선, 질문, 리팩토링, 테스트)x
동영 멘토님 라벨 중 규모, 브레이킹 체인지, 반복을 제외하고 사용

Labels · pers0n4/.github

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/pers0n4/.github/labels

PR 코멘트 컨벤션


0. 총평

- [ ] 1. 돌아 가는가
- [ ] 2. 컨벤션
- [ ] 3. 디렉토리
- [ ] 4. 컴포넌트 구조
- [ ] 5. 최적화 및 로직
- [ ] 6. 중복
- [ ] 7. UI

8. 기타

단순히 대체 코드를 제시하거나 문제가 있다고 말하는 것이 아니라, 그 근거를 자세히 설명할 것.

코드 작성자와 리뷰어는 서로 코드를 이해하는 방향이 다를 것이다. 자신이 이해한 방향과 근거를 자세히 설명할 것.

버그, 논리 오류로 인한 Suggestion의 경우 문제 지점에 대해 설명할 것.

컨벤션이나 주관적인 영역의 경우 판단 및 논의의 기준이 될 수 있는 레퍼런스를 참조할 것.

타입스크립트 관련

객체는 Interface를 권장한다

Component.defaultProps를 사용하지 않고, props에 기본 값을 지정한다

Mui import를 어떻게 할것인가

import { Component } from ‘mui’

⇒ vscode에서 자동완성은 이거

import Component from ‘mui/Component’

⇒ mui에 작성된 예제코드는 보통 이거

Mui 사용 컴포넌트 통일 여부 (급한것은 아닌데 생각난김에 적습니다)

Mui Alert vs snackbar

https://mui.com/material-ui/react-alert/

https://mui.com/material-ui/react-snackbar/

1번에서 정한것이나 Button 등에 대해서 outlined / filled / … 통일

event 네이밍

handle + 무엇을 + 어떤 이벤트

ex) handleUserButtonClick …

현재 dev 기준으로 handleOpen, handleClose, handleLogin…인데 handleLoginClick과 같이

기술스택 / 컨벤션