즐거운인생

본 포스트는 Node.js 에서 모듈 시스템 방식을 ES 방식을 사용했을 경우 발생하는 오류 및 해결에 대한 설명입니다.

Node.js의 모듈 시스템은 기본적으로 CommonJs 명세를 따릅니다. 하여 모듈을 사용할 경우에는 아래와 같이 require를 사용하여 필요한 모듈을 참조할 수 있습니다.

const express = require('express');

하지만 요즘은 많은 프로젝트 들에서 ES 기반의 모듈 시스템을 사용하여 아래와 같이 모듈을 참조할 수 있습니다.

import express from 'express';

위 두 구분은 동일한 역할을 하지만 Node.js 애플리케이션을 작성할 때 위와 같이 작성하면 서버를 구동할 때 아래와 같은 오류를 만나게 됩니다.

(node:1463) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/a20201022/Documents/expressServer/src/app.js:1
import express from "express";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

해당 오류를 해결하기 위해서는 package.json에 아래 한 줄을 추가합니다.

{
    "type": "module"
}

위 설정은 프로젝트 전체에 적용되며 해당 프로젝트에 ES 기반의 모듈 시스템을 사용할 수 있게 해줍니다.

본 포스트는 광고 플랫폼인 카카오 애드핏으로 블로그에 광고를 붙였을 때의 수익분석에 대한 글입니다.

'22년 7월 초 정도에 호기심에 블로그에 광고 플랫폼을 연동해 보았습니다. 일단은 티스토리에서 연결을 제공하는 광고 플랫폼 중 구글 애드센스와 카카오 애드핏을 연동해 보았습니다. 구글 애드센스는 7월 중순이 넘어가고 있지만 아직 "준비 중" 상태로 승인이 되지 않고 있습니다. 

하지만 카카오 애드센스는 어느 정도의 게시물이 있다면 바로 승인이 되어 블로그에 광고를 삽입할 수 있습니다. 광고를 삽입하여 블로그를 운영하다 보면 수익에 대해서 궁금해지는데, 이 내용을 분석하기가 정말 쉽지 않습니다.

먼저 7월 1일부터의 티스토리 방문자 추이입니다.

초기에는 적었지만 검색 엔진 등록 등 노력한 결과 일별로 100~200 건의 방문수가 발생하고 있습니다. 그럼 이번에는 카카오 애드핏 수익 그래프를 한 번 보겠습니다. (사실 저도 광고 플랫폼을 사용해 보는 건 처음으로 어느 정도의 수익이 발생하는지에 대한 감은 전혀 없습니다.)

가장 많은 날이 7월 8일이었는데 3,187원을 기록했습니다. 사실 이날까지는 8일이 방문자가 가장 많았던 터라 방문자를 늘리면 수익이 늘어날 거라고 생각했지만, 이 생각이 7월 13일에 깨졌습니다. 13일은 그 날까지는 방문자가 가장 많은 날이었는데, 수익은 현저하게 감소했습니다. 15일도 마찬가지 입니다. 다시 최대 방문자수를 갱신했지만 수익은 폭- 고꾸라진 것을 확인할 수 있습니다.

하여 카카오 애드핏 사이트를 방문해서 자료를 확인해보았습니다. 애드핏 관리 페이지는 아래 URL로 접속하시면 됩니다.

https://adfit.kakao.com/info

로그인해서 보고서 > 매체별 보고서 화면을 선택합니다.

화면 하단에서 일자별 수익금액을 확인할 수 있습니다.

일자별 예상적립금과 어떤 수치가 관련이 있는지 궁금하여 수치를 확인해 보면 의외로 중요하다고 생각했던 광고노출수, 클릭수 등은 크게 상관이 없어 보입니다. (물론 노출과 클릭이 없으면 수익이 없긴 합니다.) 표에서 눈에 띄는 수치는 CPC입니다 CPC값이 변동됨에 따라 예상적립금도 따라 움직이는 것을 확인할 수 있습니다.

카카오 고객센터의 "보고서" 영역에서 CPC 값에 대한 설명을 아래와 같이 찾을 수 있습니다.

결국 클릭 당 벌어들이는 수익이라는 의미인데, "광고주의 입찰 상황에 따라 변동될 수 있습니다."라고 기재되어 있습니다. 다른 분들도 이 CPC가 변동되는 사유에 대해 궁금했었는지, 해당 내용의 FAQ도 있습니다.

