728x90
반응형

 

Node.js

 

개발을 하다보면 여러가지 개발환경을 맞닥뜨리게 된다. 오늘 아침에 개발자들하고 얘기하다가 우연히 Node.js 얘기가 나왔고 정체가 궁금해졌다. 자바스크립트의 변신은 어디까지 일까? Node.js에 대해 파헤쳐보자. 

먼저 Node.js란 무엇인가? 우리들의 위키백과를 찾아봤다.

- 위키백과사전
Node.js는 크로스플랫폼 오픈소스 자바스크립트 런타임 환경으로 윈도우, 리눅스, macOS 등을 지원한다. Node.js는 V8 자바스크립트 엔진으로 구동되며, 웹 브라우저 바깥에서 자바스크립트 코드를 실행할 수 있다. 주로 확장성 있는 네트워크 애플리케이션과 서버 사이드 개발에 사용되는 소프트웨어 플랫폼이며, 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며, 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다.

자바언어의 경우, 각 OS 마다 JVM(Java Virture Machine)이 따로 있어서 각 OS에 맞게 설치해줘야 한다. 이걸 기준으로 자바로 작성되면 어느 환경에서나 돌이가는 것이다.
Node.js는 어떻게 처리될까?
각 OS 별로 설치파일이 있을거라고 생각한 나의 기대는 무너졌다. [node-v20.11.0-x64.msi] 하나만 다운로드 된다.

백문이 불여일타! 설치를 해보자.

먼저 아래 사이트에서 다운로드를 받는다. 최신 버전 보다는 안정화된 버전을 받는게 나아 좌측의 [node-v20.11.0-x64.msi]를 다운로드 받았다.

 

https://nodejs.org/en

 

특별한 경우가 아니라면 default로 설치하는 걸 권장한다. 아래와 같이 따라가보자.

 

설치 완료 후, 윈도우 메뉴에서 찾아보면 'N'에서 설치 완료된 사항을 찾아볼 수 있다.

 

자, 설치가 완료되었다. 이제 무엇을 할 수 있을까?

아래 사이트를 가보면 Node.js 관련 예제 소스들을 볼 수 있다.

 

https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

 

