React(React-Native, React.js, Next.js), Typescript, DOM

« 2025/11 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

2024. 1. 10. 02:04

React(React-Native, React.js, Next.js), Typescript, DOM

안드로이드 개발이랑 DOM이나 자바스크립트 개념은 친숙해서 대체로 이해는 가지만,

라이브러리를 적용해서 프로젝트를 진행해봐야 실감이 날 듯.

※ 위키피디아 자바스크립트 라이브러리 목록

https://en.wikipedia.org/wiki/List_of_JavaScript_libraries

List of JavaScript libraries - Wikipedia

From Wikipedia, the free encyclopedia

en.wikipedia.org

React

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

React 라이브러리 적용

1. html 문서 파일과 like_button.js 파일을 만들어 준다.

2. React Component 로 사용할 컨테이너를 만들어주고(id="like_button_container"),

3. 적용할 js 파일들도 body 안으로 불러온다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

https://www.linkedin.com/pulse/reactjs-ecosystem-exploring-key-libraries-frameworks-2023-murthy

The React.js Ecosystem: Exploring Key Libraries and Frameworks 2023

React.js has emerged as one of the most popular and widely adopted JavaScript libraries for building user interfaces.

www.linkedin.com

React.js has emerged as one of the most popular and widely adopted JavaScript libraries for building user interfaces. It's component-based architecture and declarative approach to building UIs have revolutionized the way web applications are developed. Over the years, React.js has fostered a rich ecosystem of powerful libraries and frameworks that complement its functionality and help developers build sophisticated applications with ease. In this article, we will explore some essential libraries and frameworks within the React.js ecosystem and provide examples and code snippets to demonstrate their usage. ....

React의 주요 라이브러리와 프레임워크, 타입스크립트 언어 등을 소개하고 있음 [React Hooks, Formik (Form Handling), Redux (State Management), Next.js, React Query (Cache Management), React Virtualized (Data Management), React Spring (Animations), React Testing Library (Behaviour Testing), TypeScript (Auto Complete Code, Documentation , Organised and Safe)]

React Native

메타에서 만든 오픈소스 모바일 애플리케이션 프레임워크
JavaScript(TS)로 개발이 가능하며 IOS와 Android 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼.

코어 컴포넌트 및 네이티브 컴포넌트

React Native는 React 및 앱 플랫폼의 네이티브 기능을 사용하여 Android 및 iOS 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. React Native를 사용하면 JavaScript를 사용하여 플랫폼 API에 액세스하고 React 컴포넌트를 사용하여 UI의 모양과 동작을 설명합니다. 재사용 가능하고 중첩 가능한 코드 묶음인 React 컴포넌트를 사용합니다.

뷰 및 모바일 개발

Android 및 iOS 개발에서 뷰는 UI의 기본 구성 요소입니다.

화면에 표시되는 작은 직사각형 요소로 텍스트, 이미지를 표시하거나 사용자 입력에 응답하는 데 사용될 수 있습니다.

앱의 가장 작은 시각적 요소인 텍스트 줄이나 버튼과 같은 것들도 뷰의 한 종류입니다.일부 종류의 뷰는 다른 뷰를 포함할 수 있습니다.

React Native를 사용하면 JavaScript를 사용하여 React 컴포넌트로 이러한 뷰를 호출할 수 있습니다.

실행 시에 React Native는 해당 컴포넌트에 대한 Android 및 iOS 뷰를 생성합니다. React Native 컴포넌트는 Android 및 iOS와 동일한 뷰를 기반으로 하기 때문에 React Native 앱은 다른 모든 앱과 마찬가지로 보이고 느껴지며 수행됩니다. 우리는 이러한 플랫폼 지원 컴포넌트를 네이티브 컴포넌트라고 부릅니다.

React Native에는 오늘 당장 앱을 구축하기 위해 사용할 수 있는 필수적이고 준비된 네이티브 컴포넌트 세트가 있습니다. 이들은 React Native의 코어 컴포넌트입니다.

React Native는 또한 Android 및 iOS에 맞게 앱의 고유한 요구 사항에 맞도록 자체 네이티브 컴포넌트를 구축할 수 있게 해줍니다. 또한 활발한 커뮤니티가 생성한 것을 찾아보려면 Native Directory를 확인하세요.

코어 컴포넌트

React Native에는 컨트롤에서 액티비티 인디케이터까지 모든 것에 대한 코어 컴포넌트가 있습니다.

