자바스크립트16 [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] 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) :: 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. [STUDY] ECMAScript5 / ES5 (2009) 01. ES5 / ECMAScript 5 (2009) Javascript 첫 번째 주요 개정판 ※ es5-shim.js : ~ IE8 등 구형 브라우저에서 ES5 사용가능하도록 하는 라이브러리 브라우저 별 지원 현황 (Support by Browsers) 주요 기능 (Features) Basic · "use strict" · Reserved words as property names · Multiline strings · Trailing commas · Property getters and setters · Function.prototype.bind() [STUDY] ECMAScript5 / ES5 (2009) :: Basic 01. ES5 / ECMAScript 5 (2009) 주요 기능(Feature.. 2022. 5. 27. [STUDY] ECMAScript - 연혁(버전) 및 정리 ECMAScript 연혁(버전) 및 정리 + 웹 경력이 4~5년이지만, 종종 크로스브라우징(IE)을 할때마다 자바스크립트 함수 또는 키워드가 헷갈리는데, jQuery로 쓰면 말끔히 해결되지만. 작년부터 바닐라 스크립트(Vanilla JS) 코드를 되도록 쓰려고 하는 버릇이 생긴 저나 또는 저와 같은 사람들이 확인이 편리하게 편집을 해보았습니다. ECMAScript ECMA-242 ECMA 인터내셔널(ECMA International)에 의해 정의된 ECMA 스크립트 언어 규격의 이름으로, 스크립트 언어에 대한 규격을 명세. ECMAScript ECMA-242 기술 규격에 의해 정의 된 범용 스크립트 언어 (ECMAScript specification). ECMAScript 는 스크립트 언어가 준수해야.. 2022. 5. 22. [PROGRAMMING] 프로그래밍 (Programming) - 이미지 변환(Image Transform) 02 코드 · HTML, CSS(SCSS), 자바스크립트(Javascript) 기능 · 이미지 (preserve-3d) 배치, 네비에기션 버튼을 통한 이미지 회전 1. HTML & CSS 1) 코드 뷰 #main-body .container#example > .content[name="example"] { width: 100%; height: 100vh; padding: 0 1vw; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; /* flex 설정 */ -ms-flex-direction: column; -webkit-flex-direction: column; flex-direc.. 2021. 10. 18. 이전 1 2 다음 반응형
