본 포스팅은 노마드코더 - 줌 클론코딩 강의를 듣고 작성되었습니다.
학습 목표
JS를 활용해 Zoom 을 클론코딩.
WebSockets, SocketIO, WebRTC 에 대해서 배울 예정.
Only JS 만으로. 채팅방 생성. 화상채팅 그리고 개인 메시지를 구현.
백엔드 관련 용어 정리
-
Express : NodeJS를 사용하여 서버를 개발하고자 하는 개발자들을 위해 서버를 쉽게 구성할 수 있게 만든 프레임워크
cf) NodeJS : JS로 브라우저가 아니라 서버를 구축하고, 서버에서 JS가 작동되도록 만들어주는 플랫폼
npm install --save express
- Pug : HTML을 PUG 문법으로 작성하면 HTML로 변경해줌
npm install pug
- app.get('url 작성', (req, res, next) =>
프론트엔드 관련 용어 정리
-
package.json : 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일
-
babel : JS compiler의 역할을 수행
-> 최신의 JS 문법 & JSX 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법으로 변환해줌 -
nodemon :
a. nodemon이 없던 과거
: 서버를 실행시키고 변경이 일어나면, 자동적으로 화면에 반영이 되지 X ( ∴ 서버를 껐다가 재실행)
b. nodemon의 등장
: node monitor의 약자. 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가 파일이 수정되면 자동으로 노드 애플리케이션을 재시작
npm install nodemon --save-dev -
.classList.add() : 클래스 목록에 추가하기
-
document.createElement : 지정한 tagName의 HTML 요소를 만들어 반환하기
let element = document.createElement('p');
let list = document.createElement('li');Git에 초기 세팅 완료의 상태 코드 참고
❗ server.js는 Backend에서 구동될거고, app.js는 FrontEnd에서 구동됨 ❗
참고
https://inpa.tistory.com/entry/PUG-%F0%9F%93%9A-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%97%94%EC%A7%84-html
