본문 바로가기

프로그래밍458

[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.
오래된 프로젝트 파일의 오류 - Cannot access defaults field of Properties 5년전 스프링프레임웍으로 작성한 샘플 프로젝트 파일을 전자정부 표준프레임워크 v4.1.0으로 열어 봤더니 오류가 발생하였습니다. 최초 발생한 오류는 "Could not initialize class org.apache.maven.plugin.war.util.WebappStructureSerializer" 입니다. Maven 메뉴에서 Update project를 수행해 보았습니다. 업데이트 후 에러 메세지가 바꼈습니다. 새로운 에러는 "Cannot access defaults field of Properties" 였습니다. 이 메세지는 injection시 오류가 난 것으로 보입니다. 업데이트를 몇번 수행해 보아도 같은 에러가 계속 발생하여서 구글에서 검색을 해보았습니다. Markers 창에 보여지는 에러메.. 2023. 6. 16.
Fedora Linux 소프트웨어 업데이트 오류 최근 개발용으로 사용중인 Fedora 운영체제의 소프트웨어 업데이트가 안되는 상황이 발생하였습니다. 소프트웨어 앱에서 업데이트 건수는 보이는데, "다운로드"를 누르면 진행되다가 아무런 메세지 없이 중단이 되고, 처음 상태 그대로 돌아가는 것이었습니다. 다른 일이 바빠서 가끔 다운로드 눌러보고 안되면 그냥 놔두고 있었는데, 오늘 시간을 내어서 확인을 해 보았습니다. 일단 구글링을 해보니 최근 Fedora 37에서 38로 업그레이드 후에 업데이트 오류가 난다는 글들이 좀 보였습니다. 나도 38로 업그레이드를 한것이 마지막이었다는 것이 생각이 났습니다. 하지만 나타나는 증상이 같은 글은 찾지 못했습니다. 글들에서 말하고 있는 증상은 소프트웨어 앱 자체가 실행이 되지 않는다는 것이었습니다. 그래서 수동 업그레이.. 2023. 6. 14.
[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.
Linux용 전자정부 표준프레임워크 v4.1.0 설치하기 개발환경을 리눅스로 옮겨서 개발 도구들을 모두 다시 설치하고 있습니다. 이번에는 전자정부 표준프레임워크를 Linux에 설치합니다. 사용하고 있는 리눅스 종류는 Fedora 38 Workstation 입니다. 1. 개발환경 다운로드 표준프레임워크 포털에 들어가서 리눅스용 개발환경을 다운로드 합니다. 리눅스에 설치한 크롬으로 접속하여 다운로드 받았습니다. URL을 안다면 wget으로 다운받아도 되겠습니다. 다운로드 받은 파일명은 eGovFrameDev-4.1.0-Linux-64bit.tar.xz 입니다. 사이트에 적혀있는 파일 사이즈는 1,639,310,324 Byte 인데 실제는 1,653,023,848 Byte 였습니다. 왜 다른 걸까요? 그리고 개발환경 설명에는 .gz 로 나와 있는데, 다운받은 파일은.. 2023. 6. 8.
[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.
Visual Studio Code 단축키 Visual Studio Code에서 사용할 수 있는 단축키 입니다. 1. Ctrl + X : 현재 커서가 있는 줄을 삭제 합니다. 2. Ctrl + Enter : 현재 줄 아래에 빈줄을 삽입합니다. 3. Ctrl + Shift + Enter : 현재 줄 위에 빈줄을 삽입합니다. 4. Ctrl + / : 현재 커서가 있는 줄 또는 블럭 선택된 줄을 //를 사용한 주석 처리합니다. 5. Ctrl + Shift + A : 블럭 선택된 줄을 /* */ 를 사용하여 주석처리를 합니다. 6. Ctrl + Shift + L : 단어를 하나 선택하고, 누르면 같은 단어가 모두 선택됩니다. 선택 후 수정하면 모두 수정됩니다. 7. Shift + Alt + Up/Down : 커서가 위/아래로 늘어납니다. 이후 이동 또는.. 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.

티스토리툴바