반응형 React19 8. Canva에 앱 만들기. Text Input / Number Input Canva Text InputCanva 의 Text Input 의 document 는 여기에서 자세히 볼 수 있습니다. 일단 써보기기본적인 옵션들부터 알아보면 } end={} />placeholder 는 값이 없을 때 보여주는 hint 같은거.start 는 input 앞쪽에, end 는 input 뒷쪽에 있는것들을 정의합니다.이렇게 하고 앱을 실행해보면, SearchIcon 이 안 보이네요. 예제에 나와있는대로 했는데, icons_SearchIcon 은 따로 정의가 필요한가봅니다. 아이콘 사용하기 react 에서 icon 을 사용하기 편한 방법으로 icon을 추가해봅니다.npm install react-icons그리고 소스 상단에 import 를 합니다.import { FaSear.. 2024. 7. 14. [React] Copy to Clipboard 사용 React 에서 Copy to Clipboad 쓰기 간단하게 라이브러리 설치해서 쓰면 됩니다. $ npm install --save react react-copy-to-clipboard 사용 방법 import { CopyToClipboard } from 'react-copy-to-clipboard' render() { const url = window.location.href; // url 복사 Copy URL to the clipboard } onCopy event 도 있습니다. this.setState({copied: true})}> codepen demo : https://codepen.io/nkbt/pen/eNPoQv?editors=0010 2020. 4. 3. [React] 이미지 tag 에서 Public 폴더의 이미지 사용하기 React Public 폴더 이미지 경로 public 폴더에 copy.png 라는 이미지가 있을 때 react.js 파일에서 2020. 4. 3. [React] Nginx 배포 시 하위 Route 에서 404 에러 날때 React 개발 시 잘 됐는데 nginx 로 배포했는데 root index는 잘 나오는데 단순한 localhost/login 이런것도 404 로 나올 때 우선 봐야할 게 nginx.conf 에서 try_files 살펴봐야 합니다. server { listen 80; localhost / { root /app/build; index index.html; try_files $uri $uri/ /index.html; } } 저의 경우엔 try_files 설정만 넣으니까 잘되네요. 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. [Docker] Nginx + React + Docker 컨테이너 실행 Docker 에 Nginx container 실행해서 React 띄우기. 지난 포스트에서 centos7 로 실행한 container 에 nginx 를 직접설치해서 실행했었는데요. 웹서버만 필요한 container 를 만들기 위해 nginx 이미지를 사용해서 container를 만들어보겠습니다. 이번엔 Dockerfile 을 이용할 겁니다. 아래 포스트로 이동합니다. 약간~~~ 더 잘되는 nginx 설정 방법. 2020/04/01 - [Docker] - [Docker] react + nginx + Dockerizing 따라하기 [Docker] react + nginx + Dockerizing 따라하기 Docker Nginx에 React 띄워서 배포 Dockerfile 을 이용해서 Docker image 를.. 2020. 3. 28. [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 + 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. 이전 1 2 다음 728x90 반응형
