FrontEnd/React
[React] .env 사용하기
웹 개발을 하다보면 .env파일을 활용하여 환경변수 설정을 해주어야 할 경우가 있다. .env 파일을 정의하면 하드코딩을 피할 수 있고, 보안,유지보수적으로도 도움이 많이 된다. .env파일은 프로젝트 최상위 루트에 파일을 만들어 둬야한다. 리액트에서 .env를 사용하기 위해서는 변수명이 REACT_APP_ 으로 시작해야한다. create-react-app에서 환경변수 유출을 막기위해 위와같이 시작하지 않는 변수는 무시하기 때문이다. REACT_APP_변수이름 = 값 와같은 형태로 .env파일에 저장하고 사용하면 된다. 사용하는 경우에는, const value = process.env.REACT_APP_변수이름 으로 사용하면 된다.
27_타입스크립트 & 리덕스 미들웨어
타입스크립트 환경에서 리덕스 미들웨어를 어떻게 사용할지 알아보자! 깃허브 api를 사용해서 특정 사용자의 프로필을 조회해보는 기능을 구현해 볼 것이다. 이전 글에서 만들었던 프로젝트에 yarn add axios redux-thunk axios와 redux-thunk를 설치해보자. import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { Provider } from "react-redux"; import { createStore, applyMiddleware } from..
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...
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..