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

개발자는 크게 프론트, 백앤드로 나뉘고 둘다 할 수 있는 풀스택 개발자가있다

난 개발자라면 풀스택 개발자를 향해 가야한다고 생각한다

 

아 취업과외 플랫폼의 경우 10월인가 11월에 끝내기도 했고 

내가 글쓰는 스타일이 혹시나 누가 나랑 비슷한거 따라만들 수 있도록 소스코드 통째로 올리면서 초심자 기준으로 설명하기 때문에 관둿다 좀 그르니까

이얘기를 중간에 왜했냐면 그때 webRTC를 쓰긴했는데 이 webRTC가 프론트도 백앤드도 손이 많이가고 턴서버 스턴서버 어쩌고 하면서 골치를 많이 썩였다 

듣기로는 계시판 하나 재대로 만들면 모두 그것의 응용이다. 라고 하지만 계시판은.. 재미없을거같으니까...

 

아무튼 풀스택 개발로 가야한다

그렇게 생각만 해왓다

그리고 오늘 그 첫 발걸음을 디딘다

 

먼저 이번엔 안해본 것, 실무에 많이 쓰는것 기준으로 해보려고 한다

프론트는 vue 백앤드는 java db는 mySQL
프론트는 문제 없다  이제까지 해왔으니까

vue3를 하려하는데 vite가 개발할때 어마어마하게 빠르다 

https://analogcode.tistory.com/39

[Vue + Vite] 근데 Vite는 뭔가요?

이곳에 잘 정리되어 있다

 

그럼  

npm create vite@latest

직접 vite로 (난 개인적으로 바이트 라고 읽는대 비트가 맞댄다 근대 바이트라고 하고싶다) 프로젝트를 생성해보니

바닐라js, react, vue, svelte등 다양하게 지원하고 있다.

아마 기존 프로젝트에 vite를 추가하는 방법이 있을것도 같은데 그렇게 하면 좀더 번거로운 작업이 되니

처음부터 vite로 설치하자

 

설치후 yarn dev를 입력하면 놀라운 속도로 실행되는걸 볼 수 있다

처음으로 해야할것은 router 설치다 

설치후 src 폴더에 routr 폴더를 생성 index.js 파일을 만들고 

import { createRouter, createWebHistory } from "vue-router";
import About from "../components/About.vue";
import Home from "../components/Home.vue";
import Login from "../components/Login.vue";
import Profile from "../components/Profile.vue";

const routes = [
  {
    path: "/",
    name: "Login",
    component: Login,
  },
  {
    path: "/home",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  {
    path: "/profile",
    name: "Profile",
    component: Profile,
  },
  // 추가 라우트 정의
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem("isAuthenticated");

  if (to.name !== "Login" && !isAuthenticated) {
    next({ name: "Login" });
  } else {
    next();
  }
});

export default router;

 

대충 박아주자 홈페이지 즉 경로 "/" 에서 로그인 페이지가 나오게 하고싶엇다

그후 홈에는 즉시 입장 가능한 화상채팅룸을 표시하게 하고싶고 내자랑할 어바웃, 내프로필을 성정할수있는 프로필 페이지 정도 까지 생각했다.

src/components 폴더에 각종 About.vue, Home.vue, Login.vue 등을 만들어주자 

<template>
    <div>
        <h1>Login</h1>
        <form>
            <label for="username">Username:</label>
            <input type="text" id="username" v-model="username" />

            <label for="password">Password:</label>
            <input type="password" id="password" v-model="password" />

            <button @click="login">Login</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
    login() {
        if (this.username === '1212' && this.password === '1212') {
            // 로그인 성공
            localStorage.setItem('isAuthenticated', 'true');
            this.$router.push('/home');
        } else {
            // 로그인 실패
            alert('아이디 또는 비밀번호가 잘못되었습니다.');
        }
    },
}

};
</script>

<style scoped>
h1 {
    text-align: center;
}
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
label {
    margin-bottom: 10px;
}
input {
    padding: 5px;
    margin-bottom: 10px;
}
button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}
</style>

