Dean83

일전에 React 초기 세팅에 적긴 했지만 메인으로 따로 빼 둔다.  React App 생성 (Create-React-App) 명령어npx create-react-app 앱명칭 --template typescripttsconfig 수정target 항목을 es6로 변경lib 에 es6 추가app.tsx 코드 변경......function App() {.. 이 부분을 typescript 형태로 변경const App: React.FC = () => {React.FC : React Function Component 로서, typescript 에서 사용할 type 를 정의해 둔것.

CRA는 일전에 한번 다룬것 처럼 Create-React-App 으로서 리엑트 프로젝트 생성시 기본 설정을 자동으로 로드해준다. Craco는 CRA+Configuration Override 로서, 웹팩설정 등 advanced 하게 config를 수정해야 할 경우 유용한 툴이다. 설치npm install @craco/craco --savepackage.json 수정실행 빌드 등을 모두 craco로 바꿔야 한다."scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" }craco.config.js 생성root 에 해당 파일을 생성하고, 설정을 override 할..

nodemontsc 설치 후 빌드할 때 마다 tsc 명령어를 통해 빌드할 필요 없이 자동으로 감지하여 빌드하도록 해주는 도구로 필수격이다.설치 후 서버 실행시 npm start 대신 nodemon 명령어를 사용해야 하나, 이는 package.json 파일을 수정하여 npm start 나 build 를 그대로 사용하게 할 수 있다.concurrencynode 서버와 클라이언트를 동시에 실행 할 수 있도록 하는 모듈로, 백앤드를 구현한게 아니라면 굳이 설치할 필요가 없을듯 하다. ts-node 콘솔에 node 파일명.js 명령어를 입력하면 자바스크립트를 실행하는데, 이를 ts 파일도 가능토록 해주는 프로그램이다.필수는 아닌것 같다. nodemon 설치npm install nodemon - gpackage.j..

기본적으로 선언한 인터페이스나 클래스의 변수를 생성할 때, 기본 설정 규칙(예 : required) 을 무시(?) 할 수 있는 것인데, 이걸 사용할 일이 있을지 모르겠지만... 일단 내용정리를 해둔다. 개인적으론 설정한 기본 규칙에 맞춰 변수 생성을 해야 한다고 생각한다.  //예interface test { var1:number, var2:string}//오류 발생 var2가 없음let varTest : test = { var1 : 0}//Partial 때문에 생성 가능let varTest1 : Partial = { var1 : 0} Partial반드시 선언해야 하는 변수를 ? 로 만들어서 선언하지 않아도 되도록 변경한다.Required반대로, ? 로 되어 있어 배정하지 않아도 되는 변수를 반드시..

TypeScript 에서 외부모듈을 사용하려면, 모듈명.d.ts 파일에서 선언이 되어 있어야 하고, 이를 설치하여 사용한다.설치npm install -d @types/모듈명설치는 node_modules -> @types 안에 설치된다설치전, 외부모듈에서 해당 파일이 있는지 검색해야 한다.npm info @types/모듈명사용import * as _ from '모듈명';_.함수명

선언법변수명 : 타입명 = 초기값;초기값에 null 혹은 undefined 를 사용 할 수 있음readonly 변수명 : 타입명 = 초기값; 은 읽기전용 (단, 배열은 좀 다르다)booleannumber (정, 실수 모두)string배열타입명[] = []Array = []읽기전용 배열readonly 타입[] = []readonlyArray = []다중타입 배열(타입명1|타입명2)[] = []Array(타입명1|타입명2>[] = []Tuple변수명 : [type, type....]정해진 타입, 타입의 개수에 맞게만 데이터를 입력할 수 있음읽기전용변수명 : readonly[type,.....]interfaceinterface 확장시 inerface 명칭 extends { } 이용예interface 명칭{ n..

powershell 을 관리자모드로 실행set-executionpolicy -executionpolicy remotesigned 입력 후 엔터y 혹은 a 입력 vscode 에서 powershell 을 사용 할 수 없는 권한 오류.

기본적으로 vscode 에는 typescript를 지원하나 컴파일러는 설치해야 한다.  전역 설치명령어 : npm install -g typescriptconfig 파일 생성컴파일 설정을 모아둔 파일명령어 : tsc inittsconfig.json 파일이 생성됨 (프로젝트 폴더에서 실행할 것)컴파일 (javascript로 컴파일)명령어 : tsc 파일위치및이름예 : tsc ./src/test.tsWatch ts 파일을 수정 후 매번 빌드 하는것은 번거로운 일이므로 이를 자동으로 watch 하여 변환해줌. 명령어 : tsc 파일위치및이름 -w 이 일반적이나 tsc -w 처럼 프로젝트 전체를 대상으로 할 수 있음tsconfig.json 가 있다면 콘솔에 tsc 만 입력하면 해당 프로젝트 내 모든 타입스크립트..

API 통신을 간단하게 사용하기 위한 라이브러리로서 fetch 보다 쉽고 간단하다json을 자동으로 처리비동기 코드 작성이 쉬움 설치npm install axios사용import axios from 'axios';....//getconst {jsonData} = await axios.get('url주소');//postconst data = {'k1' : 'v1'};const {postData} = await axios.post('url주소', data);//deleteconst deleteFunc = async () => { await axios.delete('url주소');}//putconst data = {'k1' : 'v1'};const {data} = axios.put('url주소',data);

프로젝트를 시작하면 프론트엔드와 백앤드가 동시에 시작된다. 즉 프론트엔드 페이지가 완료 되었어도 백앤드 서버 API 준비가 안되는 일이 많다API는 준비가 되어 있지 않아도 응답 json의 구조는 명시를 하고 프로젝트를 시작하는게 옳다.이 경우, 프론트엔드에선 더미 데이터를 이용해서 라도 구축을 해놓는게 좋고, 백앤드의 API 서버가 없어도 프로젝트 진행하기 위해선 단순 json 더미 데이터 만으로도 응답을 주고 받을 수 있는 테스트 서버가 있으면 좋다. 물론 백앤드 개발자에게 요청할 수도 있으나, 그거 할 시간이 있었음 이미 API 가 제대로 구축이 되어 있을거니, 프론트 쪽에서 처리하는것이 좋다.  설치npm install -g json-server실행json 파일이 있는곳으로 이동 (cd) npx ..