Study25 [STUDY] NodeJS - 02. EXPRESS 02. EXPRESS Node JS 기반 웹 프레임워크 웹 프레임워크 (Web Framework) ※ 참조 : https://expressjs.com/ // @Example. Express 설치 $npm install --save express // OR $yarn add --save express // @Express. 서버 및 라우팅 스크립트(app.js) var express = require('express'); var app = express(); var path = require('path'); // Listener 포트 설정 app.listen( 8080, function() { console.log("start express server on"); }); app.get('/', functi.. 2022. 6. 22. [STUDY] NodeJS - 01. NPM / YARN : JEST 01. NPM / YARN : JEST JEST · 페이스북(Facebook)에서 테스트 자동화 만든 오픈소스 라이브러리 ※ 참조 : https://jestjs.io/docs/getting-started // @Example. JEST 설치 // npm 설치 $npm install --save-dev jest // yarn 설치 $yarn add -dev jest // @Example. pacakge.json { "scripts": { "test": "jest" } } // @Example. sum.js function sum(a, b) { return a + b; } // IE not support module.exports = sum; // @Example. sum.test.js const sum =.. 2022. 6. 22. [STUDY] NodeJS - 01. NPM / YARN NodeJS - 01. NPM / YARN 크롬 V8 Javascript 엔진으로 빌드 된 Javascript 런타임(플랫폼) Node.js 특징 · 이벤트 기반(Event-Driven) - libuv 라이브러리를 사용 - 이벤트 발생 시 사전에 정의한 작업(콜백함수)을 실행하고 이벤트가 종료되면 대기 ※ 동시에 여러 이벤트가 발생하는 경우 이벤트 루프(Event loop)에 의해 작업(콜백 함수) 호출 순서 및 실행 · 비동기 I/O 모델 (Non-Blocking I/O Model) - Node.js 라이브러리의 모든 API 처리는 비동기 방식으로 실행 · 단일 스레드(Single Thread) - 단일 스레드 기반 이지만, Non-Blocking Model 방식(이벤트 루프)을 채택하고 있는 Node.. 2022. 6. 22. [STUDY] JS - 02. Javascript MVC 02. Javascript MVC Javascript 의 기본적인 디자인 패턴 MVC 디자인 패턴 · MVC(Model-View-Controller) 로 구성된 Javascript Design Pattern Model · 도메인 레이어(Domain Layer) · 응용 프로그램 내에서 사용되는 데이터를 처리하는 영역 View · Model 영역을 화면에 구성(렌더링) · 일반적으로 사용자 인터페이스(UI) 영역 (HTML) Controller · Model 과 View 사이의 상호 작용을 담당 · 일반적으로 사용자 행동(Action)에 해당하는 이벤트 처리하는 영역 ※ 단순하고 일반적인 디자인 패턴이지만, Model-View 간 의존성이 높아 웹 응용 프로그램이 복잡해 질 수록 복잡해지고 유지보수에서 어.. 2022. 6. 22. [STUDY] JS - 01. Javascript 란 01. Javascript 란 Javascript(ECMAScript, ES) 웹과 Javascript 엔진이 포함된 모든 장치에서 동작하는 프로그래밍 언어 자바스크립트 런타임(Javascript Runtime) · Javascript 가 동작하는 환경 자바스크립트 엔진(Javascript Engine) · Javascript 를 실행 · Javascript 엔진의 기본적인 동작 원리는 다음과 같이 요약 엔진이 스크립트 코드를 읽음 (Parser) 코드를 기계어로 전환 (Compiler) 기계어로 전환된 코드를 실행 V8 · 구글 크롬(Chrome) 스파이더 몽키(SpiderMonkey) · 최초 Javascript 엔진. 파이어폭스(Firefox) 웹킷(Webkit) · 사파리(Safari) 차크라(C.. 2022. 6. 22. [STUDY] WEB - 02. 웹 구축 및 구동 방식 02. 웹 구축 및 구동 방식 웹 구축 및 구동 방식의 발전 정적 사이트(Static Sites) · 클라이언트에서 URL을 사용해 서버에 접속 (Request) → 서버는 미리 저장된 HTML (정적 페이지)를 클라이언트로 전송 (Response) ※ 클라이언트에서 URL 이 변경되는 상호작용 이벤트가 발생될 때마다 서버로 HTML(정적 페이지)을 요청하고 응답 받기 때문에 화면 깜빡임이 발생 정적 사이트(Static Sites) : 태그 추가 · 정적 사이트(Static Sites)와 동일한 방식으로 동작하고, 태그를 사용해 부분적 페이지 업데이트가 가능해짐 정적 사이트(Static Sites) : (fetch) 태그 추가 · 정적 사이트(Static Sites)와 동일한 방식으로 동작 · Javas.. 2022. 6. 17. [STUDY] WEB - 01. 웹(Web) 이란 01. 웹이란 정보 공유 목적의 대표적 인터넷 서비스 하이퍼 텍스트(Hypertext)를 기반으로 서로 관련있는 문서(document)를 연결한 문서의 집합체 (TCP/IP) ※ 하이퍼텍스트(Hypertext)는 참조(Hyperlink)를 통해 문서 간 이동 및 접근 할 수 있는 텍스트 웹 주소 구성 (URL) · URL(Uniform Resource Locator) ://.:/?# 스킴(Scheme) · 프로토콜(Protocol) · 해당 리소스에 접근 프로토콜을 명시 서브 도메인(Sub domain) · URL로 전송 또는 계정 내 IP 주소, 디렉토리로 포워딩 되는 도메인 이름의 확장자 ※ blog.naver.com, mail.naver.com ... 도메인(Domain) ·문자 등으로 만들어진 주.. 2022. 6. 17. [STUDY] ECMAScript6 / ES6 (2015) 02. ES6 / ECMAScript 6 (2015) · Javascript 두 번째 주요 개정판 브라우저 별 지원 현황 (Support by Browsers) 주요 기능 (Features) Basic · Destructuring assignment · The let keyword · The const keyword · Arrow Functions · For/of · Default Parameters · Function Rest Parameter · JavaScript Modules Method · New Math Methods · New Number Properties · New Number Methods · New Global Methods String · String.includes() · Stri.. 2022. 5. 30. [STUDY] ECMAScript5 / ES5 (2009) :: Array 01. ES5 / ECMAScript 5 (2009) :: Array Array ※ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array.isArray() · 인자가 배열(Array)인지 판별 및 결과(Boolean)을 반환한다. Array.isArray(obj) obj 검사할 객체 Example. 기본 예제 // 모두 true 반환 Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')); Array.isArray(new Array(3)); // Array.. 2022. 5. 28. [STUDY] ECMAScript5 / ES5 (2009) :: Object 01. ES5 / ECMAScript 5 (2009) :: Object Object · Javascript 데이터 유형 중 하나로 다양한 키 모음 및 복잡한 속성들을 저장하는데 사용한다. ※ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object Object.create() · 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 생성하여 반환한다. Object.create(proto [, propertiesObject]) proto 새로 만든 객체의 프로토타입이어야 할 객체 propertiesObject 자신의 속성이 열거가능한 객체는 해당 속성명으로 새로 만든 객체에 추가될 속성 설명자(de.. 2022. 5. 28. [STUDY] ECMAScript5 / ES5 (2009) :: Date 01. ES5 / ECMAScript 5 (2009) :: Date Date · 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담는다. ※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date.now() · UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환한다. var timeInMs = Date.now(); 브라우저 호환성 ※ 참조 (+Poliyfill) : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/n.. 2022. 5. 28. [STUDY] ECMAScript5 / ES5 (2009) :: JSON 01. ES5 / ECMAScript 5 (2009) :: JSON 주요 기능(Features) : JSON · JSON.parse() · JSON.stringify() JSON.parse() · JSON 문자열의 구문을 분석 후 Javascript 값 또는 객체를 생성하여 반환한다. reviver 함수를 인수로 전달할 경우 반환 전 결과를 변경할 수 있다. JSON.parse(text [, reviver]) text Javascript 값 또는 객체로 변환할 JSON 문자열(String) reviver 함수를 인수로 전달할 경우 반환 결과를 변환한다. Example. 기본 예제 const json = '{"result":true, "count":42}'; const obj = JSON.parse(jso.. 2022. 5. 27. 이전 1 2 3 다음 반응형
