타입 단언 as 컴파일러가 추론하는 것이 아닌 내가 타입을 단언하도록 사용 지난 번 정리처럼 <Element>event.target 형식으로도 사용할 수 있고 as를 사용해서 event.target as Element로 사용할 수도 있음. 상수(Constant)와 리터럴(Literal) 상수(Constant) 변하...

Object.seal() 객체를 밀봉 새로운 속성을 추가할 수 없게 됨 Object.seal(object1)의 형식으로 사용 하지만 속성의 값은 변경 가능 const object1 = { value1: 32, value2: 24, } Object.seal(object1); object1.value1 = 22; co...

Container & Presentational Component Pattern 의미 데이터 처리와 출력을 분리하는 패턴 Container Component Container Component에서는 로직 처리만 담당 Presentaional Component Presentational Component에서는 보여지...

array.prototype.filter() filter() 메서드의 배개변수로는 콜백함수가 들어감 return에는 필터 통과 조건을 작성 필터에서 통과하는 녀석들만 배열로 다시 출력 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; c...

Object.entries() key, value를 가지고 있는 객체를 [key, value]의 형태의 배열로 출력 Object.entries(원하는 객체) 원하는 객체를 안에 넣으면 새로운 배열로 출력해 줌. 이전 프로젝트에서 이런 방식으로 2차원 배열로 출력 시킴 (링크) 배열로 출력할 때 따로 순서에 규칙이 있지 않으므로 순서를...

RTK Query란 간편하게 데이터를 가져오고 캐싱하는 로직을 직접 하나하나 작성할 필요가 없음. RTK Query는 Redux Toolkit에 포함된 애드온임 사용 방법 API 서비스 정의 // ./src/redux/service/orderSheet.ts import { createApi, fetchBaseQuery } fr...

들어가기 약 한 달 전에 Unit Test를 위해 Jest를 사용하면서 여러 가지 테스트 자동화에 대해서 알게 되었다. (해당 포스팅으로 이동) 최근에는 Cypress를 사용해서 사용자 관점에서의 UI, 기능 테스트를 진행하는 방법을 배웠는데, (해당 포스팅으로 이동) 그 외에도 Jest를 이용한 UI테스트가 있다고 해서 알아보았다. Jest ...

들어가기 프로그래밍을 하면서 모든 과정을 테스트할 수 없지만 잘 작동 되는지 테스트가 필요하다. 하지만 일일이 눌러보며 테스트를 하는 것은 시간이 오래 걸리기 때문에 비효율적이다. 그래서 Jest나 Cypress같은 툴을 이용해서 테스트 자동화를 한다. 이전까지 Jest만 몇번 사용했었는데, UI테스트를 위한 Cypress를 공부하며 간단하게 정리하...

Mixin Function과 같은 기능을 하는 Mixin Sass에서 Mixin을 사용하면 마치 Function처럼 여러 스타일을 묶어서 적용 시킬 수 있다. 또한 매개변수를 받아서 스타일을 조금씩 수정해서 적용시킬 수 있다. 사용 방법 @mixin banner-style($color: black) { color: $color; ...

WebGL Web기반의 그래픽 라이브러리 JavaScript 프로그래밍 언어를 통해 웹에서 3D 그래픽을 사용할 수 있음. three.js 웹 브라우저에서 3D 그래픽을 사용할 수 있게 하는 JavaScript 라이브러리 WebGL기술을 사용 three 공식 홈페이지에 예제가 있는데 너무 귀엽다 링크 인터렉티브한 홈페이...