이들은 API 섹션에서 모두 문서화되어 있습니다.

Components:

REACT NATIVE UI COMPONENT	ANDROID VIEW	IOS VIEW	WEB ANALOG	DESCRIPTION
<View>	<ViewGroup>	<UIView>	A non-scrolling <div>	유연한 박스 모델, 스타일, 일부 터치 처리 및 접근성 컨트롤을 지원하는 컨테이너
<Text>	<TextView>	<UITextView>	<p>	문자열 텍스트 표시, 스타일 적용 및 중첩, 터치 이벤트 처리 가능
<Image>	<ImageView>	<UIImageView>	<img>	다양한 유형의 이미지 표시
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	여러 컴포넌트 및 뷰를 포함할 수 있는 일반 스크롤 컨테이너
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자가 텍스트를 입력할 수 있는 입력란

https://reactnative.dev/docs/intro-react-native-components

Core Components and Native Components · React Native

React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!

reactnative.dev

https://reactnative.dev/docs/getting-started

Introduction · React Native

This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment.

reactnative.dev

Next.js

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크.

사용자 인터페이스를 구축하기 위해 React 컴포넌트를 사용하고 추가적인 기능 및 최적화를 위해 Next.js를 사용한다고 함. Next.js는 React에 필요한 번들링, 컴파일 등의 도구를 자동으로 추상화하고 구성함. 이를 통해 구성 시간이 아닌 응용 프로그램을 구축하는 데 중점을 둘 수 있음.

주요 기능

라우팅 Routing

서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터로 레이아웃, 중첩된 라우팅, 로딩 상태, 오류 처리 등을 지원합니다.
렌더링 Rendering

Next.js에서 클라이언트 측 및 서버 측 렌더링을 사용하여 클라이언트 및 서버 컴포넌트로 최적화됩니다. Next.js에서 서버에서 정적 및 동적 렌더링을 지원하며 Edge 및 Node.js 런타임에서 스트리밍을 제공합니다.

데이터 가져오기 Data Fetching

서버 컴포넌트에서의 async/await를 사용한 간소화된 데이터 가져오기 및 요청 메모이제이션, 데이터 캐싱 및 재검증을 위한 확장된 fetch API를 지원합니다.
스타일링 Styling

CSS Modules, Tailwind CSS 및 CSS-in-JS를 비롯한 선호하는 스타일링 방법을 지원합니다.
최적화 Optimization

이미지, 글꼴 및 스크립트 최적화를 통해 응용 프로그램의 핵심 웹 핵심 지표 및 사용자 경험을 향상시킵니다.
타입스크립트 TypeScript

더 나은 타입 확인 및 효율적인 컴파일과 함께 TypeScript에 대한 향상된 지원, 사용자 정의 TypeScript 플러그인 및 타입 검사기를 지원합니다.

Feature	Description
Routing	A file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.
Rendering	Client-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering on the server with Next.js. Streaming on Edge and Node.js runtimes.
Data Fetching	Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.
Styling	Support for your preferred styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS
Optimizations	Image, Fonts, and Script Optimizations to improve your application's Core Web Vitals and User Experience.
TypeScript	Improved support for TypeScript, with better type checking and more efficient compilation, as well as custom TypeScript Plugin and type checker.

https://nextjs.org/docs

Docs | Next.js

Welcome to the Next.js Documentation.

nextjs.org

TypeScript

2012년 마이크로소프트가 발표한 프로그래밍 언어

자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가.
최근 인기 많음

컴파일 언어, 정적 타입 언어
자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

자바스크립트 슈퍼셋(Superset)
타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다.
객체 지향 프로그래밍 지원
타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.

타입스크립트 사용을 고려해야 하는 이유
높은 수준의 코드 탐색과 디버깅
타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있습니다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지할 수 있다고 합니다.
자바스크립트 호환
타입스크립트는 자바스크립트와 100% 호환됩니다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있습니다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 빛을 발합니다.
강력한 생태계
타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있습니다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 비주얼 스튜디오 코드(VSCode)를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원합니다.
점진적 전환 가능
기존의 자바스크립트 프로젝트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 타입스크립트를 도입함으로써 프로젝트를 점진적으로 전환할 수 있습니다. 자바스크립트에 주석을 추가하는 것에서부터 시작해 시간이 지남에 따라 코드베이스가 완전이 바뀌도록 준비 기간을 가질 수 있습니다.
하지만, 새로운 프로그래밍 언어에 대한 러닝 커브(Learning Curve), 상대적으로 낮은 가독성, 코드량 증가 등의 이유로 타입스크립트 사용을 망설이는 개발자가 많습니다. 프로젝트 성격에 따라 타입스크립트를 사용할지 결정하면 됩니다. 프로젝트의 규모가 크고 복잡할수록, 유지보수가 중요한 장기 프로젝트일수록 타입스크립트의 이점이 부각될 것입니다.

