꾸준히 개발하기

https://docs.aws.amazon.com/pinpoint/latest/developerguide/welcome.html

aws pinpoint 라는 서비스가 이미 존재하는 듯 하다. 사용하려면 firebase project가 기본적으로 필요하다는데 .... 더 찾아보자.

일단 https://docs.aws.amazon.com/pinpoint/latest/userguide/welcome.html

이 user guide를 먼저 읽고 저 developer guide를 읽으라고 권장한다.

firebase 프로젝트가 필수적인데 이건 이 문서 참고 https://maejing.tistory.com/entry/Android-FCM%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%B4-Push-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

이 문서도 괜찮다 RN + Push noti

https://blog.logrocket.com/create-send-push-notifications-react-native/

http://postmafia.kro.kr 사이트로 도메인도 구매하고, 임시방편으로 웹포워딩 걸어서 index.html이 뜨는 것까지 해뒀다. 이제 문제는 webRTC가 로컬 환경이 아닌 경우, SSL을 직접 설정해서 https 환경을 구축해줘야 제대로 돌아간다는 건데, 나머지는 어떻게 보고 따라가겠는데 진짜 이건 어디부터 건드려야될지 감도 안잡힌다.

WebRTC가 로컬 환경이 아니면 보안 문제로 카메라 권한을 원활하게 받아오지 못한다는 것은 알지만 우선 s3 버킷에 올려서 호스팅부터 해보기로 했다. 

자, 내가 필요한 건 1. 서버 2. 도메인 이렇게 두가지인데, 학회 수준 프로젝트에서 도메인을 매년 만얼마씩 주면서 구매할 필요성을 못 느껴서 무료 도메인을 서치하던 중 좋은 사이트를 발견했다.

내도메인.한국이라는 사이트인데, 회원가입만 하면 무료로 도메인을 발급받을 수 있다. (물론 .com같은 도메인은 아니긴 하다.)

우리 프로젝트 노션명을 따와서 postmafia.kro.kr를 발급받았다. 

Route 53

AWS 로 이동하여, route 53에 들어간다. 아래 이미지는 이미 호스팅 영역이 추가되어 있지만, '호스팅 영역 생성' 버튼을 클릭하여 추가해준다. 

도메인 이름의 postmafia.kro.kr을 클릭하면 4개의 네임서버를 볼 수 있는데, 내도메인한국의 설정창에서 CNAME 칸에 추가로 입력해줬다. 여기서 입력해줘야하는 네임서버가 4개라서 이따구로 적어놨는데 나중에 수정해야겠다..!

Amazon s3

s3 버킷을 생성하고, step5 파일을 업로드한 뒤, 정적 웹사이트 호스팅을 걸어두었다. 왜인지 모르겠지만 postmafia.kro.kr으로 접속했을 때 바로 인덱스 문서(index.html)로 넘어가지 않는다.

DNS 설정에서 별칭을 다 저렇게 정해놔서 그런건가..? 그렇다고 하기에는 1.postmafia.kro.kr로 접속해도 시간이 너무 오래 걸린다고 하고 안 뜬다.. ㅠㅠㅠ 우선은 엔드포인트로 도메인 웹포워딩을 걸어뒀다 ㅠㅠ 흐엉 속상해

근데 2시간 걸려서 http:// 환경 미완성 구축해놓은 상태인데 제대로 webRTC를 띄우기 위한 https:// 설정은 언제 하지..?!

(s3버킷 하다보니까 안교수님 강의실 미완성상태인게 너무 눈에 밟힌다... 올해 안에는 끝내야될텐데 아주 첩첩산중이야~)

이제 구글 WebRTC 예제(step 5)에 기능을 추가하려고 한다. 

1. SSL 적용
2. 서버 기능 보강
3. 오디오 추가
4. 디자인 수정
5. 참가자 수 2명->5명 증가   (이 부분은 프로젝트에서 필요한 기능이라 추가)

1. SSL 적용

NodeJS에 SSL을 적용하기 위해, SSL을 생성한다. 

(사실 온라인 마피아 프로젝트를 원활히 서비스하려면 OpenSSL로 충분한지 잘 모르겠다.. )

OpenSSL로 개인키(private.pem) 파일을 생성한다.

openssl genrsa 1024 > private.pem

* 여기서 'unable to write 'random state' 에러가 발생하면 windows의 경우 관리자 권한으로 실행해줘야 한다. 나는 현재 windows powershell를 관리자 권한으로 켜는 코드를 실행했다.

