김일국의 기술 블로그 누적조회수: / 오늘조회수: / 어제조회수:

[글쓰기] / [관리자]

고정 헤더 영역

글 제목

메뉴 레이어

김일국의 기술 블로그

메뉴 리스트

홈

분류 전체보기 (891)

검색 레이어

김일국의 기술 블로그

검색 영역

컨텐츠 검색

노드js·자바스크립트

TS-타입스크립트 확장 코딩 패턴

2023.11.02 by 김일국
ES6 vs TS vs 리액트+TS 에서 클래스 사용

2023.10.25 by 김일국
기존 JS vs TypeScript(ES6+TS) 비교

2023.10.20 by 김일국
타입스크립트-TypeScript 전용 타입에 대해서

2023.10.14 by 김일국
TypeScript-타입스크립트의 특징

2023.10.03 by 김일국
리액트-리덕스 향상된 버전인 리덕스js 툴킷 사용 예

2023.10.01 by 김일국
리액트에서 상태-state를 전역변수처럼 사용하는 리덕스 실습

2023.09.28 by 김일국
리액트의 state상태와 화면 다시 렌더링(re rendering)

2023.09.27 by 김일국

TS-타입스크립트 확장 코딩 패턴

Ps. 아래 타입스크립트의 코딩 패턴을 확인해 보면, 자바(서버프로그램언어)8 버전과 동일한 것을 알 수 있다. 참고로, Java8은 객체지향 언어로 람다식(->애로우함수), 네임스페이스, 제네릭타입, 싱글톤 사용이 가능하다. 즉, 저 처럼 자바(스프링) 개발자에게 진입장벽이 낮은 개발언어가 TypeScript 언어라고 할 수 있다.^^ 참고로, 요즘 코딩 트렌드는 Class(클래스) 기반보다는 Function(함수)기반 으로 리액트+TS 프로그램을 구현하는 경우가 많기 때문에 상대적으로 클래스 기술이 코딩 전면에 나타나는 경우가 줄어 들고 있다. 참고로, 자바(오라클-클래스)기반도 코틀린(구글-함수)기반으로 변환 할 수 있는데, 개발자에겐 자바(클래스)기반이 더 코드를 이해하는 방식이 직관적이기 때문에..

노드js·자바스크립트 2023. 11. 2. 13:05

ES6 vs TS vs 리액트+TS 에서 클래스 사용

------------------------------------------------------------------------------------------------------------ 1. ES6 클래스 vs TS Class 기본비교 : 코드펜 에서 실습 https://codepen.io/pen/ ------------------------------------------------------------------------------------------------------------ #1) ES6부터 클래스 문법을 사용할 수 있다. 클래스를 정의하고, 속성을 설정하는 기본 사용법은 다음과 같다.(아래) /* 클래스 기본서식 ------------------------------------..

노드js·자바스크립트 2023. 10. 25. 15:17

기존 JS vs TypeScript(ES6+TS) 비교

### TS타입스크립트 실행환경에서 지원하는 ES6엑마스크립트기능을 JS와 비교하면서 확인(아래) - 실습환경 : 코드펜 ( https://codepen.io/ ) - 사전지식(JS(ES5) vs ES6 비교 글) : https://kimilguk.tistory.com/838 --------------------------------------------------------------------------------------------------------------------------------------- #### 블록 영역 변수, 상수 선언 : 코드펜에서 실습(아래 https://codepen.io/pen/ ) ----------------------------------------------..

노드js·자바스크립트 2023. 10. 20. 11:34

타입스크립트-TypeScript 전용 타입에 대해서

### 기존JS자바스크립트 말고, TS타입스크립트에서 지원하는 데이터 타입Type들(아래) - 실습환경 : typescript 플레이그라운드 ( https://www.typescriptlang.org/ ) --------------------------------------------------------------------------------------------------------------------------------------- #### enumerate 열거형 자료 : 타입스크립트 플레이그라운드에서 실습(아래 https://www.typescriptlang.org/play ) --------------------------------------------------------------..

노드js·자바스크립트 2023. 10. 14. 14:48

TypeScript-타입스크립트의 특징

### 타입스크립트의 특징 ---------------------------------------------------------------------- * 변수의 데이터 형을 지정한다. * 데이터 형태를 컴파일 시 검사해 주기 때문에 안정된 코딩을 할 수 있다. * 에디터 창에서 정확한 에러 메세지를 보여준다. 일반적인JS에서는 타입이 지정되어 있지 않아 문자 입력하는 자리에 숫자를 입력해도 문제가 되지 않는다(아래) * 코드펜( https://codepen.io/ )의 js 와 typescript( https://www.typescriptlang.org/ ) 의 ts 소스 비교 및 결과(아래) // 타입스크립트에서 문자열 자르기 함수(아래) function sliceText(text:string, l..

노드js·자바스크립트 2023. 10. 3. 17:40

리액트-리덕스 향상된 버전인 리덕스js 툴킷 사용 예

### 리덕스 업데이트버전인 리덕스js 툴킷 사용 예: - 기존 리덕스의 핵심키워드(아래) : action(구현함수내에 사용할 액션분기와 state변경값), reducer(구현함수), dispatch(구현함수호출) - 실습환경: 코드샌드박스 https://codesandbox.io/s/react-new - 우선 리덕스js 툴킷 라이브러리 설치 : npm install @reduxjs/toolkit (코드샌드박스에서는 마우스 선택으로 설치 가능하다.아래) - 지난번에 실습한 리덕스 실습 https://kimilguk.tistory.com/841 소스를 기반으로 작업한다.(아래 3개 파일만 수정하면된다.) - 수정1) 리덕스의 createStore-reducer함수(action) 대신 리덕스js 툴킷의 cr..

노드js·자바스크립트 2023. 10. 1. 19:09

리액트에서 상태-state를 전역변수처럼 사용하는 리덕스 실습

실습환경: 코드샌드박스 https://codesandbox.io/s/react-new - 우선 리덕스 라이브러리를 설치한다.(아래 설치 명령 또는 마우스 클릭으로 설치) - npm i redux react-redux (코드샌드박스에서는 마우스 선택으로 설치 가능하다.아래) ### 리덕스로 상태관리를 사용하는 이유 2가지 ####사용하는 이유 1). props(컴포넌트속성-전달객체) 를 state변수로 가져다 사용한다. 장점은 props 속성을 관리하기 편리하다. - 지난번에 작업했던 리액트js기본의 샌드박스의 소스를 가지고 실습한다. https://kimilguk.tistory.com/839 ============================================================ - ..

노드js·자바스크립트 2023. 9. 28. 19:05

리액트의 state상태와 화면 다시 렌더링(re rendering)

### 리액트의 state 상태를 이용하여 Todo List 앱을 만들어 본다. 작업환경: https://codesandbox.io/s/?utm_source=landingpage - 위 작업환경에서 react 를 선택한다.(아래) - 작업 순서 : App.js, TodoList.jsx, TodoItem.jsx, App.css - App.js 소스( src폴더 아래 추가 ) import React, { useState, useEffect, useRef } from "react"; import "./App.css"; import "./components/TodoList"; import TodoList from "./components/TodoList"; /** # 컴포넌트 구조를 만들고, 기능을 정의한다. ..

노드js·자바스크립트 2023. 9. 27. 17:35

추가 정보

인기글

최신글

페이징

1 2 3 4 5 6 ··· 12

TISTORY

김일국의 기술 블로그 © Magazine Lab [상단으로]

페이스북

트위터

인스타그램

유투브

티스토리툴바