개발
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을 통해 컴포넌트 스타일 커스텀
