Javascript getting started

2018년에 작성한 노트를 옮겨 적은 것 입니다.

Javascript 시작하기

약 두 달의 멘토링 기간동안 Javascript와 그 생태계를 이해하기 위해 했던 작업들을 정리한다.

Node JS, express 이해

• 생활코딩 javascript
• 제대로 배우는 Node.js 프로그래밍 ch1, 3: 비동기 함수, 이벤트 루프, 서버와 스트림
• You don't know JS: Types & grammer, scope & closures

MEVN chat app

• MongoDB + Express + Vue.js + Node.js + Scoket.io를 이용한 채팅앱

• Server side와 Client side의 분리

  • Server side

    1. API 요청 경로에 따른 route를 나누어 REST API를 구현
       1. Auth: 회원가입, 로그인 시도
       2. Room: 채팅방 조회, 생성, 수정, 삭제
       3. Chat: 챗 조회, 생성
    2. 각 정보는 mongoose를 이용하여 로컬 MongoDB에 저장

  • Client side

    1. Vue와 Vue Router를 이용하여 앱 디자인
    2. 유저는 웹 GUI환경에서 채팅서비스 이용, 각 이벤트/서버에 대한 요청 처리.

• Passport.js를 활용한 로그인 기능 구체화: 입력된 정보로 DB loopup 및 추가/삭제, 패스워드 검증 등

To-do app

• 메모와 메모 컬렉션의 생성,삭제,조회를 위한 API 구현
• Postman을 활용해 client의 구현 없이 API 테스트
  • Postman의 local, global variable 개념 익히고 사용하기
  • Postman의 test 기능, API 문서 generation 기능 익히기
• Jest를 활용하여 테슽
  • 각 기능 (controller와 todo)에 대한 controller / mock object를 만들고 test / expect 스크립트 작성
• Lint를 활용하여 Coding convention 검사

간단한 Collaborative Editor

동시 편집이 가능한 텍스트 에디터. WebSocket을 이용, 업데이트된 html 전송

WebRTC VOD Streaming app

• WebRTC를 활용하여 사용자에게 영화 제공!
• WebSocket으로 너무 많은 데이터를 전송할 수 없는 한계와 Peer간 영화 데이터를 공유함으로써 Server의 부하를 줄이기 위한 목적.
• WebRTC Peer Connection with signaling server
  • Node와 Socket.io로 Peer Connection을 위한 시그널링 서버 구현
  • 이 서버는 Peer간의 signaling을 위해서도 사용되지만 그 자체로도 하나의 RTC Peer임.
  • 모든 Peer는 이 서버에 PeerConnection으로 연결, 영화 데이터 요청시 Data Channel로 전송
• RTCPeers
  • Host peer: 'host'란 유저네임으로 접속한 peer로서, 이후 접속한 peer들이 Host peer가 재생하는 영상을 streaming 하여 볼 수 있음.
  • Peer는 서버로부터 미디어 데이터를 받을 수 있지만, 다른 피어 (host peer)가 갖고 있는 영화 데이터를 요청 할 수도 있음
• Media Source API
  • 서버→브라우저 영상 재생
  • 미디어 데이터 ArrayBuffer chunks를 재생할 수 있도록.
  • WebRTC datachannel로 데이터를 전송받는 속도보다 Video element에 append하는 속도가 매우 느린 한계가 있음.
  • 실제 서비스할 경우 적절한 선택이 아니다. HLS나 DASH를 써서 해결 할 수 있을듯.

그 외 활동들

• Pair programming
  • 10분씩 타이머에 맞춰서 같은 기능을 번갈아가면서 코딩
  • jest를 이용하여 테스트 스크립트를 짜는 연습
• Javscript Coding Convention
  • 구글이 지향하는 Javascript의 컨벤션을 살펴보고 lint로 검사하는 방법
• 함수형 프로그래밍
• Restfull API
• 자바스크립트 공부와 Git 공부