반응형 React,Node,JQuery,js54 [Nginx] nginx.conf 에 Proxy 설정 nginx.conf 에 Proxy 설정 upstream app { server localhost:8080; } server { listen 80; localhost / { root /app/build; index index.html; try_files $uri $uri/ /index.html; } localhost /api { proxy_pass http://app; } } localhost / app { proxy_pass http://app; } proxy 설정이 없을 때는 그냥 localhost/api 이지만 위와 같은 설정이 있을 때는 해당 서버의 8080 포트로 넘긴다는 설정입니다. 예를들면 react 등 에서 fetch('/api/something')... 처럼 사용했을 때 경로에 /api 가.. 2020. 4. 3. [React] package.json 의 version, name 가져오기 create-react-app package.json 의 version 가져오기 방법 1. import packageJson from '/package.json'; console.log(packageJson.version); console.log(packageJson.name); 방법 2. create-react-app 의 버전이 1.1.0 이상이어야 합니다. 저는 .env.development 와 .env.production 만 사용합니다. package.json 을 보면 { "name": "hello-bryan-app", "version": "0.2.0", "private": true, "dependencies": { // 생략 여기서 name 과 version 을 js 에서 가져오는 방법입니다. ... 2020. 4. 3. [React] Route 사용하기 Url Parameter parsing, class 에사 사용하기 React Route get Parameters url query string 기존에 react app 이 없으면 여기서 하나 생성 해보세요. 2020/01/17 - [React,Node,js] - React + express 연동설정. 처음부터 따라하기 일반적으로 create-react-app 을 하면 index.js 안에 아래와 같이 App.js 를 가져옵니다. ReactDOM.render(, document.getElementById('root')); 여기서 Router 를 하나 생성 해보죠. index.js 에서 위 코드를 아래와 같이 바꿀겁니다. import Root from './Root'; ReactDOM.render(, document.getElementById('root')); 그럼 sr.. 2020. 4. 2. [Centos] nodejs npm 설치하기 Centos nodejs npm install # epel repository 추가 $ yum install epel-release # npm 과 nodejs 설치 $ yum install -y npm nodejs # 버전 확인 $ node -v $ npm -v 특정 버전 설치하려면 $ curl -sL https://rpm.nodesource.com/setup_10.x | sudo -E bash - # setup_9.x 또는 setup_8.x 등으로 입력 # 설치 npm 도 설치됨. $ yum install nodejs -y 2020. 4. 1. [React] Create-react-app 으로 react project 만들기 create-react-app npm 과 nodejs 는 설치해두세요. 2019/12/27 - [React,Node,js] - Node js, NPM 설치하기 (윈도우10) 2020/04/01 - [React,Node,js] - [Centos] nodejs npm 설치하기 1. create-react-app 설치 $ npm install create-react-app 2. react projcet 생성 $ npx create-react-app test-app 이러면서 끝납니다. 한번 실행 해보죠. $ cd test-app $ npm start 요건 허용해줘야겠죠~ 실행되었습니다. 저 URL 로 웹브라우저에서 접속 가능합니다. 그리고 기본 웹브라우저로도 띄워졌을 겁니다. 개발하려면 vscode 나 webs.. 2020. 3. 27. [React] 환경변수 / 공통변수 사용하는 방법 방법1 src 폴더 아래 js 파일을 하나 생성합니다. config.js export const ELASTIC_URL = '10.20.30.40:9200'; export const ES_INDEX_NAME = 'img_text_data'; export const ES_DOC_TYPE = '_doc' 사용 방법 import * as config from './config'; // .. function someMethod(){ let host = config.ELASTIC_URL;// 이렇게 사용 } 이 방법이 좀 간단합니다. 아래의 방법2는 개발환경/배포환경에 따라 다른 변수가 필요할 때 유용합니다. 방법2 create-react-app 으로 프로젝트를 생성했다고 가정하고 프로젝트 root 에 파일을 만듭.. 2020. 2. 17. React 디버깅 (WebStorm) WebStorm 으로 React 개발할 때 debug create-react-app 으로 프로젝트를 만들고, 실행할 때 IDE로 Break point 를 찍고 디버깅하는 방법입니다. 일단 프로젝트 만들고 npm 으로 시작해봅니다. (테스트할 프로젝트가 없다면 이거 보고 만들고오세요~ 2020/01/17 - [React,Node,js] - React + express 연동설정. 처음부터 따라하기) react project root 폴더에서 npm start 그리고 WebStorm IDE 의 상단 메뉴 중 RUN -> Edit Configurations.. 좌측상단에 + 클릭 -> JavaScript Debug 클릭. Name, URL등 설정 후 OK WebStorm IDE 상단 우측에 Debug 버튼을 눌.. 2020. 1. 17. React + express 연동설정. 처음부터 따라하기 2 이전 글을 안보신 분들은 보고 오세요~ 2020/01/17 - [React,Node,js] - React + express 연동설정. 처음부터 따라하기 React + express 연동설정. 처음부터 따라하기 React, Express 연동하여 사용하기 일단 react app 을 하나 생성합니다. 이름은 cs-test cmd 로 프로젝트를 생성할 폴더로 가서 npx create-react-app cs-test # 설치 다되면 # 폴더로 이동해서 cd cs-test #npm.. hello-bryan.tistory.com 이번 포스트에서 할것은 저번 글에 이어서 client 와 server 한번에 start cors 제거 (경우에 따라 사용) 우선 npm-run-all 을 설치합니다. npm install .. 2020. 1. 17. React + express 연동설정. 처음부터 따라하기 React, Express 연동하여 사용하기 일단 react app 을 하나 생성합니다. 이름은 cs-test cmd 로 프로젝트를 생성할 폴더로 가서 npx create-react-app cs-test # 설치 다되면 # 폴더로 이동해서 cd cs-test #npm 프로젝트설정 npm init #기본설정으로 계속 Enter # 일단 실행해봅니다. npm start 그럼 익숙한 웹페이지가 뜹니다. express 도 추가해 둡니다. npm add express --save 서버에서 json 형식으로 데이터를 주고받을 거기때문에 body-parser 도 설치해줍니다. npm install body-parser 그리고 사용하시는 에디터로 소스를 열어서 수정합니다. src 아래에 App.js 를 수정합니다. i.. 2020. 1. 17. React `string 안에 ${변수명}` 잘 안될 때 React Variables and String Variables in String format 처음 시작할 때 잘 모를수도 있는 내용이라 적어봅니다. 아래와 같은 코드가 있습니다. render() { const {username} = this.state; return ( mysql connect test {username? {`hello ${username}!`} : loading...} ); } string 구문 안에 ${변수명} 을 사용할 수 있죠. 결론부터 말씀드리면 ' 대신 ` 를 사용해야합니다. ' 은 single quotation 이고 ` 는 키보드의 숫자1 왼쪽에 있는 기호입니다. 이름은 Grave 'hello ${username}' 의 출력은 hello ${username} 이 됩니다. .. 2020. 1. 17. 이전 1 2 3 4 5 6 다음 728x90 반응형
