온라인 유니티 #02 유저 관리 기능을 이용한 로그인

온라인 유니티 #02 유저 관리 기능을 이용한 로그인

끄적끄적 공부Web 이전 게시물에서 기본 html을 작성해 주었으면 이번에는 로그인, 회원가입 html 틀을 작성하여 데이터베이스와 연결해 회원 등록까지 진행해 보겠다. 나머지 header와 side bar는 이전 게시물과 똑같이 해주었고 login container를 추가 작성해 주었다. 전체 container 안에 ul, li로 로그인 form을 제작해 주었고 login버튼과 join버튼도 만들어주었다. 이곳에서 join을 누르시면 join.html로 넘어가도록 작성해 주었다.

로그인 전용 API 생성하기

일단 get을 썼던것처럼 동일하게 .post로 변경 후 api, user, signIn 세 개를 전달해 주면 http127.0.0.18080apiusersignIn으로 사용할 수 있을 것 같다. 사안은 입력한 파라미터를 어떠한 방식으로 받아서 쓸거냐인데. 파라미터 프로퍼티 설명을 보시면 URL로부터 nonstatic 한 파라미터를 가져온다고 합니다. 예를 들어 http127.0.0.18080apiusersignIn?key1value1key2value2같은 방식이면 아래의 코드처럼 파라미터를 가져다.

사용할 수 있을 것 같다. 일단 post로 key1, key2를 보낸다고 했을 때는 url에 키벨류가 포함되어서 리퀘스트에 전달되는 형태는 아닐 거고, 아마 xwwwformurlencoded 방식으로 인코딩 되어서 body에 전달될 것입니다.

Auth Service 생성 및 작성

Service package를 생성하고 AuthService.java를 생성하고 다음과 같이 작성하자. AuthService.java JpaRepository는 Spring Data JPA의 핵심 인터페이스 중 하나이며, 엔티티의 CRUDCreate, Read, Update, Delete 처리를 처리하는 메서드를 제공합니다. existsById는 JpaRepository에서 제공되는 메서드 중 하나로, 데이터베이스에 엔티티가 존재하는지 여부를 확인하는 데 사용됩니다.

일반적으로 JpaRepository를 상속받은 인터페이스를 사용하여 엔티티에 대한 데이터베이스 처리를 수행합니다. JpaRepository를 구현한 인터페이스를 사용하면 대표적인 CRUD 작업 외에도 여러가지 데이터베이스 연관 메서드를 사용할 수 있습니다.

0 로그인 페이지 제작하기 javaScript

24.01.30화1750 이제 간단한 js 추가하기 솔직히 진짜 서버에 저장하고 그런 것도 해보고 싶지만. 그건 아직 모르기도 하고 생각해보니 그거 하려면 회원가입 페이지부터 만들었어야 되는 게 아닌가?라는 생각이 들어서 일단 알림창만 하기로무엇보다. 아직 이거 하기도 어려워요. 계속 찾아보면서 함 일단 전역변수로 getElementById를 이용하여 id값을 가져옵니다. form 전체를 가져와서 아이디 비밀번호를 사용할 수 있도록 하였고, 버튼 비활성화 기능을 제작하기 위해 버튼도 따로 가져와서 저장해두었다.

이들은 값이 변하지 않으므로 const로 선언해 주면 됩니다.

회원가입 페이지 구성 React

React 파트의 경우는 나중에 따로 글을 작성할 예정입니다. 작성이 완료되면 링크를 걸어두겠다. Front는 본인 입맛에 맛는 구성으로 진행하자. 첫번째 본인의 경우에는 다음과 같이 구성했다. WebMvcConfigurer 작성Controller의 Cors 어노테이션 제거, Controller의 CrossOrigin 어노테이션을 생각해 보자. CrossOriginorigins httplocalhost3000

컨트롤러를 생성할 때마다.

그러한 어노테이션을 작성하는것은 귀찮은 일입니다. 그래서 WebMvcConfigurer를 작성하려고 합니다.

데이터베이스 mysql 연결

vsc에서 터미널로 들어가 아래를 입력해 줍니다. mysql uroot p 패스워드는 자신이 설정한 것을 입력해 줍니다. 이후 mysql 이 나타나면 아래와 같이 입력해 주고 CREATE DATABASE opentutorials

show databases 를 입력해 주어 제대로 연결된 것을 확인해 줍니다. 만들어져 있는 데이터베이스 중에 popop를 사용할 예정이기 때문에 use popop

을 입력해 주고 테이블을 만들어줍니다.

이렇게 입력해 주면 이렇게 뜨는 것을 확인할 있습니다. 그리고 mysql을 나가서 vsc 터미널에서 아래와 같이 입력해 줍니다. npm install -S mysql

이렇게 설치가 되었으면 ackage.json에서도 이렇게 뜨는 것을 확인할 있습니다. 이후 mysql.js 파일을 만들어줍니다. 위와 같이 작성해 줍니다.

자주 묻는 질문