typeScript 2

ant design에서 여러 개의 input state를 관리하는 방법(in typescript react)

이 글은 벨로퍼트와 함께하는 모던 리액트 9. 여러개의 input 상태 관리하기 를 ant design 버전으로 변경시킨 것입니다. 추가적으로 타입스크립트도 함께 적용되어 있는데 타입 스크립트를 사용하지 않는다면 그 부분은 없다고 생각하고 보시면 됩니다. ant design은 form에 자체 component를 사용하고 event도 다른 걸 쓰기 때문에 9. 여러개의 input 상태 관리하기 의 방식을 그대로 사용할 수가 없습니다. 그래서 저도 처음에는 각각의 input state를 따로 관리했었다가 고민 끝에 이렇게 바꾸었습니다. 예시는 세팅값을 변경하는 상황이라 보시면 됩니다. 코인 거래에 사용되는 심볼들을 변경하거나 한번에 보여지는 테이블의 크기를 정하거나, 거래 전에 alert를 보낼지 말지 결정..

HOW-TO GUIDES 2021.08.15

next.js에서 타입스크립트 리액트 테스트 환경 셋업하기

npx create-next-app my-test-app --ts위의 명령문을 이용하여 타입스크립트로 next.js 프로젝트를 만들게 되면 프로젝트 내에 jest와 react testing library를 사용할 환경이 마련되어 있지 않습니다. (create-react-app을 사용하는 경우 다 설정되어 있지만..) 그래서 따로 설정을 해주어야 하는데 언어를 TypeScript로 하셨다면 조금 더 복잡한 과정을 거치게 됩니다. 필수적인 내용만으로 최대한 간결하게 정리하였습니다. jest의 다양한 기능을 활용하시고자 한다면 jest 공식 홈페이지를 참조하시길 바랍니다. 아, 타입스크립트를 언어로 선택했으나, root위치에 *.config.ts 파일로 놓으면 컴파일 옵션을 변경해주어야 하여 부득이하게 *.c..

HOW-TO GUIDES 2021.08.07