프론트엔드 프레임워크와 타입스크립트
리액트(React)
리액트와 타입스크립트의 호환성은 비교적 좋은 편입니다. 최근 들어 많은 개발자들이 리액트와 타입스크립트 조합을 선택하고 있습니다. 리액트 공식 홈페이지에서는 타입스크립트를 사용하기 위한 가이드를 제시하고 있습니다. 페이스북에서 공식적으로 배포하는 리액트 웹 개발용 보일러 플레이트(Boilerplate, 구조·설정 작업을 자동으로 진행해주는 도구이자 명령어)인 Create React App은 간단한 옵션 추가만으로 타입스크립트를 사용할 수 있도록 지원합니다.
뷰(Vue.js)
뷰 2.0에서는 타입스크립트를 사용할 수 있지만 몇몇 라이브러리의 도움을 받아야 하거나 구현 자체가 안 되는 문제도 다수 있었습니다. 다행스럽게도 최근 릴리즈된 뷰 3.0부터는 타입스크립트를 공식 지원합니다. 뷰 3.0 CLI(Command Line Interface)는 타입스크립트 도구화 지원을 기본으로 제공합니다.
앵귤러(Angular)
자바스크립트 기반인 앵귤러 버전 1과 달리 버전 2부터는 타입스크립트 기반으로 만들어졌고 타입스크립트를 권장하고 있습니다.

자세한 내용은 아래 링크에서 확인

https://www.samsungsds.com/kr/insights/typescript.html

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트[TypeScript] | 인사이트리포트 | 삼성SDS

2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. 요즘은 대형 SI 프로젝트에서 흔하게 사용되고 있

www.samsungsds.com

https://www.typescriptlang.org/ko/download

How to set up TypeScript

Add TypeScript to your project, or install TypeScript globally

www.typescriptlang.org

DOM

모르는 정보도 보고 아는 정보도 다시 보자,, 링크로 들어가서 보심 좋음!

https://www.codestates.com/blog/content/dom-javascript

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로

웹 개발을 하는 프론트엔드 개발자라면 알고 있어야하는 자바스크립트(JavaScript)와 DOM(문서 객체 모델)란 무엇일까요?자바스크립트와 DOM(문서 객체 모델)의 관계와 차이점은 무엇인지, 자바스크

www.codestates.com

DOM (문서 객체 모델)
문서 객체 모델 DOM은 웹 페이지(HTML, XML 문서)의 콘텐츠 및 구조 그리고 스타일 요소를 구조화시켜 표현한 것으로, 프로그래밍 언어가 각 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당함.

DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 함. 그래서 HTML DOM, 혹은 HTML DOM Tree로 부름.

트리 자료구조는 노드들의 계층 구조로 이루어져 있다. (부모-자식, 형제 등 비선형 자료구조)

트리구조이기 때문에 HTML 문서는 최종적으로 하나의 최상위 노드(root 노드)에서 시작해 자식 노드들을 가지며,

아래로 확장되어가는 구조로 만들어진다.

HTML코드를 트리 자료구조로 표현하면 다음과 같음

계층 구조

document 노드가 최상위 노드

밑으로 element 노드, text 노드, attribute 노드

document node (문서 노드)

DOM Tree에서 최상위 루트 노드, document 객체. HTML 문서 전체를 나타내는 노드.

window 객체의 document 프로퍼티로 바인딩(연결)이 되어 있어 window.document , document로 참조해 사용할 수 있음. HTML 문서에 이 문서 노드는 오로지 1개만 존재함.

element node (요소 노드)
모든 HTML 요소 (body, h2, div 등). 속성 노드를 가질 수 있는 유일한 노드, 부모-자식 관계 가짐, 계층적 구조 가능.

attribute node (속성 노드)
모든 HTML 요소의 속성. 요소 노드에 대한 정보를 가지고 있음. 해당 적용 노드와 연결(바인딩)이 되어 있다.

