Node.js 공부기록 (1)
한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online
—–
1강 Node.js 소개
노드 : 자바스크립트 런타임
빠르고 스케일러블한 서버
크롬에 V8[브이 에잇] 엔진이 들어있음.
js engine
(open-source)
V8은 환경에 상관없이 작동하는 자바스크립트 엔진임
V8에게 자바스크립트를 주면 V8은 이를 실행함.
2009년 라이언 달
V8 엔진을 사용해서, 서버에서 동작하는 자바스크립트 런타임 개발
express 2010년 등장 노드 웹서버 프레임워크의 표준이 됨
react 2013년에 등장해서 프론트엔드 개발 트렌드를 바꿔놓음
2014년 바벨과 웹팩이 등장
한 언어로 풀스택 구현이 가능 => 코드의 재사용성이 높아짐
—–
2강 Node.js 소개
특징, 강점, 약점
IO needs to be done differently. (Ryan Dahl, JSConf 2009)
IO는 (지금까지와는) 다르게 되어야 한다.
자바스크립트의 성질 : 이벤트 루프에 비동기적인 성질.
자바스크립트는 이벤트 루프를 활용해서 동작하게 만들어져 있음.
라이언달은 이를 IO 바운드 프로그램에 가장 큰 문제인 요청하고 기다리기를 해결하는 열쇠로 보았음.
– 고전적인 처리 방식 : 한줄씩 실행하고 넘어가는 방식. 너무많은 클럭수를 낭비한다. (사칙연산이나 정렬 같은 분류는 괜찮으나, 네트워크를 타는 데이터베이스 접근 등의 경우)
– 자바스크립트 식 비동기 처리 방식 : 네트워크, 파일 등 IO를 기다리지 않고 다음줄로 넘어간다.
(자바스크립트는 언어 수준에서 비동기 문제가 잘 해결되어 있음)
“저수준의 오래 걸리는 일은 Node에게, 고수준의 로직은 메인 스레드에서.”
이것을 Offloading(오프로딩)이라고 한다.
노드가 빠른 속도와 매우 높은 확장성을 갖는 근본적인 이유이다.
=> IO(파일/네트워크)는 노드가 알아서 하고, 프로그래머는 비즈니스 로직에 집중.
비동기에 있어서 싱글 스레드이기 때문에 비동기로 인한 동시성 문제에 대한 걱정도 거의 없다.
(왜 아예 없는게 아니라 거의 없을까? 검색을 해도 잘 안나오는데 아마 아무리 노드라도 한 자원을 동시에 접근하는 경우 문제가 있지 않을까)
저수준 일은 잘하는 노드가 해주고, 요청이 얼마나 많든 간에 그 나머지만 메인 스레드에서 처리하기 때문에 메인 스레드의 확장성이 높다고 한다.
싱글 쓰레드의 블락킹만 일으키지 않는 다면 V8은 빠른 성능을 보장한다. (V8은 수준높은 구글 엔지니어링의 산물)
* 한계
자바스크립트 한계는 저수준 처리가 느릴 수 밖에 없다.
ex) 이미지파일 전체 버퍼를 돌면서 특정한 픽셀을 찾는다든지
오디오 파일을 쭉 돌면서 두 개 오디오 파일을 합친다든지
더 잘하는 다른 언어들이 있다.
C, Rust, go 등 : 기계어와 대응하도록 컴파일해주기 때문에 빠르다.
node에서 바인딩해서 사용할 수 있다.
대표적인 대안 : C 그리고 WebAssembly 사용
C와 WebAssembly 모듈을 바인딩해 사용하는 방법 제공
C는 node-gyp [노드 지와이피]를 통해서, WebAssembly 는 Node 12버전부터 제공
WebAssembly [웹 어셈블리]란?
바이너리 인스트럭션 포맷이다.
C나 Rust를 컴파일했을 때 바이너리 실행줄들이 쭉 떨어지는 것처럼,
브라우저를 위한 어셈블리라고 보면 된다.
자바스크립트의 경우 스크립트 언어이기때문에 결국 런타임에서는 예측할 수 없는 부분들이 생기기 마련이므로 완벽히 최적화가 안되는데,
웹 어셈블리를 사용하게 되면 이 최적화 효율을 엄청나게 끌어올릴 수 있다.
노드의 대표적인 약점인 저수준 처리 => C와 WebAssembly로 극복가능
* 방대한 오픈 소스 생태계
NPM [엔피엠]: 노드를 위한 패키지 매니저
—–
3강 Glitch 서비스
Glitch 말고 코드샌스박스라는 것도 있다.
Glitch 라는 서비스로 설정 없이 바로 Node 웹 서버 코딩해보기
1. https://glitch.com/ 가입
2. discover 메뉴 접근 (또는 https://glitch.com/create-project)
3. node.js 항목의 Hello Node 클릭
4. server.js 내용 모두 삭제 (현재 필요가 없는 코드)
5. server.js 내용 새로 작성
const http = require(‘http’)
const server = http.createServer((req, res) => {
res.status = 200
res.end(‘Hello!’)
})
const PORT = 3000
server.listen(PORT, () => {
console.log(‘The server is listening at port’, PORT)
})
6. 상단의 [Show] 버튼 클릭하고 [Next To The Code] 클릭
7. 하단의 [Tools] – [Logs] 로 로그 조회 가능
8. 하단의 [Tools] – [Terminal] 클릭하면 어떤 장비에 접속한 상태임을 알 수 있다.
8-1. ls 쳐보기
8-2. cat server.js 쳐보기
(실제로는 어떤 컨테이너 안에 떠있는 것인데 에디터를 물려서 변경하고 있는 것임)
9. 상단의 [Show] 버튼 클릭하고 [In a New Window] 클릭하면 놀라운 사실
브라우저 주소를 보면, 웹상에서 실제 호스팅이 되고 있음.
심지어 https도 적용이 되어있음.
노드 서버 프로토타이핑을 해보고 싶다면 이렇게 글리치나, 코드샌스박스를 사용하는 것을 추천.
아주 간단한 노드 API 서버를 만들고 싶다면 추천.
글리치에서도 CPU, 메모리 등 제한은 두고 있겠지만 테스트에 유용함.
—–
4강
에디터 : Visual Studio Code
오픈소스 에디터임. MS가 주 오픈소스backer.
(github.com/Microsoft/vscode)
언어 구성을 보면 TypeScript 93.6% / JavaScript 3.4%
장점 : 자바스크립트 인텔리센스 (자동완성이나 타입 유추 등) 기능이 기본 지원됨.
타입스크립트도 지원이 잘됨
강력한 익스텐션이 특장점.
code-server(코드 서버)라는 것이 있어서, vscode 는 웹상에서도 동작함.
기본적으로 웹기반 기술로 만들어졌으므로 다양한 운영체제 지원
폴더 별로 프로젝트가 관리됨.
1. test.js 새 파일 만들고 작성
console.log(‘Hello!’)
Ctrl + Shift + P : 커맨드 팔레트
커맨드 팔레트에서 >Terminal: Focus Terminal 검색
터미널이 뜨면
1-1. node –version 입력
1-2. node test.js 입력
터미널에 Hello! 라고 뜰것임
1-3. git init 입력
1-4. 소스 제어 탭 선택 (Ctrl + Shift + G)
1-5. 상단 인풋박스에 “Initial Commit” 이라고 입력하고 플러스 기호 클릭 (스테이징)
1-6. 상단 V 표시 아이콘 클릭 (커밋)
1-7. 익스텐션 탭 선택 (Ctrl + Shift + X)
각종 익스텐션 얼마든지 설치 가능
1-8. Ctrl + Shift + P : 커맨드 팔레트 => Keyboard Shortcuts 검색
단축키 조회/변경 가능
1-9. Ctrl + Shift + P : 커맨드 팔레트에서 defaultSettings.json 열기
1-10. Ctrl + Shift + P : 커맨드 팔레트에서settings.json 열기
settings.json은 내용이 거의 없는 상태인데, defaultSettings.json 의 내용을 가져와서 settings.json 안에 입력하는 식으로 사용
ex) “workbench.colorTheme”: “Abyss” 입력
“workbench.colorTheme”: “Visual Studio Dark” 입력