근래에는 SAPUI5로 view를 제작하고, mock 서버에 로컬에 있는 파일을 업로드하는 것과 CAP Node.js로 csv 파일에 임의로 지정해둔 데이터를 활용해 CDS view를 출력하는 것까지 진행하였었다. 그 이후에는 두 종류의 view를 connect하여 CDS view에서 Identification의 Action 파트를 이용해 버튼을 구현 및 SAPUI5 view 페이지를 invoke하는 것을 수없이 시도했으나, 미흡한 실력인지는 몰라도 계속헤서 실패하였다. 다만, 이 과정에서 javascript로 CDS view에서 융통적으로 활용할 수 있도록 Action의 조건 또는 기능을 다양하게 구현할 수 있다는 점을 깨달았다. 당연히 커스터마이징 하는 데에는 더 많은 공부가 필요하겠지만, 하나 하나 차근 차근 쌓아나가 볼 것이다.
Node.js
Node.js는 크롬의 V8 엔진을 이용해 javascript로 브라우저가 아니라,
서버를 구축하고 서버에서 javascript가 작동되도록 해주는 런타임 환경(플랫폼)이다.
Express
npm install --save express
Express는 웹 및 모바일 애플리케이션을 위한일련의 강력한 기능을 제공하는
간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다.
즉 Express는 Node.js를 사용해 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체인 것이다.
위와 같이 express를 설치하면 package.json에 의존성이 추가될 것이다.
__dirname 과 __filename
// 전체 경로 예시 : /app/market/webapp/index.html
// file 이름 포함한 절대경로
console.log(__filename); // result : /app/market/webapp/index.html
// file 이름 제외 절대 경로
console.log(__dirname); // result : /app/market/webapp
Node를 사용할 때 서로 Module 관계에 있는 경우가 많으며,
이 경우에는 현재 파일의 경로나 파일 이름을 알아야 할 것이다.
Node는 __dirname과 __filename으로 경로에 대한 정보를 제공한다.
파일에 위 두 가지 변수를 넣어두면 실행 시에 현재 파일 이름과 경로로 바뀌게 된다.
다만, Window 사용자인 경우에는 '/' 구분자를 쓰더라도
C:\app\markek\webapp\index.js 경로로 출력될 것이며,
mac이나 linux는 구분자가 동일하게 출력된다.
path Module
const path = require('path');
path Module은 운영체제에 따라 경로 구분자가 달라서 생기는 문제를 해결하기 위해 등장하였다.
path를 사용하면 폴더와 파일의 경로를 쉽게 조작할 수 있어 구분자 문제를 손쉽게 해결할 수 있다.
또한 파일명에서 파일 이름과 확장자를 별도로 분리하여 활용이 가능하다.
Windows와 macOS, Linux가 포함돼 있는 POSIX로 구분할 수 있다.
path.reslove
path.resolve('/a', 'b', 'c') // 인자 c부터 읽기 시작한다.
// result : /a/b/c
// 만약 /a가 root 폴더가 아닐 때에는 root 폴더까지의 경로를 붙여 반환한다.
path.resolve('/a', 'b', 'c') // app/market/webapp/index.js
// result : app/market/webapp/a
path.resolve는 여러 인자를 삽입하였을 때
오른쪽부터 읽어 들어가며 절대경로를 생성하게 된다.
만약 인자 /a가 root 경로의 폴더가 아니라면,
root 폴더까지 경로에 마지막 인자를 붙여 조합된 경로를 반환하게 된다.
path.resolve('/a', 'b', 'c') // /b를 절대경로로 인식하여 /a는 무시된다.
// result : /b/c
path.resolve('/a', 'b', '/c') // /c가 절대경로가 되므로 나머지는 무시된다.
// result : /c
path.resolve의 경우에는 오른쪽 인자부터 차례로 읽어나가다가
/path_name 형태를 만나게 되면 절대 경로로 인식함으로써 그 경로를 반환하게 된다.
그러므로 절대 경로가 아니라면, ./path_name 형태로 표기하여 상대경로임을 인지시켜 줘야 한다.
console.log(path.resolve(''));
// result : /app/market/webapp/index.html
만약 어떠한 인자도 전달하지 않았다면 현재 파일 경로를 제외한 경로를 반환하게된다.
path.join
path.join('/app', 'market', 'webapp', 'index.html');
// result : /app/market/webapp/index.html
path.join('/app', 'market', 'webapp', '..'); // 상대경로 표시하는 ..를 쓰면 한 단계 위의 경로까지만 반환한다.
// result : /app/market
path.join은 상대 경로를 표시하는 '..'과
현재 위치를 표시하는 '.'도 조합해 경로를 반환시켜 준다.
res.sendFile
const express = require('express');
const router = express.Router();
const path = require('path');
const indexPath = path.join(__dirname, '..', '/app', '/market', '/webapp', '/index.html');
router.get('/', (req, res) => {
res.sendFile(indexPath);
})
res.sendFile()을 사용하면
해당 경로의 파일을 읽고 해당 내용을 클라이언트로 전송할 수 있게 해준다.
위 코드를 간략히 설명하자면,
변수 express에 웹 애플리케이션 프레임워크 express로 초기화 해준다.
그리고 router 변수에 Router() 매개변수를 연결시켜줌으로써 데이터 통신을 위한 경로를 선택할 수 있게 한다.
변수 path에는 호출하고자 하는 경로가 담기게 된다.
indexPath에는 클라이언트에 전달할 경롯값으로 초기화하기 위해 존재한다.
path.join으로 보여주고자 하는 절대경로를 지정해준다.
마지막으로 router.get() 메서드에 sendFile() 메서드를 사용하여 페이지를 로드한다.
728x90
반응형
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
[ Javascript ] window.onscroll로 페이지 상단 스크롤 바 만들기 (24) | 2023.12.26 |
---|---|
[ Javascript ] What is the 'httpRequest.readyState == 4'? (0) | 2023.03.06 |
[ Javascript ] How to use 'json.stringify()'? (2) | 2023.02.23 |
[ Javascript ] What is the 'jQuery'? (0) | 2023.02.23 |