도리쓰에러쓰

오늘은 KB 헬스케어 기업 과제에서 내가 맡은 부분인 '맞춤 건강관리' 부분을 각자 코드리뷰하고 합쳤다. 나는 타입이든, 함수든 tsx파일 안에서 만든 후에 다른 파일로 옮겼는데.. 그 습관을 고쳐야겠다.. 코드가 중구난방.. 그냥 처음부터 다른 파일 안에서 만들고 import해오면 되는데 왜그럴까.. 그리고 규재님이 멘토님이 가르쳐주셨던 기가 막힌 코드를 적용하셨다.. (최고..) export const symbolIcon = { resBMI: , resBloodPressure: , resTotalCholesterol: , smkQty: , resFastingBloodSuger: , drnkQty: , exerciQty: , resGFR: , }[tag]; 사실 '맞춤 건강관리' 부분은 데이터를 map..

1️⃣ eslintrc.json에 아래와 같이 설정하면 CRLF / LF 변경할 필요 X "prettier/prettier": [ "error", { "endOfLine": "auto" } ] 2️⃣ colors, position 등에 내용을 추가하여 적용하면 에러나는 부분이 있었는데 아래와 같이 src 앞에 있었던 /를 제거하면 해결 @use 'src/styles/mixins/position'; 오늘은 KB헬스케어 기업과제 시작 날이다. '맞춤 건강관리' 부분을 3명이서 하다 보니까 나누기가 애매해서 일단 내일까지 각자 만들어보기로 했다! 다음주까지 과제 3개.. 할 수 있을까? 힘들어도 해야지 뭐..

오늘은 매드업 과제 제출 날이다. 우선 데이터가 있는 JSON 파일을 차트에 맞게 데이터 가공하는게 어려웠다. 차트에 맞게 데이터 가공한 방법은 아래와 같다. 1️⃣ lodash 라이브러리를 통해 'channel' (페이스북, 구글, 네이버, 카카오) 별로 데이터 그룹화 const groupByData = groupBy(data, 'channel') 2️⃣ 선택한 날짜에 포함된 데이터를 더하여 데이터 가공 COMPANIES.forEach((company) => { groupByData[company].forEach((v) => { const selectDate = new Date(v.date) const startDate = new Date(recoilDate.startDate) const endDate..

1️⃣ 기가 막힌 코드.. 아래 코드는 값에 맞는 icon을 지정하려고 switch case문을 통해 retrun값을 반환하는 코드입니다. const sy = switch (symbol) { const AQXP: return break const BCH: return break const BTC: return break const BUSD: return break const EOS: return break } 근데 이렇게 하는 방법도 있었다.. 너무 깔끔하고 기가 막혀서 충격.. 나도 멘토님처럼 액자에 넣고 싶었다.. const Symbol = ({ symbol, className, showLabel }: Props): JSX.Element | null => { const symbolIcon = { AQ..

오늘은 또 다른 기업의 72시간 팀 과제가 시작되었다. 맡은 역할 : 매체 현황 > 그래프 1️⃣ Record type Record type은 object의 key와 value의 type을 지정해준다. type TData = Record const data: TData = {facebook: 3} 2️⃣ Spread Operator 알 수 없는 문제.. 데이터 구조를 잡기 위해 dataStructure object를 생성하고 data에 Spread Operator를 통해 deep copy를 하였다. 이는 주소를 복사하는 것이 아닌 값만 복사하는 것을 의미한다. 하지만 아래와 같은 방식으로 구현을 하면 facebook, google, kakao, naver에 모두 동일한 데이터가 들어간다. const da..

1️⃣ 코드리뷰 - scss 파일명 소문자로 시작하기 - axios.all 이용하여 병렬적으로 요청 처리하고 필터링하여 데이터 반환하는 방법이 있다.. - css all:unset;은 html tag의 기본 스타일을 초기화 시킬 수 있다 - html inline tag 안에 block / flow tag 넣지 않는다. inline tag는 애초에 감싸는 tag가 아니다. (예를 들어 a 혹은 span tag 안에 p나 div 넣지 않기) - 그러므로 span tag 안에 mark tag도 금지 2️⃣ Jest를 통한 함수 테스트하는 방법 - Jest 설치 yarn add --dev jest - 테스트할 함수를 export한다. const test = (number) => number * 2 export ..

1️⃣ focus-within CSS에서 부모 요소에 focus-within을 적용하고 자식 요소에 포커스 된 경우 부모 요소의 스타일을 적용된다. 2️⃣ netlify를 통한 배포 지금까지 github pages를 통해 배포를 하였는데 이번 팀 프로젝트에서 처음 netlify로 배포를 해보았다. Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com ..

원래 오늘 아침까지 각자 구현해보기로 하였으나 예상 외로 시간이 부족하여 하루 더 공부하며 개발해보기로 하였다. 1️⃣ input의 keydown 이벤트 input창에 커서가 있고 ArrowDown, ArrowUp, enter, escape를 누르면 이벤트가 실행되도록 하였다. list의 focus를 주는 것은 우선 index값을 -1으로 줬다. list의 첫번째 데이터가 0번째 데이터이기 때문에 ArrowDown을 누르면 0번째가 되도록 하기 위함이다. const [index, setIndex] = useState(-1) ArrowDown을 누르면 index값을 +1하게 하였고, ArrowUp을 누르면 -1되게 하였다. 그리고 list의 마지막 데이터에 focus가 되어있을 때 ArrowDown을 누르..