FrontEnd
28_타입스크립트 보다 자세한 문법
이전에 타입스크립트를 간단히 배우고 리액트에 적용을 해보았는데, 타입스크립트의 문법을 조금 더 자세하게 알아보자. 타입스크립트는 강력한 타입으로 대규모 애플리케이션 개발에 용이하며 유명한 자바스크립트 라이브러리와의 편리한 사용이 가능하다. 또한 개발 도구에서 강력한 지원이 가능하다는 장점이 있다. 이전에 말했듯이 타입스크립트를 이용하면 많은 실수를 줄일 수 있다라는 장점이 있다! yarn add typescript -g 다음과 같이 타입스크립트를 전역적으로 설치해주자. //01_hello.ts var hello = "hello"; let hello2 = "hello2"; 다음과같은 간단한 예제코드를 작성하고 tsc .\01_hello.ts 터미널에서 tsc파일로 바꾸어주면 01_hello.js파일이 생성..
26_타입스크립트 & 리덕스
이번엔 타입스크립트와 리덕스를 사용해보자. npx create-react-app my-app --template typescript 먼저 타입스크립트를 사용하는 리액트 프로젝트를 하나 만들어준뒤, yarn add redux react-redux redux와 react-redux 라이브러리를 설치해준다. 완성된 프로젝트의 node modules파일안에서 설치한 라이브러리를 보면 index.d.ts가 있는걸 볼 수 있는데 이 파일이 있다면 redux에선 타입스크립트를 지원해주는 것이다. react-redux에는 따로 지원해주지 않기 때문에 yarn add @types/react-redux 이를 이용해서 typescript를 적용시킬 수 있다. 어떠한 라이브러리에서 타입스크립트를 지원해주는지 아닌지는 아래 사..
25_타입스크립트 & 리액트
타입스크립트를 이용해서 리액트 프로젝트를 만들어보자. 리액트에서 type스크립트를 지원하기에 별도의 설정은 필요없지만 프로젝트를 실행할때 typescript를 사용한다고 표시만 하면 된다. npx create-react-app my-app --template typescript 리액트 프로젝트를 만들때 뒤에 --typescript를 붙이면 된다. 이미 만든 프로젝트에 typescript를 적용하고 싶다면 아래 링크를 참조하자 https://create-react-app.dev/docs/adding-typescript/ Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1.0 and higher...
24_타입스크립트 문법
자바스크립트 같은 경우, 아래와 같이 자료형이 정해져있지 않아 실수하기가 쉽다. let value = 5; value = '안녕하세요'; value = [1,2,3,4,5]; value = null TypeScript를 사용하면 이같은 실수를 방지하기 편하고, ide(vs코드같은)에서 기능을 지원받기 쉽다. 예를 들어 내장함수를 쓸때 파라미터로 무엇이 들어간다던지 등의 기능을 볼 수 있다. 그럼 타입스크립트의 문법을 한번 알아보자 먼저 파일하나를 만든 후에, yarn init -y package.json파일을 하나 만들어준다. yarn add typescript ts-node //ts-node : 콘솔창에서 typescript사용 가능 yarn run tsc --init //타입스크립트를 위한 설정 그후..
23_리액트 리덕스 미들웨어(2)
JSON Server 가짜 Rest api를 호출하여 연습용 서버를 만들 수 있다 먼저 root프로젝트에 data.json을 만든다 (src폴더보다도 밖) //data.json { "posts" : [ { "id" : 1, "title" : "정민규의 나이", "body" : "25살" }, { "id" : 2, "title" : "정민규의 성별", "body" : "남자" }, { "id" : 3, "title" : "정민규의 최애메뉴", "body" : "치킨" } ] } npx json-server ./data/json --port 4000 그 다음 터미널을 열어서 서버를 개통시켜준다. 터미널에 나온 해당 링크를 클릭해주고 주소를 localhost:4000/posts 로 이동해주면 입력한 데이터가 ..
22_리덕스 미들웨어
리덕스 미들웨어를 쓰지 않는건 리덕스를 쓸 이유가 없다는 것과 같다! 액션이 일어나고 리듀서가 일어나기 전에 코드를 실행하게 하거나 액션을 수정하거나 또다른 액션을 만들어서 dispatch를 한더던지 등등의 기능을 쓸 수 있다. 주로 API요청과 같은 비동기 작업을 처리할때 굉장히 유용하게 쓸 수 있다. 먼저 리액트 프로젝트를 하나 만든 후에 yarn add redux react-redux redux라이브러리와 react-redux라이브러리를 설치해 준다. 그 이후 간단한 리덕스 구조를 만들어주자. 저번 글에서 했던 카운터 예제를 다시한번 구현해보자. 다음과 같은 파일구조를 만들어주고 //counter.js const INCREASE = 'INCREASE'; //action type const DECRE..