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

[글쓰기] / [관리자]

고정 헤더 영역

글 제목

메뉴 레이어

김일국의 기술 블로그

메뉴 리스트

홈

분류 전체보기 (885)

검색 레이어

김일국의 기술 블로그

검색 영역

컨텐츠 검색

분류 전체보기

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 김일국
리액트js 기본

2023.09.26 by 김일국

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

리액트js 기본

### 리액트-JSX기본 3가지(아래) - 컴포넌트(리액트화면_기능단위), props(컴포넌트화면 초기의 속성값), state(컴포넌트화면의 상태값) #### 실행환경 https://codepen.io/ - 코드펜 Settings 정보 - JavaScript Preprocessor - Babel - Add External Script/Pens - Search -> 2가지 react(콤포넌트컴파일처리), react-dom(렌더링출력처리) #### 리액트 기본 구조-html + jsx(아래) #### 코드 펜 환경에서 컴포넌트(리액트화면+기능단위), props(컴포넌트화면 초기의 속성값), state(컴포넌트화면의 상태값) 사용하는 예제(아래) function App(props) { let count = 0..

노드js·자바스크립트 2023. 9. 26. 18:16

추가 정보

인기글

최신글

페이징

1 ··· 5 6 7 8 9 10 11 ··· 111

TISTORY

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

페이스북

트위터

인스타그램

유투브

티스토리툴바