Manual

Webpack4 설정

W

React 프로젝트를 시작할때 Webpack을 설정하는게 쉽지 않다. 그래서 한번 기본적인것들을 정리해보려한다. 그래야 다음에 새로 시작할때 덜 헤맬것 같다. 목차 webpack.config.jsentryoutputmodule( + loader)plugindevServerdevtoolBabel 설정기타등등 webpack.config.js Zero configuration Webpack4에와서 webpack.config.js파일은 더이상 필수가 아니다. Create-React-App처럼 별다른 configuration없이 webpack을 사용할 수 있다. 하지만 나는 webpack을 내 입맛대로 사용하고 싶기 때문에 webpack.config.js를 사용한다. 용도 webpack.config.js 파일은...

Typescript 기초(5) – Functions

T

Typescript Handbook / Developer’s Record 를 참고했습니다. 함수 타입 인자의 타입과 return type을 지정할 수 있다. 또한 익명함수도 만들 수 있어서 변수에 할당도 된다. function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; }; 함수 자체의 타입도 만들 수 있다. let myAdd : (x: number, y: number) => number; myAdd = function(x: number, y: number) { return x + y } console...

Typescript 기초(4) – Class

T

Typescript Handbook / Developer's Record 를 참고했습니다. 기본 class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return `안녕 ${this.greeting}`; } } let 병인이: Greeter = new Greeter("만나서 반가워"); console.log(병인이.greet()); // 안녕 만나서 반가워 상속 class Animal { name: string; constructor(name: string) { this.name = name; } move(distance: number) { console.log(`${this...

Typescript 기초(3) – Interfaces

T

Typescript Handbook / Developer's Record 를 참고했습니다. 기본 interface LabelledValue { label: string; } let myObj: LabelledValue = { label: "A" } let myObj2: LabelledValue = { label: "B", size: 10 // error : Object literal may only specify known properties, and 'size' does not exist in type 'LabelledValue' } Object에 바로 Interface 지정해서 쓰는거는 모양이 딱 맞아야 한다. 하지만, 함수의 인자값으로 들어갈때는 모양이 조금 안맞아도 된다. interface...

Typescript 기초(2) – Variable Declarations

T

Typescript Handbook / Developer's Record 를 참고했습니다. var vs let vs const 이곳을 참고하면 된다. destructure array let input = [1, 2]; let [first, second] = input; console.log(first); // 1 console.log(second); // 2 function test([first, second]: [number, number]) { console.log(first); // 100 console.log(second); // 200 } test([100, 200]); let [first, ...rest] = [1,2,3,4]; console.log(first); // 1 console...

Typescript 기초(1) – Basic Types

T

Typescript Handbook / Developer's Record 를 참고했습니다. String, Number, Boolean let myName: string = "윤병인" let age: number = 25 let hasGirlFriend: boolean = false Array let list1: number[] = [1, 2, 3] let list2: Array<number> = [1, 2, 3] let list3: Array<string> = ["A", "B", "C"] for...in var arr = ["A", "B", "C"] for(var key in arr) { console.log(arr[key]) // A, B, C 출력 } for...of var arr...

Redux-Toolkit : Basic Tutorial

R

원문 : 주의 : 제가 이해하기 쉬운 방식으로 번역 및 첨언했습니다. Introduction: Writing a Counter Application Redux "Counter-Vanilla" Example function counterReducer(state, action) { if (typeof state == 'undefined') { return 0 } switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state -1 default: return state } } var store = Redux.createStore(counterReducer); document...

Create React App없이 React + Typescript 환경설정

C

NPM npm init 이것저것 설치하기 (스크롤을 많이 내리다 보면, 한번에 설치하도록 코드를 작성해 놓았습니다. 일일이 복붙 할 필요 없습니다.) Webpack webpack / webpack-cli webpack을 쓰려면 당연히 필요하니까, webpack과 webpack-cli모듈을 설치해준다. npm install --save-dev webpack webpack-cli webpack-dev-server local 환경에서 편하게 테스트해보려면 필요하다. npm install --save-dev webpack-dev-server typescript typescript -> javascript 변환해주는 typescript모듈이 필요하다. npm install --save-dev typescript...

ESLint 기본적인 사용법

E

설치하기 npm install eslint --save-dev 설정파일 만들기 프로젝트 폴더의 최상위 위치에 .eslintrc.js 파일을 생성해준다. .eslintrc.js 심플예제 module.exports = { "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } }; "semi": ["error", "always"] : 세미콜론은 항상 써줘야 하고, 안쓰면 에러를 내뿜는다 "quotes": ["error", "double"] : 따움표는 큰따움표를 써줘야하고, 안쓰면 에러를 내뿜는다 에러의 단계 off "semi" : ["off", "always"] : semi콜론을 항상 붙여야 하는 규칙을 꺼버린다. 다시말해 규칙을...