개인키와 쌍이 되는 공개키(public.pem) 파일을 생성한다.

openssl req -x509 -new -key private.pem > public.pem

.... 근데 여기부터 참고한 티스토리 글과 다르게 흘러가기 시작했다. 

계속 Private Key가 로드되지 않는다는데 서치해보니 다양한 상황의 각종 원인이 나와서 울고싶어졌다. 나는 OpenSSL로 WebRTC 서비스를 원활하게 하고 싶을 뿐인데 뭘 해야 하는걸까...!

* SSL/TLS?

SSL에 대해 개념이 전무한 상태로 코딩을 하려니까 죽겠어서 보안기사 책을 펼쳐봤더니 마침 SSL/TLS 내용이 있어서 정리해본다.

통신내용을 암호화해주는 프로토콜로 SSL 혹은 TLS를 이용한다. SSL/TLS 상에 HTTP를 올린다. 프로토콜의 이중 구조를 통해 HTTP의 통신은 암호화되어 도청을 방지할 수 있다. SSL/TLS로 통신을 수행할 때의 URL은 http://가 아니고 https://로 시작된다. 

SSL/TLS 보안 서비스
1. 기밀성 서비스 : DES, RC4와 같은 대칭키 암호화 알고리즘을 사용하여 제공되며, 이때 사용되는 비밀키는 Handshake Protocol을 통해 생성된다.
2. 클라이언트와 서버 상호 인증 : 연결 설정 과정에서 서로 간에 신뢰할 수 있도록 인증을 사용하는데, 인증에는 RSA와 같은 비대칭키 암호 알고리즘, DSS와 같은 전자서명 알고리즘와 X.509 공개키 인증서가 사용된다.
3. 메시지 무결성 서비스 : 안전한 해시 알고리즘을 사용해서 메시지 인증코드를 만들어 메시지에 포함시키기 때문에 신뢰성 있는 통신이 가능하다.

그니까 저 예제에서 말하는 거는 X.509 공개키 인증서를 쓰는거니까 SSL/TLP 서비스 중 2. 클라이언트와 서버 상호 인증 서비스를 사용하는 거겠지? (확실하지 않다)

7시간 안에 해결해야되는 프로젝트 과제가 있어서 우선 OpenSSL 삽질은 접어두고 aws s3에 정적 웹페이지부터 올려봐야겠다. ec2로 동적 웹페이지 호스팅은 어떻게 하는지 아직도 감이 잘 안 잡힌다.

WebRTC의 연결 설정, 통신, 데이터 전송은 JS API를 통해 구현된다. 기본 API는 다음과 같다.

WebRTC JS API

- RTCPeerConnection : 피어 투 피어 연결 생성, 탐색

- RTCSessionDescription : 연결의 한쪽 끝, 구성 방법 설명

- navigator.getUserMedia : 오디오/비디오 캡쳐

현재 구글 WebRTC 예제 중 네트워크 상에서 비디오를 주고 받는 step 5 예제를 변형할 예정이다.

카메라에서 비디오를 추출하고 (getUserMedia - step 1)

대화 상대를 찾고 (signaling - step 4)

네트워크로 연결하여 (RTCPeerConnection - step 2)

비디오를 주고 받는 코드가 step 5이다.

구글 예제는 로컬 환경에서 구동되므로 SSL이 따로 필요하지 않았지만, 일반적인 서비스를 만드는 경우 WebRTC는 기본적으로 네트워크 연결시 SSL이 있어야한다. (데이터를 주고 받고, 화상 채팅을 하려면)

또한 서버가 한번만 연결하도록 작성되어 계속 서버를 재가동해야하는 불편함이 있다.

오디오 또한 제공되지 않는다! 

* step 5 폴더에 있는 주요 파일은 다음과 같다.

• index.js - NodeJS로 실행한 웹 서버 및 signaling
• index.html - 사용자가 보는 웹페이지 (화상채팅 화면)
  • js/main.js - RTCPeerConnection 등 실제 화상채팅을 하는 클라이언트 코드가 모두 여기 있음
  • css/main.css - index.html의 UI 정의

현재 나는 

1. WebRTC로 여러명의 비디오를 받아와 동시에 띄우며

2. 해당 웹사이트는 가상서버에서 호스팅을 해야한다. (즉, SSL 필수)

