프론트엔드 정복하기

2자리로 나타내고 싶고, 한자리 일 때 앞에 0을 채우고 싶은 경우 위와 같은 스타일을 zero fill 스타일이라고 함. js zero fill 스타일을 검색해 보니 1) String.prototype.padStart() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart 그것 말고도 Intl, toLocaleString 등 number 다루는 함수 알아보기

https://puppypaw.tistory.com/175 // JSX에서 제네릭을 쓰면 엘리먼트로 착각하나 보다 ..

배열 리터럴의 spread **함수 호출 배열을 함수의 인수로 사용하려면 apply()를 써야 했다. spread는 이를 대체한다. // before function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args); // after myFunction(...args); **new에 적용 new로 생성자를 호출할 때, 배열과 apply를 직접 사용하는 것이 가능해졌다. var dateFields = [1970, 0, 1]; // 1 Jan 1970 var d = new Date(...dateFields); **배열 복사 가능 var arr = [1, 2, 3]; var arr2 = [...arr]; // arr.slice..

interface의 특정 property만을 추출해서 타입을 선언할 때 활용할 수 있다. 아래와 같이 LinkWrapProps 인터페이스는 'links'라는 프로퍼티를 가지고 있는데, 이것은 LinkProps 배열 타입을 가진다. interface LinkWrapProps{ links: LinkProps[]; .... } interface LinkProps{ activeClassName?: string; icon: IconsId; label: string; to: string; } 이제 LinkWrapProps의 links 타입을 가진 변수 LINKS를 선언하고 싶다면 어떻게 해야 할까? interface의 property name으로 해당 propery type만 불러와서 선언해주면 된다. const ..

getFlexAlign함수에서 result 변수를 파라미터로 전달받고 특정 값을 재할당 해서 return 시키고자 했다. function getFlexAlign(result: string, flexAlign: string) { result += flexAlign; return result; } ... let result = ` flex-direction: ${direction}; `; return getFlexAlign( result, ` align-items: ${align[0]}; justify-content: ${align[1]}; `, ); 하지만 eslint error가 발생했는데 에러를 발생시킨 원인 아래와 같은 규칙 때문이다. ESLint - 함수 매개 변수 재 할당 금지 https://ru..

데이터 추가 기능 리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 합니다. 이를 불변성 유지라고 하는데요. 불변성 유지를 해 주어야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있기 때문에 push함수를 사용하지 않는걸 권장합니다. 1. Spread 연산자 ES6에 새로 추가된 문법으로 ...을 사용해서 배열의 값들을 받아오거나 확장시킬 수 있습니다. 배열이나 문자열과 같이 반복가능한 문자를 0개이상의 인수(함수로 호출할 경우) 또는 요소(배열 리터럴의 경우)로 확장하여 0개 이상의 키 값의 쌍으로 객체로 확장시킬 수 있습니다. const arr = ['a', 'b', 'c']; const arr2 = [1, 2, 3]; console.log([...arr, ....