개발일기장

학부생때 React재밌게 했었는데 다 까먹어서 틈틈히 정리를 해둬야 할 것같다.. 기본 setting const [params, setparams] = useState([ { idx: 0, paramName: 'test', value: 10, flag: true }, ]); 일단 LIST에 기본값을 넣어두고 렌더링을 하자 //화면에 표시해줌 const showParamList = () => params.map((item, idx) => ( {idx} { e.preventDefault(); params[idx].paramName = e.target.value; setparams([...params]); }}/> { e.preventDefault(); params[idx].value = e.target.va..

GPS가 잘 찍히는지 확인하기 위해서 지도는 Kakao Map API를 사용했고, view는 react를 사용해서 이동하는 것을 선으로 표시해봤다. 0. 시작 Javascript에서 GPS를 사용하기 위해서 geolocation API를 사용해야한다. 근대 거기서 getCurrentPosition이랑 watchPosition이 있고 상황에 따라서 원하는것을 사용하면 된다. 1. getCurrentPosition 이거는 자신이 원할 때 1회성으로 GPS의 snapshot을 볼 수 있는 방법 일단 코드부터 보면 이렇게 된다. export function getLocation() { return new Promise((resolve, reject) => { if (navigator.geolocation) { ..

이걸로 뭐 하나 만들고 싶은게 생각나서 정리 0. Kakao API 시작 https://apis.map.kakao.com/ 일단 키 발급은 다 할 줄 알거라 생각하지만 빠르게 정리 여기서 우리가 사용할 localhost, AWS주소를 써 넣으면 됨. 근대 GPS까지 사용할 생각이라 https로 했다. 여기서 JavaScript Key를 복사해서 쓰자 1. Index.html에 script추가, 환경변수 설정. 아래 이 script를 public/index.html파일의header에 넣어도 상관없고, body에 넣어도 상관없이 잘 돌아갑니다. 그냥 바로 APP KEY를 입력해도 되지만 환경변수 설정하는게 깔끔하고 그래서.. 여기서 환경변수 사용하려면 %REACT_APP_{env}% 형식으로 사용하라고 한다..

useEffect(() => { axios .get('/v1/crimedata/incheon') .then((res) => { const year_Data = per_year_crime(res.data, year_list); // res.data.slice(0,12); setOriginData(res.data); setYearSum(Calculate.getYearSum(res.data)); setMonthSum(Calculate.getMonthSum(res.data)); setSumData(Calculate.getYearSum(res.data)); setData_year(year_Data); }) .catch((err) => { console.error(err); }); }, []); 14~18년동안의 ..

처음에는 그려주는거니깐 useEffect그런거 사용해야하나 싶었는데 그런건 서버나 다른 API에서 가져올때만 그렇게 하고 내부에서는 setData로 집어넣어주는걸로 충분하더라.. function App() { const [data, setData] = useState(OriginData); const [cnt, setCnt] = useState(0); return ( { e.preventDefault(); setCnt(cnt + 1); setData( data.concat({ name: 'Page ' + cnt, uv: 500 + 200 * cnt, pv: 700 + 400 * cnt, }) ); }} > Click 기본 차트 상호작용 추가 ); } 외부에서 이렇게 데이터를 추가해줘도 잘 작동한다. 메모..

import React from 'react'; import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, } from 'recharts'; const data = [ { name: 'Page A', uv: 4000, pv: 2400, amt: 2400, }, ... ]; const renderLineChart = ( ); const ChartInteraction = () => { return {renderLineChart}; }; export default ChartInteraction; 일단 뭐 데이터랑 설정값만 넣어 주면 지혼자 만들어주는게 파이썬이랑 비슷한 느낌이다.. 실제로는 상호작용이 가능하게 선 위에 마우스올리면 뭐 알려주고 그런것도 t..

리엑트 웹팩환경설정 1.로더 : babel-loader 2.프리셋: @babel/preset-react 이거랑 @babel/preset-env 사용 ##추가 1. CSS 파일까지 한번에 설정하기 - style-loader랑 css-loader 사용 2. class 뭐시기 오류날때 @babel/plugin-proposal-class-properties 플러그인 사용하기

나도 이게 맞는건지는 모르겠는대 채팅방 만드는거 하다가 이렇게 하니깐 됨 1.일단 이렇게 설정 2.소캣연결함수 3.원래 연결 끊고 다른곳에 연결하기 반드시 setstate콜백함수에 소캣연결함수를 넣어서 새로운 소캣을 연결할수 있도록 이렇게 안하고 밖에 하니깐 동기적으로 안되서 연결이 실패되더라 여튼 이러니깐 오류없이 잘 되는데 메모리문제나 네트워크같은걸 얼마나 잡아먹는지는 모르겠다.