노드 알아보고 개발도구 설치하기 1장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03

Presentation on theme: "노드 알아보고 개발도구 설치하기 1장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03"— Presentation transcript:

1 노드 알아보고 개발도구 설치하기 1장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
○ 본 강의 자료는 이지스퍼블리싱에서 제공하는 강의 교안입니다. ○ 본 강의 교안은 아래 출판 서적의 내용을 기준으로 구성되었습니다. 또한 다수의 기타 서적이나 사이트를 참조하였습니다. 레퍼런스를 참조하십시오. 2017, 정재곤, “Do it! 노드제이에스 프로그래밍 (개정판)”, 이지스퍼블리싱 - 강의 교안에 사용된 화면 캡처나 실습 자료의 경우에는 문서 업데이트에 따라 변경될 수 있습니다.

2 노드란 무엇일까? 그리고 개발에는 어떤 것들이 필요할까?
강의 주제 및 목차 강의 주제 노드란 무엇일까? 그리고 개발에는 어떤 것들이 필요할까? 목 차 1 노드란 무엇일까? 2 개발 도구 설치하기

3 1. 노드란 무엇일까? 난이도 소요시간 20분

4 노드란 무엇일까? 노드제이에스(Node.js)는 노드라고도 부름
웹 서비스와 같은 서버 기능을 구축할 수 있는 언어나 도구들은 이미 많은데, 노드라는 새로운 개발도구는 왜 또 만든 것일까? 파일 업로드 시의 문제를 해결하기 위해 새로운 방식의 서버 도구를 만들기 시작함

5 동기 입출력 방식 아래는 파일을 읽어 들일 때의 ‘동기 입출력’ 방식의 예 파일 내용을 다 읽고 난 후에 다른 일을 처리함

6 노드의 비동기 입출력 방식 하나의 요청 처리가 끝날 때까지 기다리지 않고 다른 요청을 동시에 처리 → Non-Blocking IO 아래는 파일을 읽어 들일 때의 ‘비동기 입출력’ 방식의 예 콜백 함수가 사용됨

7 동기 방식과 비동기 방식의 코드 패턴 비교 동기 방식은 파일의 내용을 읽어 함수의 결과값으로 반환함
결과값이 반환될 때까지 대기함 비동기 방식은 파일 내용을 읽은 후 콜백 함수로 반환함 파일 읽기가 시작되면 즉시 다음 실행 순서로 넘어감

8 이벤트 기반 입출력 방식 비동기 방식을 이벤트 기반 입출력 모델(Event driven IO) 이라고도 함
콜백 함수는 이벤트를 받았을 때 실행됨

9 노드 아키텍처 V8 위에서 동작하며 자바스크립트 언어를 사용함

10 노드를 더 쉽게 사용할 수 있게 하는 모듈 자바스크립트 코드를 확장자가 js인 별도의 파일로 분리 → 모듈(Module)이라고 부름 CommonJs 표준 스펙을 따름

11 노드의 주요 특징 자바스크립트는 수많은 웹 개발자들이 이미 사용하는 프로그래밍 언어
비동기 입출력 / 이벤트 기반 입출력 방식 사용 모듈과 패키지를 사용하면서 서버 프로그램 구성 이미 다른 사람들이 만들어 놓은 모듈들이 굉장히 많음

12 2. 개발 도구 설치하기 난이도 소요시간 20분

13 설치 과정 노드는 간단한 편집기만 있어도 소스 코드를 만들 수 있음 → Brackets, EditPlus 등
이 책에서는 브라켓을 사용함 (다른 도구를 사용해도 됨)

14 브라켓 설치 브라켓 ▶ 다운로드 후 설치 진행함

15 크롬브라우저 설치 구글 사이트 ▶ http://www.google.co.kr
구글 사이트 ▶ 설치되어 있지 않은 경우, 사이트에 설치 안내 글 표시됨.

16 노드제이에스 설치 LTS 버전과 Current 버전이 있음. 이 책에서는 Current 버전 사용 (LTS 버전 사용해도 됨)

17 브라켓의 테마 변경 검은색 테마로 변경 (보기>테마 메뉴)
글자 크기 크게 : <Ctrl> + , 글자 크기 작게 : <Ctrl> -

18 프로젝트 폴더 열기 파일 탐색기에서 윈도우 사용자 계정 폴더 아래에 brackets_nodejs 폴더와 그 아래에 NodeExample 폴더 생성 파일>폴더 열기 메뉴를 이용해 해당 폴더 지정 왼쪽 프로젝트 영역에서 오른쪽 마우스 버튼 누르고 [파일 만들기] 눌러 파일 생성

19 자바스크립트 파일 만들고 명령프롬프트에서 실행하기
간단한 자바스크립트 코드 입력 명령프롬프트에서 프로젝트 폴더로 이동한 후 파일 실행 node test1.js (파일 이름을 ch02_01.js로 만든 경우 node ch02_01.js 로 실행)

20 HTML 파일 만들고 웹브라우저에서 실시간 미리보기
ch02_01.html 파일 만들고 간단한 HTML 태그 입력 실시간 미리보기 아이콘 클릭하면 크롬 브라우저에서 페이지 열림 코드 변경할 때마다 자동으로 반영

21 확장기능 설치하기 다양한 확장기능 사용가능 [확장기능 관리자] 아이콘 클릭하고 아래 플러그인 설치 Brackets Icon
Custom Work (설치 후 옵션 대화상자 보이면 가장 위에 있는 아이콘 사용 옵션을 해제)

22 참고 문헌 [ References] 기본 서적
2017, 정재곤, “Do it! 노드제이에스 프로그래밍 (개정판)”, 이지스퍼블리싱 Node.js Site