devlog_zz

10진수를 n진수로 변환하기 toString() 숫자 및 BingInts 의 toString()은 선택적으로 기수(radix)를 매개변수로 취하여 10진수를 다른 진수로 변환할 수 있다. 기수 값은 최소 2부터 36까지이다. let num = 10 num.toString(2) // 10진수 -> 2진수로 변환 // 1010 num.toString(3) // 10진수 -> 3진수로 변환 // 101 n진수를 10진수로 변환하기 parseInt() 문자열을 특정 진수의 정수로 변환한다. 인수로는 parseInt('변환시키고자하는 문자열', 해당 수의 진수) 가 들어간다. parseInt('101',3) // 3진수 '101'을 10진수로 변환 // 10 parseInt('1010',2) // 2진수 '101..

toLocaleString() 3자리마다 숫자를 끊어 콤마를 삽입하여 문자열로 반환하는 역할을 한다. 인자로 들어온 지역 값에 따른 숫자 표기 방식을 적용하며 'en'은 영어권 국가의 숫가 표기 방식을 사용하겠다는 것을 지정한다. number type setState 오류 돈을 입력하고 이를 set해주는 기능 구현할 때 1,000 이상으로 넘어가면 값이 입력이 안되고 NaN이 뜨는 에러가 발생했다. [charge,setCharge] = useState(0); ... setCharge(Number(e.target.value))} /> ... 1000을 입력하면 toLocaleString()에 의해 1,000으로 변한다. 1,000을 Number()로 변환하니 NaN이라는 값이 되어 입력이 안되었다. 해결방..

변수를 통한 객체 속성 접근 - javascript 객체 속성을 변수를 통해 접근할 때 대괄호 표기법 [ ] 안에 변수를 넣어 접근하면 된다. export class Route { id?: string; action?: string; } const setInfo = (field: any, id: string, value: any) => { let route = new Route(id); route[field] = value; } javascript 에서는 대괄호 표기법으로 [ ] 안에 변수를 넣어 사용해도 에러가 발생하지 않았다. 변수를 통한 객체 속성 접근 - typescript 하지만 TypeScript에서는 Element implicitly has an 'any' type because expres..

배열의 항목별 개수 세기 ['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..

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값이 양수가 나오면 배열에서 자리를 교체하고 음수가 나오면 교체하지 않는다.