이안의 평일코딩

이넘(enum)이란? 이넘은 특정 값들의 집합을 의미하는 자료형이다. 숫자형 이넘 enum Shoes { Nike, Adidas } var myShoes = Shoes.Nike; console.log(myShoes); // 0 var myShoes2 = Shoes.Adidas; console.log(myShoes2); // 1 문자형 이넘 enum Shoes { Nike = '나이키', Adidas = '아디다스' } var myShoes = Shoes.Nike; console.log(myShoes); // '나이키' 이넘은 구체적인 값을 제안해줌으로써 이넘에서 제공되는 값만 넘겨 좀 더 정확한 코드, 예외처리 케이스가 줄어들 수 있다. enum Answer { Yes = 'Y', No = 'N', } ..

유니온 타입 ' | ' 특정 타입을 여러개 쓸 수 있게 해준다. function logMessage(value: string | number) { console.log(value); } logMessage('Hi'); logMessage(100); 파라미터.을 찍으면 해당하는 타입의 API를 자동완성을 통해 쉽게 이용할 수 있다. var todo: string | number | boolean; function logMessage(value: string | number) { if (typeof value === 'number') { value.toLocaleString(); } if (typeof value === 'string') { value.toString(); } throw new TypeErr..

인터페이스란? 타입스크립트의 인터페이스는 항상 특정 형식을 준수하는 데이터만 받겠다는 상호간의 약속을 의미한다. 파라미터에 인터페이스를 정의하고 함수 호출할 때 파라미터에 정의한 인터페이스의 규칙을 따랐는지 확인한다. interface User { age: number; name: string; } // 변수에 인터페이스 활용 var ian: User = { age: 28, name: '이안' } // 함수에 인터페이스 활용 function getUser(user: User) { console.log(user); } const person = { age: 28, name: 'ian' } getUser(person); 함수의 전체적은 모습까지 인터페이스가 정의할 수 있다는 게 장점. 라이브러리를 만들거나 ..

타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어로, 자바스크립트의 확장된 언어이다. 타입스크립트는 왜 쓸까? 타입스크립트는 에러의 사전 방지 및 코드의 자동 완성이 가능해 개발의 생산성을 향상시켜주기 때문이다. (미리 타입을 정해두면 실행 전에 오류가 뜨기 때문에 에러가 사전에 방지되고, 예를 들어, number라고 미리 타입을 정해두면 .만 찍어도 number와 관련된 코드의 자동완성(intellisense)이 가능해진다.) 기본 타입(문자열, 숫자, 배열, 튜플, 객체, 진위값) // 문자열 let str: string = 'hello'; // 숫자 let num: number = 10; // 배열 let arr: Array = [1,2,3]; let items: number[] = ..

client/src index.js import 'react-app-polyfill/ie9'; import 'react-app-polyfill/ie11'; import 'core-js'; import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter } from "react-router-dom"; import Reducer from './_reducers'; import { Provider } from 'react-redux';..

지난 블로깅에서는 state를 저장하고 사용하는 방법만 알아보았고, 이번시간에는 데이터 수정하는 방법에 대해서 알아보도록 하자. reducer 함수 state 데이터의 수정방법을 미리 정의하는 함수이다. state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션) 1. '수량증가'라는 데이터 수정방법 이름을 작명해서 넣어준다. (액션.type === 수정방법이름) 2. if문 안에 '수량증가'라는 요청이 들어올 경우 else if문에는 '수량감소'라는 요청이 들어올 경우 수정방법 정의. 3. else문 안에는 둘 다 안들어온 경우 기본 state를 결과값으로 가져올 것을 수정방법 정의. index.js let 초기값 = [ {id: 0, name: '멋진신발..

Redux란? Redux라는 라이브러리는 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능케 해주고 state 데이터를 관리하는 기능을 가지고 있다. Redux를 쓰는 여러가지 이유 중 하나는 props 전송없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하기 때문에 컴포넌트가 매우 깊숙히 있다면 state를 전달하기 위해 props를 수십번 써야하고 귀찮은데 redux를 세팅하면 Context API와 같이 props를 수십번 쓸 필요없이 바로 꺼내쓸 수 있게 해준다. 설치방법 터미널에 yarn add redux react-redux 를 쳐서 2개의 라이브러리를 설치한다. (또는 npm install redux react-redux) 세팅하기 index.js에 를 import..

SASS란? CSS를 프로그래밍 언어스럽게 작성가능한 Preprocessor로 CSS에서 변수, 연산자, 함수, extend, import 등을 사용가능하게끔 해준다. 브라우저는 SASS문법을 모르기 때문에 SASS로 작성한 파일을 다시 CSS로 컴파일해야하는데 node-sass를 설치하면 알아서 해준다. node-sass 설치 설치는 npm install node-sass 또는 yarn이 있을 때 yarn add node-sass을 터미널에 치면된다. 그리고 SASS문법을 쓰고싶다면 .CSS 파일이 아닌 .SCSS로 만들면 된다. 그리고 import './파일명.scss'으로 불러온다. SASS 문법 1. 변수에 데이터를 저장 $변수명 : 변수에 넣을 값 Detail.scss $메인칼라 : #ff000..