✍ 오늘 한 일

💡 오늘 진행 상황을 간단하게 정리 합니다.

뉴 아토믹 디자인 패턴

// PascalCase

// ATOMS 기능별
// Button/index.tsx, style.ts
// Button, Input, Text...

// MOLECULES
// /SideBar/index.tsx, style.ts
// /Navigation/index.tsx, style.ts
// /Header/index.tsx, style.ts
// /Modal/index.tsx, style.ts

// ORGANISMS 경로별
// /main/insert/index.tsx, style.ts
// /main/write/index.tsx, style.ts
// import MainInsert from organisms/main/insert

// PAGES 라우터 최상단 루트
// Main, Login, Landing,

• 모든 파일명은 PascalCase 로 작성한다.
• 모든 컴포넌트는 폴더 / index.tsx, style.ts 로 구성된다.
• index.tsx 에는 함수형 컴포넌트가, style.ts에는 styled-component가 관리된다.
• ATOMS
  • 폴더 명은 기능별로 작성한다.
  • ex ) Button, Input, Text
• MOLECULES
  • 폴더 명은 컴포넌트 영역 별로 작성한다.
  • ex ) SideBar, Navigation, Header, Modal
• ORGANISMS
  • 폴더 명은 url 경로별로 작성한다.
  • Page 에서 import 시 url 경로를 PascalCase 로 작성한다.
• PAGES
  • 라우터 최상단 루트만 있다.
  • 해당 영역은 파일만 존재해야 한다.

프론트 코드 컨벤션

• 변수

  // camelCase
  // 상수 UPPER_CASE
  // boolean은 is-
  
  // 아무렇게 쓰지 말것
  // const a [x]
  // function (a,b,c) => [x]
   
  // 설명이 필요한 부분엔
  // 주석을 써주자

• 함수명
  • 모듈

    // 카멜 케이스
    // const getData()
    // export dafault getData;

  • 이벤트 함수명

    // 동사로 시작
    // 카멜 케이스
    // -handler()로 끝남

  • 비동기 함수명

    // 기존 일반 함수 컨벤션 사용
    // 단, 앞의 동사는 요청하는 METHOD 방식과 동일하게 get,post,update,delete 식으로 시작할 것!
    // getFoodData
    
    // 단, 이 형식과 어울리지 않는 요청 ex) login, signup, logout 이런 애들의 경우는 예외로 한다.
    // 잘 모르겠으면 함께 의논해볼 것!

• 스타일 컴포넌트 명

  // <Styled->
  // style.ts 내에 모듈화 되어있어야 한다.

• 파일명
  • 컴포넌트 함수명

    // PascalCase
    
    // ATOMS 기능별
    // Button/index.tsx, style.ts
    // Button, Input, Text...
    
    // MOLECULES
    // /SideBar/index.tsx, style.ts
    // /Navigation/index.tsx, style.ts
    // /Header/index.tsx, style.ts
    // /Modal/index.tsx, style.ts
    
    // ORGANISMS 경로별
    // /main/insert/index.tsx, style.ts
    // /main/write/index.tsx, style.ts
    // import MainInsert from organisms/main/insert
    
    // PAGES 라우터 최상단 루트
    // Main, Login, Landing,

• import 시 묶음 규칙

  // import React 관련라이브러리
  
  // import api 관련
  
  // import css 관련
  
  // import components
  
  // 줄바꿈은 한칸 씩

• jsDocs, 주석

  // component
  // @description 
  // @author
  // 꼭 작성할것
  
  // 함수의 경우 export 한 것은 무조건 쓴다.
  
  // 이해하기 어렵다고 판단되는 함수도 쓰는 것을 장려한다.
  
  // 주석 많이많이 완전 오키

📢 개선 사항

💡 오늘 하루 개선하면 좋았을 부분을 작성합니다. 없다면 생략하셔도 좋습니다.

📢 내일 진행 예정

💡 내일 할 업무를 팀원들과 함께 공유해봅시다. 글이 자세할수록, 팀원 모두가 업무 흐름을 파악하기 쉬워집니다.

와이어 프레임 만들기

남은 이틀동안 남아있는 와이어 프레임을 만들 예정이다. 디자인 적인 영역이기 때문에, 근무시간 외에도 작업이 필요할 것이라 예상된다.