By a3040, Published on Invalid Date
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
API (web or XML page) = DOM + JS (scripting language)
중요한 데이터 타입들
document :
element : DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다.
nodeList: elements 의 배열이다.
attribute : attributes 는 DOM 에서 elements 와 같은 nodes 이다.
namedNodeMap:
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
수동으로 번들러 테스트를 하던중 js의 특정 소스의 값만 변경 후
브라우저에서 확인하던중 브라우저 캐쉬가 남아 있어서 변경사항이 적용이 안되는 경우가 발생했습니다.
옛날 IE의 페이지를 열때마다 새로 고침 기능을 찾았으나
동일한 기능은 찾기 못했고
브라우저에서 F12(또는 개발자도구열기) > 네트워크탭 > 캐시 사용안함 (체크해주기) 로
동일한 기능을 하는것을 발견했습니다.
새로 고침을 할때 memory cache를 사용해서 개발서버에서 변수 확인을 위해 새로고침 할 경우 index.js의 변경사항이 적용이 되지 않습니다.
새로 고침 할 때 마다 서버에서 데이터를 가져옵니다.
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
참조 링크