기록

혼자 하는 코딩이라면 신경을 안 써도 되는 부분이지만... 협업간에 꼭 필요한 부분이다. lint와 prettier로 맞추어갈수 있다지만 현 회사에서 컨벤션을 맞추기 위해 기록한 부분들을 블로그로 옮겨본다. 1. 네이밍 규칙 1 - 1 파일명 component, enum 관련파일 UpperCamelCase로 표기 ex) MainPage.tsx 그외에 파일들은 lowerCamelCase로 표기한다. ex) index.tsx, 1 - 2 폴더명 component와 container 내부 하위 폴더들은 UpperCamelCase 표기 pages의 하위 폴더는 - 표기 ex) pay-management 1 - 3 변수, 함수 lowerCamelCase로 표기 1 - 4 컴포넌트명, enum명 UpperCamel..

문제 내 풀이 공백을 기준으로 배열을 만들어준다. ["try", "hello", "world"] 만든 배열의 각 요소마다 map을 돌려 단어 하나하나를 배열로 만들어준다 ["t", "r", "y"] ["h", "e", "l", "l", "o"]["w", "o", "r", "l", "d"] 이렇게 나온 배열로 index 값이 2로 나누어 떨어질 때 대문자로 아닐 때 소문자로 변환한뒤 join()으로 분리했던 문자열을 다시 합쳐준다. const solution = s => s.split(" ") .map(x => x.split('') .map((c, i) => i % 2 === 0 ? c.toUpperCase() : c.toLowerCase()).join("")).join(" ");

서론 이전 포스트에 이어서 기간을 선택하는 컴포넌트와 셀렉트 박스 컴포넌트를 만들어본다. FormDateRange 컴포넌트 src/enum/DateRange.ts enum으로 기간 선택 시 오늘 최근 7일 한 달을 선택하기 위한 enum과 버튼 텍스트를 반환하는 함수를 만든다. export enum DateRange { ALL = 'ALL', TODAY = 'TODAY', RECENT_WEEK = 'RECENT_WEEK', RECENT_MONTH = 'RECENT_MONTH' } export const DateRangeMethods = { getLabel: (key: string) => { switch (key) { case DateRange.ALL: return '전체'; case DateRange.T..

서론 antd를 이용한 form 컴포넌트 제작. FormItem 하나하나씩 나누어서 만들기. 사용 패키지 yarn add antd @ant-design/icons styled-components yarn add -D @typs/styled-components yarn add -D craco-antd @craco/craco yarn add moment 폴더구조 Craco 이용 antd 테마 커스텀 package.json 에서 start 스크립트를 craco start로 변경해준다. /craco.config.js module.exports = { plugins: [ { plugin: require("craco-antd"), options: { customizeTheme: { "@primary-color": ..

문제 내 풀이 유사 배열 객체로만든뒤 reduce로 모두 더해준다. const solution = (n) => Array.from(String(n), Number).reduce((a, b) => a + b);

문제 내 풀이 내려받은 숫자를 유사 배열 객체로 만들어 뒤집고 Number 형으로 매핑한다. const solution = (n) => Array.from(String(n), Number).reverse();