본문 바로가기

분류 전체보기487

[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.
git 기본 사용법 git의 간단한 사용법입니다. git은 로컬에 모든 형상 정보를 저장합니다. 여러명이 협력하여 작업할 때는 서버를 따로 두고 공유를 할 수 있습니다. 서버를 사용하더라도 참여하는 모두가 자신의 로컬에 전체 형상 정보를 가지게 됩니다. 1. 파일의 상태 작업 디렉토리내의 파일은 git으로 관리하지 않는 Untracked 파일(추적하지 않는 파일)과 git에 의해 관리하는 Tracked 파일(추적하는 파일)로 나뉩니다. Untracked 파일은 .ignore 파일에 등록하여 git에서 제외합니다. Tracked 파일은 다시 세가지 상태로 나눕니다. 각각 Modified, Staged, Committed입니다. 파일이 처음 작업 디렉토리에 추가되면 Untracked입니다. 이 파일을 "git add" 하면 S.. 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.
[리눅스] 사용하지 않을 때 화면 잠금 시간 설정하기 Fedora 리눅스의 그놈에서 사용자의 입력이 없을 때 화면 잠금 시간 설정 방법입니다. 설정 앱을 열고, "개인정보" -> "화면 잠금"으로 들어갑니다. "빈 화면 지연 시간" 부분을 원하는 시간으로 변경 하면 됩니다. "자동 화면 잠금"을 끄면 빈 화면으로 전환되지만 화면이 잠기지는 않습니다. 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.
[Fedora] 화면 비율 조정하기(feat. Gnome Tweaks) 화면 해상도가 2560x1440인 17인치 노트북을 사용하게 되었습니다. 화면에 글자가 너무 작게 보이네요. 글자를 키우는 방법을 알아보았습니다. 설정을 실행해보면 디스플레이 항목에 화면 해상도와 비율을 조정할 수 있습니다. 해상도를 변경해서 글자를 키우려고 하니까, VirtualBox를 사용하고 있는 것이 문제가 되었습니다. VirtualBox 상에서 해상도를 줄이니, 모니터안에 조그맣게 화면이 보여지는것입니다. 비율조정을 사용해서 200%로 올리니까, 원하는 형태로 글자가 커졌습니다. 하지만, 선택할 수 있는 옵션이 100%, 200%, 300%밖에 없었습니다. 150%정도가 원하는 크기입니다. 구글링을 해보니 Gnome Tweaks라는 프로그램으로 비율을 섬세하게 조정할 수 있다고 합니다. Gnom.. 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.
[자바스크립트] 화살표 함수(arrow function) 화살표 함수는 함수를 간편한 문법으로 사용할 수 있도록 한 표현방법입니다. 화살표 함수 정의하기 간단한 익명 함수(anonymous function)의 정의를 보겠습니다. let sum = function(a, b) { return a + b; } 이 익명함수와 동일한 기능의 화살표 함수는 아래와 같습니다. 소괄호 안에 인자 리스트가 있고, 다음에 화살표 모양의 기호(이름이 화살표 함수인 이유), 다음에 반환값을 나타내는 표현식이 옵니다. let sum = (a, b) => a + b; 화살표 함수의 다양한 형태 화살표 함수는 인자의 갯수 본문내의 문장의 갯수등에 따라 조금씩 다른 형태를 사용할 수 있습니다. // 인자가 없을 경우 소괄호만 사용합니다. 소괄호를 생략할 수 없습니다. let val = (.. 2023. 6. 5.

티스토리툴바