-> 보통 WebRTC는 로컬환경이 아닌 경우 보안 이슈가 있어 SSL 설정이 번거로운 것으로 알고 있다... 열심히 해쳐나가는 과정을 쭉 기록해놓고자 한다.

* 이 분의 블로그를 많이 참조했다. 보다 정확하고 세부적인 정보를 위해서는 이쪽으로 (forest71.tistory.com/211)

여기서부터 계속 사용하던 function component 대신 class component를 사용한다. class component는 state를 사용할 수 있기 때문이다.

state는 object이고 여기에는 component의 데이터(가변)을 넣을 공간이 있다. 

리액트가 작동하도록 하는 component, 과연 무엇일까? component는 HTML을 반환하는 함수이다. 현재 리액트 창에 Hello!가 출력되도록 하는 component는 App.js에 함수의 형태로 존재한다. 

function App() {
  return (
    <div> Hello!   
    </div>
  );
}

해당 component를 사용하고자 한다면 index.js에서 다음과 같이 쓰면 된다.

ReactDOM.render(<App />, document.getElementById('root'));

만약 <App /> 부분을 App으로 작성하는 경우 해당 component는 리액트로 작동하지 않는다.

이처럼 js와 HTML 사이의 조합이 리액트에서만 사용하는 'jsx'라는 개념이다. 

이제 나만의 component를 만들어보자.

src 안에 새로운 Lect_name.js 파일을 생성한다. (* 이름은 대문자로 시작해야 오류가 나지 않는다. )

import React from "react";

function Lect_name() {
	return <h3>안교수님 강의자료실</h3>
}

export default Lect_name;

이 Lect_name.js를 어떻게 사용할까? 위의 코드처럼 index.js에서 해당 component를 포함할 수 있도록 해주면 된다. 하지만 무작정 아래와 같이 코드를 작성하면 오류가 난다.

ReactDOM.render(<App /><Lect_name />, document.getElementById('root'));

그 이유는 react application은 하나의 component만을 rendering 해야 하기 때문이다. 현재 App을 렌더링하고 있는 상태이다. 따라서 Lect_name을 App 옆에 두는 대신 App 안에 넣어주도록 한다. 

import React from 'react';
import Lect_name from "./Lect_name";

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name />
    </div>
  );
}

export default App;

 위의 코드를 실행하면 다음과 같이 제대로 App(), Lect_name()이 실행된 화면을 볼 수 있다.

jsx는 js 안의 HTML이며, 사용자는 얼마든지 원하는 만큼 component를 올릴 수 있다는 점을 알고 가도록 한다. 다만 유의해야 할 것은 react application은 한 번에 하나의 component만 rendering할 수 있다는 점이다.

react - component 간의 관계가 이해되었다면 jsx의 다음 특징에 대해 알아보자.

여기까지 따라왔다면 파일 간의 불필요한 이동을 줄이기 위해 Lect_name 파일을 제거하고 App.js 내에 Lect_name() 함수를 정의하도록 한다. 

import React from 'react';

function Lect_name() {
	return <h3>안교수님 강의자료실</h3>;
}

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name />
    </div>
  );
}

export default App;

이렇게 적어도 물론 코드는 제대로 작동한다. 여기서 jsx의 두번째 특징을 볼 수 있다. 바로 component에 정보를 보낼 수 있다는 점이다. component는 얼마든지 반복적으로 사용이 가능하다. 그렇다고 해서 만약 Lect_name() 함수를 여러번 호출하고 싶다고 해서, 무작정 <Lect_name />을 여러번 적는 것은 그다지 추천하고 싶지 않다.

각 HTML은 필요에 따라 동적으로 추가되는 것이 이상적인데, 이는 component에서 component로, child component로 정보를 보내는 방법(props)을 통해 구현할 수 있다.

import React from 'react';

function Lect_name(props) {
	console.log(props);
	console.log(props.prof);
	return <h3>강의자료실</h3>;
}

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name prof="ahn" />
    </div>
  );
}

export default App;

위의 코드를 실행하면 화면 자체에는 변화가 없으나 개발자 도구를 열어 콘솔 창을 보면 다음과 같다.

js의 es6를 사용하면, 해당 object에서 값을 직접 꺼내서 쓸수도 있다. 

import React from 'react';

function Lect_name({prof}) {
	return <h3>{prof} 강의자료실</h3>;
}

function App() {
  return (
    <div> 
      <h1>Hello!</h1> 
      <Lect_name prof="안교수님" />
    </div>
  );
}

export default App;

