웹개발/리액트15 리액트 error 핸들링 오늘은 리액트에 오류가 발생했을때 어떻게 처리할 지 한번 알아보자 여기서 오류는 api서버에서 받은 오류 메세지 일수도 있고, 리액트에서 캐치한 오류일수도 있다. 처리방식을 간단히 설명하면 오류 발생시 오류발생여부를 체크하여 오류발생여부가 true이면 정의한 에러 컴포넌트에 에러정보를 셋팅해서 보내주면 에러 컴포넌트에서는 모달창으로 오류발생여부를 보여준다. 여기서는 함수형 컴포넌트에서 처리하는 방식이다. 클래스형 함수에서는 ErrorBoundary를 사용해서 componentDidCatch and getDerivedStateFromError 를 이용한 에러 처리방식이 있다. 하지만 hook에서는 아직 제공하지 않고 있다고 한다. ko.reactjs.org/docs/error-boundaries.html .. 2021. 3. 18. 리액트 서버 배포시 url 환경 설정하기(.env파일) 로컬에서 개발을 하다가 서버에 배포시에는 url을 도메인에 맞게 설정을 해주어야 한다. 로컬에서 개발할때는 localhost:3000, localhost:8000으로 서버에 배포시에는 url을 api서버, 리액트서버 도메인을 직접 셋팅해주어야 한다. 이때 creact-react-app으로 프로젝트를 생성하면 .env파일을 사용하여 설정을 할수있다. 로컬 개발시에는 .env.local, 서버 배포시에는 .env.production을 이용하게끔 하는 방법이다. 먼저 package.json 파일이 있는 루트 디렉토리에 .env.local 파일과, .env.production파일을 만든다. .env.local NODE_PATH=src/ REACT_APP_API_ROOT="http://localhost:8080".. 2021. 3. 17. 리액트 404 Not found page 처리하기 리액트에서 404 not found를 처리하는 방버을 알아보자 1. Not found 컴포넌트를 작성한다. 2. 를 설정한다. 3. 없는 url을 호출한다. 1. Not found 컴포넌트를 작성한다. import {Container} from "react-bootstrap"; const NotFound = () => { return ( 404 not found ) } export default NotFound; 2. app.js에 를 설정한다. import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; import './App.css'; import Signin from "./signin/Signin"; import Signup f.. 2021. 3. 16. 리액트 url redirect 리액트에서 url을 다른 url로 redirect 시키는 방법을 알아보자 1. react-router을 install한다. 2. useState를 사용하여 리다이렉트 변수를 선언한다. 3. 로직에서 setIsRedirect(true) 셋팅한다. 4. 컴포넌트를 이용하여 url을 redirect한다. 1. react-router을 install한다. npm install react-router 2. useState를 사용하여 리다이렉트 여부를 체크한다. const [isRedirect, setIsRedirect] = useState(false); 3. 로직에서 setIsRedirect(true) 셋팅한다. async function handleSubmit(e){ setLoading(true); await .. 2021. 3. 16. react ant-design 회원 가입 폼 작업 react에서 ant-design을 이용해서 회원가입 폼 작업을 알아보자 순서는 다음과 같다. 1. 회원가입폼 작업 2. 회원가입 api 작업 3. 회원가입 테스트 그럼 작업을 시작해보자 1. 회원가입폼 작업 회원가입 폼은 ant-desing에서 제공해주는 샘플로 작업을 하였다. 기본 validation이 있어서 client-side 체크는 바로 된다. 서버의 경우는 다음과 같이 한다 const [form] = Form.useForm(); const [isValid, setIsValid] = useState(false); const [error, setError] = useState(""); function onFinish(values) { setIsValid(false); setError("") add.. 2021. 3. 12. react bootstrap form validation 체크 하기 리액트 부트스트랩에서 form validation체크하는 방법을 알아보자. 순서는 다음과 같다. 1. form태크 속성등록 2. requried 추가 3. Feedback 추가 4. 폼 validation 체크 확인 5. 서버사이드 체크 6. 관련 소스 확인 7. validation 체크 스크린 캡쳐 1. form태크 속성등록 2. requried 추가 3. Feedback 추가 이름을 입력해주세요! 4. 폼 validation 체크 확인 const form = event.currentTarget; if (form.checkValidity() === false) { // validation 체크에 걸림 // todo... }else{ // validation 체크 통과 // todo... } 5. 서버사.. 2021. 3. 10. Ubuntu 18.04.5 LTS 서버에 React(리액트)를 Nginx에 배포하기 리액트는 로컬에서 실행이되면 이제 웹서버에 배포를 해보자. 여기서는 Nginx라는 웹서버에 배포를 해보기로 한다. 먼저 Nginx를 설치한다. 참조 : docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/?_ga=2.25959549.1579693219.1614562598-1938105987.1614562598#prebuilt_ubuntu NGINX Docs | Installing NGINX Open Source Install NGINX Open Source either as a prebuilt package or from source, following step-by-step instructions for all s.. 2021. 3. 1. 리액트 Ant design 설정하기 오늘은 알리바바에서 만들었다는 react용 ui라이브러리 Ant design을 한번 적용해 보겠다. 예전 회사에서 한번 써봤는데 왠만한 컴포넌트와 예제 샘플이 어느정도 만들어져 있어서, 가져다가 바로 사용하면 되서 사용하기 편했던 기억이 있다.그래서 한번 예제를 만들어보겠다. 참조: ant.design/docs/react/introduce Ant Design of React - Ant Design Polyfills are needed for IE browsers. We recommend @babel/preset-env for it. You can set targets config if you are using umi. We recommend using npm or yarn to install, it no.. 2021. 2. 26. 리액트 함수형 컴포넌트에서 context 사용하기 리액트프로그램을 만들다 보면 state만으로는 프로그램에서 사용하는 데이타를 모두 다룰수가 없다. 아니 다룰수는 있겠지만 엄청 번거롭고 복잡해진다. 이유는 state는 해당 컴포넌트에서 사용할수도 있지만 다른 컴포넌트에서 state값을 사용하려면 state의 값을 다른 컴포넌트에 사용하기 위해서 최상위 컴포넌트에 state를 정의한다음 state를 사용하고자 하는 컴포넌트에 props로 내려 보내야 한다. 하위 컴포넌트가 하나면 큰 문제가 없을수도 있지만 하위의 컴포넌트 갯수가 많아질수록 props로 내려보내야 되는 컴포넌트가 많아지고 state값을 사용하지 않는 컴포넌트도 해당 state를 props로 받아서 state를 사용하는 하위 컴포넌트로 내려보내야 하는 코드를 작성해야한다. 이런 불편함을 해결.. 2021. 2. 25. 리액트에서 state사용하기 리액트에서는 현재의 상태값을 저장할수 있는 state라는것을 사용한다. 해당 컴포넌트에서 표현하고 싶은 데이타를 state에 저장을 하면 해당 컴포넌트가 rerendering되면서 변경된 state값을 표현할수 있게된다. 그럼 예제를 한번 보자. 한번쯤 봤을법한 count예제이다. 여기서는 useState를 써서 state값을 처리한다. 더하기 버튼을 클릭하면 카운트가 1씩 증가하게 한다. 먼저 카운트 표시하는 div를 만들고, 그리고 count버튼을 다음과 같이 만들자 function Counter({count,onIncrementClick}) { return {count} } function CounterDisplay({count}) { return The current counter count is.. 2021. 2. 24. 이전 1 2 다음
