목록분류 전체보기 (147)
게으른개발너D
Handsontable을 이용하여 간단한 기능을 구현하려다 의외로 개고생을 하여 기록한다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Handsontable (pronounced "hands-on-table") is a JavaScript data grid component that brings the well-known look and feel of spreadsheets to your application. Thousands of business apps depend on Handsontab..
웹 개발을 하다보면 svg를 사용할 때가 많다. 리액트는 컴포넌트 단위로 개발하다보니 svg element tag를 복사해서 붙여넣기 하기엔 코드가 너무 복잡해 보인다. 이를 해결하기 위해 각각의 svg 파일을 만들어 컴포넌트로 만들어 쓰는 방법이 있다. svg 파일들은 src 폴더 안에 assets 폴더를 만들어서 그 안에 모두 넣어두었다. 컴포넌트로 만들어 사용하기 위해서 이렇게 작성하면 된다. // App.tsx import { ReactComponent as AddIcon } from './assets/add.svg'; export default App() { return ( ); } 이렇게만 사용한다면 타입스크립트에서 해당 모듈을 찾지 못하는 오류가 발생한다. typescript 컴파일러에세 변..
1. useEffect useEffect는 많은 사용성을 가지고 있다. class component를 사용할 때는 component의 생명주기에따라 prop의 변경 사항을 모두 생각하고 구현해 주어야했다. useEffect는 생명주기 메소드 중 componentDidMount, componentWillUpdate, componentWillUnmount와 비슷하다. componentWillMount: 컴포넌트가 생성된 후 DOM에 렌더링되기전 호출 componentDidMount: 첫 렌더링이 끝나고 컴포넌트의 DOM 엘리먼트가 사용가능할 시 호출 componentWillReceiveProps: props가 업데이트 될 때 호출 shouldComponentUpdate: 새로운 props를 받았을 때 호출되..
1. custom hooks Hooks는 react의 state machine에 연결하는 기본적인 방법이다. hooks들을 code sandbox에서 구현 한 후 작동하는 걸 확인하면, 내 폴더 안에 넣고 그 다음 NPM directory에 등록시킬 것이다. useTitle: react document의 title을 몇 개의 hooks와 함께 바꾸는 것 useInput: input 역할 usePageLeave: 유저가 page를 벗어나는 시점을 발견하고 함수를 실행 useClick: 누군가 element를 클릭하는 시점을 감지 useFadeIn: 어떤 element든 상관없이 애니메이션을 element 안으로 서서히 사라지게 만듦 useFullscreen: 어떤 element든 풀스크린으로 만들거나 일반..
1. callback 1. callback 패턴 이용 3초 후에 name 값을 넘겨주는 비동기 함수를 작성해 보자. fn.js const fn = { getName: (callback) => { const name = 'Mike'; setTimeout(() => { callback(name); }, 3000); }, } module.exports = fn; callback를 매개변수로 받아서 callback으로 name을 첫번째 인수로 넘겨주는 함수를 작성하였다. fn.test.js const fn = require('./fn'); test("3초 후에 받아온 이름은 Mike이다.", () => { const callback = (name) => { expect(name).toBe('Mike'); } f..
https://jestjs.io/docs/expect Expect · Jest When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things. jestjs.io 다양한 Matcher는 여기서 확인할 수 있다. 1. toBe, toEqual toBe와 비슷한 것은 toEqual이다. fn.test.js const fn = require("./fn"); test("2 더하기 3은 5이다.", () => { expect(fn.sum(2, 3)).toBe(5);..
유닛 테스트 : 코드가 제대로 작동하는지 확인하기 위해 애플리케이션의 개별 모듈을 독립적으로 테스트(종속성과의 상호 작용없이)하는 것을 의미함. 통합 테스트 : 다른 모듈이 그룹으로 결합될 때 잘 작동하는지 확인하는 것을 의미함. 기능 테스트 : 시스템의 기능 조각(종속성과 상호 작용 할 수 있음)을 테스트하여 코드가 올바른 작업을 수행하는지 확인하는 것을 의미함. 통합 테스트와 관련이 있지만, 모든 코드가 함께 실행되는 상태에서 전체 애플리케이션의 기능을 확인하는 테스트를 의미함. 관리 방법 프로젝트를 진행하면서 가장 큰 고민 중 하나는 '테스트 코드를 어떻게 작성하고 관리하는가' 이다. 프로젝트가 커질수록, 기능이 복잡해질수록 테스트 코드를 작성하고 관리하는 것은 쉽지 않은 일이다. 이러한 상황에서 ..
https://github.com/jestjs/jest GitHub - jestjs/jest: Delightful JavaScript Testing. Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub. github.com 1. jest jest는 facebook에서 만든 테스팅 라이브러리다. 출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다. 비교적 사용이 간단하며 Babel, Typescript 등에 모두 사용할 수 있다. zero config jest는 zero configuration 철학을 가지고 있..