Note > 자바스크립트 프레임워크/라이브러리모음
By a3040, Published on Invalid Date
프로세스 관리 도구
PM2 is a Production Process Manager for Node.js applications
with a built-in Load Balancer.
npm install -g pm2
]$ pm2 start server.prod.js
pm2 start app.js // 애플리케이션 시작
pm2 stop app.js // 애플리케이션 중지
pm2 restart app.js // 애플리케이션 재시작
pm2 delete app.js // 애플리케이션 삭제
html$ pm2 monit
By a3040, Published on Invalid Date
1.vite 기반 react 프로젝트 생성
프로젝트 이름은 : dragexpand
>npm create vite@latest dragexpand -- --template react-ts
생성이 완료되면 프로젝트로 이동
>cd .\dragexpand\
>npm install
2.tailwindcss 사용 추가
프로젝트에 tailwindcss 종속성추가
>npm install -D tailwindcss postcss autoprefixer
프로젝트에 tailwindcss 사용 설정 추가
>npx tailwindcss init -p
실행 후에
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
두 파일이 추가 됩니다.
생성된 tailwind.config.js파일을 수정합니다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
tailwindcss 기본 디렉티브 추가
./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
3.vscode 디버그 연결 설정
.vscode/launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge", /* 에지에서 디버그 */
"request": "launch",
"name": "Debug App",
"url": "http://localhost:5173", /*관찰하게 될 vite가 실행되는 포트*/
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
},
"runtimeArgs": [
"--remote-debugging-port=9222"
],
"sourceMaps": true
}
]
}
launch.json을 작성한 후 프로젝트를 실행합니다.
> npm run dev
vscode에서 npm run dev에서 시작한 포트를 디버그 하도록 실행하면, edge가 실행되면서 http://localhost:5173로 이동합니다. 정상적으로 연결되면 vscode에서 tsx파일을 디버그 할수 있습니다.
1.을 이용해서 디버그 시작
2.디버그가 실행되고 edge가 실행되고 연결된 상태
3.vsocde의 디버그 모드
4.tsx의 브레이크포인트 설정
5.tailwindcss 적용테스트
import { useEffect, useState } from 'react'
import './App.css'
function App() {
const sum =(a, b)=>{
let c = a+b;
return c;
}
useEffect(()=>{
console.log( sum(1,2));
}, []);
return (
<div className='container mx-auto h-screen
border border-solid border-cyan-400'>
</div>
)
}
export default App
참조 링크
By a3040, Published on Invalid Date
번들러(Rollup, Parcel, Esbuild ... )는 다수의 파일을 하나의 파일로 묶어주는 역할을 합니다.
번들링은 번들러를 이용해서 결과 파일을 만드는 행위를 말합니다.
Tree-shaking은 번들링할때 실제로 쓰지 않는 코드들을 제외한다는 의미입니다.
1. Rollup 개요: Rollup은 라이브러리를 번들링하는 도구로, webpack과 비슷한 역할을 합니다. 하지만 ES Module 형태로 번들을 생성하는 데 더 적합하며, Tree-shaking을 지원합니다.
2. 패키지 설치: 먼저 Rollup을 사용하기 위해 필요한 패키지를 설치합니다.
yarn add --dev rollup
또는 npm을 사용하는 경우:
npm install --save-dev rollup
3. 명령어 라인에서 사용해보기
◦ src/main.js
◦ src/lib/mod1.js
◦ src/index.html
//src/main.js
import {sum, draw_div} from './lib/mod1.js';
const startup = ()=>{
const {a, b} = { a:11, b:242 };
console.log(`${a}+${b}=${sum(a,b)}`);
const str=`${a}+${b}=${sum(a,b)}`;
draw_div(str);
}
startup();
//src/lib/mod1.js
export const sum = (a, b) =>{
return a+b;
}
export const draw_div = (str)=>{
const div = document.createElement('div');
div.style.width = "100px";
div.style.height = "200px";
div.style.border = "solid 1px green";
div.innerHTML = str;
const output = document.getElementById('output');
console.log(output);
output.appendChild(div);
}
<html>
<body>
<div id="output">x</div>
<script type="module" src="./dist/index.js">
//index.html
</script>
</body>
< /html>
> npx rollup .\src\main.js --file ./dist/index.js
src/main.js와 관련된 파일을들 하나로 묶어(번들링) ./dist/index.js 파일을 생성합니다.
4. package.json에 포함하기
"type":"module",
"scripts": {
"build": "rollup ./src/main.js --file ./dist/index.js",
"dev": "npm run build && http-server",
> npm run build
cli에서 했던것과 동일한 결과가 나옵니다.
rollup 설정 파일을 이용하기
./src/rollup.config.js 추가, package.json 변경
/**./src/rollup.config.js */
export default {
input: "src/main.js",
output: {
// dir: "dist",
file: "./dist/index.js"
},
};
package.json
"type":"module",
"scripts": {
"build": "rollup --config",
"dev": "npm run build && http-server",
> npm run build
cli에서 했던것과 동일한 결과가 나옵니다.
Tree-shaking 을 확인해 보기 위해
//src/main.js
import {sum, draw_div} from './lib/mod1.js';
const startup = ()=>{
const {a, b} = { a:11, b:242 };
console.log(`${a}+${b}=${sum(a,b)}`);
const str=`${a}+${b}=${sum(a,b)}`;
//draw_div(str);
}
startup();
src/main.js 에서 draw_div(str) 부분을 주석후 npm run build를 수행한 후에
./dist/index.js 파일을 확인해 보시면 draw_div 함수가 포함되지 않은것을 확인할수 있습니다.
By a3040, Published on Invalid Date
1.생성되는 js 특정 위치에 놓기
vite -rollup설정 추가
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
build:{
rollupOptions:{
input : "./src/main.tsx",
output:{
dir:"../../back/src/main/resources/static/js/admin", /*출력 디렉토리*/
entryFileNames:"dashboard.js", /*만들 js */
}
},
},
plugins: [react()],
})
2.tailwindcss를 통해 성성된 css파일 위치 및 파일명 고정
export default defineConfig({
build:{
rollupOptions:{
input : "./src/main.tsx",
output:{
assetFileNames: (chunkInfo) => {
if (chunkInfo.name === 'main.css') /*임시로 만들어 지는 파일명*/
return 'index.css' /* 새로 만들 원하는 고정 파일명 */
},
dir:"../../back/src/main/resources/static/js/admin", /*출력 디렉토리*/
entryFileNames:"dashboard.js", /*만들 js */
}
},
},
plugins: [react()],
})
css설정 전 임의의 파일 생성
css설정 후 고정 파일 생성
3.고정파일에서 페이지 설정
board.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>admin-dashboard</title>
<link rel="stylesheet" href="/js/admin/index.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/js/admin/dashboard.js"></script>
</body>
</html>
package.json
"scripts": {
"dev": "vite",
"build": "tsc && vite build --watch",