본문 바로가기

React

 (115)
[React] react-chartjs-2 라이브러리 사용방법 https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2 React components for Chart.js react-chartjs-2.js.org 리액트 차트 라이브러리로 사용할 것을 고민중, 자바스크립트 기반인 chartjs를 React로 쓸 수 있는 react-chartjs-2 라이브러리가 있다고 하여 이것을 사용하기로 했다. React 스러운 라이브러리 중에서 고민했다. Nivo는 다 좋은데..아쉽게도 혼합된 차트를 제공하지 않아서 일단 패스, D3는.. 진입장벽이 느껴졌고, Apexcharts, Recharts 도 마음에 들었으나 UI적인 부분에서는 Chartjs가 더 맘에 들어서 선택했다. 다양한 차트 라이브러리 추천은 참고사이트..
[React] T Map API (1) : 가입하기 도보 경로의 시작과 끝에 대한 라인이 그려지는 화면을 구현하고 싶었다. 도보 경로는 티맵 API를 사용하여 구현하려 한다. ▼ 공식사이트 Guide | T MAP API tmapapi.sktelecom.com ▼ 앱 사용 가이드 앱 사용하기 1) 마이페이지로 이동하기 SK open API 사이트에 로그인합니다.로그인 후 좌하단의 ❶프로필이나 ❷마이페이지 버튼을 눌러서 마이페이지로 이동합니다. 2) 앱 만들기 마이페이지에서 앱 메뉴를 선 skopenapi.readme.io 1.가입 개인회원으로 가입(나는 핸드폰으로 기존 T 아이디가 있어서 기존꺼 이용) sk open API 아래 링크 들어가기 SK open API SK텔레콤 데이터와 시각화 가공을 지원 받을 수 있는, 데이터 바우처 사업 에 대해서 알아보..
[React] 조직도 라이브러리: React Google Charts(Org Chart) React를 사용해 조직도를 구현하고자 했다. 조직도에 들어갈 내용은 프로필 이미지와 텍스트. 다른 라이브러리(react-d3-tree)를 사용하고자 했는데 텍스트만 적용되고 이미지가 안들어가졌다. 그래서 Google Charts로 진행하여 원하는 대로 UI를 구현할 수 있었다. Org Chart | React Google Charts Example of org chart in react-google-charts. www.react-google-charts.com 1. 설치 npm i react-google-charts npm i --legacy-peer-deps react-google-charts //의존성 충돌나서 이거로 설치함 2. import import { Chart } from 'react-g..
[React] Email.js 를 사용하여 Form 이메일 전송하기 Email을 form을 통해 전송하고자 한다. 아래는 공식 사이트이다. 공식사이트 Send email directly from your code | EmailJS No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com React 코드 참고 React | EmailJS EmailJS integration with React www.emailjs.com https://dashboard.emailjs.com/ Send email from Javascript - no server code require..
[React] .jsx 생략하고 import시 찾을 수 없다는 오류 react 팀 프로젝트 중 원래 파일 뒤의 .jsx 를 생략해도 import 되었는데, 오류가 나는 현상이 발생했다.(eslint) Unable to resolve path to module './pages/Login/index' import/no-unresolved Line 4:19: Missing file extension for "./pages/Login/index".. .eslintrc.js 에서 settings를 아래와 같이 추가하여 해결 (TS안쓸경우는 .ts,.tsx 생략하면됨) .. rules: {}, settings: { "import/resolver": { node: { extensions: [".ts", ".tsx", ".js", ".jsx"], }, }, }, cra + eslint..
[React] .env 개발서버와 실서버 분리하여 환경설정하기 원래 npm start로 이용하고 있던 중 API 서버가 개발 서버와 실서버로 분리되기 때문에 이를 구분해 환경설정을 하고자 했다. 1. 환경변수를 다르게 설정 (.env 파일) env 파일 2개를 생성함 .env.development //개발 .env.production //실서버 각 API를 통신하는 URL을 ~~만 다르게 작성(.dev 서버와 실서버는 다르기 때문) REACT_APP_API_URL='~~' 2. env-cmd 를 설치( 환경변수에 따라 설정 적용) npm i env-cmd 3. package.json 에서 start, build 설정 "scripts": { "start": "env-cmd -f .env.development craco start", "start:dev": "env-c..
[React] package.json 종속성 업데이트 package를 업데이트하고자 한다. 1. ncu 글로벌 설치 npm install -g npm-check-updates 2. 업데이트 가능한 항목 확인 ncu 3. 전체 업데이트 ncu -u 4. 적용 npm i * 특정 버전 업데이트 npm i axios@1.4.0 *특정 패키지 업데이트하기 위한 버전 확인 npm info axios //최신 버전 확인 후 위와 같이 버전쓰고 업데이트 https://maaani.tistory.com/127 #2. package.json 종속성 최신 버전 업데이트 package.json 에 있는 종속성들을 하나하나씩 업데이트 하는데 [ex) npm update 모듈명] 이걸 한번에 최신버전으로 업데이트 할 수 있다 이렇게 있다고 하자 package.json 에 > np..
[React] axios, async-await 사용시 try-catch 주의점(catch-비즈니스 로직 x) axios 를 이용해 API통신을 하는 코드를 작성중, catch에서는 비즈니스 로직을 태우면 안된다는 코드리뷰를 받았다. 리뷰 등록에대한 비즈니스로직으로 사용자의 요청을 처리하고 결과를 제공하는 로직인 if (!values?.content) { alert('내용을 작성해주세요.'); } 이런 if else 가 예외를 처리하는 catch에서 쓰여지면 안된다는 것이다. catch에서는 종료되어 끝나야 한다. ▼ ❌ 수정 전 코드 try{ if (data.data.code === 200) { alert('등록완료'); setValues({ content: '' }); } } catch (err) { if (values?.content === '') { alert('내용을 작성해주세요.'); } else { ..

티스토리툴바