코드 컨벤션

☑️ 코드 컨벤션

<aside> 📁 폴더 구조( custom hook )

컴포넌트 당 하나의 폴더를 만들어서 관련 파일(style, story, skeleton…) 한 번에 묶어서 정리합니다.나중에 필요하면 story들만 넣은 stories 폴더를 만들어 정리할 수 있습니다.

</aside>

<aside> 🍃 브랜치명(branch)

feature/기능명 으로 브랜치를 파서 작업을 합니다. 푸시할 때는 dev 브랜치에 하고, pr을 날리며 최종 배포시에 main에 병합합니다.

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/7350/7350737.png" alt="https://cdn-icons-png.flaticon.com/512/7350/7350737.png" width="40px" /> 문자열을 처리할 때는 작은따옴표를 사용하도록 합니다.

</aside>

</aside>

<aside> ➡️ 처음 탭은 2칸을 띄웁니다.

</aside>

<aside> 🐫 함수명, 변수명은 카멜케이스로 작성합니다.

</aside>

<aside> ⭕ boolean값은 접두어 is-를 붙여 카멜케이스로 작성합니다.

</aside>

<aside> 💡 이벤트 핸들러 함수는은 접두어 on-을 붙여 카멜케이스로 작성합니다.

</aside>

<aside> 🎨 스타일 코드는 스타일 컴포넌트 작성하며, 컴포넌트 폴더에 style 파일을 만들어서 작성한다.

</aside>

<aside> ✨ mui 라이브러리를 사용하여 반응형 컴포넌트를 만든다.

</aside>

<aside> ➰ api의 endpoint 는 상수화(큰 알파벳)하여 사용하기

</aside>

<aside> ➡️ 함수 스타일은 화살표 함수로 통일합니다. const Header = () ⇒ {}

</aside>

<aside> 🧩

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" alt="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" width="40px" /> 주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.

// Good
const someFunction = () => {
  ...

  // statement에 관한 주석
  statements
}

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/3978/3978575.png" alt="https://cdn-icons-png.flaticon.com/512/3978/3978575.png" width="40px" /> 연산자 사이에는 공백을 추가하여 가독성을 높입니다.

a+b+c+d // bad
a + b + c + d // good

</aside>

<aside> ☝ 콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높입니다.

var arr = [1,2,3,4]; //bad
var arr = [1, 2, 3, 4]; //good

</aside>

<aside> 🔠 생성자 함수명의 맨 앞글자는 대문자로 합니다.

function Person(){}

</aside>

<aside> 🥩 png, jpg, env를 사용하거나 svg를 태그형태로 사용할 경우 delcare를 사용해줍니다. 파일은 src/d.ts를 사용합니다 (declare.ts의 줄임말)

</aside>