본문 바로가기

javascript19

[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.
[자바스크립트] 구조 분해/비구조화 할당(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.
[자바스크립트] 화살표 함수(arrow function) 화살표 함수는 함수를 간편한 문법으로 사용할 수 있도록 한 표현방법입니다. 화살표 함수 정의하기 간단한 익명 함수(anonymous function)의 정의를 보겠습니다. let sum = function(a, b) { return a + b; } 이 익명함수와 동일한 기능의 화살표 함수는 아래와 같습니다. 소괄호 안에 인자 리스트가 있고, 다음에 화살표 모양의 기호(이름이 화살표 함수인 이유), 다음에 반환값을 나타내는 표현식이 옵니다. let sum = (a, b) => a + b; 화살표 함수의 다양한 형태 화살표 함수는 인자의 갯수 본문내의 문장의 갯수등에 따라 조금씩 다른 형태를 사용할 수 있습니다. // 인자가 없을 경우 소괄호만 사용합니다. 소괄호를 생략할 수 없습니다. let val = (.. 2023. 6. 5.
[자바스크립트] 상수 (const)와 심볼(Symbol)의 비교 자바스크립트에서 바꿀 수 없는 값을 지정하기 위해서 const 와 Symbol 을 사용할 수 있습니다. 두 가지의 사용법과 차이점을 알아봅니다. 상수(const) 상수는 선언과 동시에 값을 지정하고, 이후로 변경이 불가능합니다. 중복 선언 또한 불가능합니다. // 선언과 동시에 초기화 합니다. const num = 5; // 이후에 값을 바꾸려고 하면 에러가 발생합니다. num = 10; // 중복 선언을 하려고 하면 에러가 발생합니다. const num = 7; 심볼(Symbol) 심볼은 값을 바꿀 수 없으면서 유일한 값을 만듭니다. 한번 만들어진 값은 자신외에 어떤 값과도 같지 않습니다. // 심볼을 하나 생성합니다. const SUN = Symbol(); // 심볼 생성시 인자값을 줄 수 있습니다... 2023. 6. 5.
JavaScript - 흐름 제어와 오류처리 순차적으로 실행되는 명령을 조건에 따라 다른 명령을 실행할 수 있도록 해주는 흐름 제어(Flow Control)를 하는 방법을 알아봅니다. 1. 블록문 가장 기본적인 명령문은 세미콜론(;)으로 구분됩니다. 이러한 명령을 그룹으로 묶는 방법이 대괄호({}) 블록을 사용하는 것입니다. 블록은 함수, 조건문, 반복문, 에러처리 등에서 명령어 그룹을 묶는데 사용되어지며 변수의 유효범위를 결정하는 단위이기도 합니다. { 문장1; 문장2; . . . 문장n; } ※참고 var를 사용하면 함수 레벨 유효범위가 되고, ES6에서 추가된 let, const를 사용하면 블록 레벨 유효범위가 적용됩니다. 2. 조건문 조건에 따라 프로그램 실행 흐름를 변경할 수 있는 기능을 제공하는 명령으로 if, switch가 있습니다. .. 2022. 4. 4.
JavaScript - 데이터형, 형변환, 리터럴 1. 데이터 형(Data Type) 자바스크립트의 데이터형(Data Type)은 원시형(Premetive Type) 여섯가지와 객체형(Object Type) 한가지로 총 일곱가지가 있습니다. 1.1. 원시형(Premitive Type) - Boolean : true와 false 값을 가집니다. - null : 어떤 값이 의도적으로 비어있음을 의미하는 특별한 키워드 null을 사용합니다. 대소문자를 구별하므로 Null, NULL등은 null이 아닙니다. - undefined : 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당됩니다. - Number : 정수 또는 실수형 숫자입니다. - String : 문자열 입니다. - Symbol : ES6에서 추가된 자료로 값이 고유하.. 2022. 4. 3.
JavaScript - 전역변수, 지역변수, 변수범위, 변수 호이스팅(Hoisting) 1. 전역변수와 지역변수 "전역변수"는 자바스크립트 코드내의 어느곳에서나 접근할 수 있는 변수를 말합니다. 전역변수를 만드는 방법은 다음과 같습니다. - 선언하지 않고 직접사용 합니다. - var로 선언시 함수 밖에서 선언 합니다. - let으로 선언시 블럭 밖에서 선언합니다. ※ 참조 전역변수는 실제로 전역 객체(global object)의 프로퍼티(Property)입니다. 전역객체는 자바스크립트를 웹브라우저에서 실행한다면 window 가 되고, Node.js에서 실행한다면 global이 됩니다. // 함수 밖에서 선언된 전역 변수는 실제로 window객체의 property입니다. name = "홍길동"; console.log(window.name); // "홍길동" 출력 "지역변수"는 정의된 블럭내에.. 2022. 4. 2.
JavaScript - 문장, 식별자, 변수선언 1. 문장(Statement) 자바스크립트 문장의 끝에는 세미콜론(;)이 있어도 되고 없어도 됩니다. 하지만 한줄에 여러 문장을 적으려면 세미콜론(;)으로 구분을 해줘야 합니다. 자바스크립트는 대소문자를 구별하며 유니코드를 사용합니다. 그러므로 변수명등 식별자에 "한글"을 사용할 수 있습니다. var 좋아하는과일 = "배"; // 변수에 공백은 사용할 수 없습니다. 2. 주석 프로그램에 설명을 달 수 있습니다. // 한줄 주석 입니다. 슬래쉬 2개 이후 부터 줄 끌까지 입니다. /* 이건 여러줄 주석입니다. slash-star부터 다음 start-slash가 나올때까지가 주석입니다. */ 3. 식별자(Identifier) 변수명, 함수명, 클래스명등 식별자는 시작하는 글자가 영문자, 유니코드가 가능하며,.. 2022. 4. 1.
자바스크립트 RSA 암호화 라이브러리 JSEncrypt JSEncrypt는 브라우저에서 서버로 보낼 데이터를 암호화 하기 위해서 사용할 수 있는 자바스크립트 라이브러리로 RSA 방식으로 데이터를 암호화/복호화 할 수 있습니다. RSA는 비대칭형 암호화 알고리즘으로 브라우저에서 공개키로 암호화 해서 데이터를 서버로 보내면 서버에서는 개인키로 복호화 할 수 있습니다. JSEncrypt는 http://travistidwell.com/jsencrypt/ 에서 다운로드 할 수 있습니다. 이 사이트에 설명되어 있듯이 JSEncrypt는 http://www-cs-students.stanford.edu/~tjw/jsbn/ 에 있는 다양한 암호화 관련 라이브러리들의 래퍼로 하나의 파일에 필요한 라이브러리를 모두 포함하고 있고, 간편한 API를 제공합니다. 다운로드 받은 파일.. 2018. 10. 4.
새창을 여는 window.open() 함수 사용법 웹브라우저에서 새창을 열기 위해서 가장 간단히 사용할 수 있는 방법이 자바스크립트 window 객체의 open() 함수를 사용하는 것입니다. 1. 문법(Syntax) var ret = window.open(url, name, specs, replace); 1.1. 반환값(ret) 새로 만들어진 창 객체가 반환됩니다. 창의 생성에 실패하면 null을 반환합니다. 이 객체를 통해서 새창을 제어할 수 있습니다. 예로 ret.close(); 로 창을 닫을 수 있습니다. 1.2. url 새창에 보여질 주소 입니다. 선택적인 값으로 비워두면 빈창(about:blank)이 보입니다. 1.3. name 새로 열릴 참의 속성 또는 창의 이름을 지정합니다. 선택적인 값으로 기본값은 "_blank" 입니다. 사용 가능한 값.. 2018. 6. 27.

티스토리툴바