개인 자료 정리 홈페이지 입니다.

Note > tailwindcss요소의 위치 조절 position:relative, position:absolute

By a3040, Published on Invalid Date

설정 하지 않았을때 (position: static ) 기본은 요소가 일반적인 문서 흐름에 따라 다른 요소와 겹치지 않고 자연스럽게 쌓이며 배치됩니다. top, right, bottom, left 속성 무시: static 위치 속성을 가진 요소는 top, right, bottom, left 속성을 사용하여 위치를 조절할 수 없습니다.


position: relative; 부모 요소의 컨텍스트 내에서 동작합니다.

position: absolute; 부모 요소의 컨텍스트 내에서 동작합니다.


position: relative;

부모 요소 내에서 자신의 원래 위치를 기준으로 상대적인 위치를 조절합니다.

부모 요소의 레이아웃 흐름에 영향을 미치지 않으며, 다른 요소와 겹치지 않습니다.

부모 요소의 위치를 변경할 때, position: relative;로 설정된 자식 요소도 함께 움직이지만, 다른 요소에 영향을 주지 않습니다.


position: absolute;

부모 요소 중에서 position 속성이 static이 아닌(기본 값) 첫 번째 부모 요소를 기준으로 위치를 결정합니다.

부모 요소의 레이아웃 흐름에서 제거되며, 다른 요소와 겹칠 수 있습니다.

부모 요소의 위치를 변경하면 position: absolute;로 설정된 자식 요소도 영향을 받아 위치가 변경됩니다.


position: sticky

스크롤될 때 일정 위치에서 고정되도록 하는 속성입니다.부모 요소의 영향을 받습니다.top, right, bottom, left 속성을 사용하여 고정되는 위치를 지정할 수 있습니다.


position: fixed;

viewport 기준 절대 좌표 고정입니다.

Note > 자바스크립트 관련[web api] DOM

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:




DOM 소개 - Web API | MDN (mozilla.org)

Note > 자바스크립트 프레임워크/라이브러리모음rollup.js를 이용해서 번들링하기

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 함수가 포함되지 않은것을 확인할수 있습니다.

Note > 개발환경과도구정리[브라우저]페이지를 열때마다 새로고침,크롬, 에지

By a3040, Published on Invalid Date

수동으로 번들러 테스트를 하던중 js의 특정 소스의 값만 변경 후

브라우저에서 확인하던중 브라우저 캐쉬가 남아 있어서 변경사항이 적용이 안되는 경우가 발생했습니다.




옛날 IE의 페이지를 열때마다 새로 고침 기능을 찾았으나

동일한 기능은 찾기 못했고

브라우저에서 F12(또는 개발자도구열기) > 네트워크탭 > 캐시 사용안함 (체크해주기) 로

동일한 기능을 하는것을 발견했습니다.


새로 고침을 할때 memory cache를 사용해서 개발서버에서 변수 확인을 위해 새로고침 할 경우 index.js의 변경사항이 적용이 되지 않습니다.


페이지를 열때마다 새로고침

새로 고침 할 때 마다 서버에서 데이터를 가져옵니다.