본문 바로가기

프로그래밍/자바스크립트65

[React] 테스트 프레임웍 jest (4/4) - React Apps 테스트하기 이 글은 공부를 위해서 "Testing React Apps"를 번역 정리한것 입니다. 예제는 TypeScript를 사용하도록 수정되었고, 내용도 현재 버전에 맞도록 수정된 곳이 있습니다. 전체 내용은 원문을 참고 하시기 바랍니다. React App을 jest로 테스트하기 위한 가장 간단한 설정 방법은 Create React App을 사용해서 프로젝트를 만드는 것입니다. Create React App을 사용해서 프로젝트를 생성했다면 이미 jest를 사용할 수 있도록 구성이 되어 있을 것입니다. 여기에 화면 렌더링 스냅샷을 테스트할 수 있는 하나의 패키지만 추가로 설치하면 됩니다. # yarn 사용시 $ yarn add --dev react-test-renderer # typescript를 사용하면 type.. 2023. 6. 21.
React 프로젝트 copy해서 옮기기 React 프로젝트를 복사해서 다른 PC로 옮기려고 합니다. 가장 간단한 방법은 전체 파일을 복사해서 옮기면 됩니다. 하지만 node_modules 폴더의 크기가 프로젝트 생성 초기에도 800MB 를 넘는군요. node_modules 폴더내의 내용은 프로젝트에 모듈 의존성 정보가 있어서 나중에 다시 받을 수가 있으므로 프로젝트를 복사해서 옮길때 빼도 되겠습니다. Linux에서 node_modules 폴더를 빼고 프로젝트 폴더를 복사하는 가장 간단한 방법이 rsync 명령을 사용하는 것 같습니다. 현재 폴더 아래에 my-app 이라는 프로젝트 폴더가 있을때 이것을 홈디렉토리 아래의 share 폴더에 같은 이름의 폴더로 복사하는 방법은 다음과 같습니다. $ rsync -av my-app ~/share/my-.. 2023. 6. 20.
[TypeScript] 타입 선언 ( : type )과 타입 단언( as type ) JavaScript만 사용하다가 TypeScript를 공부하고 있습니다. 타입만 지정해주면 되지 하고 쉽게 생각했는데, 그게 아니더군요. 특히 내가 처음부터 타입까지 정의해서 사용면 문제가 되지 않지만, JavaSript의 특성상 다양한 타입의 값을 반환하는 함수를 사용할때던가 하는 경우가 좀 까다롭더군요. TypeScript에서 타입 선언과 타입 단언은 컴파일되면 제거되고 실행되는 코드에 영향을 주지 않습니다. 타입 체크에만 사용되는 것입니다. 이 글의 내용은 everyday types 를 번역 정리한 내용 입니다. 1. 타입 선언 (Type Definition) const, var, let을 사용하여 변수 선언할 때 Type Annotation을 사용하여 타입을 지정합니다. // 기본타입 : stri.. 2023. 6. 19.
[React] 테스트 프레임웍 jest (3/4) - jest Matchers jest에서 값을 테스트하는데 사용하는 함수가 Matcher입니다. 많은 Matcher들이 있지만 자주 사용하는것 몇가지만 알아봅니다. 전체 내용은 jest 공식 홈페이지의 Expect DOC에서 찾을 수 있습니다 1. Expect - expect(value) : 테스트할때 매쳐와 함께 사용됩니다. 테스트 하고자 하는 값을 받고, matcher를 이용해 기대값과 비교합니다. test('1 + 2는 3', () => { // 더하기 함수 add(1, 2)의 결과가 3이면 성공입니다. expect(add(1, 2)).toBe(3); } 2. Matchers - toBe( value) : 완전히 일치하는지 테스트 합니다. 기본타입의 값과 객체 인스턴스의 참조 ID가 같은지 확인합니다. - toEqual( va.. 2023. 6. 17.
[React] 테스트 프레임웍 jest (2/4) - jest API jest 테스트 프레임웍에서 사용되는 함수에 대해서 알아봅니다. 테스트 파일은 파일명과 확장자 사이에 test를 넣으면 됩니다. 예로 index.js 파일의 테스트 파일을 만든다면 index.test.js 파일로 만들면 됩니다. 1. 테스트 함수 - test(name, fn, timeout) : 테스트를 수행하는 가장 기본적인 함수 입니다. name은 테스트 이름이고, fn은 테스트를 수행하는 함수입니다. timeout은 밀리초 단위의 값으로 테스트가 수행되기를 얼마나 오랫동안 기다리는지 지정합니다. 기본값은 5초 입니다. ※ name은 동일한 describe 블럭 내에서 같은 값을 사용하면 Visual Studio Code에서 오류 표시가 납니다. 실행에는 문제가 없지만 구분을 위해서도 중복되지 않게 .. 2023. 6. 13.
[React] 테스트 프레임웍 jest (1/4) - 샘플 프로젝트 만들기 자바스크립트 테스트 프레임웍인 jest를 사용해 봅니다. React와 함께 많이 쓰입니다. 사용된 운영체체는 fedora linux 입니다. 테스트 프로젝트 만들기 jest를 연습해볼 테스용 프로젝트를 만듭니다. 1. 프로젝트 폴더를 만듭니다. $ mkdir jest-app 2. 프로젝트 폴더로 들어가서 프로젝트를 초기화합니다. 모든 질문에는 엔터키를 입력하여 기본값을 선택합니다. typescript를 사용할 거라면 index.js 대신에 index.ts 를 입력합니다. 완료되면 package.json 파일이 만들어 집니다. $ cd jest-app # npm 사용시 $ npm init # yarn 사용시 $ yarn init 3. git repository를 만듭니다. git이 없으면 "jest --w.. 2023. 6. 5.
[React] 생명주기(Lifecycle)과 Error Boundary React의 컴포넌트가 화면에 보여지고, 수정되고, 제거되는 생명주기(Lifecycle)될 때 내부적으로 다양한 함수들이 순차적으로 실행되어 처리됩니다. 이런 생명주기와 관계된 함수들을 알아봅니다. 참고로 테스트시에 각 함수에서 콘솔로 출력을 내는데 생명주기 함수가 두 번씩 호출됩니다. 이는 개발 환경에서 "index.tsx" 파일에서 를 호출하는데 를 사용하고 있기 때문이라고 합니다. build해서 나오는 배포판에는 이 부분이 빠지므로 문제가 없겠습니다. root.render( ); 생명주기 테스트용 소스 생명주기 테스트용 소스입니다. Hello.tsx파일로 App.tsx에서 부릅니다. import { Component } from "react"; interface HelloProps { name: s.. 2023. 6. 5.
[React] 컴포넌트(Component)와 컴포넌트의 상태(State) React에서 페이지를 구성하는 것은 컴포넌트(Component)들 입니다. 컴포넌트를 만들기 위해서 함수(function)을 사용할 수도 있고 클래스(class)를 사용할 수도 있습니다. 두 가지를 섞어서 사용할 수도 있다고 합니다. 여기서는 기본적인 컴포넌트 사용법을 알아 봅니다. 함수형 컴포넌트 함수를 사용하여 컴포넌트를 만듭니다. 또한 컴포넌트에서 사용되는 데이터를 다루는 방법을 알아봅니다. 1. 컨포넌트 선언하기 function App() { const name = "React"; return Hello {nameame}!; } export default App; 컴포넌트가 되는 함수 App() 를 정의했습니다. 컴포넌트는 화면에 보여질 요소인 JSX를 반환합니다. 보통은 컴포넌트 하나를 하나의.. 2023. 6. 5.
[자바스크립트] React 모듈 (Module) React 모듈은(module)은 주로 컴포넌트들을 다른 파일에 분리하는데 사용됩니다. 모듈은 자체 변수범위(Scope)을 가지기 때문에 외부에서 사용할 것은 export로 내보내야 하고, 모듈을 사용하는 쪽에서는 export된 것 중에서 사용하고자 하는 것은 import로 지정해야 합니다. React 모듈은 HTTP와 HTTPS를 통해서만 불러들일 수 있습니다. 로컬 파일시스템에서 file://로는 실행시킬 수 없습니다. 내보내기(export) 내보내기(export)는 변수, 상수, 심볼, 객체, 클래스를 모듈 밖에서 사용할 수 있도록 해줍니다. 모듈은 자체 scope을 가지므로 export 하지 않은 것은 외부에서 사용할 수 없습니다. 내보내기(export)는 명명된 내보내기(named export).. 2023. 6. 5.
[React] JSX (JavaScript Xml) 사용하기 JSX(JavaScript Xml)는 자바스크립트의 확장으로 템플릿처럼 보입니다. React는 웹페이지 전체를 갱신하는 것이 아니라 필요한 부분만을 갱신해서 빠른 속도로 동작합니다. 이처럼 React에서는 전체 페이지 내용이나 교체될 html 조각들을 만들게 됩니다. 이런 html 조각을 편리하게 만들 수 있도록 해주는 것이 JSX입니다. JSX의 형태 JSX의 형태를 보겠습니다. 자바스크립트 문자열은 큰따옴표나 작은 따옴표로 둘러싸야 하지만 JSX는 그것이 없습니다. const element = Hello React!; JSX 는 하나의 엘리먼트만을 반환해야 합니다. 그래서 보통 엘리먼트로 감싸서 만들게 됩니다. 이렇게 하므로써 태그가 중첩되게됩니다. 리액트 v16부터는 Fragment 태그를 사용해서.. 2023. 6. 5.
[React] Error: Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. TypeScript를 사용하는 React에서 JSX 표현식 오류가 발생했습니다. * 에러가 발생한 코드 const color = "blue"; const greeting = "Hello, React!"; return ( {greeting} ); * 발생한 에러 ERROR in src/App.tsx:10:10 TS2559: Type 'string' has no properties in common with type 'Properties'. 8 | return ( 9 | > 10 | {name} | ^^^^^ TypeScript는 익숙하지 않아서 에러 메세지를 보고서도 원인을 찾는데 좀 버벅였네요. TypeScript에서 style 속성은 객체를 받는데, 문자열(string)을 넣었기 때문에 발생한 에러였습.. 2023. 6. 5.
[React] React 프로젝트 만들기(yarn, npx) fedora 리눅스에서 React 프로젝트를 만듭니다. 프로젝트를 만들기 위해서 npx 또는 yarn을 사용할 수 있습니다. TypeScript를 사용하도록 지정하는 방법도 알아봅니다. yarn을 사용하여 생성 yarn을 사용해서 프로젝트를 생성합니다. typescript를 사용하도록 지정합니다. $ yarn create react-app first-app --template typescript 프로젝트들을 한 곳에 모으기 위해 홈 디렉토리 아래에 workspace 폴더를 만들고 그 폴더에서 명령을 실행했습니다. 프로젝트의 이름은 first-app 입니다. workspace폴더 아래에 first-app 폴더가 만들어지고, TypeScript를 사용하는 템플릿이 생성됩니다. 프로젝트 생성 명령 실행시 다음.. 2023. 6. 5.
[자바스크립트] 구조 분해/비구조화 할당(Destructuring assignment) 구조 분해/비구조화 할당(Destructuring assignment)은 객체나 배열의 내용을 개별 변수로 간편하게 할당하는 방법입니다. 배열의 구조 분해 할당 // 배열 생성 let arr = [ 1, 2, 3 ]; // a, b, c 변수에 각각 할당합니다. let [ a, b, c ] = arr; // 결과 - 1:2:3 console.log(a + ":" + b ":" + c); // 기본 값 지정하기(기본 값이 없으면 undefined이다) let arr = [1]; let [ a=3, b=4 ] = arr; // 결과 - 1:4 console.log(a + ":" + b); // 변수값 교환하기 let a = 1; let b = 2; [a, b] = [b, a]; // 결과 - 2:1 cons.. 2023. 6. 5.
[자바스크립트] 컬렉션(Collections) 자바스크립트에서 사용할 수 있는 데이터 자료구조는 인덱스(index) 기반의 컬렉션과 키(key) 기반의 컬렉션이 있습니다. 인덱스 기반의 컬렉션 인덱스 기반의 컬렉션은 Array 객체와 TypedArray 객체가 있습니다. 1. Array 객체 // new 연산자를 이용해서 생성한다. let arr = new Array(); // 위 코드는 아래와 동일하다. let arr = []; 2. TypedArray는 지정된 타입의 데이터만 저장할 수 있습니다. TypedArray는 실제 생성할 수 있는 타입이 아닙니다. 각 타입별로 객체가 있습니다. Int8Array, Unit8Array, Unit8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array.. 2023. 6. 5.
[자바스크립트] 전개 구문(spread syntax) 전개 구문(spread syntax)는 점 세 개(...)가 이어진 연산자를 통해 사용됩니다. 이 전개 연산자(spread operator)를 배열, 문자열과 같은 반복 가능한(iterable) 요소 앞에 사용해서 배열의 개별 요소를 다른 배열이나 함수의 인자로 펼쳐서 넘기는게 가능합니다. 객체에 대해 전개 연산자를 사용하면 객체의 속성을 넘기는 것이 가능합니다. 말로 설명하려니 좀 이상하네요. 예를 보겠습니다. 함수 인자에 사용 여러 개의 인자를 받는 함수에 배열을 사용해서 한번에 인자를 넘길 수 있습니다. function sum(a, b, c) { return a + b + c; } let nums = [1, 2, 3]; // 전개 연산자를 사용해서 한번에 넘깁니다. let result = sum( .. 2023. 6. 5.

티스토리툴바