공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
localhost는 SSL이 적용되지 않는 http일지라도 SSL이 적용된 것으로 간주됩니다. 그럼에도 불구하고 localhost에 SSL을 적용해야할 상황이 생깁니다.
먼저 다음 패키지를 설치합니다.
npm install @vitejs/plugin-basic-ssl
vite.config.js에서 다음 코드를 추가합니다.
import basicSsl from '@vitejs/plugin-basic-ssl' // ADDED
export default {
...
plugins: [
...
basicSsl(), // ADDED
]
...
}
이제 http://localhost가 아닌 https://localhost로 결과를 확인할 수 있습니다. 하지만 SSL 인증서가 적합하지 않으므로 웹브라우저에서 사용자가 추가적인 허용을 해줘야 합니다.
Java 11부터는 별도의 외부 라이브러리 없이도 Java에서 기본적으로 제공하는 HTTP Client API를 통해 거의 대부분의 네트워크 통신(클라이언트에서 서버로의 요청) 기능을 처리할 수 있습니다.
이 API는 HttpURLConnection을 대체하기 위해 설계되었으며, HTTP/1.1과 HTTP/2, 동기/비동기 통신, WebSocket, Proxy, Authentication, TLS/SSL, HTTP/2 Server Push 등을 지원합니다.
예를들어서 GET 방식의 동기적 요청은 다음 코드와 같습니다.
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
public class App {
public static void main(String[] args) throws Exception {
HttpClient client = HttpClient.newHttpClient();
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create("https://example.com"))
.GET()
.build();
HttpResponse<String> response = client.send(
request,
HttpResponse.BodyHandlers.ofString()
);
System.out.println("Status: " + response.statusCode());
System.out.println("Headers: " + response.headers());
System.out.println("Body:" + response.body());
}
}
17번 코드의 send 매서드에 지정한 2번째 인자는 body를 문자열로 받겠다는 의도입니다.
POST 방식의 동기적 요청에 대한 코드 예시는 다음과 같습니다.
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
public class App {
public static void main(String[] args) throws Exception {
HttpClient client = HttpClient.newHttpClient();
String json = """
{
"name": "Tom",
"age": 20
}
""";
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create("https://example.com/users"))
.header("Content-Type", "application/json")
.POST(HttpRequest.BodyPublishers.ofString(json))
.build();
HttpResponse<String> response = client.send(
request,
HttpResponse.BodyHandlers.ofString());
System.out.println(response.statusCode());
System.out.println(response.body());
}
}
위의 코드는 동기적 요청인데, 비동기적 요청 방식으로 변경하면 다음과 같습니다.
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
public class App {
public static void main(String[] args) throws Exception {
HttpClient client = HttpClient.newHttpClient();
String json = """
{
"name": "Tom",
"age": 20
}
""";
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create("https://example.com/users"))
.header("Content-Type", "application/json")
.POST(HttpRequest.BodyPublishers.ofString(json))
.build();
client.sendAsync(
request,
HttpResponse.BodyHandlers.ofString())
.thenAccept(response -> {
System.out.println(response.statusCode());
System.out.println(response.body());
})
.join();
}
}
node 설치가 필요합니다. 그리고 라이브러리를 위한 개발 폴더를 위해 다음과 같은 명령 수행이 필요합니다.
mkdir -p ~/dev/my-libary cd ~/dev/my-libary npm init -y npm install -D typescript tsup mkdir src
src/index.ts에 다음 코드를 입력합니다.
export function add(left: number, right: number): number {
return left + right;
}
index.ts는 진입점이 되므로 사용자에게 공개할 것들을 export하는 것이 주목적입니다. 실제 API에 대한 코드는 별도의 코드 파일을 통해 제공하는 것이 일반적입니다.
tsconfig.json 파일을 생성해 다음처럼 입력합니다.
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"noEmit": true,
"verbatimModuleSyntax": true
},
"include": ["src"]
}
package.json 파일의 내용을 아래처럼 구성합니다.
{
"name": "@YOUR_NPM_ID/my-libary",
"version": "1.0.1",
"description": "타입스크립트로 만든 테스트 라이브러리",
"type": "module",
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"require": "./dist/index.cjs",
"default": "./dist/index.js"
}
},
"files": [
"dist"
],
"scripts": {
"build:js": "tsup src/index.ts --format esm,cjs --clean",
"build:types": "tsc -p tsconfig.build.json",
"build": "npm run build:js && npm run build:types",
"check": "tsc --noEmit",
"prepack": "npm run check && npm run build"
},
"keywords": [
"typescript",
"library"
],
"license": "MIT",
"devDependencies": {
"tsup": "^8.5.1",
"typescript": "^7.0.2"
}
}
타입스크립트 코드의 타입 오류를 검사하고 빌드 하기 위해 다음 명령을 수행합니다.
npm run check npm run build
dist 폴더가 생성되고 이 폴더 안에 index.js, index.cjs, index.d.ts 가 생성되어야 합니다.
실제 npm에 배포하기 위한 파일 생성을 시험해 보기 위해 다음 명령을 수행합니다.
npm pack --dry-run
출력되는 내용에서 dist/index.js, dist/index.cjs, dist/index.d.ts, package.json이 tar로 묶이는지 확인하면 됩니다. 만약 README.MD와 LICENSE 파일을 package.json 파일이 위치한 같은 폴더에 생성해 놨다면 이 2개의 파일들도 tar로 묶여야 합니다. tar로 묶인 결과를 tarball이라고 합니다.
실제 tarbal를 생성하기 위해 다음 명령을 수행합니다.
npm pack
그럼 your-npm-id-my-libary-1.0.0.tgz 파일이 생성됩니다.
your-npm-id-my-libary-1.0.0.tgz 파일을 npm에 배포하기에 앞서 이 파일로 라이브러리가 제대로 설치 되는지 확인하기 위해 새로운 프로젝트 풀더를 다음 절차를 참고하여 생성합니다.
mkdir -p ~/dev/my-libary-consumer cd ~/dev/my-libary-consumer npm init -y npm install ../your-npm-id-my-libary-1.0.0.tgz
index.js 파일을 생성하고 다음 코드를 입력합니다.
const { add } = require("@YOUR_NPM_ID/my-libary");
console.log(add(10, 20));
다음 명령으로 코드가 정상적으로 실행되는지 확인합니다.
node index.js
이제 npm 사이트에 배포하기 위해 npm에 로그인합니다. 라이브러리 프로젝트에서 다음 명령을 실행합니다.
cd ~/dev/my-libary npm login npm whoami
자신의 npm ID가 출력되어야 합니다. 배포하기에 앞서 my-libary가 등록된적이 있는지 확인하기 위해 다음 명령을 실행합니다.
npm view @YOUR_NPM_ID/my-libary version
등록한 적이 없으므로 404 오류가 나와야 합니다.
실제 배포하기에 앞서 다시 한번 더 검증하고 배포합니다.
npm run check npm pack --dry-run npm publish --access public
이제 라이브러리를 테스트하기 위한 폴더에서 다음처럼 npm 사이트로부터 라이브러리를 설치해 테스트해 봅니다.
cd ~/dev/my-math-kit-consumer npm uninstall @YOUR_NPM_ID/my-libary npm install @YOUR_NPM_ID/my-libary node index.js
라이브러리가 변경되면 버전업을 하고 다시 npm에 재배포해야 합니다. 다음 절차를 따릅니다.
cd ~/dev/my-math-kit npm version patch npm publish
위의 경우 버전업 레벨이 patch입니다. 다음을 참고하여 버전업 합니다.
이제 라이브러리를 테스트하기 위한 폴더에서 다음처럼 npm 사이트로부터 라이브러리를 업데이트해 테스트해 봅니다.
cd ~/dev/my-libary-consumer npm update @YOUR_NPM_ID/my-libary npm list @YOUR_NPM_ID/my-libary
라이브러리가 변경되면 이를 tarball로 묶고 테스트하는 프로젝트에서 tarball을 설치(npm을 통해서든, 파일을 통해서든)하는 것은 매우 번거롭습니다. 이 경우 npm link를 통해 쉽게 해결할 수 있습니다.
라이브러리 폴더에서 다음 명령을 수행합니다.
cd ~/dev/my-libary npm run build npm link
그리고 테스트 폴더에서는 다음 명령을 입력합니다.
cd ~/dev/my-libary-consumer npm link @YOUR_NPM_ID/my-libary
라이브러리를 link 방식이 아닌 tarball로 설치하고 싶다면 링크를 해제해야 합니다. 방법은 아래와 같습니다.
cd ~/dev/my-libary-consumer npm unlink @YOUR_NPM_ID/my-libary