기본 설정 가이드

  1. VSCode Indent(들여쓰기) 설정

    1. VSCode에서 윈도우 : ctrl + shift + p 또는 맥 : cmd + shift + p 단축키로 명령어 팔레트 창을 실행
    2. Indent Using Space 를 2로 설정 (탭 간격을 2로 설정)

  2. 자동 Fomatting 기능을 사용한다.

    1. VSCode 왼쪽 하단의 톱니바퀴 버튼 - 설정 - 검색창에 formatOnSave 검색 후 체크

      Untitled

    2. VSCode에서 윈도우 : ctrl + shift + p 또는 맥 : cmd + shift + p 단축키로 명령어 팔레트 창을 실행한 다음 open user setting 이라고 입력

      Untitled

    3. 아래 코드를 JSON 파일에 추가

      {
  // ...
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
}

  3. AirBnB 코딩 컨벤션(ESLint, Prettier)을 참고해 작성한다.

    1. 기본적으로 VSCode가 코드 포맷과 줄 바꿈을 진행하므로, 따로 체크할 필요는 없음.
    2. 코드에 빨간 줄이 뜨고, es 또는 lint 관련 에러로 뜨면 “빠른 수정(F8)” 사용
    3. npm run lint 로 포맷 오류 검증해보기

  4. 함수 이름은 동사 + 명사 형으로 명명한다.

  5. 백엔드 통신 API 함수는 HTTP 메서드명 + 명사 형으로 작성한다. (ex. getUserData() → get 요청 , postUserData() → post 요청)

  6. API와 직접 통신하는 코드가 아닌 경우, 데이터를 로드할 때는 fetchXXXData 의 함수명을 사용한다.

    // useEffect로 유저 데이터 로드 예시
const fetchUserData = async ()=> {
		const data = await getUserData(); // 백엔드 API 통신 함수
}

useEffect(()=>{
	fetchUserData(); //useEffect로 컴포넌트에서 데이터를 로드할 때는 fetch 라는 이름 사용
	}, [])

  7. 컴포넌트에서 import React from 'react' 를 사용하지 않아 밑줄이 쳐진다면 삭제해도 괜찮다.

기본 코드 포맷팅 설명

    arrowParens: "always",// 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
    // 닫는 괄호(>) 위치 설정
    // ex: <div
    //       id="unique-id"
    //       class="contaienr"
    //     >
    htmlWhitespaceSensitivity: "css",
    bracketSameLine: true, // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
    bracketSpacing: true, // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
    printWidth: 80,
    proseWrap: "preserve", // 산문 래핑 설정
    quoteProps: "as-needed", // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
    semi: true, // 세미콜론(;) 사용 여부
    singleQuote: true, // 싱글 인용 부호(') 사용 여부
    tabWidth: 2, // 탭 너비 설정
    trailingComma: "es5", // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
	    useTabs: false, // 탭 사용 여부

에어비앤비 Lint 설명 - 코드 저장하면 자동으로 Formatting 되니 신경쓰지 말 것.

  1. 세미콜론 사용
  2. 문자열 홑따옴표 사용
  3. 모든 변수는 let 과 const 로만 작성