-
스무디 한 잔 마시며 끝내는 리액트 + TDD - 5장 나의 첫 리액트 프로젝트
2021.08.19
한동안 팀프로젝트로 꽤 바쁜 일정을 소화하느라 스무디 한잔을 할 여유도 없었다... 😫 방학을 맞이하여 최소 한 챕터라도 보자는 마음으로 일단 책을 폈다. 그런데 이번장 너무 재밌겠잖어 ~? 😆 무려 시작부터 관심사였던 타입스크립트를 소개한다. 타입스크립트 리액트는 js이며, js는 동적 프로그래밍 언어(Dynamic Programming Language)이다. 동적 프로그래밍 언어는 런타임 시 변수의 타입이 결정된다. 그렇기 때문에 변수의 타입 때문에 발생한느 버그와 에러는 js를 실행해 보지 않으면 알 수가 없다. 리액트에서는 이런 문제를 해결하고자 플로우(Flow)라는 정적 타입 분석기를 사용할 수 있다. 플로우는 페이스북에서 만들었고, 리액트, 리액트 네이티브에서 변수의 타입을 미리 지정하여 변수..
-
스무디 한 잔 마시며 끝내는 리액트 + TDD - 4장 리액트 테스트 - react-testing-library
2021.07.23
react-testing-library Jest는 자바스크립트 테스트 프레임워크로 js를 전반적으로 테스트하기 위한 프레임워크이다. 리액트토 js이기는 하지만, JSX를 사용하고 있으므로 일반적인 js는 아니다. 또한, 리액트의 JSX는 HTML의 DOM을 다루기 때문에 단순한 js의 테스트로 정확한 오류를 잡아내기는 어렵다. 리액트뿐만 아니라 최근 프론트엔드(Frontend) 프레임워크, 라이브러리인 앵귤러와 Vue도 js에서 DOM을 직접 다루기 때문에 일반적인 js 테스트 프레임워크로는 모든 테스트를 수행하기 어렵다. @testing-library는 이런 문제를 해결하고자 만들어진 DOM 테스팅 라이브러리(DOM Testing Library)이다. @tesing-library는 사용자 중심 방식으로..
-
스무디 한 잔 마시며 끝내는 리액트 + TDD -3장 리액트의 테스트 - Jest
2021.07.20
테스트 코드가 없는 코드를 짜기 싫어하는 나에게 가장 매력적인 파트가 아닐까 싶다. 우테코에서 제작근로를 하면서, Jest, Cypass(?) 등 프론트 진영의 테스트 프레임워크(라이브러리? 프레임워크? 뭐가 맞는 표현일까?)를 언급하는 것을 많이 들어봤지만 한 번도 써본적은 없다. 해당 책에서는 'TDD로 리액트 프로젝트 완성하기'라는 거창한 목표가 있기에 벌써 기대가 되는 파트다. 이번 장에서는 리액트 테스트에 많이 사용되는 자바스크립트 테스트 프레임워크인 Jest에 대해서 살펴보도록 한다. Jest 공식 홈페이지: https://jestjs.io/ Jest의 장점 Jest는 페이스북에서 개발, 관리하는 js 테스트 프레임워크로써 단순함에 집중한 테스트 프레임워크이다. Jest는 자바스크립트 테스트 ..
-
스무디 한 잔 마시며 끝내는 리액트 + TDD - 1장 리액트란?
2021.07.17
먼저 갑자기 리액트??? 하고 의문을 품을 여러 지인들에게 상황을 간략히 설명하자면 네 제가 그 5명 중 하나입니다. 뭐 엄청나게 상세하게 정리하려는 것은 아니고 각 장별로 기록하고 싶은 부분을 기록해나가면서 넘어가려고한다. (나중에 어드민 페이지 정도는 리액트로 만들어줘야 "오 프론트도 쫌 할줄아는데?" 소리한번 들어보는 것을 목표로...) 자바스크립트의 역사 리액트는 자바스크립트(JavaScript, 이하 js) 언어를 기반으로 동작하는 라이브러리이다. 따라서 리액트를 이해하기 위해서는 기본적으로 js에 대한 이해가 필요하다. js의 역사를 간략히 훑으면서 리액트가 탄생한 이유를 이해해보자! (js의 탄생 배경은 한번쯤은 들어봤을 수도 있다. 이번 기회에 해당 영상을 통해서 알아보는 것도 좋을 것 같..
-
npx create-react-app 명령어로 리액트 프로젝트가 생성되지 않는 문제
2020.07.02
먼저 npx create-react-app 명령어로 리액트 프로젝트를 생성할 때의 이점을 모른다면 아래의 글을 보자! 조금 간략하게 설명해서 리액트 프로젝트를 생성할 때만 필요한 파일들을 임시적으로 가져오고 프로젝트를 생성한 후, 불필요한 파일들을 다시 삭제함으로써, 불필요한 파일들이 남는 것을 방지해준다. (필자와 같이 적은 용량의 노트북을 쓴다면 꼭 써야할 것이다. 사실 npm으로 -g (global)로 create-react-app을 다운로드하고 이 라이브러리를 통해서 리액트 프로젝트를 만드는 것은 권장되지 않는 방식(지원하지 않는 방식?) 이라고 직접 생성해보면 터미널에 경고(안내?)창이 나온다. https://helloinyong.tistory.com/177 [2019.08.12] CRA(Cre..