props.prof와 {prof}는 동일한 기능을 한다. 위의 코드를 실행해보면 기존에 출력하던 것과 동일한 화면이 출력되는 것을 볼 수 있다.

props는 데이터를 통해 얼마든지 HTML이 추가될 수 있음을 보여준다. props는 뭐든지 component에 넣는 것들이고, 이는 해당 component의 첫번째 argument로 이동한다.

 다음 강좌부터는 웹사이트에 동적 데이터를 통해 값을 전달하는 것을 다루나, 현재 내가 개발하고자 하는 웹페이지와는 관계가 없기 때문에 추후 추가하도록 하겠다! (#2.2)

이왕 개발하는거 요즘 프론트엔드에서 핫하다고 하는 리액트로 교수님 강의자료실을 만들어보려고 한다. 까먹을까봐 티스토리에 개발 방법 및 기록을 해두려고 한다.

지금부터 대부분의 내용은 노마드 코더의 리액트 강의를 따라가고 있다. 

VS code를 켜고 작업을 시작할 디렉토리로 이동한 다음, 터미널에 해당사항을 입력해준다. npx create-react-app 뒤에 오는 것은 프로젝트 이름이 될 것이다. 현재 강의 자료실을 개발하므로 이름은 적당히 lecture_repos로 했다.

npx create-react-app lecture_repos

cd lecture_repos
npm start

cd lecture_repos의 경우 새롭게 VS code에서 폴더를 여는 경우 생략해도 좋다.

저 코드를 터미널에서 실행하면

리액트가 돌아가고 있다는 멋진 창이 뜬다.

코드 공유를 위해 깃에 repos를 추가하는 과정이 강의에 있는데 이 내용은 생략하겠다... 깃 올려놓기만 하고 잘 안본다 ㅠㅠ

이 뒤에는 갑자기 노마드씨가 빠른 이해를 위해 코드를 슉슉 지우기 시작한다...! 그 부분은 강의를 보고 따라가는 게 나을 것 같아 링크를 남겨 놓아야 겠다. https://youtu.be/9yITc-uEjwI

해당 강의를 따라가고 나면, src 폴더 내에 App.js, index.js 두 파일만 남는다. 다 지워버린 나머지 파일을 import하는 코드도 App.js에서 삭제해준다.

import React from 'react';

function App() {
  return (
    <div> 
    // 여기에 자유롭게 입력
    Hello!   
    </div>
  );
}

export default App;

해당 코드를 저장하기만 하면, 기존의 리액트 창이 자동으로 새로고침 되어 div 안에 적혀있는 Hello! 만 떠있다.

현재 리액트 창의 코드를 보면 아래와 같다.

<div id="root">
	<div> Hello! </div>
</div>

하지만 내 작업폴더 내의 index.html 코드를 보면 div "root"는 비어있다. 

 <div id="root"></div>

여기에서 React의 특징이 등장한다! React는, 내가 작성한 모든 요소를 생성하고, JS와 그것을 만들고, 이를 HTML로 밀어넣는다. React는 모든 react application을 위의 div 사이에 밀어넣는다! 이 일은 index.js 내의 아래 코드를 통해 볼 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

React는 app.js component를 ElementId 내부에 넣으려고 한다! 저 'root'의 이름은 만약 변경을 희망한다면 두 코드 둘다 바꿔주어야 제대로 작동할 것이다. 

index.html, index.js 파일은 여전히 비어있지만 제대로 작동한다. 내가 작성한 hello!가 없는데도 말이다. 이 점이 react를 빠르게 해주는 부분이다. react는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 방법을 알고 있다. application이 이 파일을 로드하는 경우 빈 HTML 파일을 로드한 후, react가 component에 작성해두었던 HTML을 밀어넣는 것이다. 

소스코드에는 존재하지 않지만 제대로 작동한다! 이를 virtual DOM(virtual Document Object Model)이라고 한다. 존재하지 않지만, react가 이를 만들어주는 것이다. React는 정말 신기한 언어다...!

여기까지 리액트를 시작하고, 빠르게 작동하는 원리를 알아보았다. 뒷부분부터는 직접적인 강의 자료실 개발과 관련이 있을 것 같아 여기에서 게시물을 마무리하고자 한다. 

추가적으로 ReactJS에 대해 궁금증이 생긴다면 꼭 노마드 코더의 ReactJS 2019 강의를 듣길 바란다. 정말 기본부터 차근차근 설명해준다 :)