TypeScript (7) 썸네일형 리스트형 TypeScript 타입스크립트 + 리액트를 활용해 TodoList 만들기 #2 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. * 타입스크립트 기본 문법은 타입스크립트 핸드북을 통해 학습하시는 것을 추천드립니다. 본 글에서 다룰 내용 Context 준비하기 컴포넌트에서 Context 사용하기 본 글에서 사용하는 기술 TypeScript React-Hooks Context-API SCSS Styled-Components 제일 먼저 상태 전용 Context를 만들어보겠습니다. src/contexts/TodosContext.tsx import { createContext } from 'react'; // 나중에 다른 컴포넌트에서 타입을 불러와서 쓸 수 있도록 내보내겠습니다. export type Todo = { id: number; text.. TypeScript 타입스크립트 + 리액트를 활용해 TodoList 만들기 #1 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. * 타입스크립트 기본 문법은 타입스크립트 핸드북 을 통해 학습하시는 것을 추천드립니다. 본 글에서 다룰 내용 React template을 활용한 타입스크립트 프로젝트 만들기 기본 세팅하기 TodoList 컴포넌트와 디자인 완성하기 본 글에서 사용하는 기술 TypeScript React-Hooks Context-API SCSS Styled-Components 일단 제일 먼저 프로젝트를 생성해야합니다. 타입스크립트 + 리액트 프로젝트를 생성하는 방법은 아주 간단합니다. yarn add create react-app [project-name] --template typescript //or npx create-rea.. TypeScript 타입스크립트를 사용해 블록체인 개발하기 #2 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. * 타입스크립트를 사용해 블록체인 개발하기는 타입스크립트 기본 세팅 방법을 따라 하신 후 사용하기를 권장합니다. * 타입스크립트 기본 문법은 타입스크립트 핸드북을 통해 학습하시는 것을 추천드립니다. 본 글에서 다룰 내용 새로운 블록을 만들기 위한 함수 구현 블록이 유효한지 체크하는 함수 구현 블록을 추가하는 함수 구현 TS-typechain을 개발하면서 발생한 오류 및 해결방법 본 글을 시작하기 전 TypeScript 타입스크립트를 사용해 블록체인 개발하기 #1을 읽으신 후 아래의 글을 읽어주세요. 새로운 블록을 만들기 위한 함수 //새로운 블록을 만드는 함수 const createNewBlock = (data.. TypeScript 타입스크립트를 사용해 블록체인 개발하기 #1 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. * 타입스크립트를 사용해 블록체인 개발하기는 타입스크립트 기본 세팅 방법을 따라 하신 후 사용하기를 권장합니다. * 타입스크립트 기본 문법은 타입스크립트 핸드북 을 통해 학습하시는 것을 추천드립니다. 본 글에서 다룰 내용 TypeScript를 사용하기 위한 세팅 블록 구조를 잡을 class 선언 블록체인을 형성하기 위한 간단한 함수 구현 TypeScript를 사용하기 위해 세팅을 해주어야 합니다. 저의 이전 글인 타입스크립트 세팅 방법 및 tsc-watch 사용하기 글을 따라하시면 위와 같은 폴더 구조를 가지게 됩니다. 이전 글을 따라하시면서 위와 같은 폴더 구조를 완성한 뒤 아래의 글을 따라 진행해주세요. 제.. TypeScript tsc-watch 사용하기 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. * tsc-watch 사용은 TypeScript 타입스크립트 기본세팅 방법을 따라하신 후 사용하기를 권장합니다. 본 글에서 다룰 내용 tsc-watch 사용방법 tsc-watch를 사용하면서 발생한 오류 및 해결방법 왜 tsc-watch를 사용하는 것인가? 원래는 ts코드가 바뀔 때마다 js로 컴파일 한 뒤, node로 실행하는 과정을 반복해야했지만, tsc-watch를 사용하면 ts코드가 바뀔때마다 자동으로 컴파일 해준 뒤 js로 실행시켜준다. 쉽게 말해 TypeScript버전 nodemon입니다! 제일 먼저 tsc-watch를 설치합니다. src 폴더와 dist 폴더를 만들어 줍니다. dist 폴더는 컴파일.. TypeScript 타입스크립트 세팅 방법 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. 본 글에서 다룰 내용 타입스크립트 세팅 방법 아래의 글에서는 타입스크립트 설치부터 기초 세팅 과정을 다룹니다. 저는 Visual Studio Code를 에디터로 사용합니다😁✌ 왜 TypeScript를 사용하는데 세팅이 필요한 것인가? Node.js는 TypeScript를 이해하지 못하기 때문에 TypeScript를 JavaScript로 컴파일 해주어야합니다. 제일 먼저 타입스크립트를 설치합니다. 저는 이 프로젝트 외에 다른 프로젝트에서도 TypeScript를 사용할 것이기 때문에 global로 설치했습니다. 최상위 위치에서 tsconfig.json 파일을 생성합니다. 여기서 tsconfig.json은 TypeS.. TypeScript 프롤로그 및 목차 안녕하세요😀 황대성입니다. 저는 프론트엔드 개발자이고, 사용하는 주 언어는 JavaScript입니다. 그리고 React, ReactNative와 같은 프레임워크를 사용하여 프론트엔드 개발을 하고있습니다. 개발을 하던 중 큰 프로젝트 혹은 오류 없는 코딩을 위해 TypeScript를 사용한다고 느꼈습니다. TypeScript를 공부하면서 배운 지식들을 작성하려고 하니, 많은 관심 가지고 봐주셨으면 좋겠습니다. 이 글들이 저 뿐만 아니라 TypeScript를 공부하시는 많은 분들에게 도움이 되었으면 좋겠습니다. 긴 글 읽어주셔서 감사합니다😀 일단 세부적인 사항을 공부하기 전에 TypeScript가 무엇인지 간단히 알아보겠습니다. 아래의 내용을 읽고 목차로 들어가 세세한 내용을 학습하시는 것을 추천드립니다😁 .. 이전 1 다음