Login.vue 코드인데 아직 백엔드가 아무것도 없으니 그냥 1212 로 아이디 비밀번호를 설정하고 

Home.vue로 넘어가는지만 체크해보자 
잘되고있고 

이걸 처음부터 끝까지 따라하는사람이 있을지는 모르겠는데 나머진 알아서 하자 별내용 없이 그냥 기본 페이지만 만들엇다

 

추후 의욕이 나면 프론트 개발을 좀더 할즈음에 설명하겠다

이제 여기까지하고 백앤드를 구성하려하는데............

 

자바는 보통 이클립스, 인텔리제이를 많이 쓴다

이클립스는 무료고 인텔리제이는 유료인데 돈있으면 인텔리제이를 쓰는 편이라고 알고 있다

한달정도는 무료로 주는데 공부해보겟다고 한달받았다가 공부를 안하는바람에 돈을 내야하나 했지만

이클립스를 쓰기로 했다

그리고 설치 , 실행

 

이클립스의 첫인상

가슴이 막 답답하고 숨이 막히는것만 같다

그냥 쓰던 vscode 쓰고 싶다

그냥 정이 안가게 생겨버려서 

 

그냥 vscode 쓰기로 했다

사실난 마지막 프로젝트에서 vscode로 jsp개발을 했기때문에 세팅이 되어있다

https://cago-young.tistory.com/135

[JAVA] VScode 초 간단 개발 환경 세팅 하기

이거말고 다른글이엇던거 같은데 확장프로그램 몇개 설치하고 세팅해주면 뭐 어찌저찌 돌아간다

잘 설치했다면 좌측 패널에 

전원버튼이 중요하다

이렇게 전원버튼같이 생긴 탭에 들어가 jsp를 실행할 수 있엇다.

아무튼 java를 시작해보자

https://start.spring.io

에 들어가서 제일 많이쓰는걸로 고르자 그레이들, 자바, 3.2.1 이름넣고 jar java17
이렇게 세팅했다

제너레이트 한 후 세팅한 vscode로 열기

 

이제 데이터베이스를 연결할차례인데 몽고디비와 mySQL중 고민했는데

이왕하는거 mySQL로 결정 설치를 해보자

 

mySQL들어가면 다 유료옵션으로 유도를 해놓았다

https://dev.mysql.com/downloads/mysql/

MySQL :: Download MySQL Community Server

이링크로 들어가면 바로된다 우리는 커뮤니티 서버 쓸거니깐..!

 

맨위에거 설치하고 .......

옵션이 쭉 있는데

내가 뭘눌럿는지 기억이 잘안난다.

대부분 기본으로 했고 유저는 추가안했고 월드데이터베이스 그런거 있엇는데 그것도 추가 안했다.

새로만들어서 쓸거니까

 

하지만 여기서 문제가 발생하는데

난mysql이 처음이라는것이다

몽고디비는 본적은 있지만 이건 내가볼때 순수하게 커맨드라인으로만 작동하는거 같아보인다 적어도 지금은

cmd(난 파워쉘쓰지만) 관리자권한으로 실행후 mySQL을 입력해도 mySQL이 뭔지 모른단다

 

알아본결과 환경변수 등록을 해줘야 한단다.

 

해주면...?

 

예쓰예쓰

굳보이

환경변수 등록하고 꼭 확인을누른후 다시 한번 켜서 잘등록됫나 더블체크를 하자 컴퓨터 다시시작 두번하고 싶지 않다면 말이다

 

이제 java의 src/main/resources/application.properties 파일에

spring.datasource.url=jdbc:mysql://localhost:3306/너의 디비 이름

spring.datasource.username=root(이름입력안하고 비밀번호만 했다면 root)

spring.datasource.password=password

 

password를 passowrd라고 했다고 내비밀번호가 password는 아니다~

수정한거다

 

글이 길어지니까 다음글에 하겟다

 

환경세팅은 많이해도 참 자증난다