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

Note > 자바스크립트 프레임워크/라이브러리모음프로젝트생성 > vite, react, typescript, tailwindcss, vscode, build시 css 특정위치, 파일로

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",


Note > 자바스크립트 관련유사배열

By a3040, Published on Invalid Date

유사배열은 실제 배열은 아니지만 배열과 유사한 동작을 하는 객체를 나타냅니다. 

유사배열 객체는 다음 특징을 가집니다:


1.인덱스를 사용하여 요소에 접근할 수 있어야합니다.

2.length 속성을 가지고 있어서 요소의 개수를 알 수 있어야합니다.

3.반복 가능(iterable)하므로 for...of 루프나 forEach와 같은 반복 메서드를 사용할 수 있습니다.

4.Array객체가 아니어서 .map등 사용이 안됩니다. Array 객체로 변환 후 사용해야합니다.


대표적 예시 : 문자열(String), 함수 인자(arguments), NodeList, TypedArray

//문자열(String): //문자열은 각 문자에 대한 인덱스로 접근할 수 있으며 length 속성이 있습니다.
const str = "Hello";
console.log(str[0]); // "H"
console.log(str.length); // 5



//arguments는 함수라면 처음부터 갖고 있는 숨겨진 속성입니다.
function example() {
    console.log(arguments[0]);// 1
    console.log(arguments.length);// 3
}
example(1, 2, 3); 



const elements = document.querySelectorAll("div");
console.log(elements[0]); // 첫 번째 div 요소
console.log(elements.length); // 요소의 개수



//TypedArray: Uint8Array, Int32Array와 같은 TypedArray 객체도 유사 배열입니다.
const uint8Array = new Uint8Array([1, 2, 3]);
console.log(uint8Array[0]); // 1
console.log(uint8Array.length); // 3


제너레이터(generator) 객체는 유사 배열이 아닙니다.

제너레이터 객체는 반복 가능한(iterable) 객체로, next() 메서드를 사용하여 값을 순차적으로 생성하고 반환하는 객체입니다.


function* gen(from=0, to=10, step=1){
    for( let i=from; i<to; i+=step)
        yield i;
}

const x = gen();
try{
    console.log( x.join(',') )
}catch(e){
    console.error('gen은 generator객체여서 join안됨', e);
}
console.log( x[3] ); //undefined , next()로 접근 
console.log(Array.prototype.join.call([...x], '|'));
Note > 자바스크립트 관련클래스 이름 얻기 classList

By a3040, Published on Invalid Date

HTML요소에서 클래스 목록을 얻습니다. DOMTokenList 객체를 반환합니다.

관련 메소드는

add(className): 클래스 추가

remove(className): 클래스 삭제

toggle(className): 클래스 토글 (존재하지 않으면 추가, 존재하면 삭제)

contains(className): 클래스 포함 여부 확인

item(index): 클래스 목록에서 인덱스로 클래스 얻기

length: 클래스 목록의 길이

가 있습니다.


classList



const element = document.getElementById("myElement");
// 클래스 추가
element.classList.add("newClass");
// 클래스 삭제
element.classList.remove("oldClass");
// 클래스 토글
element.classList.toggle("active");
// 클래스 포함 여부 확인
const hasClass = element.classList.contains("active");
console.log(hasClass);
// 클래스 목록의 길이
const classCount = element.classList.length;
console.log(classCount);


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 기준 절대 좌표 고정입니다.