광고주가 입찰하는 가격이 변동되므로 변동된다는 의미는 이해가 되는데, "매체 지면의 효율에 따라"라는 이야기는 아직 정확히 이해가 되지 않습니다. 이런 저런 실험은 해보겠지만 플랫폼에서 가격 변동의 키를 가지고 있는 이상 아마 파악은 거의 불가능하지 않을까 싶습니다 ㅠㅠ

본 포스트에서는 Front-end는 리액트, Back-end는 Express 기반의 Node.js를 사용하여 하나의 프로젝트로 간단한 Application을 구성해 보겠습니다. 구성할 Application은 이전 포스트에서 진행했던 네이버 API 조회 Application을 재사용 하겠습니다.

이전 포스트에서 진행했던 Naver API 조회 프로젝트는 연습은 할 수 있는 아키텍처이나 실제로는 사용할 수 없는 아키텍처 입니다. 브라우저에 있는 CORS 정책을 사용자가 해제해주지 않으면 실행이 되지 않는 구조이기 때문입니다. 하이브리드 앱으로 애플리케이션을 구성한다면 사용이 가능하지만 웹 페이지로는 사용이 불가능합니다.

그래서 Naver API를 조회하는 부분은 서버로 로직을 옮겨 서버 to 서버 인터페이스로 변경하고 화면에서는 동일한 Domain(IP)에 있는 서버 인터페이스를 사용하여  CORS 정책을 해제하지 않고도 사용할 수 있는 아키텍처로 변경하겠습니다.

위 그림과 같은 구성은 다른 서버와의 인터페이스 주체가 서버이므로, 서버 간 통신에는 브라우저의 CORS 정책이 영향을 주지 못합니다. 이렇게 로컬 서버에서 Naver API 서버와 통신하여 데이터를 받아온 후 동일한 Domain(IP)에 있는 화면에서 해당 정보를 사용해서 검색 기능을 구현해 보겠습니다.

먼저 아래 포스트를 참고하여 Express 기반의 Node.js 개발 환경을 구성합니다.

https://redballs.tistory.com/entry/Nodejs-Express-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95?category=569060 

포스트를 따라서 구성하고 프로젝트를 구동해보면 "Hello World"를 확인할 수 있습니다. 하지만 우리는 TypeScript를 사용하기로 했으니 필요한 모듈을 설치하고 프로젝트 구조를 살짝 변경해 보겠습니다.

TypeScript 설치

개발 의존성으로 node와 express 라이브러리의 타입을 설치합니다.

D:\workspace\expressServer> yarn add --dev @types/node
D:\workspace\expressServer> yarn add --dev @types/express

app.ts 로 변경

./src/app.js 프로그램을 ./src/app.ts 로 변경하고 아래와 같이 작성합니다. 기본적인 내용은 변경이 없고 필요한 부분에 타입만 추가합니다.

import express, { Request, Response } from "express";
import path from "path";

const app = express();

app.use(express.static(path.join(__dirname, '../public')));
app.get('/', (req: Request, res: Response) => {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen('8001', () => {
    console.log('Server started');
});

타입 스크립트 컴파일 옵션 설정

프로젝트 루트에 tsconfig.json 파일을 아래와 같이 작성합니다.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    }
}

사용하는 컴파일 옵션에 대한 설명은 제 블로그의 아래 글을 참고해주세요.

https://redballs.tistory.com/entry/React-%EA%B8%B0%EC%B4%88-%EB%AA%A9%EB%A1%9D-TypeScript-03-Hello-World?category=566801 

컴파일 옵션까지 작성했으면 tsc 명령으로 컴파일을 진행합니다. 컴파일한 결과 파일은 ./dist 하위에 생성됩니다.

D:\workspace\expressServer> tsc

실행 확인

현재는 start 스크립트를 ./src/app.js로 설정해 두었는데 이제는 컴파일한 ./dist/app.js 파일을 사용해야 하므로 package.json 파일의 start 스크립트를 아래와 같이 변경합니다.

"scripts": {
  "start": "node ./dist/app.js"
}

변경 후 yarn start 명령어로 로컬 서버를 기동하여 브라우저에서 "Hello World"가 잘 출력되는지 확인합니다. 현재까지 진행한 프로젝트 폴더 및 파일 구조는 아래와 같습니다.

