[ React ] 회원가입 구현 ①

이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! 

Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자.

 

 

 

이전에 했던 내용이 기억이 안나거나 실습하고 싶다면 아래 포스팅을 확인해보자!

 

[ React ] TodeList 실습하기 ⑤

 

🤔 실습하기 앞서 세팅하기 

① 터미널에 npx create-react-app todo-list <입력> : todo-list 폴더를 생성해준다.

② DB 세팅

③ Spring 필요한 내용 만들기

⑤ Port 번호 연결하기 

 

📚 VS code

📘 App.js

import React, { useState, createContext } from 'react';
import './App.css';

import SignupContainer from './Signup';

function App() {
  // 회원가입, 로그인, 회원의 Todo List 출력/추가/제거
  const [signupView, setSignupView] = useState(false);
  return (
    <>
                      {/* 버튼을 클릭할때마다 signupView가 true변했다가 */}
      <button onClick={ () => {setSignupView(!signupView)} }>
        { signupView ? ('회원 가입 닫기') : ('회원 가입 열기')}
      </button>

      <div className='signup-wrapper'>
        {/* signupView가 true인 경우에만 회원 가입 컴포넌트 렌더링 */}
        {/* 조건식 && (true인 경우) */}
        {signupView === true && (<SignupContainer/>)}
      </div>
    </>
    
  );
}

export default App;

 

📘 SignUp.js (회원가입 요청 코드를  비동기,POST 방식으로 작성)

import React, { useState } from 'react';

const SignupContainer = () => {

    const [id, setId] = useState('');
    const [pw, setPw] = useState('');
    const [pwCheck, setPwCheck] = useState('');
    const [name, setName] = useState('');
    const [result, setResult] = useState('');

    // 회원 가입 함수
    const signup = () => {
        if(pw !== pwCheck){
            alert('비밀번호가 일치하지 않습니다.');
            return;
        }

        /* 회원 가입 요청(비동기, POST) */
        fetch("/signup", {
            method : "POST",
            headers : {
                "Content-Type" : "application/json"
            },
            // JS Object -> JSON
            body : JSON.stringify({
                id : id,
                pw : pw,
                name : name
            })            
        })
        .then(resp => resp.text())
        .then(result => {
            if(result > 0){
                setResult('회원 가입 성공');
                setId('');
                setPw('');
                setPwCheck('');
                setName('');
            }

            else{
                setResult('회원 가입 실패');
            }
        })
        .catch( e => console.log(e));

    };

    return(
        <div className='signup-container'>
            <label>
                ID : 
                <input type='text'
                    onChange={ e => {setId(e.target.value)} }
                    value={id}
                />
            </label>
            <label>
                PW : 
                <input type='password'
                    onChange={ e => {setPw(e.target.value)} }
                    value={pw}
                />
            </label>
            <label>
                PW CHECK : 
                <input type='password'
                    onChange={ e => {setPwCheck(e.target.value)} }
                    value={pwCheck}
                />
            </label>
            <label>
                NAME : 
                <input type='text'
                    onChange={ e => {setName(e.target.value)} }
                    value={name}
                />
            </label>

            <button onClick={signup}>가입하기</button>

            <hr/>

            <h3>{result}</h3>
        </div>
    );
};

export default SignupContainer;

 

 

 

 

📚 Spring

📗 Todo.java

package edu.kh.todo.model.dto;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Todo {
	
	private int todoNo;
	private int todoMemberNo;
	private String title;
	private String isDone;
	

}

📗 TodoMember.java

package edu.kh.todo.model.dto;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class TodoMember {
	
	private int todoMemberNo;
	private String id;
	private String pw;
	private String name;

}

📗 TodoController.java

@RestController
public class TodoController {

	@Autowired
	private TodoService service;

	/** 회원 가입 */
	@PostMapping(value = "/signup", produces = "application/json; charset=UTF-8")
	public int signup(@RequestBody TodoMember member) {

		return service.signup(member);
	}

}

📗 TodoService.java

public interface TodoService {

	int signup(TodoMember member);

}

📗 TodoServiceImpl.java

@Service
public class TodoServiceImpl implements TodoService {

	@Autowired
	private TodoDao dao;

	@Override
	public int signup(TodoMember member) {
		return dao.signup(member);
	}

}

📗 TodoDao.java

@Repository
public class TodoDao {

	@Autowired
	private SqlSessionTemplate sqlSession;

	public int signup(TodoMember member) {
		return sqlSession.insert("todoMapper.signup", member);
	}
}

📗 todo-mapper.java

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
                        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="todoMapper">

   <insert id="signup">
      INSERT INTO TODO_MEMBER
      VALUES(SEQ_TODO_MEMBER_NO.NEXTVAL, #{id}, #{pw}, #{name})
   </insert>

</mapper>

 

📚 SQL

📒 sys 관리자 계정

-- 계정생성
ALTER SESSION SET "_ORACLE_SCRIPT" = TRUE;
CREATE USER todolist IDENTIFIED BY todolist1234;
GRANT CONNECT, RESOURCE TO todolist;
ALTER USER todolist DEFAULT TABLESPACE SYSTEM QUOTA UNLIMITED ON SYSTEM;

📒 sys 관리자 계정

CREATE TABLE TODO_MEMBER(
   TODO_MEMBER_NO NUMBER PRIMARY KEY,
   ID VARCHAR2(30) NOT NULL,
   PW VARCHAR2(100) NOT NULL,
   NAME NVARCHAR2(10) NOT NULL
);

DROP TABLE TODO_LIST;

-- Todo-List용 테이블
CREATE TABLE TODO_LIST(
   TODO_NO NUMBER PRIMARY KEY,
   TITLE NVARCHAR2(50) NOT NULL,
   IS_DONE CHAR(1) DEFAULT 'X' CHECK (IS_DONE IN ('O','X')),
   TODO_MEMBER_NO NUMBER REFERENCES TODO_MEMBER 
);

CREATE SEQUENCE SEQ_TODO_MEMBER_NO NOCACHE;
CREATE SEQUENCE SEQ_TODO_NO NOCACHE;

---

React로 켰을때 port 번호는 3030이고

Spring으로 켰을때 8080로 port 번호가 다른것을 알 수 있다 이것을 맞춰주기 위해서는 설정이 필요하다 ! 

 

• React port : 3030

• Spring port : 8080

📚 React

📘 .env 

서로 다른 포트번호를 바꿔주기 위해서 env  파일을 만들어 아래와 같이 80번으로 작성해줬다.

PORT=80

 

📘 package.json 

Spring에서 내가 설정한 포트번호는 8080이니 Spring 과 React를 연결시켜주기 위해서 

아래와 같이 프록시를 추가해 준다. 

{
  "name": "todo-list",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  🎀 "proxy" : "http://localhost:8080"
}

💻 구현화면

 

 

 

 

 

 

 

fetch("/test")
.then(resp => resp.text())
.then(result => console.log(result));