text node (텍스트 노드)
HTML 문서의 모든 텍스트는 텍스트 노드. 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 리프leaf 노드라고 불리기도 함.

위 4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있다.

데이터 검색하기가 빠른 트리 구조로 이뤄져 있기 때문에 조작 업데이트 등의 속도는 빠른 편.

자바스크립트(JavaScript) DOM

JavaScript DOM
자바스크립트는 DOM을 조작할 수 있는 가장 유명한 프로그래밍 언어.

JavaScript와 DOM, 다른 개념이다.
DOM은 자바스크립트 없이 DOM 인터페이스 구현만으로도 DOM을 조작할 수 있다.

DOM은 앞서 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스라고 설명했습니다. DOM은 어떤 프로그래밍 언어에 의존하지 않는 독립적인 인터페이스임.
DOM은 다른 프로그래밍 언어인 자바로도 구현할 수 있으며, C#으로도 구현할 수 있음.

DOM이 자바스크립트(JavaScript)라는 오해의 원인
현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐이라서.

브라우저는 과거 HTML 문서로만 이루어진 웹 페이지를 출력하기만 했다.

하지만 HTML 문서 만으로는 현재 요청되는 다양한 동적 기능을 제공하기 어려움.

그래서 웹 브라우저 내부에 이 동적인 기능을 지원해줄 프로그래밍 언어를 넣기로 했고,

그것이 현재 자바스크립트의 초석이 되는 Mocha(모카)임.

웹 브라우저는 이 때 이후 내장 프로그래밍 언어로 쭉 자바스크립트를 고수해오고 있다.

어쨌든 DOM은 프로그래밍 언어와 별개로 구현 가능함
자바스크립트가 아니더라도 다른 언어를 통해 DOM을 사용하여 동일한 방식으로

HTML 문서를 조작하고 화면을 렌더링할 수 있음.

DOM의 정적 생성과 동적 생성
자바스크립트는 가장 간편하고 빠르게 DOM으로 구조화된 웹 문서에 접근하여

노드(웹 컨텐츠를 이루는 기본 요소)들을 조작할 수 있음.

정적으로 생성되는 과정은 오로지 이미 HTML 파일에 적혀 있는 코드를 위에서부터 아래로 읽어내려가며 생성하는 과정만을 뜻함. 자바스크립트를 이용해 HTML 문서에 없는 노드를 만들어 이어 붙여 웹 페이지에 렌더링되게 만드는 모든 과정이 동적으로 구현하는 것이라 볼 수 있다. 있던 노드에 없는 노드를 만들어 이어 붙이는 것도 동적으로 구현한다고 볼 수 있다.

html 코드를 읽어내려가면서 웹페이지에 콘텐츠를 띄우는 과정은 정적 생성 과정이다.

여기에는 자바스크립트가 접근하여 DOM을 조작한 흔적이 없을 수 있다.

여기에 스크립트 태그를 달아 외부의 자바스크립트 파일을 연결하고, h2 태그에 id를 달아 일련의 작업(예를 들어 h2 태그를 클릭하면 밑에 사진이 나타나는 등의 동작)을 하게 된다면 이것은 동적으로 노드를 생성한다고 보는 것이다.

DOM의 데이터타입(Datatype)

DOM 객체의 구성 요소

프로퍼티(property) : DOM 객체의 멤버 변수. HTML 태그 속성
메소드(method) : DOM 객체의 멤버 함수. HTML 태그 제어.
컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열. 예를 들어 children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가짐
이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가짐.
스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근할 수 있음.

document

member(프로퍼티 혹은 메서드)가 document 타입의 object를 리턴할 때, 
이 object는 root document object 자체이다.

ex) element의 ownerDocument property(ex. document.getElementById("myP").ownerDocument)는 
해당 프로퍼티가 속해 있는 document를 return 함.

element

element는 DOM API 의 member에 의해 return 된 element 또는 element 타입의 노드를 의미함. 
document.createElement() method 가 node를 참조하는 object 를 리턴한다고 말하는 대신, 
이 method가 DOM 안에서 생생되는 element를 리턴한다고 좀 더 단순하게 말할 수 있다. 

element 객체들은 DOM Element 인터페이스와 함께, 
좀 더 기본적인 Node  인터페이스를 구현한 것이기 때문에 
이 참조(reference)에는 두 가지가 모두 포함되었다고 생각하면 됨.