const http = require('node:http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

server.js 파일이름으로 저장한다.

아래와 같이 Node.js command prompt를 연다.

 

 

Node.js command prompt에서 node server.js 를 날리면 아래와 같이 3000포트에서 응답을 기다리게 된다.

 

브라우저에서 http://127.0.0.1:3000 으로 아래와 같이 확인이 가능하다.

 

자, 이제 시작했으니 반 이상 왔다.

 

빠르게 사이트를 구축할 필요가 있을 때, 매우 유용할 것 같아 나도 더 깊이 공부해봐야 할 것 같다.

더 좋은 소스가 준비되면 2차를 올리도록 하겠다.

728x90
반응형

'웹개발' 카테고리의 다른 글

전자정부 프레임워크(eGovFrame 4.3)  (3) 2025.03.25
이클립스 단축키 모음  (1) 2024.01.27
웹스퀘어(WebSquare)란?  (2) 2023.12.30
728x90
반응형

인스웨이브사의 웹스퀘어는 웹표준을 따르는 UI/UX 개발툴이다. 웹 표준을 준수한 UI프레임워크로 UI컴포넌트와 Util API, 통합 개발 도구 제공하는 솔루션이라고 한다. 쉽게 말해 프론트 화면 개발 툴이다.

 

함께 언급되는 툴로는 투비소프트의 Nexacro, xPlatform과 토마토시스템의 eXbuilder등이 있다.

옆 개발자분들에게 물어보니 웹스퀘어 보다 넥사크로가 100배는 좋다고 한다. 참고로 넥사크로를 써본 경험이 없어 패스~

 

1. 구성 및 설정

웹 표준 준수로 설치과정에 별도의 Installer 및 Active-x등이 존재하지 않는다.

별도 설치과정 없이 Web Resource와 함께 포함되어 구성되며, 이때 WebSquare를 구동하기 위한 Servlet, 즉 웹 스퀘어 엔진을 등록하고 서버 설정 디렉토리를 지정해주면 된다.

2. 화면 호출 방식

웹스퀘어로 개발 된 화면파일은 단독으로 브라우저에서 실행할 수 없다.

화면 파일은 웹스퀘어 JavaScript 엔진을 통해 실시간 해석되어 브라우저에 표시된다.

웹스퀘어 엔진은 서버에 배포된 websquare.html 파일을 통해 호출되고 엔진 로딩이 끝나면 실행된다. 즉, 모든 웹스퀘어 화면 파일은 websquare.html을 통해 실행된다.

일반적으로 화면 파일의 정보는 Get 방식의 파라미터를 통해 웹스퀘어 엔진에 전달된다.

http://domain.com : 서버 도메인

/websquare/websquare.html : 웹스퀘어 엔진 로딩 및 실행파일

HTML의 DocType, Meta등 정의

파일명 변경 가능하여 용도에 따라 파일 여러개 사용 가능

파일 확장자를 jsp로 변경할 수 있다.

?w2xPath=/MA/MA01M01.xml :웹 스퀘어 화면 파일 경로.

웹 스퀘어 엔진이 xml(UI grid)파일을 해석하여 HTML과 JavaScript를 생성하고 실행.

 

3. Service Architecture

서버 통신 플로우는 아래와 같다.

4. 구성

4.1. Design 탭

컴포넌트를 선택하여 배치할 수 있다. 만약 시스템 브라우저 외에 다른 브라우저를 등록하려면, 'Execute external program'을 클릭하여 브라우저를 등록할 수 있다. 컴포넌트는 속성(P), 이벤트(E), API로 제어된다. 컴포넌트에 id를 부여하면, 해당 id가 페이지 내에서 자동으로 전역 변수로 등록되므로, Script 탭에서 사용 가능하다.

 

4.2. Script 탭

JavaScript 로직을 작성한다. 파일을 생성하면 아래의 이벤트가 자동으로 등록된다.

  • onPageLoading : 페이지 로딩 후 실행(모든 컴포넌트를 그려준 이후에 반영됨)
  • onPageunload : 페이지 종료 후 실행

참고로 WebSquare는 기본 namespace 기반의 코딩을 하며, 디폴트로 사용하는 객체명은 scwin이다. 페이지를 닫을 때 해당 자원을 자동으로 삭제하는 기능을 이용할 수 있다고 한다.

 

4.3. DataCollection 탭

data 객체를 생성하고 관리한다.

  • DataMap : 단건 data 관리
  • DataList : 다건 data 관리
  • LinkedDataList : 생성된 dataList에서 별도의 조건을 주어 filter된 data를 확인한다.(뷰어용으로 제한적으로 사용됨)
  • AlliasDataMap : Page Coding에서 자식이 부모의 dataMap 객체를 참조할 때 사용
  • AlliasMataList : Page Coding에서 자식이 부모의 dataList 객체를 참조할 때 사용

 

4.4. Submission 탭

웹스퀘어의 통신 객체를 생성 및 관리한다. 웹스퀘어에서는 <form>을 이용한 전송 방식으로 통신하지 않고, Submission 객체를 생성하여 통신한다.

 

4.5. Source 탭

각 탭에서 정의한 내용을 xml 파일로 확인할 수 있다. 직접 코딩도 가능하지만, 실수 방지를 위해 코딩은 Script탭에서 하는 것을 권장 한다. 실제로 Source 탭에서 변경 후, 재기동 했을 때 알 수 없는 에러가 많이 발생한 경험이 있다.

 

5. WebSquare XML 도식화 구조

 

[웹개발] 웹스퀘어란?

이직한 회사의 시스템을 하나씩 파악중인데, 큰 기업이고 업력이 아주 오래된 기업이라 시스템도 최첨단일수도 있겠다? 라는 안일한 생각을 했다... 정보기술팀에서 근무하게 되었는데, 우선 가장 큰 두개의 시스템이 있는데, 한개의 시스템만 이중화되어 있다고 한다. 이중화를 안하고 운영하는 시스템이라 그럴수도 있겠다 싶었는데, 서버 장비도 모두 노후되지 않았을까 하는 생각을 하게 되었다. 그리고 문제는, 외계인코드가 아주 많다. 시스템도 다 흩어져 있었기 때문에, 팀장님이 웹스퀘어를 적용해서 하나의 시스템으로 묶는것을 구상중인것 같다. 그...

metaverse-cloud.tistory.com

728x90
반응형

'웹개발' 카테고리의 다른 글

전자정부 프레임워크(eGovFrame 4.3)  (3) 2025.03.25
이클립스 단축키 모음  (1) 2024.01.27
Node.js 란?  (0) 2024.01.17

+ Recent posts