도리쓰에러쓰

오늘은 매드업 과제 제출 날이다. 우선 데이터가 있는 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을 누르..

오늘은 휴먼스케이프 기업 과제 프로젝트 첫 시작 날이다. 이전에 react query랑 redux toolkit을 공부하고 드디어 오늘부터 시작하게 됐다. route 이동도 없고 기능이 많진 않아 나누기 애매하다고 느껴져서, 이전에 해강님이 추천해주신 Live Share라는 vscode extension을 활용하기로 했다. Live Share는 vscode의 코드를 다같이 수정할 수 있기 때문에 초기 세팅 + UI + 검색바에 입력했을 때 아래 추천 검색어까지 띄우는건 다같이 작성하였다. 그리고 내일까지 각자 [추천 검색어 중 입력한 검색어와 일치한 부분 볼드 처리] + [키보드만으로 추천 검색어 이동] 기능을 개발하고 코드리뷰 하기로 하였다. 1️⃣ !!keyword 지금까지 !true 이런건 봤어도 ..

1️⃣ 날 미치게 했던 공공 API SERVICE_KEY_IS_NOT_REGISTERED_ERROR .. 어제 하루종일 저 에러가 날 떠나지 않았다.. 처음엔 key를 잘못 썼겠거니 싶어서 다시 복붙해보고.. 그래도 안되길래 그 긴 key를 하나하나 다 읽어보고.. 인코딩 키로도 해봤다가 디코딩 키로도 해봤다가.. 안되서 디코딩을 인코딩으로 변환해주는 사이트에서 직접 변환해서 적용도 해봤다가.. 내가 키값을 잘못 쓴게 아니라 코드를 잘못 쓴건 아닐까 하나하나 꼼꼼히 확인해보고.. 결론은 어제 에러 해결 못했다.. 그래서 새벽 4시에 다시 재발급 받고 자동승인이 되도 1시간 정도 기다려야한다고 해서 해결 못하고 잠들었다가.. 오늘 프론트엔드 코스 단톡방에 나와 같은 상황에 계신 분들이 있는지 여쭤보았다....