[ React ] TodoList 서버 연결 1️⃣

💎 Todo-list + Spring

[ React ] TodoList 2️⃣

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

React 주소는 localhost:3000이고 Spring은 localhost:8080 이기 때문에 proxy를 사용하여 동기화시켜줘야한다.

만든폴더안에 .env 환경설정할수있는 파일을 만든후 PORT=80 으로 적은후 저장해준다.

마지막 } 에 , (콤마)를 찍고 "proxy" : "http://localhost:8080" 를 입력한다

💎 React code

📣 App.js

- signupView가 true인 경우에만 회원 가입 컴포넌트 렌더링

🏆 조건식이 && true인 경우 <SignupContainer/> 컴포넌트가 실행

 

  import React, { useState, createContext } from 'react';

  import './App.css';

  import SignupContainer from './Signup';

  function App() {

    // 회원가입, 로그인, 회원의 Todo List출력/추가/제거

    const [ signupView, setSignupView ] = useState(false);

    return (

      <>

        <button onClick={()=>{setSignupView(!signupView)}}>

          {signupView ?('회원 가입 닫기') : ('회원가입 열기')}

        </button>

        <div className='signup-wrapper'>

          {signupView === true && (<SignupContainer/>)}

        </div>

      </>

 

    );

  }

  export default App;

 

📣 Signup.js

- Insomnia를 이용하여 테스트한후 Signup.js 코드 작성.

JSON타입을 선택한후 JSON형태로 id,pw,name값을 전달 그후 오른쪽 결과창에 1이 나왔기때문에

테스트완료. 

 

   

    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 = ()=>{

            // 1. 비밀번호가 일치하지않으면 (pw !== pwCheck)

            //   '비밀번호가 일치하지 않습니다' alert로 출력 후 return

            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

📣 Dto

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

}

📣 Controller

@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);
	}

📣 Service

public interface TodoService {

	int signup(TodoMember member);

}

📣 ServiceImpl

@Service
public class TodoServiceImpl implements TodoService{

	@Autowired
	private TodoDao dao;

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

}

📣 Dao

@Repository
public class TodoDao {

	@Autowired
	private SqlSessionTemplate sqlSession;

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

📣 Mapper

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

</mapper>