개발자를 향해...
[노드 리액트 기초 강의]#23 Proxy Server ? ~ #25 Antd CSS Framwork 본문
웹 자바스크립트 공부/ReactJS + node.js
[노드 리액트 기초 강의]#23 Proxy Server ? ~ #25 Antd CSS Framwork
eugeneHwang1124 2021. 2. 18. 12:28728x90
반응형
본 글은 John Ahn 님의 [노드 리액트 기초 강의]를 수강하며 작성하였습니다.
#23 Proxy Server ?
proxy 서버를 통해 유저가 뭔가 보내면 여기서 여러 활동을 할 수 있다. 예를 들어 ip나 중요한 데이터들을 서버가 알아볼 수 없게 바꾸거나 방화벽 기능을 할 수 도 있고 필터 기능을 할 수도 있다. 또한 static한 이미지를 프록시에 저장해 굳이 인터넷까지 가지 않아도 proxy에서 데이터를 가져올 수 있다. 그리고 원하지 않는 유저의 접근을 막을 수 있다.
#24 Concurrently
Concurrently를 이용해 백서버와 프론트 서버를 한번에 켜보자. 우선 라이브러리를 다운받기 위해 npm i concurrently 를 터미널에 실행해주자. 그리고 루트 디렉토리의 package.json으로 가서
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
를 디펜던시에 넣어주자. 이제 npm run dev를 통해 백과 프론트 서버를 동시에 켤 수 있다.
#25 Antd CSS Framwork
css는 antd에서 사용할 것이다. antd의 장점은 스타일이 깔끔하고 엔터프라이즈 환경에서도 잘 만들 수 있다.(ant.design/components/overview/)
제공되는 것들을 쓰기위해서는 우선 터미널에 client 폴더에서 npm install antd를 실행시켜 라이브러리를 다운받는다. 그리고 사용할 때
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
이런 식으로 import해서 사용하면 된다.
반응형
'웹 자바스크립트 공부 > ReactJS + node.js' 카테고리의 다른 글
[노드 리액트 강의 기초] #32 로그아웃 ~ #34 인증 체크 (2) 강의 마무리. (0) | 2021.02.21 |
---|---|
[노드 리액트 기초 강의] #26 Redux 기초 ~ #28 React Hooks (0) | 2021.02.21 |
[노드 리액트 기초 강의] #19 CRA to Our Boilerplate ~#22 CORS 이슈, Proxy 설정 (0) | 2021.02.17 |
[노드 리액트 기초 강의] #15 리액트란 ? ~ #18 구조 설명 (0) | 2021.02.17 |
[노드 리액트 기초 강의] #11 로그인 기능 with Bcrypt (1) ~ #14 로그아웃 기능 (0) | 2021.02.15 |