본 포스트는 Express 기반의 Node.js 애플리케이션 서버를 구성하고 static 경로를 설정하는 방법을 설명합니다.

서론

Node.js 서버 애플리케이션을 개발할 때 주로 사용하는 Framework는 Express와 Nest 정도가 있습니다. 장단점은 생각보다 명확합니다. Express는 빠르고 자유롭습니다. Express는 구조에 대한 자유도가 높기 때문에 특별히 Framework에서 제한하고 있는 구조가 없습니다. 이런 부분으로 애플리케이션을 빠르게 개발하고 프로토타이핑 해 볼 수 있는 장점이 있는 반면, 이 부분은 약점이 되기도 합니다. Express 같은 경우에는 개발자마다 개발하는 스타일이 충분히 다를 수 있어 프로젝트마다 완전히 다른 언어로 개발된 것처럼 보일 수도 있습니다.

Nest는 이런 점에서 완전히 반대편에 서 있습니다. Nest 역시 Express를 기반으로 만들어졌지만 Spring Framework가 떠오를 만큼 명확한 구조가 있습니다. Spring의 annotation과 유사하게 decorator를 제공하여 대규모의 애플리케이션을 일관성 있는 구조로 작성하고 운영할 수 있습니다.

하지만 Nest를 사용하다 보면 JavaScript의 장점인 자유롭고 가벼운 특성을 느끼지 못할 정도로 빡빡합니다. 개인적인 사견이기는 하지만 이럴 거면 굳이....왜? 라는 생각이 들기도 합니다. 대한민국에서 서버는 Spring 이라는 대중적인 Framework가 있으니깐 말입니다.

Express 기반 환경 설정

이번 포스트에서는 Express를 기반으로 서버를 간단하게 구성할 수 있는 환경설정을 진행해 보겠습니다. 기회가 되면 Nest에 대한 부분도 다음에 포스팅 해보겠습니다.

먼저 프로젝트 폴더를 하나 생성합니다.

D:\workspace> mkdir expressServer
D:\workspace> cd expressServer
D:\workspace\expressServer>

프로젝트를 초기화합니다.

D:\workspace\expressServer> yarn init -y

필요한 모듈을 설치합니다. 

D:\workspace\expressServer> yarn add express

VSCode에서 프로젝트를 엽니다.

VSCode에서 반입한 프로젝트의 현재 구조는 아래와 같습니다.

프로젝트에 ./src 경로와 ./public 경로를 생성합니다. src는 JavaScript 애플리케이션 소스를 작성하고 public 폴더에는 html, css, image 등과 같은 정적 resources를 관리합니다.

먼저 public 경로 하위에 index.html 을 아래와 같이 작성합니다. 그냥 "Hello World"라는 텍스트만 표시합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Express Sample</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    </head>
    <body>
        <div id="app">Hello World</div>
    </body>
</html>

다음은 src 경로 하위에 app.js 파일을 아래와 같이 작성합니다.

const express = require('express');

const app = express();
app.listen('8001', () => {
    console.log('Server started');
});

기존 Java 애플리케이션을 생각하면 정말 믿기 힘들 정도로 간단한 내용입니다. 이제 package.json 파일에 start 스크립트를 추가합니다.

{
  "name": "expressServer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.1"
  },
  "scripts": {
    "start": "node ./src/app.js"
  }
}

여기까지 작업하고 웹 서버를 구동해 봅니다.

D:\workspace\expressServer>yarn start
yarn run v1.22.17
$ node ./src/app.js
Server started

너무나 간단하게 구동이 되어버렸습니다. 웹 서버가 구동되었으니 브라우저로 접속해서 확인해 봅니다.

해당 포트로 Listen을 설정했을 뿐 라우팅을 하나도 추가하지 않았으므로 위와 같이 GET으로는 루트에 접근할 수 없다는 "Cannot GET /"이라는 오류 메시지가 표시됩니다.

이제 app.js에 정적 static 경로를 설정하고 루트 경로 라우팅을 추가합니다.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, '../public')));
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen('8001', () => {
    console.log('Server started');
});

express.static 메소드를 사용해 정적 경로를 선언할 수 있는데, 현재 app.js 파일의 경로가 ./src 하위이므로 한 경로 상위의 ../public 경로를 정적 경로의 루트로 선언합니다.

