개발

React

React를 활용하여 컴포넌트단위의 화면개발을 진행
Class Component대신 Functional Component를 사용하며 hook을 사용합니다.

SPA & CRA

검색엔진노출 목적이 없으므로, Single Page Application으로 제작합니다.
빠른 기능구현에 초점을 맞춰 Create React App 보일러플레이트를 사용하여 프로젝트를 생성합니다. (진정한 프론트엔드 개발자라면 밑바닥부터 webpack 및 bable 등을 직접설정합니다.)

Redux

상태관리 로직을 redux를 통해 분리합니다. (계층간 이벤트 및 상태전달 시 중복코드 제거)
비동기요청 관련 액션은 redux-thunk를 활용합니다.

Jest & Storybook

storybook을 통해 컴포넌트 기능 공유 및 문서화를 진행합니다.
jest를 통해 컴포넌트 기능단위의 테스트를 진행합니다.

ESLint & Prettier

컨벤션유지를 위하여 eslint와 prettier를 사용합니다. 설정방법
최상단 디렉토리의 .prettierrc 파일에서 포멧팅을 설정합니다.

{
  "singleQuote": true,				// ' or "
  "printWidth": 100,				// 코드 한줄 최대길이
  "tabWidth": 2,				// tab 너비설정( 스페이스 단위 )
  "useTabs": false,				// tab 사용여부( false 시 tab을 눌러도 space처리 )
  "semi": true,					// 코드 줄마다 ; 붙이기
  "quoteProps": "as-needed",			// 객체 속성명에 쌍따옴표 붙이기 {"a":0 }
  "jsxSingleQuote": false,			// jsx 내부에서 문자열 작성 시, ' or "
  "trailingComma": "es5",			// 객체 속성마다 마지막에 콤마 붙이기
  "arrowParens": "always",			// 화살표함수 인자에 괄호( ) 여부
  "endOfLine": "lf",				// 운영체제별 개행문자 이슈로인하여 \n로 통일
  "bracketSpacing": true,			// {a:0} or { a: 0 }
  "jsxBracketSameLine": false,			// *링크참조
  "requirePragma": false,			// 특정 주석이 있는 파일만 formatting 처리
  "insertPragma": false,			// **링크참조
  "proseWrap": "preserve",			// ***링크참조
  "vueIndentScriptAndStyle": false		// ****링크참조
}

* jsxBracketSameLine
** insertPragma
*** proseWrap
**** vueIndentScriptAndStyle

디자인 및 css 스타일링

Figma

디자인 협업 및 공유를 위하여 Figma를 채택하였습니다.

개발자 사용tip

컴포넌트 선택 후,
1. alt키를 누룬채로 다른 컴포넌트에 마우스를 올리면 컴포넌트 사이의 간격이 표시됩니다.
2. 우측메뉴의 Inspect항목을 선택하면 css 속성이 표시됩니다.

Tailwind & Chakra & Emotion

tailwindcss를 활용하여 화면 레이아웃 구현
chakra-ui의 컴포넌트 활용
emotionjs을 통해 컴포넌트 스타일 커스텀