[리액트]로그인

✅ 앱설치

npx create-react-app spring-front

npx create-react-paa tutorial-login

 

✔️[백엔드 주소 : 포트 와 연결하기 위해 설정]

"proxy" : "http://localhost:9090"

 

 

✅ 리액트 로그인

import React, {createContext} from "react";

//로그인을 한 다음에 로그인한 정보를 모든 창에 띄워주기
//App.js에서 <div>태그 대신에 <LoginContext> 태그로
//return 시작하자마자 감싸주면 <LoginContext>태그 안에 있는
//모든 태그에서는 로그인/로그아웃 한 정보가 공유됨
const LoginContext = createContext();

export default LoginContext;

 

[signUp.js]
-아이디중복검사-
import React, {useState} from "react";

const Signup = () => {
   const [id,setId] = useState('');
   const [pw,setPw] = useState('');
   const [pwCheck,setPwCheck] = useState('');
   const [name,setName] = useState('');
   
   const [result,setResult] = useState('');
   
   //아이디 중복검사
   const [idValidation,setValidation] = useState(false);
   //아이디 중복검사 이벤트 핸들러
   const 아이디중복검사 = (eventId) => {
   // eventId : 현재 입력하는 이벤트가 발생한 ID
      setId(evnetId);
    if(evnetID.trim().length < 4){
        setIdValidation(false);
        return;
    }
    //DB에 중복되는 아이디가 있는지 비동기로 아이디 중복검사 수행
    //axios나 fetch를 사용할 수 있음
    fetch("/idCheck?id=" + eventId) //SpringBoot Controller와 연결할 Mapping url
    .then(response => response.text())
    .then(result => {
          if(Number(result) === 0 ) {
             setIdValidation(true);
          
          } else {
             setIdValidation(false);
           }
          })
         }
         
         //회원가입버튼
         const 회원가입버튼 = () => {
            if(!idValidation) {
                alert('아이디가 유효하지 않습니다.');
                return;
         }
       //회원가입 비동기 요청
         const input값들 = {} 
         input값들.id = id;
         input값들.pw = pw;
         input값들.name = name;
         
         fetch("/signup",{
         //Spring Boot Container에 @PostMapping("/signUp") 에 전달하겠다는 표시
         method : "POST",
         headers : {"Content-Type" : "application/json"},
         body : JSON.stringify(input값들)
         
       })
       .then(response => response.text())
       .then(result => {
           if(Number(result) > 0) {
              setResult('회원가입성공!~');
              setId('');
              setPw('');
           
           } else {
              setResult('회원가입 실패~!');
           }
       
         })
         
        }
      
      return (
         <div className="signup-container">
         <lavel> ID :
         <input type="text"
            onChange={e => 아이디중복검사(e.target.value)}
            value={id}
            className={idValidation ? '' : 'id-err'}
            />
            </label>
           <label> 
            PW :
            <input type="password"
             onChange={e => {setPw(e.target.value)}}
             value={pwCheck} />
             </label>
             <label>
             Name:
             <input type="text"
              onChange={e => {setName(e.target.value)}}
              value={name} />
              <button onClick={회원가입버튼}>가입하기</button>
              <h3>{result}</h3>
           </div>
           )
          }
  export default Signup;

 

✅  로그인 백엔드 -스프링부트-

DBConfig.java

[임포트 생략 코드 작성]
@Configuration
@PropertySource("classpath:/config.properties")
public class DBConfig {
    @Autowired
    private ApplicationContext applicationContext;
    @Bean
    @ConfigurationProperties(perfix="spring.datasource.hikari")
    pulic HikariConfig hikariConfig() {
             return new HikariConfig();
       }
    @Bean 
    public DataSource dataSource(HikariConfig config) {
            DataSource dataSource = new HikariDataSource(config);
            return dataSource;
    }

    @Bean
    public SqlSessionFactory sessionFactory(DataSource dataSource) throws Exception {
            SqlSessionFactoryBean sessionFactoryBean = new SqlSessionFactoryBean();
            sessionFactoryBean.setDataSource(dataSource);
}