그 다음 루트 경로에 Get 방식 라우팅을 추가하고 루트 경로로 접근할 경우 ../public/index.html 파일을 응답합니다.

여기까지 작성하고 다시 웹 서버를 중간 후 구동합니다. Ctrl + C 로 구동을 중단할 수 있고, yarn start 명령으로 재시작 합니다. 시작 후 브라우저로 루트 경로로 접근하면 아래와 같이 "Hello World"를 확인할 수 있습니다.

간단한 정적인 화면을 표시할 수 있는 웹 애플리케이션을 Express를 사용해서 설정해 보았습니다.

본 포스트는 React에서 배열을 다룰 때 발생할 수 있는 오류인 Each child in a list should have a unique "key" prop 오류 원인 및 해결 방법에 대해 설명합니다.

React로 개발할 때 목록 구현을 위해 보통 아래와 같이 개발합니다.

const NewsRow = ({title, pubDate, description}) => {
    return (
        <li>
            <div className="title">
                <a href="#" dangerouslySetInnerHTML={{__html: title}}></a>
            </div>
            <div className="cont">
                <span className="date">{pubDate}</span>
                <span dangerouslySetInnerHTML={{__html: description}} />
            </div>
        </li>
    );
};

...
articles.map((v, inx) => {
    return <NewsRow {...v} />
})
...

위와 같이 개발하면 UI에는 목록이 표시되지만 브라우저 콘솔 로그에 아래와 같은 오류가 나타납니다.

