PDH 개발 공부

Env Preset 관련 플러인들을 모아 놓고 한 번에 적용하기 위해서 미리 플러그인들을 모아 놓은 것 ECMAScript 년도별로 모아 놓은 것들, stage(0, 1, 2, 3) 레벨별로 모아 놓은 프리셋, 3rd party 프리셋(typescript, react)등 종류가 다양하다. Env Preset은 stage 3 레벨 이상되는 문법의 플러그인들을 설치한다. Env Preset은 다양하고 편리하게 설치되는 플러그인들을 설정할 수 있다.(babel.config.json) 설치 설치 $ npm i -D @babel/core @babel/preset-env @babel/cli 플러그인 항목 확인 $ npm list --depth=1 | grep "@babel/plugin" 설정 및 변환 기본 설정[b..

이 방법은 각각 선택해서 변경 할 수 있는 방법이다. babel plugin 설치 $ npm i -D @babel/core @babel/cli 소스 파일 작성(EX6) 플러그인 적용 블록 스코프 변수 변환(@babel/plugin-transform-block-scoping) $ npm i -D @babel/plugin-transform-block-scoping $ npx babel src/ex01.js -o dist/ex01.01.js --plugins @babel/plugin-transform-block-scoping $ cat dist/ex01.01.js 객체분해-파라미터 변환(@babel/plugin-transform-parameters) $ npm i -D @babel/plugin-transfor..

Babel 이란? 웹 애플리케이션 기반 기술 중 하나로 입/출력이 모두 자바스크립트 코드인 컴파일러 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 컴파일러였으나, 현재는 바벨을 이용해서 리액트 JSX 문법, 타입스크립트, 코드 압축,제안(proposal) 단계에 있는 문법 등을 사용할 수 있음 Core 라이브러리 변환 규칙을 소스에 적용해서 변환 파일을 생성한다. 변환 규칙은 가지고 있지 않다 바벨 플러그인이 변환 규칙을 가지고 있다. 코어 라이브러리 설치 $ npm i -D @babel/core 코어 라이브러리 사용해보기 const babel = require('@babel/core'); const result = babel.transform("const fn = () => 1;", {}); ..

테스트 자바스크립트 단위 테스트 도구 Java : JUnit == JavaScript : JSUnit() 자바스크립트 단위 테스트 도구는 20여가지가 넘게 있다. JSUnit 프로젝트 ---> Jasmine (2010년~현재) 자체 assertion을 가지고 있다 DOM 직접 조작 애플리케이션(JQuery 기반) -> QUnit(세팅하기 쉽고 간편하게 테스트) Node 기반 백엔드 어플리케이션 테스트 -> Mocha(Promise 기반 비동기 테스트) Promise 기반 비동기 테스트 자체 Assertion 대신 외부 assertion 라이브러리 다양하게 지원하다 . (chai , should.js , expeact.js) 유연하고 확장성이 좋다,. Jasmine , Qunit , Mocha , Jest..

JavaScript의 비동기 처리 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트 특성 비동기 처리 사례 1 // 흔한 사례로는 제이쿼리의 ajax , // 제이쿼리로 실제 웹 서비스를 개발 할 때 ajax통신을 주로 한다 // 보통 화면에 표시할 이미지나 데이터를 서버에 불러 와야할 때 function getData(){ var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; console.log(getData()); // undefined } $.get() ajax 통신을 하는 부분 https:..

참고 JavaScript: What the heck is a Callback? CallBack 함수란? 나중에 호출 되는 함수 특별한 선언이나 문법적 특징을 가지고 있지는 않다. 일반적인 자바스크립트 함수 어떤 이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출하는 함수 CallBack 함수가 필요한 이유? 자바 스크립트는 이벤트 기반 언어 이다 즉 자바 스크립트는 다음 명령어를 실행하기전 이전 명령어를 읍당을 기다리기 보단 다른 이벤트들 계속 명령을 수행 function first(){ console.log(1); } function second(){ console.log(2); } first(); second(); 예상하듯이 first 함수가 먼저 실행 그 이후로 second 함수가 실행이 되..

화살표 함수 화살표 함수는 짧은 문자로 함수를 표현이 가능하다 기본 함수 기존(Basic) // 기존(Basic) let add = function(x,y){ return x + 6; }; console.log(add(10,20)); // 30 축약(ES6) // let add = (x, y) => x + y; console.log(add(10, 20)); // 30; console.log(add instanceof Function); // true // 즉 Arrow Functions 도 function 이다 여러 매개 변수가 있는 함수 (p1, p2, ..., pn) => expression; => expression // 다음 표현식 => { return expression; } // 다음 표현식과..

참고 https://velog.io/@mactto3487/%EC%8A%A4%ED%84%B0%EB%94%94-EJS EJS EJS는 Embedded Javascript의 약자로 많은 템플릿 엔진 중 하나이다 템플릿과 템플릿에 보여주고 싶은 데이터가 있을때 템플릿 엔진이 이 둘을 합쳐 결과 페이지를 생성해낸다. 환경 설정 ejs 모듈 설치 npm install ejs --save app.js에 다음 추가 const templateRouter = require('./router/template') ... app.use('/template' , templateRouter); template.js 파일 생성이후 다음 소스 추가 var express = require("express"); var router = e..