smsapi 프로젝트 - smsfront 리액트

이클립스의 smsapi프로젝트와 리액트의 sms front 연결하기

1. 서로 다른 사이트간의 통신

1.  smsapi -> http://localhost:9002
2.  ims front -> http://localhost:3000

 - smsapi 프로젝트의 기본패키지에 WebMvcConfigurer를 상속하는 클래스 생성

@Configuration
public class WebMvcConfiguerImpl implements WebMvcConfigurer {

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
		.allowedOrigins("http://localhost:3000")
		.allowedMethods("GET", "POST", "PUT", "DELETE")
		.allowedHeaders("*")
		.allowCredentials(true) //인증정보 허용
		.maxAge(3600); //초 단위고 3600초 1시간동안 열어두겠다는 뜻
	}
}

 

2. App.js

function App() {

  return (
    <BrowserRouter>
    <div className="App">
      <Routes>
        <Route path="/" Component={StaffList}/>
        <Route path="/sms/detail/:username" Component={StaffDetail}/>
        <Route path="/sms/update/:username" Component={StaffUpdate}/>
        <Route path="/sms/create" Component={StaffCreate}/>
        <Route path="/*" Component={EmptyPage}/>
      </Routes>
    </div>
    </BrowserRouter>
  );
}

 

3. EmptyPage.js

function EmptyPage() {
  return (
    <div>
        지원하지 않는 서비스입니다.
    </div>
  )
}

 

4. NetworkUtils.js

 - fetchFn함수 생성

export function fetchFn(method, url, dto){
	let options = {
		method : method,
		headers :{
		"Content-Type" : "application/json"
		}
	}

	if(dto){
		options.body = JSON.stringify(dto)
	}
    
	return fetch(url, options)
	.then(res => {
		if(!res.ok){
			alert("실패");
			throw new Error("작업 중 에러 발생");
		}
        
		return res.json( );		
	})
	.catch(error =>{
		alert(error.message);
	})
}

 

5. StaffList.js

 - fetchFn 사용

function StaffList() {

    const [staffs, setStaffs] = useState([])

    useEffect(()=>{
        fetchFn("GET","http://localhost:9002/staff/all", null)
        .then(data =>{
            setStaffs(data.list);
        })},[])

  return (
    <div>
        {
        staffs.length>0 && 
        staffs.map(staff => 
        	<StaffComp key={staff.id} staff={staff} />)
        }
    </div>
  )
}

 

6. StaffComp.js

function staffComp(props) {
  const staff = props.staff
  
  return (
    <div>
      <p> <Link to={`/sms/detail/${staff.username}`}>
        {staff.username}</Link>
      </p>
    </div>
  )
}

 

7. StaffDetail.js

function StaffDetail() {

    const [username] = useState(useParams().username)
    const [staff, setStaff] = useState()

    useEffect(()=>{
        fetchFn("GET",`http://localhost:9002/staff/name/${username}`, null)
        .then(data =>{
            setStaff(data.dto);
        })},[username])

  return (
    <div>
        <h2>스텝 정보 자세히 보기</h2>
        {
          staff !== undefined && 
          <>
            <div className='staff'>
              <p>이름: {staff.username} </p>
              <p>등록일: {moment(staff.createDate).format("YYYY-MM-DD")} </p>
              <p>최종 수정일: {moment(staff.updateDate).format("YYYY-MM-DD")} </p>
            </div>
            <Link to="/sms">목록</Link> 
            <Link to={`/sms/update/${username}`}>수정</Link> 
            <Link to={`/sms/delete/${username}`}>삭제</Link> 
            <Link to={"/sms/create"}>등록</Link>
          </>
        }
    </div>
  )
}

 

8. StaffCreate.js

 1) form태그 안에 있는 input태그의 값 가져오기

 - FormData객체 사용(username, pw, pw2)

    - 사용방법 : const formData = new FormData(e.target); // e의 대상이 FormData객체에 입력됨->formData라고 선언

                        const username = formData.get("username"); // 입력한 username을 username이라고 정의함.

function StaffCreate() {
    const navigate = useNavigate();
    const usernameRef = useRef();

    useEffect(()=>{
        usernameRef.current.focus()
    })

    function onSubmitHandler(e){
        e.preventDefault();

        const formData = new FormData(e.target);
        const username = formData.get("username");
        const password = formData.get("password");
        const password2 = formData.get("password2");
        const dto = {
            username, password, password2
        }

        fetchFn("POST", "http://localhost:9002/staff", dto)
        .then(data =>{
            if(data === undefined){
                alert("입력 실패")
                return;
            }
            navigate(`/sms/detail/${data.dto.username}`)
        })
    }

  return (
    <div>
        <h2>스탭 등록</h2>
        <form action='#' onSubmit={onSubmitHandler}>
            username: <input name='username' ref={usernameRef}/><br/>
            password: <input name='password'/><br/>
            password2: <input name='password2'/><br/>
            <button>등록</button>
        </form>
    </div>
  )
}

 

9. StaffUpdate.js

 - FormData 객체 사용(pw, pw2, oPw)

 - username의 input태그에 value값을 넣고 readOnly입력

function StaffUpdate() {
    const username = useParams().username;
    const passwordRef = useRef();

    useEffect(()=>{
        passwordRef.current.focus()
    },[])

    function onSubmitHandler(e){ // 수정된 값을 db에 저장하는 함수
        e.preventDefault();

        const formData = new FormData(e.target)
        const password = formData.get("password");
        const password2 = formData.get("password2");
        const orgPassword = formData.get("orgPassword");
        const dto={
            username, password, password2, orgPassword
        }

        fetchFn("PUT", "http://localhost:9002/staff", dto)
        .then(data =>{
            if(data === undefined){
                alert("수정 실패")
                return;
            }
            window.location.href=`/sms/detail/${data.dto.username}`
        })
    }

  return (
    <div>
        <h2>스탭 정보 수정</h2>
        <form action='#' onSubmit={onSubmitHandler}>
            username: <input value={username} readOnly/><br/>
            신규비번: <input name='password' ref={passwordRef}/><br/>
            신규비번확인: <input name='password2'/><br/>
            기존비번: <input name='orgPassword'/><br/>
            <button>수정</button>
        </form>
    </div>
  )
}

 

10. StaffDelete.js

 - FormData객체 사용(pw)

function StaffDelete() {
    const username = useParams().username
    const passwordRef = useRef();

    useEffect(()=>{
        passwordRef.current.focus()
    })

    function onSubmitHandler(event){
        event.preventDefault();

        const formData = new FormData(event.target); // event의 대상이 formData에 입력됨.
        const password = formData.get("password"); // 입력한 password를 password라고 정의함.
        const dto={
            username,
            password
        }

        fetchFn("DELETE", "http://localhost:9002/staff", dto)
        .then(data=>{
            window.location.href = "/sms"
        })
    }

  return (
    <div>
        <h2>스탭 삭제</h2>
        <form action='#' onSubmit={onSubmitHandler}>
            username: <input value={username} readOnly/><br/>
            password: <input name='password' ref={passwordRef}/><br/>
            <button>삭제</button>
        </form>
    </div>
  )
}