react.development.js:217 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ListView`. See https://reactjs.org/link/warning-keys for more information.
    at NewsRow (webpack://searchNaverApi/./src/component/listview.component.jsx?:37:20)
    at ListView (webpack://searchNaverApi/./src/component/listview.component.jsx?:91:66)
    at div
    at RecoilRoot_INTERNAL (webpack://searchNaverApi/./node_modules/recoil/es/index.js?:4225:3)
    at RecoilRoot (webpack://searchNaverApi/./node_modules/recoil/es/index.js?:4391:5)
    at App

React는 사용자가 개발한 컴포넌트의 상태가 변경되면 Re-Rendering을 하는데, 컴포넌트와 DOM의 Element 간의 관계를 생성할 때 "key" prop을 사용합니다. 따라서 key prop을 설정하지 않았다면 최초 1회는 문제 없이 Rendering을 했다 하더라도, 상태가 변경됨에 따라 오류들이 발생할 수 있습니다.

가장 간단한 해결책은 배열 요소의 인덱스를 넘기는 방법입니다.

articles.map((v, inx) => {
    return <NewsRow key={inx} {...v} />
})

하지만 위 코드는 샘플에서나 사용할 뿐, 실제로는 되도록 해당 배열에서 고유한 값을 사용해야 합니다. JavaScript의 배열은 동적으로 변경이 일어날 수 있으므로 인덱스 값은 언제든지 변할 수 있습니다. 위와 같은 경우의 예라면 뉴스의 게시물 번호 등을 사용해서 해당 Row에서 변하지 않는 고유한 값을 사용하는게 가장 좋습니다.

articles.map((v, inx) => {
    return <NewsRow key={v.articleId} {...v} />
})

이런 형태로 설정하고 나면 브라우저의 콘솔에 오류 로그가 사라졌음을 확인할 수 있습니다.

이 포스트는 VSCode에서 Node.js 설치 후 npm, tsc 등 명령을 실행했을 경우 "'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고..." 오류가 발생하는 현상에 대한 해결입니다.

아래 그림과 같이 기본적으로 Windows VSCode는 기본 터미널이 Windows powershell로 되어 있습니다.

옆에 [+] 버튼을 클릭해서 Command Prompt를 띄우셔서 작업하시면 됩니다.

VSCode의 기본 터미널의 종류를 변경하는 방법은 아래와 같습니다.

1. CTRL + SHIFT + P

위 단축키를 눌러 창을 띄운 다음 Terminal: 로 검색하여 "Terminal: Select Default Profile"을 선택합니다.

2. Command Prompt 선택

터미널 종류 중 Command Prompt를 선택합니다.

3. 새 터미널 실행

[터미널] > [새 터미널] 을 실행하면 Command Prompt 터미널이 실행됩니다.

본 포스트는 협업을 위해 Github에 업로드 되어 있는 프로젝트를 비주얼 스튜디오 코드로 체크아웃 하는 방법을 설명합니다.

1. 체크아웃 대상 프로젝트

다른 포스트에서 진행했던 searchNaverApiTs 프로젝트를 체크아웃 해보겠습니다. Github 경로는 아래와 같습니다.

https://github.com/lgcjh0s/searchNaverApiTs 

2. 프로젝트 폴더 생성

Workspace 폴더를 하나 생성합니다.

D:\> mkdir reactWorkspace

3. Repository 복제

VSCode에서 [리포지토리 복제] 버튼을 클릭한 후 위에 입력창이 생기면 복제할 Github Repository 경로를 입력하고 선택합니다.

4. 저장 경로 선택

아까 생성한 프로젝트 루트 경로를 선택하고, [리포지토리 위치 선택] 버튼을 클릭합니다.

5.  프로젝트 열기

복제된 리포지토리를 여시겠습니까? 라는 확인창이 표시되면 [열기] 버튼을 클릭하여 프로젝트를 엽니다.

프로젝트를 열면 아래와 같은 프로젝트 폴더 구조를 확인할 수 있습니다.

6. node_modules 설치

보통 협업을 위해 Github에 공유할 때는 용량 등의 문제로 node_modules는 제외하고 체크인합니다. 아래 명령어를 입력하여 package.json 기준으로 node_modules를 설치합니다.

D:\reactWorkspace\searchNaverApiTs> yarn install

7. 컴파일 및 번들링, 실행

컴파일 및 번들링을 진행하여 오류가 없는지 확인합니다.

D:\reactWorkspace\searchNaverApiTs> tsc
D:\reactWorkspace\searchNaverApiTs> npm run build

8. 실행

프로젝트를 구동하여 결과를 확인합니다.

D:\reactWorkspace\searchNaverApiTs> yarn start

본 포스트는 비주얼 스튜디오 코드로 작성한 프로젝트를 깃헙에 업로드 하는 방법을 설명합니다.

VSCode에서 작성한 프로젝트는 아래 방법으로 Github에 업로드해서 공동 작업을 할 수 있습니다.

1. 프로젝트 생성

일단 여기서는 간단하게 React 라이브러리만 하나 설치해서 업로드 해보겠습니다. 먼저 프로젝트 폴더를 하나 만듭니다.

D:\workspace> mkdir testPrj

2.  프로젝트 초기화 및 React 모듈 설치

yarn init -y 명령으로 프로젝트를 초기화하고 React 모듈만 하나 설치합니다.

D:\workspace> cd testPrj
D:\workspace\testPrj> yarn init -y
yarn init v1.22.17
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
Done in 0.04s.

D:\workspace\testPrj> yarn add react
yarn add v1.22.17
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.17".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Saved 3 new dependencies.
info Direct dependencies
└─ react@18.2.0
info All dependencies
├─ js-tokens@4.0.0
├─ loose-envify@1.4.0
└─ react@18.2.0
Done in 1.12s.

3. VSCode로 프로젝트 반입

생성한 프로젝트를 VSCode로 반입합니다.

위의 과정을 거치면 아래와 같이 프로젝트가 반입됩니다.

4. Github에 Repository 생성

Github에 로그인하여 [New] 버튼을 선택하여 Repository를 생성합니다.

Repository 생성 화면은 아래와 같습니다. Repository 명은 현재 계정에서 유니크해야 하며, 체크해서 정상이면 초록색으로 체크가 표시됩니다.

Anonymous 접근을 허용하려면 Public, 아니면 Private을 선택합니다. 일단 여기서는 Public으로 생성해 보겠습니다. 입력을 완료하면 [Create Repository] 버튼을 선택합니다.

Repository 생성을 완료하면 아래와 같은 화면이 표시됩니다.

5. gitignore 파일 생성

다시 VSCode로 돌아와서 프로젝트 루트에 .gitignore 파일을 생성합니다. 없어도 되지만 대표적으로 node_modules 같은 경로는 굳이 Github을 통해서 공유할 필요도 없고, 파일 전송에 오랜 시간이 소요됩니다. 이렇게 Github에 공유할 필요가 없는 경로를 구분하기 위해 .gitignore 파일을 사용합니다.

대강 샘플 양식은 아래와 같습니다. node_modules 하위나 dist 하위, vscode 설정 파일 등을 제외합니다.

# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode
# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode

### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.code-workspace

# Local History for Visual Studio Code
.history/

### VisualStudioCode Patch ###
# Ignore all local history of files
.history
.ionide

# Support for Project snippet scope
!.vscode/*.code-snippets

# nodejs
node_modules
dist/*
build/*
*.log
.DS_Store

여기서는 다 필요는 없지만 위의 내용을 .gitignore 파일로 저장하겠습니다. 저장하면 현재 폴더 구조는 아래와 같습니다.

6. Repository 초기화 및 원격 저장소 전송

되도록 UI를 기준으로 설명하겠습니다. 먼저 VSCode의 소스 제어 탭으로 이동하여 [리포지토리 초기화]를 선택합니다.

모든 파일을 스테이징에 반영하고, commit 합니다.

터미널 > 새 터미널 을 선택하여 터미널을 하나 엽니다.

아까 Repository를 생성할 때 나왔던 원격 저장소 추가 명령어를 Copy & Paste 합니다.

D:\workspace\testPrj> git remote add origin https://github.com/lgcjh0s/testPrj.git

이제 원격 저장소로 파일을 전송하면 아래와 같은 형식의 메시지가 표시됩니다.

D:\workspace\testPrj> git push origin master
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 12 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 1.25 KiB | 1.25 MiB/s, done.
Total 5 (delta 0), reused 0 (delta 0), pack-reused 0     
To https://github.com/lgcjh0s/testPrj.git
 * [new branch]      master -> master

이제 Github으로 가서 원격 저장소에 파일이 적용되었는지 확인해 보면, 아래와 같은 Repository를 확인할 수 있습니다.

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다.

이번 과정에서 작성한 전체 소스코드는 중간중간 포스트에서 표시했습니다.

하지만 혹시 잘 안되시는 분들이 있으면 아래 Github에서 다운로드 해서 확인해 보시면 됩니다.

https://github.com/lgcjh0s/searchNaverApiTs

Checkout 받는 방법은 아래 포스트를 참고해주세요.

https://redballs.tistory.com/entry/Github-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-VSCode%EB%A1%9C-Checkout-%ED%95%98%EA%B8%B0?category=568554 

오라클이나 티베로에서는 아래와 방법으로 테이블 목록을 조회할 수 있습니다.

SELECT  A.OWNER
     ,  A.TABLE_NAME
     ,  A.TABLESPACE_NAME
     ,  B.COMMENTS
  FROM  DBA_TABLES A
     ,  DBA_TAB_COMMENTS B
 WHERE  A.OWNER = B.OWNER
   AND  A.TABLE_NAME = B.TABLE_NAME
   AND  A.OWNER = ?

DBA_TABLES는 테이블에 대한 메타 정보이고, DBA_TAB_COMMENTS는 테이블의 코멘트에 대한 메타 정보입니다. 두 가지 정보를 조합하면 아래와 같이 현재 OWNER 소유의 테이블 목록을 구할 수 있습니다. (코멘트는 테이블에 대한 코멘트입니다)

또 다른 메타 정보를 이용하면 테이블의 컬럼 목록도 조회할 수 있습니다.

SELECT  A.OWNER
     ,  A.TABLE_NAME
     ,  B.COMMENTS
     ,  A.COLUMN_NAME
     ,  C.COMMENTS
     ,  A.DATA_TYPE
     ,  A.DATA_LENGTH
  FROM  DBA_TAB_COLS A
     ,  DBA_TAB_COMMENTS B
     ,  DBA_COL_COMMENTS C
 WHERE  A.OWNER = B.OWNER
   AND  A.TABLE_NAME = B.TABLE_NAME
   AND  A.OWNER = C.OWNER
   AND  A.TABLE_NAME = C.TABLE_NAME
   AND  A.COLUMN_NAME = C.COLUMN_NAME
   AND  A.OWNER = ?
   AND  A.TABLE_NAME = ?

DBA_TAB_COLS는 테이블 별 컬럼에 대한 메타 정보이고, DBA_COL_COMMENTS는 컬럼의 코멘트에 대한 메타 정보입니다. 특정 OWNER에 속하는 모든 테이블의 정보를 조회하고 싶으면 A.OWNER 조건만 주면 되고, 특정 테이블에 대한 정보를 조회하고 싶으면 A.TABLE_NAME 조건도 사용하시면 됩니다.