Hobby Coding

1. 개요 React로 작성한 클라이언트 프런트 웹페이지와 express로 작성한 서버 프로그램을 연동 시키고 docker를 이용하여 mysql을 컨테이로 실행하고 DB테이블을 만들어 로그인 프로그램을 작성하여 보았다. 로그인 이후에는 JWT를 이용하여 로그인 여부를 체크해 본다(이부분은 일부만 구현) 2. PC에 프로젝트 생성(Typescript) (Front프로그램) 윈도우즈 powershell에서 다음과 같이 입력한다. PS> npx create-react-app test --template typescript PS> cd test PS> npm start 3. DB연동 코드는 아래 부분에서 작성하기로 하고 일단 username과 password 를 하드코딩으로 작성한다. import React, ..

1. 개요 React(+Typescript)를 사용하는 개발환경에서 구글 드라이브에 접속하고 파일 리스트를 하여 보자. 2. 프로젝트 생성 윈도우즈 파워셀에서 다음의 명령어를 실행하여 react프로젝트를 만든다. > npx create-react-app mydrive --template typescript > cd mydrive > npm install react-google-drive-picker 3. Google API Key 만들기 먼저 구글에 로그인하고 아래의 싸이트(구글 API 콘솔)로 이동한다. API를 선택한다. https://console.cloud.google.com/ 신규 프로젝트(mydrive)를 생성한다. 기존 프로젝트에 추가하여도 된다. 사용할 API를 검색하고 Enable시킨다...

1. 개요 SSR(Server-Side Rendering)은 여러 장점이 있다. React 18버전에서 사용하여 본다. React 18 버전은 2022년 3월에 release 되었는데 많은 변화와 새로운 개념들이 도입되었다. 그렇지만 일단 가장 간단하게 실행되는 SSR프로젝트를 만들어 보고 새로운 기능들은 차츰 적용하면서 테스트 하여 보자. [참고] https://www.digitalocean.com/community/tutorials/react-server-side-rendering 1. 환경설치 기본적으로 nodejs등 환경 설치는 사전 준비된 것으로 가정한다. 최신 환경으로 업그레이드한다 > npm i -g npm@latest > npm rm -g create-react-app > npm insta..

1. 개요 Docker는 리눅스 컨테이너를 구현해주는 어플리케이션이다. 윈도우즈 환경에서 Docker를 실행하고 이곳에서 리눅스용 프로그램을 개발하여 볼 수 있다. 리눅스 컨테이너를 만들어 보는 이유는 많은 cloud 환경에서 리눅스컨테이너를 지원하기 때문이다. 컨테이너(Container)는 격리된 환경에서 각각 독립적인 프로세스로 실행된다. [참고] https://www.lainyzine.com/ko/article/a-complete-guide-to-how-to-install-docker-desktop-on-windows-10/ 2. WLS2 프로그램 설치 윈도우즈에 WLS2(Windows Subsystem for Linux 2)를 설치하여 윈도우즈에서 리눅스를 사용할 수 있는 환경을 구축하고 Dock..

1. 개요 Serverless 라고 불리워지는 구글의 클라우드 서비스이다. Serverless란 서버를 클라우드에서 알아서 관리하여 주기 때문에 서버관리에 대해 신경을 쓸 필요없는 서비스(완전관리형)라고 생각하면 될 듯하다. Cloud Run 은 컨테이너 기반으로 서비스를 제공한다. Cloud Run을 이용하여 nodejs 웹서버를 만들어 본다. 2. PC에 프로젝트 만들기 express를 이용하여 nodejs의 프로젝트를 pc에 만든다. PC에 nodejs와 express 를 설치하여야 한다. 프로젝트 이름을 vrworld로 설정하였다. > express --view=ejs vrworld 3. google에 프로젝트를 만든다. Cloud Run API를 Enable 시킨다. https://console..

1. 개요 구글의 firebase 서비스에서 웹페이지를 서비스 하여 보자. 파이어베이스는 구글에서 인수한 개발플랫폼으로 대표적인 기능으로 인증, 데이터베이스, 스토리지, 원격 구성, 푸시 알람, Analytics 등의 모바일, 웹 애플리케이션을 쉽게 구현할 수 있도록 하여준다. 2. 프로젝트 만들기 (1) 구글의 계정이 얻고 구글 개발자 console 로 이동한다. https://console.firebase.google.com (2) + add project를 한다. (3) 프로젝트 이름을 설정한다. 예) vrclass (4) Enable google analytics for this project를 활성화한다. 옵션사항이다. (5) 아래와 같이 Default Account로 설정하고 Create pr..

1. 개요 https가 아니면 실행이 안되는 프로그램들이 늘어나고 있다. 기존의 http apche 서버를 https가 가능하도록 한다. 아래의 링크를 참조한다. [참고] https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-20-04 Step 01. Certbot 설치 sudo apt install certbot python3-certbot-apache Step 02. Apache Virtual Host Configuration 확인 서버 이름이 정확한지 채크하고 오류가 있다면 수정한다. cd /etc/apache2/sites-available sudo vi /etc/apache2..

1. 개요 유니티를 이용하여 WebXR 콘텐츠를 만들어 본다. WebXR 콘텐츠를 웹서버를 이용하여 https로 서비스하고 Oculus Quest2를 통하여 VR모드에서 확인하여 보자. 2. Sample Scene Project Build 하기 아래 링크에서 프로젝트를 다운로드를 하고 Unity 2019를 이용하여 프로젝트를 open 한다. 다운로드 & Project Open with Unity 2019.4.37f1(LTS) [참고] Unity 2021은 아직 VR모드를 지원하지 않는다. https://github.com/MozillaReality/unity-webxr-export 샘플 예제를 open 한다. WebXR/Samples/Desert/WebXR 아래와 같이 WebGL Build Support..

1. 개요. 웹브라우저의 자바스크립트에서 WebRTC를 이용한 현재 PC화면을 스크린 캡처하여 스트림 영상으로 만들고 이를 디스플레이 하여 본다. 이 스트림을 원격 컴퓨터에 보내면 화면 공유 기능이 된다. 화면 공유를 위한 사전 단계이다. 2. 프로그램 node.js 환경에서 테스트 하였지만 아파치 서버에서도 별 문제는 없을 것이다. 다음과 같은 html 파일을 만들고 https 로 불러 보자. 크롬과 FireFox 에서 테스트 하는 것이 안정적으로 동작한다. Realtime communication with WebRTC This example shows you the contents of the selected part of your display. Click the Start Capture butto..

1. 개요 아래 깃허브의 예제 step-05를 약간 수정하였다. 서버 프로그램을 먼저 실행 시킨후 같은 방에 2명이 접속하여 WebRTC로 서로 화상채팅을 할 수 있다. Chrome 브라우저에서는 잘 동작하지 않는다. FireFox 브라우저에서 테스트를 한다. https://github.com/googlecodelabs/webrtc-web 2. 서버 프로그램 다운받은 예제 step-05 폴더에서 >npm install 을 하여 필요한 패키지를 다운로드 받는다. step-01부터 step04까지 http를 이용하여 테스트를 진행하였으나 step-05에서 테스트의 어려움이 있어 https 로 서버프로그램을 실행한다. node.js에서 https로 서비스하기 위한 절차는 여기에서 다루지 않는다. step-04..