내일배움캠프 Node.js 사전캠프 6일차
1. ZEP에서 이루어진 팀단위 아티클 스터디
(1) 아티클 주제
자바스크립트의 정의와 사용 용례를 살펴보며 자바스크립트가 가진 강점에 대해 알아보자.
(2) 아티클 요약
자바스크립트란 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어다.
자바스크립트는 브라우저 뿐만 아니라 서버에서도 실행할 수 있다. ‘자바스크립트 가상 머신’이라는 엔진이 내장되어있기 때문인데, 엔진마다 특유의 코드네임이 있다.
V8 - 크롬과 오페라에서 사용
SpiderMonkey - 파이어폭스에서 사용
IE에서 사용하는 엔진은 Trident나 Chakra 등….
브라우저에서 할 수 있는 일
모던 자바스크립트는 원래는 브라우저를 대상으로 만든 언어다. 그러나 실행 환경에 따라 다양한 목적으로 사용될 수 있다. Node.js 환경에선 임의의 파일을 읽거나 쓰고 네트워크 요청을 수행할 수 있다.
브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있다.
- 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
- 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
- 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
- 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
- 클라이언트 측에 데이터 저장하기(로컬 스토리지)
브라우저에서 할 수 없는 일
- 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있다. 사용자가 브라우저 창에 파일을 ‘끌어다 두거나’
<input>태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용한다.- 카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 한다.
- 브라우저 내 탭과 창은 서로의 정보를 알 수 없다.(한 창에서 다른 창을 열 때는 예외) 이런 제약사항을 피하려면 두 페이지가 데이터 교환에 동의하는 코드를 포함해야 한다. 덕분에 우리는 지메일에서 누른 링크가 지메일 상의 정보에 접근해 개인정보를 훔치는 걸 막을 수 있다.
- 타 사이트나 도메인에서 데이터를 받아오는 건 불가능하다. 원격 서버에서 명확히 승인을 해줘야 한다.
자바스크립트만의 강점
- HTML/CSS와 완전히 통합할 수 있음
- 간단한 일은 간단하게 처리할 수 있게 해줌
- 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨
이 세 가지 모두를 지원하는 건 자바스크립트 뿐이다.
자바스크립트 ‘너머의’ 언어들
자바스크립트 문법만으로는 모두의 니즈를 충족하기 어렵다. 따라서 새로운 언어들이 등장하게 되었는데, 그들을 사용하여 코드를 작성하면 자바스크립트로 자동 변환해준다.
- CoffeeScript : 문법이 간결하다. 최신 자바스크립트 언어를 지원하지 않아서 사라지는 추세다.
- TypeScript : MS에서 구현한 자바스크립트 수퍼셋 프로그래밍 언어. 정적 타입을 명시할 수 있다. '자바스크립트를 실제로 사용하기 전에 있을만한 타입 에러들을 미리 잡는 것' 이 타입스크립트의 사용 목적이다.
- Flow : 정적 타입을 강제한다. TypeScript와는 다른 방식을 사용한다. Facebook이 개발했다.
- Dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어다. Google이 개발했다.
모르는 용어들이 상당히 많다. 이해하기 위해선 웹 브라우저와 서버에 대한 공부가 더 필요할 것 같다.
AJAX
Ajax는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.
COMET
COMET 이란 2006년 알렉스 러셋(Alex Russel)이 정의한 용어로, 브라우저가 HTTP 요청에 대해 데이터를 푸시하는 방법을 고안한 웹 모델이다.
일반적인 웹모델은 널리 알려진 대로, 서버와 클라이언트 브라우저간 상태를 유지한 통신이 불가능하다.
COMET 은 이러한 HTTP 의 본질적 한계를 어느정도 극복하고자 만든 Web Application Model 이라고 생각하면 된다.
가령 브라우저가 지속적으로 서버에 데이터를 받아야할 필요가 있을 때 서버의 데이터가 업데이트 되지않았다면 이는 무의미하다.
즉, 클라이언트의 입장에서 갱신이 필요한 절대적인 시점은 무조건 서버의 데이터가 변경되었을 때가 된다.
COMET 은 간단하게는 Client 로 유의미한 메시지를 전달할 때까지 HTTP 응답을 지연시키는 기술이다.
좀 더 정확히는 서버가 클라이언트의 요청에 응답할 때 응답을 "늘어뜨리는 방법" 을 이용해서 긴 시간동안 브라우저가 접속을 끊지않고 서버의 응답을 대기하게 만든다.
출처 : COMET 이란? :: Jins' Dev Inside (tistory.com)
(3) 인사이트 공유하기
↓아티클을 읽고난 후 팀 노션에 남겨본 노트
// express로 서버를 만드는 코드
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})1. const express = require('express')
- 이 라인은 Express 모듈을 불러와서
express변수에 할당합니다. Node.js에서 외부 모듈을 사용하려면require()함수를 사용합니다. 이 경우, Express.js 라이브러리를 불러와 웹 애플리케이션을 만들 준비를 합니다.
2. const app = express()
- 이 라인은 Express 애플리케이션 인스턴스를 생성합니다. 그 결과 만들어진 인스턴스가
app입니다. 이제 이app인스턴스를 사용해 웹 애플리케이션을 만들고, 요청에 응답하는 기능을 구현할 수 있습니다. app객체는 서버의 핵심 역할을 하며, 요청에 응답하는 다양한 메서드들을 사용할 수 있게 해줍니다.
3. const port = 3000
- 애플리케이션이 실행될 포트 번호를 설정하는 코드입니다. 포트는 클라이언트가 서버에 요청을 보낼 때 사용하는 네트워크의 한 지점입니다. 여기서는 포트를 3000번으로 지정했습니다.
4. app.get('/', (req, res) => { ... })
- 이 부분은
GETGET 요청|요청에 대한 라우트를 정의합니다.'/'는 서버의 루트 경로를 의미하며, 클라이언트가 이 경로로 요청을 보낼 때 실행될 코드를 정의합니다.(req, res)는 요청 객체 (req)와 응답 객체 (res)입니다.res.send('Hello World!')는 클라이언트에게 'Hello World!' 문자열을 응답으로 보냅니다.
/) 에 접근하면, 서버는'Hello World!'라는 응답을 보내줍니다.
5. app.listen(port, () => { ... })
- 이 라인은 서버를 지정한 포트(3000번)에서 실행하는 코드입니다.
app.listen()은 서버가 주어진 포트에서 클라이언트 요청을 대기하도록 설정하는 함수입니다.- 콜백 함수
( => { console.log(...) })는 서버가 성공적으로 실행된 후 호출됩니다. 여기서는Example app listening on port 3000이라는 메시지를 콘솔에 출력합니다.
2. 팀 노션으로 회의록 발행
(1) 무엇을 새롭게 배웠는가
너무 방대한 분량의 지식이 쏟아져서 팀원들과 4시간 가까이 개념을 찾느라고 깨나 고생했다. 조금 멀리 떨어져서 바라보니 이 모든 게 서버에 대한 이야기였다는 걸 깨닫게 된다.
첫 번째 아티클에서 중요했던 내용은 JavaScript가 네트워크 원격 서버를 통해 브라우저 내부에서 정보를 주고받는다는 것이었다. 또 JavaScript로 컴파일 될 수 있는 다른 언어들 특히 TypeScript에 대해 소개하기도 했다.
우리가 주목해야 하는 부분은 웹 브라우저 쪽이 아니라, Node.js가 스스로 서버를 구축할 수 있다는 점일 터다. npm을 통해 쉽고 빠르게 서버를 열 수 있으면서도 언어로는 JavaScript를 사용하기에 그 강점 또한 공유할 수 있다는 것. JavaScript로부터 파생된 언어인 TypeScript 또한 Nest.js를 통해 보다 체계적이고 커다란 규모의 서버를 구축할 수 있다는 것.
2일차 아티클이었던 게임 서버 트랙에서 자바스크립트를 학습하는 이유와 일맥상통하는 지점이다.
(2) 무엇이 새롭게 궁금해졌을까
아직 시기상조일 수도 있겠지만 서버에 대한 공부가 절실히 느껴졌다. promise 함수, fetch 함수, AJAX와 COMET 등 클라이언트와 통신하는 방식에 대해 궁금증이 많이 생겨난다. 또 이들을 JavaScript를 통해 코딩할 때의 이점은 정확히 무엇일까? 글로만 보고 이해하는 것과 직접해 보는 것은 전혀 다를 것 같기에 한번 서적을 찾아봐야겠다.
3. 하루를 되돌아 보며
여러모로 머리가 새까맣게 타는 듯한 날이었다. 그 동안 언어에 대해서만 공부를 해왔을 뿐 서버나 통신 방식에 대해서는 아는 바가 없었기 때문이다. express를 통해 서버를 열었을 때조차 ‘이렇게 쓰면 서버가 열리더라’라는 식으로 복사 붙여 넣기를 해왔던 탓일까. 아티클을 읽으면서 명쾌한 깨달음을 얻기보다는 고개를 갸웃거리는 순간이 더 많았던 것 같다. 앞으로 더 공부한 뒤 다시 이 아티클을 읽어봤을 때 나의 성장을 얼마만큼이나 느낄 수 있을지 기대해봐야겠다.
댓글