webRTC를 활용해서 영상통화 web개발 2

어..... 저번시간에 java 설정을 그레이들로 하다가 막혓다

그래서 메이븐으로 바꾸고 왜안되지 하다가 이클립스로 바꾸고 이것저것 해보다가

결국 되긴했다 pom.xml에 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>3.2.1</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>vueRTC</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>vueRTC</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
			<version>3.1.3</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

이렇게 설정해주고(설정을 안해준다면

<artifactId>spring-boot-starter</artifactId>

이렇게 만되어있을 수 있다 뒤에 -web을 붙여줘야한다

<artifactId>spring-boot-starter-web</artifactId>

 

이렇게 이클립스에서 붙이니 바로 밑의 3.1.3 도같이 붙더라 아무튼 이렇게 세팅하고 

vscode에서 다시 열어보니 잘작동하고 잇다

이클립스 상에서 진행했던게 더있는데 새 패키지 그리고 클래스 를 만들어서

package com.example.vueRTC.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MyController {

    @GetMapping("/api/hello")
    public String hello() {
        return "Hello, World!";
    }
}

이렇게 api를 만들어 테스트 해봣다

서버를 키고 로칼호스트:8080/api/hello 에 들어가면

헬로월드 가 출력된다.

오랜만에 보는 헬로월드가 참 반갑다.

 

이제 무얼한건지 조금 알아보자 

첫째줄은 그냥 내프로젝트에 관한거고

 

셋째줄과 넷째줄에서 겟 매핑, 레스트 컨트롤러를 임포트 하고있다

 

겟매핑의 경우 /api/hello 를 쓸수있게 해주는 것이다.. 정도

그리고 레스트 컨트롤러는 이제까지 백엔드개발자에게 받아쓰던 그 rest full api 인것이다

 

rest full api의 경우 보통 json으로 데이터를 주고받지만 문자열도 전송이 가능하다고 한다

우리는 간단한 문자를 보내주고 있기에 일단 문자열을 return해주었다.

 

자 이제 까지 한것은 간단한 프론트, 백앤드, 데이터베이스 이렇게 세가지고 대부분의 웹, 게임, 그냥 거의 모든 온라인 서비스들이 크게 이런세가지 구조를 가지고 있다.

 

이걸바탕으로 난 로그인 기능을 만들어보려고한다

db부터 건드리자 

전에 했던거처럼 mysql을 키고

저번에 만들어둔 db에 들어가자

 

USE myappdb;

 

없다고? 그럼 

CREATE DATABASE myappdb; 

입력후 들어가자

 

그후

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(20) NOT NULL,
    password VARCHAR(100) NOT NULL,
    email VARCHAR(100)
);

이걸 설명하자면 테이블을 만드는거다

테이블이란 뭘까

내가 이해하기로 일종의 표다

행과 열을가진 표

대충 이거다

여기서 업체명, 모델명, 수량, 생산지(표시된 이미지는 상단 행으로 나와있다 이걸 좌측세로줄로 옮겼다고 생각하자) 즉 첫번째 열에 우리는 id, username, password, email을 넣은것이다...!

id는 우리가 로그인할때 id가아니라 int값으로 넣어 고유 식별자 즉 첫번째회원, 두번째 회원, 세번째 회원 등으로 

자동으로 하나씩 증가하도록  AUTO_INCREMENT 과 PRIMARY KEY 를 넣었다

그리고 username 아이디다 VARCHAR 란 최대글자수를 의미한다 즉 VARCHAR(20)은 20자 까지 넣을 수 있다는거고 예를들어 아이디가 "a" 20 개로 넣을 수 있다는 뜻이다 NOT NULL은 필수 라는뜻.

같은형식으로 비밀번호, 이메일까지 하면..

 

DESCRIBE users; 로 이렇게 확인할 수 있다

 

이제 자바로 돌아가서 

pom.xml에 

<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-core</artifactId>
    <version>5.2.2.Final</version>
</dependency>

이걸 추가해주자

react로 치면 yarn add 같은 느낌이다 npm install 같은느낌

그리고 폴더만들고 파일생성해서하면

이런구조에 
user.java 는 

package com.example.vueRTC.entity;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String username;
    private String password;
    private String email;

    // getters and setters
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

이렇게 일단 두고 

여기까지 하자

 

다음시간에 계속