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

이번주 회고 & 배운점 ERD 설계하는 법 습득 (맘스터치 ERD 구성해봄) 프, 백을 전체 구성해보는 사이드 프로젝트 스타트(erd > backend > frontend) 진행 개선할점 자료구조&알고리즘 공부 방법 변경. 기존: 한 챕터씩 읽으며 정리. >> 변경: 전체 쭉 훑고 2회독 시에 정리하기 시간소요 너무 되고 정리를 해야한다는 부담감 때문에 진도 부진함 다음주 플랜 개발 사이드 프로젝트 ERD 구성 / node js로 백엔드 구성 출근시간 독서 / 퇴근시간 자료구조 공부 월화수(1챕터) 목금(1챕터) 총 2챕터 읽기. 회사 작업자 화면 완료하기, 테스트코드 작성 비율 그래프 작성 완료하기 개인 정기러닝 지속참여. 체력 키우기 책 매일 30페이지 읽기 성공, 지속하자. 다음 책 선정

Memo 2022. 5. 1. 22:43

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

이번주 회고 & 배운점 1. MySQL 쿼리를 통한 CRUD를 배웠고 JOIN 이용하여 테이블을 편집해서 확인할 수 있었다. 간단한 메뉴 테이블을 짜보자. 2. 리액트테스트 라이브러리를 사용해보면서 기존 코드에서의 기능추가, 유지보수시에 테스트코드의 중요성을 배웠다. 아직도 테스트코드는 어지럽긴하지만 프론트단에서 테스트코드가 사실상 필수가 되어가고 있기 때문에 잘 학습해두자. 3. Javascript object와 json의 차이점을 배웠고 왜 json을 사용하는지에 대해서 알았다. 4. useCallback()을 사용하여 함수 재사용성, 자바스트립트 동등성 학습 개선할점 1. 회사에서 회사 적응 온보딩개념으로 타 부서 분과 점심식사를 하게 되는데 미래에 협업을 할 것이기 때문에 나와 관련있을 직무 관련..

Memo 2022. 4. 24. 23:57

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