리액트 스프링부트를 이용한 토이프로젝트 및 공부

리액트 스프링부트를 이용한 토이프로젝트

 

리액트와 스프링부틀를 이용하여 프로젝트를 만들어볼 생각이다.

 

일단 sns 인 인스타 그램의 기능을 구현해보는 토이프로젝트를 생각하고있다.

html과 css는 이미 다른 사람이 만들어서 공유한 코드들을 기반으로 사용할 예정이다.

 

현재 오늘 진행하는 처음으로 스프링 을 이용하다보 db하고 연결이 잘 되었는지 확인하기위해 간단히 회원가입 기능을 만들었다,

 

리액트 코드

import { useState } from "react"
import "./login.css"
import axios from "axios";
import { useNavigate } from "react-router-dom";

export const Login=()=>{

    const [id,setId] = useState('');
    const [pw,setPw]= useState('');
    const [pass,setPass]= useState(false);
    const navigate = useNavigate(); // useNavigate 훅 사용
    const handleSubmit=async (e) =>{
        e.preventDefault()

        try{
            const response = await axios.post("/api/login",{
                userid:id,
                userpw:pw
            })
            console.log(response.data)
            if(response.data==true)
                navigate('/')
            else
                alert("로그인 실패")



        }catch (error){
            console.error("에러",error)
        }
    }


    return(
        <div id="main_container">

        <div class="form_container">

            <div class="form">


                <h1 class="sprite_insta_big_logo title"></h1>

                <form onSubmit={handleSubmit}>
                    <p class="login_user_name">
                        <label for="user_name">사용자명:</label>
                        <input type="text" id="user_name" onChange={(e)=> setId(e.target.value)}/>
                    </p>

                    <p class="login_user_password">
                        <label for="user_password">비밀번호:</label>
                        <input type="text" id="user_password"  onChange={(e)=> setPw(e.target.value)}/>
                    </p>

                    <input type="submit" id="submit_btn" value="로그인" class="submit_btn" />
                </form>



            </div>

            <div class="bottom_box">
                <div>
                    <span>아이디가 없으신가요?</span><a href="#">회원가입</a>
                </div>
            </div>


        </div>

    </div>
    
    )
}

위 칸에 입력했을대 입력한 값들을 스프링으로 보내주는 코드이다.

 

스프링코드

-일단 로그인이라고 적혀있지만 테스트 하기위해 회원가입으로 db로 값이 제대로 넘어가는지 확인해보았다.

	    @PostMapping("/api/login")
	    public String login(@RequestBody Map<String, String> data) {
	    	System.out.println("정보 넘오옴");
	    	System.out.println(data.get("userid"));
	    	System.out.println(data.get("userpw"));
	    	UserVo userVo = new UserVo();
	    	userVo.setUserId(data.get("userid"));
	    	userVo.setUserPw(data.get("userpw"));
	    	userVo.setName("김");
	    	userVo.setUserEmail("kjk");
	    	userVo.setCreateDate(LocalDateTime.now());
	    	managementService.signUp(userVo);
	
	    	return "true";
	    }

 

서비스 코드

package com.example.demo.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.dao.MemberDao;
import com.example.demo.uservo.UserVo;

@Service
public class UserManagementService {
	
	@Autowired
	MemberDao memberDao;
	
	//회원가입
	public void signUp(UserVo userVo) {
		int value =memberDao.insertion(userVo);
		if (value==0) {
			System.out.println("회원가입실패");
		}
		else {
			System.out.println("회원가입성공");
		}
	}

}

 

dao 코드

package com.example.demo.dao;
import java.sql.Timestamp;
import java.time.LocalDateTime;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;

import org.springframework.stereotype.Repository;

import com.example.demo.uservo.UserVo;

@Repository
public class MemberDao {
	private JdbcTemplate jdbcTemplate;
	
	@Autowired
	public MemberDao(JdbcTemplate jdbcTemplate) {
		this.jdbcTemplate=jdbcTemplate;
	}
	
	//여기서부터 작성
	//삽입
	public int insertion(UserVo userVo) {
		String sql = "INSERT INTO user (userId, userPw, name, userEmail, createDate) VALUES ( ?, ?, ?, ?, ?)";
		return jdbcTemplate.update(sql,userVo.getUserId(),
				userVo.getUserPw(),userVo.getName(),userVo.getUserEmail(),Timestamp.valueOf(userVo.getCreateDate()));
	}
}

 

일단 db에 값을 잘들어가네...

 

다음주에 만들꺼는 회원가입 페이지하고 로그인 기능을 구현하고 그후 스프링 시큐리티를 공부해서 로그인 인증 시스템을 넣을 생각이다.

 

 

일단 전반적인 기능을 인스타그램과 같은 친구추가 게시글 작성 댓글작성 ,친구검색  등의 기능을 추가할생각이다. 

일단 총 진행기간은 2주 정도로 생각하고 있다. 혼자서 천천히 완성해볼 생각이다.