devlog_zz

배열의 항목별 개수 세기 ['a', 'b', 'c', 'b', 'd', 'a', 'c', 'c'] 이와 같은 배열이 있을 때 각 항목별 개수를 세어 아래와 같은 결과를 얻고자 한다. [ { 'a': 2 }, { 'b': 2 }, { 'c': 3 }, { 'd': 1 } ] 방법 const arr = ['a', 'b', 'c', 'b', 'd', 'a', 'c', 'c'] let result = {} arr.forEach((x) => { result[x] = (result[x] || 0) + 1; }); // result {a: 2, b: 2, c: 3, d: 1} let resultArr = [] resultArr = Object.keys(result).map((key)=>{return {[key]:re..

프로그래머스 LV2 귤 고르기 138476 Javascript 귤 고르기 문제 설명 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 t..

Next.js기반 프로젝트에 Jest Unit test 환경 구성 후 test 파일 실행 시 오류가 발생했다. Jest Could not locate module FileName.css (mapped as identity-obj-proxy) FAIL __tests__/index.test.jsx ● Test suite failed to run Configuration error: Could not locate module ../styles/Home.module.css mapped as: identity-obj-proxy. Please check your configuration for these entries: { "moduleNameMapper": { "/^.+\\.module\\.(css|sass|sc..

이전 state에 의존하는 state update 시 주의점 state update 할 때 새 state가 이전 state에 의존한다면 반드시 setState 함수의 인자에 함수를 넣어야 한다. 원인 리액트 state의 업데이트는 일괄 처리(batched) 될 수 있다. setState인자에 함수를 넣지 않는다면 예상치못한 결과를 불러 일으킬 수 있다. state가 여럿일 경우에 다른 state의 변화로 리렌더링이 거의 동시에 이루어지거나 하게 되면 useState 왼쪽의 state가 이전의 값임을 보장할 수 없을 때가 있다. state의 변화가 비동기적으로 일어나기 때문이다. (scheduler에 대해서 알아보기) setState가 호출되면 바로 state가 바뀌는 게 아니라 리액트에게 변경해야할 st..

이벤트핸들러 함수 만약 이벤트 핸들러가 이벤트 객체에 대해 하나의 인수만을 갖는다면 이벤트 핸들러 함수를 onChange = {handleChange} 이런식으로 선언해도 된다. onChange = {e => handleChange(e)} 이런식으로 익명 함수로 묶을 필요가 없다. 나쁜 예: export const Name = () => { const [name, setName] = useState('') const handleChange = e => { setName(e.target.value) } return ( handleChange(e)} /> ) } 좋은 예: export const Name = () => { const [name, setName] = useState('') const handl..

javascript의 정렬함수 sort()와 sort((a,b)=>a-b)의 차이가 존재한다. sort() const arr = [10, 100, 90] arr.sort() // [10, 100, 90] 자바스크립트의 sort함수는 기본적으로 배열을 문자열 타입으로 간주하고 비교한다. '100'과 '90'을 비교할 때 앞자리인 1과 9 중에 1이 작기때문에 100이 90보다 작다고 정렬을 한다. sort((a, b) => a - b) arr.sort((a,b)=>a-b) // [10, 90, 100] 숫자 비교 정렬을 하려면 sort() 인자로 함수를 넣어 해결하면 된다. a-b값이 양수가 나오면 배열에서 자리를 교체하고 음수가 나오면 교체하지 않는다.

기존 Jest 로 test를 실행할 때 테스트 description 이 나오지 않고 통과한 개수만 나왔다. 해결방법 jset.config.js verbose: true jest.config.js에 verbose:true 추가시켜주면 아래와 같이 설명이 나오는 것을 확인할 수 있다.

test오류 typescript를 사용하는 react 프로젝트에서 test를 실행시켰을 때 아래와 같은 오류가 발생했다. SyntaxError: /Login.tsx: Unexpected token, expected "," (10:20) 타입 선언한 부분에서 오류가 발생했다. 오류해결 root > .babelrc 바벨 파일에 "@babel/preset-typescript" 추가해주기 { "env": { "test": { "presets": [ "@babel/preset-env", [ "@babel/preset-react", { "runtime": "automatic" } ], "@babel/preset-typescript" ], "plugins": ["@babel/plugin-transform-runtim..