hwlink

에러 해당 오류는 주로 타입스크립트에서 숫자가 아닌 것을 연산하는 과정에서 발생하게 됩니다. 자바스크립트 코드에서는 문제없지만 타입스크립트에선 에러를 표시합니다. for (let i = 0; i < contentsData.length - 1; i++) { beforeChartValue.push({ name: contentsData[i].menuName, value: Math.floor( contentsData[i].refStdKcal * contentsData[i].beforeAmount ), per: Math.floor( (contentsData[i].refStdKcal * contentsData[i].beforeAmount * 100) / RECOMMEND_KCAL_VALUE ), })위의 코드는 c..

Coding/TypeScript 2022. 5. 3. 23:47

상대단위 px(약 0.0264cm), pt 같이 고정된 절대단위의 값이 아닌 브라우저가 어떤 기준에 따라 계산한 값 대표적으로 em, rem, %, vw, vh가 해당된다. 본 글에서는 rem, em을 다루겠습니다. rem / em 공통점 em, rem 둘 다 font-size의 속성 값에 비례해서 결정되는 상대단위입니다. ex 1) font-size 16px 0.5em = 16px x 0.5 = 8px 1em = 16px x 1 = 16px 2em = 16px x 2 = 32px ex 2) font-size 20px 0.5rem = 20 px x 0.5 = 10px 1rem = 20 px x 1 = 20px 2rem = 20 px x 2 = 40px em, rem 동일하게 동작합니다. rem / em ..

Coding/CSS 2022. 5. 2. 21:49

Extending Interfaces 클래스처럼, 인터페이스들도 확장(extend)이 가능합니다. 이는 한 인터페이스의 멤버를 다른 인터페이스에 복사하는 것을 가능하게 해주는데, 인터페이스를 재사용성 높은 컴포넌트로 쪼갤 때, 유연함을 제공해줍니다. interface Pet { name: string; age: number; } interface Tory extends Pet { breed: string; } interface Plants extends Pet { type: string; } const value: Plants = { name: 'trav', age: 2, type: 'cactus', }; 인터페이스는 아래 코드처럼 여러 인터페이스를 확장할 수 있어, 모든 인터페이스의 조합을 만들어낼 수..

Coding/TypeScript 2022. 4. 29. 00:49

자바스크립트에서 배열 요소의 index 값을 가져오는 방법으론 Array[index]이가 있습니다. 배열의 첫 번째 요소는 Array[0]으로 접근하고, 배열의 마지막 요소는 Array[Array.length-1]로 접근할 수 있습니다. 배열 요소에 접근하기 위해 사용할 수 있는 인덱스는 0 ~ Array.length-1 까지입니다. 이외의 배열 요소 접근 인덱스는 undefined를 반환합니다. 자바스크립트에선 Python 같이 Array[-1] 과 같은 접근 방식은 사용할 수 없습니다. Array.prototype.at() 해당 매서드를 사용하여 음수값으로 index 값을 가져올 수 있습니다. const arr = [1,2,3,4]; arr.at(-1) //4 array[-N] === array[ar..

Coding/JS 2022. 4. 27. 21:05

Typescript에서 setState의 값을 자식 컴포넌트에 props로 넘겨주고 Typing을 해주어야한다. 해당 typing을 따로 해주는 것이 아닌 부모에서 내려줄 props에 마우스를 올리면 자식컴포넌트 props에 typing 해줄 alias를 알려준다.

Coding/TypeScript 2022. 4. 27. 00:10

JSON, Javascript Object JS Object: JS Engine 메모리 안에 있는 데이터 구조 JSON(JavaScript Object Notation): 객체의 내용을 기술하기 위한 text파일(확장자명 .json) 클라이언트, 서버 HTTP 통신 시에는 JSON으로 송수신한다. 자바스크립트에 내장된 Convert 해주는 method. JSON to JS Object Method: JSON.parse() JS Object to JSON: JSON.stringify() const str=`{"data":[{"name":"joo","info":["man","322"]}]}`; const obj = {data:[{name:&#39;joo&#39;,info:[&#39;man&#39;,&#39;..

Coding/JS 2022. 4. 24. 21:13

React Testing Library React-testing-library란 React에서 제공하는 Testing 라이브러리입니다. Principal 우리는 웹 페이지가 사용되는 방식과 매우 유사한 테스트를 작성하도록 권장하는 방법과 유틸리티만 노출하려고 합니다. 유틸리티는 다음 지침 원칙에 따라 이 프로젝트에 포함됩니다. 렌더링 구성 요소와 관련된 경우 구성 요소 인스턴스가 아닌 DOM 노드를 처리해야 하며 구성 요소 인스턴스를 처리하도록 권장해서는 안 됩니다. 일반적으로 사용자가 사용하는 방식으로 응용 프로그램 구성 요소를 테스트하는 데 유용해야 합니다. 우리는 컴퓨터와 종종 시뮬레이션된 브라우저 환경을 사용하고 있기 때문에 여기에서 약간의 절충안을 만들고 있지만 일반적으로 유틸리티는 사용하도록 ..

Coding/React 2022. 4. 22. 23:37

useCallback 메모이제이션된 콜백을 반환합니다. *메모제이션: 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술 const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수. useCallback은 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용 인라인 콜백과 그것의 의존성 값의 배열을 전달하세요...

Coding/React 2022. 4. 21. 23:31