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

Note > 자바스크립트 관련html_javascript_dom 관계

By a3040, Published on Invalid Date

HTML(Hyper Text Markup Language)은 웹 페이지의 구조를 정의하기 위한 마크업 언어입니다. HTML 문서는 브라우저에 의해 해석되어 웹 페이지의 구조와 내용이 표시됩니다.


DOM(Document Object Model)은 HTML 문서를 계층 구조로 표현하는 모델입니다. DOM은 HTML 문서의 모든 요소를 객체로 표현하며, 이를 통해 JavaScript와 같은 스크립트 언어로 HTML 문서의 구조와 내용을 동적으로 조작할 수 있습니다.


JavaScript는 1995년에 브렌던 아이크(Brendan Eich)가 개발한 스크립트 언어입니다. 처음에는 브라우저에서 간단한 검증 기능을 수행하는 데에 주로 사용되었습니다.하지만 현재 웹 페이지의 동적인 기능을 구현하는 데에 필수적인 언어로 성장했습니다. 또한 OS단에서 동작하는 javscript 런타임 Node.js의 등장으로 서버 측에서도 활용될 수 있는 범용적인 프로그래밍 언어로 성장하였습니다.


- 핵심 언어(ECMAScript)

- DOM(Document Object Model)을 포함한 Web API


HTML, DOM, Javscript의 서로간의 관계는, 

HTML 문서를 로드하면 브라우저는 문서의 구조를 DOM으로 변환합니다. 이후 JavaScript를 사용하여 DOM에 접근하고 조작할 수 있습니다. 이를 통해, 웹 페이지를 동적으로 변경하거나 이벤트 처리를 수행하는 등의 작업을 수행할 수 있습니다.


1. HTML 문서와 해당 문서의 DOM으로 변환 예시

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
 <meta></meta>
</head>
<body>
	<header>
		<h1>Welcome to My Website</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section>
			<h2>About Us</h2>
			<p>...</p>
		</section>
	</main>
	<footer>
		<p>&copy; My Website</p>
	</footer>
</body>
</html>


위의 HTML 문서를 브라우저가 해석한 결과 DOM은 다음과 같습니다.

HTML
├── HEAD
│   ├── TITLE
│   └── META
└── BODY
    ├── HEADER
    │   ├── H1
    │   └── NAV
    │       └── UL
    │           ├── LI
    │           ├── LI
    │           └── LI
    ├── MAIN
    │   └── SECTION
    │       ├── H2
    │       └── P
    └── FOOTER
        └── P


2. javscript의 DOM 사용


이렇게 변경된 DOM에 JavaScript를 사용하여 접근하고 조작할 수 있습니다. 

Javascript를 이용해서 DOM에 접근, 페이지의 제목을 변경하는 예시입니다.


document.querySelector('header h1').textContent = 'My New Website';


이후 변화된 내용은 브라우저를 통해 사용자가 확인할수 있게됩니다.

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 > typescriptjs에 없는 추가 예약어

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;