nodeList

nodeList 는 element의 배열. 
(document.getElementsByTagName() method에 의해 리턴된 것과 같다) 
nodeList의 Items 은 index 를 통해 접근 가능하며, 두 가지 방식이 있다.

1. list.item(1) 
2. list[1] 

위의 방식들은 동일하다. 
1번의 item() method는 nodeList object의 단일 method. 
2번은 list에서 두번째 item을 가져오는(fetch) 전형적인 array 문법(syntax)임.

namedNodeMap

namedNodeMap는 배열과 유사하지만 안의 요소에 접근할 때 name 또는 index로 접근한다. 
리스트는 특별한 정렬이 적용되지 않았기 때문에 열거(enumeration) 할 때 index를 주로 사용함. 
namedNodeMap는 이를 위해 item() method 가 있으며, 
namedNodeMap에 item 을 추가하거나 삭제할 수 있음.

각 object에 대한 설명은 Reference에서 더 자세히 볼 수 있음.

JavaScript DOM 접근 메서드

자바스크립트로 DOM에 접근하는 방법: DOM의 인터페이스를 이용하여 접근할 수 있음.

브라우저 내부에 기본 내장된 프로그래밍 언어(자바스크립트)의

DOM API 중 자주 쓰는 메소드와 프로퍼티를 이용하여

동적으로 노드를 생성하거나 삭제, 혹은 변경이 가능함

document.querySelector(selectors)
document.querySelectorAll(selectors)
document.getElementById(id)
document.getElementByTagName(name)
document.createElement(name)
node.append(node)
node.appendChild(node)
node.remove(node)
node.removeChild(node)
element.innerHTML
node.textContent
element.setAttribute(name, value)
element.getAttribute(name)
element.addEventListener(type, listener)

노드 생성

const div = document.createElement('div')
// undefined

div
// <div><div>

div라는 변수에 document.createElement()를 이용하여 이용하여 div 노드를 만들어 담아둔(할당한) 상태

이 상태에서 div라는 변수를 불러오면(호출) div 태그가 뜨는 것이 확인이 됨.

append(), 혹은 appendChild() 메소드를 사용하여 화면에 붙여야 눈으로 확인됨.

노드 붙이기

document에다가 위의 div 태그를 붙이려면

다른 태그가 존재하지 않는 한 body 태그가 부모 태그임.

(html문서 구조를 생각하면 됨)

부모 노드를 body로 설정하고 접근한 상태에서 append(), 혹은 appendChild() 메소드를 사용함.

document.body.append(div); // 또는 
document.body.appendChild(div);

노드 변경하기

노드 내부에 어떤 변경이 일어나면 DOM은 업데이트를 진행하고 다시 화면을 출력(렌더링)한다.

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>노드 변경하기</title>
	</head>
	<body>
		<script>
			let div = document.createElement('div');
			document.body.append(div);
			div.textContent = '텍스트를 입력하는 방법';
		</script>
	</body>
</html>

노드 삭제

div.remove(); // 또는 
document.body.removeChild(div);

remove()와 removeChild() 메소드는 부모 태그에 접근하지 않는다.

removeChild() 메소드는 부모 태그에 접근해야만 자식 태그를 제거할 수 있음.

remove() 메소드는 자식 태그에 접근해서 제거하는 메소드. 이 메소드로 부모 태그에 접근하면 부모 태그까지 지워짐.

JavaScript DOM 예제

<button id="cat">cat</button>

<script>

	document.querySelector("#cat").onclick = function() {
		    let img = document.createElement("img");
		    img.setAttribute("src", "넣고자 하는 그림 주소 or 파일");
		    img.setAttribute("style", "width:300px;margin-top:20px;")
		    document.body.append(img);
		};

</script>

1. button 태그를 정적으로 생성

2. script 태그 내에서 동적으로 버튼을 찾고(button 태그에 부여한 id 기준으로)

3. 버튼에 onclick 이벤트 리스너를 붙여 함수 안에 이미지 태그를 생성하고,

4. setAttribute() 메소드를 사용해 이미지 src와 style을 부여해

5. 부모 태그인 body에 붙여 고양이 이미지 생성함.

6. 브라우저에서 버튼을 누르면 이미지가 붙는 것이 확인됨

저작자표시 비영리 (새창열림)

bpDev