WEB: Frontend

HTML5, CSS3, 자바스크립트 Javascript 등

Node.js: Ace (Syntax Highlighter) 설치하기 (Webpack 4 기준)

참고 사이트 https://github.com/ajaxorg/ace/blob/master/demo/webpack/demo.js#L12 https://ace.c9.io/#nav=embedding   npm 설치하기 npm i ace-builds –save-dev npm install @types/ace –save-dev npm i file-loader –save-dev   메인 js 파일 작성 require(‘./dist/test.css’) // CSS 로딩 방법 import ace from ‘ace-builds/src-noconflict/ace’ import “ace-builds/webpack-resolver”; // npm i file-loader –save-dev var editor = ace.edit(“editor”); editor.setTheme(“ace/theme/monokai”); editor.session.setMode(“ace/mode/javascript”);   템플릿 HTML 작성 더보기…

글쓴이 yoonbumtae (BGSMM), 전

Node.js: Webpack 4 추가 설정 (CSS, HTML, dev-server) 빌드 및 배포

Node.js: 설치, 코드 실행 (Windows 기준) Node.js: Webpack 설치하기 (Webpack 4 버전 기준) 1. 아래 명령어들을 터미널에 입력합니다. npm install –save-dev html-webpack-plugin npm install –save-dev css-loader npm install –save-dev style-loader npm install –save-dev webpack-dev-server   2. webpack.config.js 파일을 다음과 같이 작성합니다. // webpack.config.js var HtmlWebpackPlugin = require(‘html-webpack-plugin’); var path = 더보기…

글쓴이 yoonbumtae (BGSMM), 전

Node.js: Webpack 설치하기 (Webpack 4 버전 기준)

이전 글: Node.js: 설치, 코드 실행 (Windows, macOS 기준)   Webpack은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)라고 합니다.   1. npm으로 Webpack 설치 npm install webpack –save-dev 옵션에서 –save-dev는 로컬 폴더에만 (위 예제에서는 d:\dev\nodejs\ 폴더 내에서만) 더보기…

글쓴이 yoonbumtae (BGSMM), 전

Node.js: 설치, 코드 실행 (Windows, macOS 기준)

Node.js는 구글 크롬 브라우저에서 사용되는 V8엔진을 탑재한 런타임(실행환경)입니다. 자바스크립트를 웹 뿐만 아니라 아니라 백엔드 서버 개발, 데스크탑 소프트웨어 개발, IoT 개발 등에서도 자바스크립트가 이용될 수 있도록 자바스크립트 엔진의 적용 반경을 확장시키는 역할을 합니다.   1. https://nodejs.org/ko/ 에서 안정적이고 신뢰적인 LTS 버전을 받습니다.   2. 받은 파일을 설치합니다. 계속 [다음] 버튼만 누르고 완료하면 더보기…

글쓴이 yoonbumtae (BGSMM), 전

넥사크로(Nexacro): 데이터베이스에 읽고 쓰기 및 기타

Deploy 수행 Build > Deploy… > Deploy Application >  을 클릭한 다음 경로는 이클립스 동적 웹 프로젝트 폴더의 WebContents 폴더로 설정합니다. 프로젝트에 폼 설정 childframe으로 이동 후 Appearance의 formurl에서 설정합니다. 폼 간 이동 this.toFrmTest_onclick = function(obj:Button, e:nexacro.ClickEventInfo) { this.go(“Base::FrmPortal.xfdl”); } Base 폴더 밑의 FrmPortal.xfdl 파일명의 폼으로 이동합니다. 전역 변수 사용  alert(application.[전역 더보기…

글쓴이 yoonbumtae (BGSMM), 전

자바스크립트: for문 안에 setTimeout 함수 사용하는 방법 (IIFE, 재귀함수)

만약에 var ducks = ["첫째 오리", "둘째 오리", "셋째 오리", "넷째 오리", "다섯째 오리"] 이런 배열이 있고 이걸 1초 간격으로 하나씩 화면에 뿌리는 페이지를 만드는 상황이라고 가정합니다. 시간을 지연시키는 함수로 setTimeout(function(){…}, delayMillisecond)가 있습니다. 콜백 함수와 지연할 시간을 밀리세컨드 단위로 입력해서 사용합니다. 1초 간격으로 반복하고 싶다면 이 기능을 for문으로 돌리면 될까요? var ducks 더보기…

글쓴이 yoonbumtae (BGSMM), 전

자바스크립트: 콘솔 로그(console.log) 사용법, 로그에 CSS 적용, 로그 그룹화 하기

콘솔 로그는 다음과 같이 사용합니다. console.log(obj1 [, obj2, …, objN]); console.log(msg [, subst1, …, substN]); 콘솔 레벨에 따라 log 대신 warn, error 등을 사용할 수도 있습니다.  warn은 경고의 의미로 주황색으로 표시되며, error는 에러의 의미로 빨간색으로 사용됩니다. 이 외의 레벨은 잘 사용되지 않습니다. (MDN Console 링크) 다음 예제로 작성된 변수들을 콘솔로 더보기…

글쓴이 yoonbumtae (BGSMM), 전

Vue.js: 기초 사용 방법 + 예제: 이름으로 보는 운세

Vue.js 소개 및 매뉴얼: https://kr.vuejs.org/v2/guide/ 인스턴스의 라이프사이클 beforeCreate: 인스턴스가 초기화 된 직후 데이터 관찰 및 이벤트 설정 전에 동기적으로 호출되는 단계입니다. create: 인스턴스가 작성된 후 beforeCreate 다음 단계에 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다.  data 속성에 접근할 수 있는 단계이므로 서버에 데이터를 더보기…

글쓴이 yoonbumtae (BGSMM), 전