profile
개발에 뛰어든 팬더씨◟( ˘ ³˘)◞

[TIL] Array.from()

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다.return : 새로운 Array 인스턴스.다음과 같은 경우에 Array.from()으로 새 Array를 만들 수 있다.유

2022년 6월 30일
·
0개의 댓글
·

React에서 Font Awesome 사용하기

React에서 Font Awesome을 사용해 보자!여러 icon package를 한꺼번에 받으려면 아래처럼 쓸 수 있다. 사용을 원하는 component에서 Font Awesome을 react component 형태로 사용하기 위한 패키지를 import를 해주자.마

2022년 6월 28일
·
0개의 댓글
·

React와 Typescript(4) : React+Typescript 프로젝트 만들기

지금까지 TS에 대한 기본적이 내용을 살펴보았으니, 실제로 React에 TS를 적용시켜보자. 아래의 두 가지 방법 중에 상황에 알맞게 선택하면 되겠다. 기존 프로젝트에 TS 추가새로운 프로젝트를 생성하며 TS 추가각 방법의 자세한 내용은 Create React App

2022년 6월 26일
·
0개의 댓글
·

React와 Typescript(3) : Typescript의 type과 핵심 기능

TS의 자료형(Type)에 대해 알아보도록 하자. Primitive Type의 종류는 아래와 같다.number, string, booleannull, undefined, symbol 변수에 Primitive Type을 지정해주도록 하겠다. 콜론(:)으로 type을 표시

2022년 6월 26일
·
0개의 댓글
·

React와 Typescript(2) : Typescript 설치와 사용

이전 글을 통해 TS가 무엇이고, 이를 활용해 코드에 type을 추가할 수 있다는 내용을 알아보았다. 이번 글에서는 간단하게 TS의 설치 과정 및 파일 사용법을 알아보려 한다. Node.js를 설치한다 (npm 사용을 위해)터미널에서 TS 설치를 하려는 프로젝트의 경로

2022년 6월 26일
·
0개의 댓글
·

React와 Typescript(1) : What&Why

React에 Typescript라는 양념을 뿌려보도록 하자🧂Typescript 정확히 무엇이고, 왜 필요할까?Typescript의 핵심 내용Typescript와 React를 함께 사용하는 법Typescript, 즉 TS는 javascript(JS)의 슈퍼셋(Super

2022년 6월 26일
·
0개의 댓글
·

React App Test(5-2) : 비동기 작업 개선

이전 포스트의 내용을 통해 비동기 코드의 테스트를 위해서 findAllByRole 퀴리를 사용하는 방법을 알아보았다. findAllByRole로 Async.js가 리렌더링 되기를 기다려 결과적으로 listitem에 접근할 수 있다. 딱히 문제는 없었지만, 최선의 코드는

2022년 6월 25일
·
0개의 댓글
·

React App Test(5-1) : 비동기 작업

비동기 코드 테스트를 위해 Async.js와 Async.test.js를 만들어 보도록 하자. fetch 해 온 posts data를 setPost로 담는다. return되는 부분은 아래와 같다. state에 저장한 data 값을 li로 렌더링해주고 있다. 먼저 Asy

2022년 6월 25일
·
0개의 댓글
·

React App Test(4) : UI, State 테스트하기

React App을 테스트 할 때, state 값과 UI(User Interaction)에 관련된 내용은 어떻게 처리가 가능할까?이 내용을 알아보기 위해 Greeting이라는 컴포넌트를 아래와 같이 작성해보도록 하자.state값에 따라 처음 화면에는 It's good

2022년 6월 25일
·
0개의 댓글
·

React App Test(3) : 테스트 그룹화(Suite)

Test Suite에 대해 알아보도록 하자.App의 규모가 커질수록 적게는 수십 개에서 수백 개의 test 파일이 생길 수 있다. 이런 여러 테스트 파일을 Test Suite로 묶어 정리할 수 있다. 예를 들어 feature나 관련 component를 기준으로 하여 해

2022년 6월 25일
·
0개의 댓글
·

React App Test(2) : 코드 작성과 실행

두근두근.. 첫 번째 테스트를 실행해보자React App 작업이 완료되었다면, create-react-app으로 프로젝트 생성시 함께 만들어진 setupTests.js와 App.test.js 파일에 주목해보자.파일 이름이 의미하듯, 몇 가지 setup 작업을 수행하는

2022년 6월 24일
·
0개의 댓글
·

React App Test(1) : 개념과 종류, tools

작성한 코드를 '테스트'하는 코드를 작성하자!React 앱과 컴포넌트에 초점을 맞춰 자동화된 테스팅의 세계로 뛰어들어 보자..테스팅(Testing)이란 정확히 무엇일까? 왜 하는 것일까?Unit Test를 이해해보자리액트 컴포넌트를 테스트하고 build해보자

2022년 6월 24일
·
0개의 댓글
·