react 프로젝트 생성을 위해 "npx create-react-app 프로젝트명" 명령어를 사용해 생성했다. 생성된 폴더 구조는 아래와 같다. 해당 구조를 알기 전에 NPM(Node Package Manager) 에 대해 알아야한다. NPM(Node Package Manager)npm 은 node.js 를 위한 패키지 관리 매니저이자 node.js 를 위한 오픈소스 생태계이다.npm 은 node.js 에서 사용하는 모듈들을 패키지로 만들어 의존성, 필요한 라이브러리 등관리해준다.  package.jsonpackage.json 파일은 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다.기본적으로 "npm init" 명령어를 통해 생성할 수 있다. // package.json{ "nam..

NodejsNode.js 는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 실행을 위한 Runtime 환경이다.Javascript 는 일반적으로 크롬과 같은 브라우저에서 내장되어 있는 Javascript 런타임 환경으로 인해실행된다. 이러한 Javascript 를 개발자 로컬 환경에서 실행시키기 위해 사용하는게 Node.js 이다. 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 말한다.Javascript 언어도 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서동작하는 프로그램이기 때문에 Javascript 런타임 환경이 필요하다. Express공식홈페이지에서 나온 설명을 보면 Express 는 웹 및 모바일 어플리케이션을 위한 일련..

화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..

input type="text" 형식으로 된 input 태그에 전화번호 입력 시 앞자리 숫자에 따른 자동 하이픈 삽입이필요하여 구현하였다. Javascriptconst cellNumHyphen = (target) => { let value = target.value; if (!target.value) { return ""; } value = value.replace(/[^0-9]/g, ""); const result = []; let restNumber = ""; // 시작번호 02 if (value.startsWith("02")) { result.push(value.substr(0, 2)); restNumber = va..

Object Object.values(object)객체의 속성값들만 배열로 만들어준다.let obj = { a: 'obo', b: 'test' };Object.values(obj);// 결과// ['obo', 'test'] Object.entries(object)객체의 속성명과 속성값을 2차원 배열로 만들어준다.let obj = { a: 'obo', b: 'test' };Object.entries(obj);// 결과// [['a', 'obo'], ['b', 'test']] Object.getOwnPropertyDescriptors(object)객체의 모든 속성 설명들을 보여준다.let obj = { a: 'obo', b: 'test' };Object.getOwnPropertyDescriptors(obj)..

DataTables 를 사용하면서 테이블 column 칸에 데이터 양이 많아 모두 보여줄 수 없을 때sliding 기능을 사용한다. DataTables Columns 설정table = $('#manager-usedHistory-table').DataTable({ dom : "Bfrtip", paging : false, searching : false, buttons : [], language:eval(datatable_lang), processing: true, columns: [ ...이하생략 { data: null, className: "text-center", //defaultContent: ""+..