코딩일기/관광데이터 공모전 프로젝트7 [관광데이터 공모전] React 유효성 검사 방법 React로 프로젝트를 진행하다보면 유효성 검사해야할 필요가 있는날이 있다. 나같은 경우는 데이터를 백엔드로 보낼때 데이터들이 올바르게 입력된 상태에서 보냈어야 했기에 유효성 검사가 필수적으로 필요 했다. 따라서 이번에는 데이터들이 올바르게 입력이 되었는지 확인하기 위한 유효성 검사하는 방법에 대해서 글을 써보려고 한다. . . . . . . 시작!!! 일단 유효성 검사를 해보기전에 우리가 먼저 알아야 할것은 React에서 useState이다 useState란? useState는 React의 Hook 중 하나로서 변수의 상태값을 관리 하는것이다. 여기서 React의 Hook이 뭐야 하는사람이 있을텐데 React의 Hook은 리액트 v16.8에 새로 도입된 기능으로써 기존에 클래스형 컴포넌트를 함수형 컴포.. 2022. 10. 13. [관광데이터 공모전] React 중첩 라우터 만들기 프로젝트를 진행하다가 페이지 내에서의 페이지 이동이 따로 필요 했었다. 그래서 여러 방법을 찾아보다가 React의 중첩 라우터에 대해서 알게 되었다. 그럼 이제 React의 중첩 라우터하는 방법에 대해서 알아보자. 중첩 라우터란? 중첩 라우터란 이동한 페이지 내에서 다른 페이지로 이동해야하는 경우가 생길때 사용하는것이다. ex) 그럼 이제 중첩 라우터를 실행하는 방법에 대해서 알아보자. 1. 중첩 라우터에서 보여줄 페이지들을 먼저 만든다. One.js function One() { return ( This is One ); } export default One; Two.js function Two() { return ( This is Two ); } export default Two; 2. 만든 페이지들.. 2022. 10. 11. [관광데이터 공모전] React 페이지 이동 (React) 프로젝트를 진행을 하다보면 페이지 이동은 필수적으로 필요하다. 우리 프로젝트에서 페이지 이동이 필요했는데 나는 react-router-dom 이라는 것을 사용하여서 페이지 이동을 하였다. React에선 페이지 이동을 react-router-dom이라는 것을 사용해서 페이지 이동을 할수가 있는데 이것을 사용하기 위해선 제일먼저 react-router-dom이 설치가 되어있어야 한다. 그래서 일단은 react-router-dom을 설치해보자. 1. react-router-dom 설치 react-router-dom 설치하는 방법은 엄청 간단하다. 그냥 아래의 명령어를 터미널에서 입력을 해주면 된다. npm install react-router-dom 그럼 아래 사진과 같이 성공적으로 설치가 되었다는것을 알수가.. 2022. 10. 7. [관광데이터 공모전] vscode에서 React 프로젝트 생성하기 일단은 vscode에서 react 프로젝트를 생성하려면 vscode는 물론이고 nodejs를 설치해야 한다. vscode는 이미 설치되어 있다고 가정을 하고 nodejs 부터 설치를 해보자. 1. Node.js 설치 node.js 를 설치하기에 앞서 node.js가 뭔지부터 알아보자. Node.js는 크롬 V8 자바스크립트 엔진으로 만들어진 JavaScipt 런타임이다. 이게 무슨 말이냐 크롬에서 javascript를 해석할줄 하는 엔진인 V8을 만들었는데 이게 javascript를 너무 해석을 잘해서 그냥 크롬안에만 쓰기엔 아쉬워 V8엔진을 사용한 javascript 해석엔진인 Node.js를 만든것이다. 따라서 얘는 브라우저 뿐만 아니라 다른 실행환경에서도 사용할수 있게 도와주는 런타임이다. 그럼 이.. 2022. 10. 4. 이전 1 2 다음
