상상라이프

1. 회원가입 화면 ​ 2. 아이디 중복체크 버튼 추가 ​ 3. 체크버튼의 function 기능 코드 input 박스에서 데이터를 입력 받은 후 입력 형식이 이메일형식에 맞지 않으면 false 값을 반환하여 이멜일 형식을 맞춰햐 하며 이메일 형식에 맞을 떄 true값을 반환 - 이 부분에서는 상태를 체크하는 변수를 추가할지 고민했지만 어자피 isId가 false 값을 가지고 있기 때문에 추가하지않았음 추후 문제발생시 추가 "ID 중복체크를 부탁드립니다" 라는 멘트가 나오면 중복체크버튼을 클릭하여 ID가 중복인지 검색한다 중복이 없을 경우 true, 있을경우 false 데이터를 가져와 isId를 값을 변경해준다 ​ ​ 4. server.js 의 ID중복체크 후 결과값 반환 ​ ​ 5. 회원가입 버튼 클릭시..

화면 ​ 오류메세지, 유효성 검사 추가 ​ 아이디 ​ 비밀번호 ​ 비밀번호 확인 ​ 이름 ​ 휴대폰 번호 ​ submit (간소하게 줄이고 싶은 부분) ​ ​ 출력 ​ ​ 전체 소스 코드 import "./SignUp.css" import { Link, useNavigate} from "react-router-dom"; import React, {useState} from "react"; import API from "../API"; export default function SignUp(){ const navigate = useNavigate(); //Main Page 이동 //초기값 세팅 - 아아디(이메일), 패스워드, 패스워드확인, 이름, 전화번호, 닉네임 const [Id, setId] = use..

react-router-dom의 useNavigate

- 회원가입 화면 아이디(이메일) , 비밀번호, 비밀번호확인, 이름, 휴대폰번호, 닉네임 - 테이블 ​ ----------------------------------------------------------------------------------------------- ​ 1. SignUp.js 회원가입 다른 블로그들에서는 e.Target.value를 많이 사용하여 input 데이터를 가져오는데 나는 계속 못가져와서 엄청 고생했다 e.currentTarget.value로 해결했지만 왜 안되는지는 지금도 모르겠다 e.Target.value는 오류가 많이 난다고는하는데 ...... ​ 2. Server.js post 작성 ​ 결과 DB 저장 완료!!!

- 메인 Page 메인페이지에서 로그인, 회원가입 페이지로 이동 ​ - 로그인 Page - 회원가입 Page ​ ​ 1. react-router-dom 설치 명령어 : npm install --save react-router-dom@6 ​ 현시점 가장 최근 react-router-dom은 버전 6이며 나는 6버전을 사용한다. 5버전과 6버전은 많이 달라 참고해서 설치해야한다. 5버전을 사용하고 싶으면 @6 => @5로 낮추어 명령어를 작성하면 5버전대의 React-dom이 설치된다 ​ 2. index.js 수정 결과 http://localhost:3000 => 메인페이지 http://localhost:3000/Login => 로그인페이지 http://localhost:3000/SiginUp => 회원가입..

1. server 서버 Nodemon 설치 명령어 : npm install nodemon --save ​ nodemon concurrently 설치 명령어 : npm install nodemon concurrently --save ​ ​ 2. React 클라이언트 React 클라이언트 Nodemon 설명령어 : npm install nodemon --save ​ nodemon concurrently 설치 명령어 : npm install nodemon concurrently --save-dev ​ ​ 3. React 클라이언트 package.json 내용추가 "dev" : "concurrently \"nodemon server/server.js\" \"npm run start\"" ​ 4. 실행 : npm..

1. React 프로젝트에서 js 파일 생성 데이터를 받을 js파일을 생성한다. ​ 2. React 프로젝트에서 axios 설치 명령어 : npm install axios --save ​ 3. server 프로그램 ​ 4. 받는 JS 파일 결과 에러!!! ​ ​ 문제해결 원인 : CORS 문제 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ​ 해결 server.js 에 cors 설치 명령어 : npm install cors --save server.js 에 코드 추가 ​ React console에 mysql 데이터 확인!!! ​ ​ ​ ​ 참조 : htt..

1. 데이터베이스 생성(Create Database) ​ ​ 생성완료!!! ​ ​ 2. MySQL 테이블 생성(Create Table) ​ ​ 테이블 생성 완료!!! ​ ​ 3. MySQL 데이터 삽입(INSERT) ​ ​ ​ ​ 데이터 삽입 완료!!! ​ ​ 4. MySQL 데이터 검색(SELECT) ​ console 확인 ​ ​ Web 확인 ​ 검색 완료!!! ​ ​ 5. MySQL 데이터 삭제(DELETE) ​ 데이터 삭제 삭제 완료!!! ​ ​ 6. MySQL 데이터 변경(UPDATE) ​ 데이터 변경 전 ​ 데이터 변경 후 ​ 변경완료!!! ​ ​ ​ 참조 : https://www.w3schools.com/nodejs/nodejs_mysql.asp

​ 데이터 변경 전 ​ 데이터 변경 후 ​ 변경완료!!! ​ ​ ​ 참조 : https://www.w3schools.com/nodejs/nodejs_mysql_update.asp

​ 데이터 삭제 삭제 완료!!! ​ ​ ​ 참조 : https://www.w3schools.com/nodejs/nodejs_mysql_delete.asp