frontend, backend, 개발툴등에 대한 개인 자료 정리 공간입니다.

Note > tailwindcss table-auto <table class="table-auto">

By a3040, Published on Invalid Date

table-auto를 사용하여 테이블이 셀 내용에 맞게 열 크기를 자동으로 조정할 수 있도록합니다.

<table class="table-auto">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>

Note > 자바스크립트 프레임워크/라이브러리모음 Vite.js

By a3040, Published on Invalid Date

react-router/examples/ssr-data-router at dev · remix-run/react-router (github.com)

시작하기 | Vite (vitejs-kr.github.io)

Vite.js는 개발 서버와 빌드 도구를 제공합니다. 개발 서버는 HMR(Hot Module Replacement)을 지원하여 빠른 개발 환경을 제공하며, 빌드 도구는 Rollup을 기반으로 하여 최적화된 번들링을 제공합니다.

Vite.js는 기존의 Webpack과 비교하여 더 빠른 빌드 시간과 개발 서버의 더 빠른 시작 속도를 제공합니다.

Vite.js는 개발 서버와 빌드 도구를 제공하는 프론트엔드 개발 도구입니다.

Express.js는 서버 사이드 웹 프레임워크입니다.

Express.js와 Vite.js를 사용하려면, Vite.js의 빌드 결과물을 Express.js 애플리케이션에서 정적 파일로 서비스하는 방식으로 사용할 수 있습니다. 이를 통해 Vite.js에서 빌드된 클라이언트 사이드 애플리케이션과 Express.js에서 작성된 서버 사이드 애플리케이션을 함께 사용할 수 있습니다.

Vite.js 빌드 후 정적 파일로 제공합니다.

vite 템플릿 으로 생성하기 : npm create vite@latest vite_react_ts1 -- --template react-ts

템플릿 유형확인 시작하기 | Vite (vitejs-kr.github.io)

npm run build

const express = require('express');
const path = require('path');


const app = express();
const port = process.env.PORT || 3000;

// 정적 파일 경로 설정
app.use(express.static(path.join(__dirname, 'dist')));


// 모든 요청에 대해 index.html을 반환하도록 설정
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});


app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

- React 프로젝트에서 Webpack 빌드 도구를 대신하여 Vite.js를 사용할 수 있습니다.

- React 프로젝트를 생성합니다.

npx create-react-app my-app

cd my-app

- Vite.js를 설치합니다.

npm install vite --save-dev

- Vite.js 설정

vite.config.js

 module.exports = {
  // 빌드 모드 설정
  mode: 'development',
  // 개발 서버 설정
  server: {
    port: 3000,
  },
};

- 빌드 및 실행

npm run build

npm run dev

동적 Import

const module = await import(`./dir/${file}.js`)

변수 file은 깊이가 1인 파일에 대해서만 나타낼 수 있습니다. 가령 file이 foo/bar인 경우에는 Import가 실패하게 됩니다

특정 고정 위치에서 서비스 하고 싶을때 기본 위치 설정

package.json에 특정 위치 설정

    "build": "vite  build --base /memorize/"

정적파일로 서비스 제공 express/server.js

  // 정적 파일을 제공할 경로를 설정
  app.use('/memorize', express.static(path.join(__dirname, 'memorize')));참고

package.json에 "type": "module"이 명시되어 있지 않으면 Vite는 Node.js 호환성을 위해 다른 파일 확장자를 생성합니다. 즉, .js는 .mjs가 되고, .cjs는 .js가 됩니다.

환경 변수

라이브러리 모드에서 모든 import.meta.env.*는 프로덕션용으로 빌드 시 정적으로 대체됩니다. 그러나 process.env.*는 그렇지 않기에 라이브러리를 사용하는 측에서 이를 동적으로 변경할 수 있습니다. 만약 이 역시 정적으로 대체되길 원한다면 define: { 'process.env.NODE_ENV': '"production"' } 와 같이 설정해주세요.

Note > typescript js에 없는 추가 예약어

By a3040, Published on Invalid Date

js 예약어

break/case/catch/class/const/continue/debugger/default/delete/do/else/export/extends/false/finally/for/function/if/import/in/instanceof/new/null/return/super/switch/this/throw/true/try/typeof/var/void/while/with/yield

타입스크립트에서만 사용할 수 있는 몇 가지 예약어입니다.

any

any는 어떤 타입이든 상관없는 타입을 지정할 때 사용합니다. 모든 타입을 허용하기 때문에 타입스크립트의 타입 검사 기능을 우회할 수 있으므로 사용에 주의가 필요합니다.

unknown

unknown은 any와 같이 모든 타입을 허용하는 타입입니다. 하지만, unknown은 any와 달리 타입 검사 기능을 우회하지 않으므로 안전하게 사용할 수 있습니다.

never

never는 함수가 항상 예외를 던지거나 무한 루프에 빠져 반환값이 없는 경우에 사용됩니다. 이를 통해 코드의 안정성을 높일 수 있습니다.

void

void는 함수의 반환값이 없음을 나타내는 타입입니다.

enum

enum은 이름과 값을 가지는 열거형 타입을 정의할 때 사용합니다.

interface

interface는 객체의 타입을 정의하는 데 사용됩니다.

Note > typescript 기초 문법

By a3040, Published on Invalid Date

소개 · GitBook (typescript-kr.github.io)

변수 선언

변수를 선언할 때는 let 또는 const 키워드를 사용합니다. let은 값이 변경 가능한 변수를 선언할 때 사용하고, const는 값이 변경 불가능한 상수를 선언할 때 사용합니다.

// 숫자 타입의 변수 선언
let num: number = 123; 
// 문자열 타입의 상수 선언
const str: string = "Hello";

함수 선언

함수를 선언할 때는 함수 이름 뒤에 매개변수와 반환 타입을 지정합니다.

function add(num1: number, num2: number): number {
  return num1 + num2;
}

클래스 선언

class Person {
 private name: string;
 private age: number;


 constructor(name: string, age: number) {
   this.name = name;
   this.age = age;
 }


 public getName(): string {
   return this.name;
 }


 public getAge(): number {
   return this.age;
 }
}

인터페이스 선언

interface Person {
  name: string;
  age: number;
}


let person: Person = {
  name: "John",
  age: 30,
};

타입 별칭 선언

복잡한 타입을 간략하게 정의할 수 있는 타입 별칭을 선언할 수 있습니다.

type Person = {
  name: string;
  age: number;
}


let person: Person = {
  name: "John",
  age: 30,
};

유니온 타입 선언

let value: string | number;
value = "Hello";
value = 123;

Note > git 기초 사용법 원격 중앙 저장소에 생성 후 등록하기

By a3040, Published on Invalid Date