본문 바로가기

웹 개발 (Frontend Developer)19

JavaScript Event Delegation (이벤트 위임) 자바스크립트에서 이벤트 위임은 각 요소에 이벤트를 설정하는 대신, 상위 부모 요소에 설정하여 비슷한 방식으로 여러 요소를 다루면서 코드량을 줄일 수 있고 코드 효율을 높입니다. 또한 공통 조상에 인벤트 핸들러를 단 하나만 할당해 여러 요소를 한꺼번에 다룰 수 있어 메모리 사용과 성능을 최적화할 수 있습니다.  이벤트 전파에는 세 가지 단계가 있습니다 : 캡처링 단계, 타겟 단계 그리고 버블링 단계입니다. 이벤트 위임에서 버블링 단계를 활용합니다. 버블링 단계에서는 이벤트가 타겟 요소에서 시작하여 DOM 트리를 따라 상위로 전파됩니다. 자식 요소에서 발생한 이벤트가 부모 요소, 조부모 요소 등으로 전파되어 결국 최상위 문서 객체에 도달하게 됩니다.  캡처링 단계와 타겟 단계는 무엇인가요?캡처링 단계는 이벤.. 2024. 9. 13.
AJAX 이해하기 AJAX는 'Asynchronous JavaScript And Xml' 줄인 단어 입니다. AJAX는 XMLHttpRequest 기술을 사용해 복작하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다. **AJAX는 프로그래밍 언어는 아닙니다** AJAX는 브라우저에 있는 XMLHttpRequest 객체 통해 웹 서버에서 데이터 요청하고 자바스크립트하고 HTML DOM을 사용하여 데이터를 사용하거나 복잡한 웹페이지를 만들 수 있게 해 줍니다.   1. 웹 페이지에서 이벤트가 발생합니다 (페이지가 로드되거나 버튼이 클릭됨).2. JavaScript가 XMLHttpRequest 객체를 생성합니다.3. XMLHttpRequest 객체가 웹 서버로 요청을 전송합니다.4. 서버가 요청을 처리합니다.5. 서버가 웹.. 2024. 9. 8.
Node.js 모듈 시스템에 대해 Node.js에서 모듈은 '필요한 함수와 기능들의 집합'을 의미합니다. Node.js 에서 제공해 주는 많은 모듈들을 손쉽게 사용하거나 직접 모듈 만들어서 사용할 수 있습니다.  const module = require "require() 함수를 사용해 자바스크립트 파일을 읽고, 실행하여 객체를 반환합니다. core module(built-in module)은 Node.js에서 기본적으로 제공하는(내재되어 있는) 모듈을 의미합니다. Http : http 모듈은 Node.js에서 HTTP 서버를 생성하기 위한 클래스, 메서드, 이벤트를 포함합니다. Url : url 모듈에는 URL 확인 및 구문 분석을 위한 메서드가 포함되어 있습니다. Querystring : querystring 모듈에는 쿼리 문자열을 .. 2024. 9. 6.
벡엔드에서 사용하는 Node.js 기본 이해 자바스크립트 런타임(Node.js)은 확장 가능한 네트워크 애플리케이션을 구축하기 위해 설계된 환경입니다. Node.js를 사용하면 자바스크립트를 풀스택으로 사용할 수 있으며, 확장성이 뛰어나고, 비동기 처리(Non-blocking)와 방대한 에코시스템(커뮤니티)을 제공합니다. **런타임 (runtime)** 이란 프로드래밍 언어가 구동되는 환경을 말합니다.  컴퓨터가 브라우저 없이 Javascript 코드를 읽을 수 있게 Node.js를 설치해 주겠습니다. Node.js 웹사이트로로 이동하여 안전된 버전 (보통 숫자가 더 낮은 버전 / LTS 버전) 다운로드 및 설치합니다.설치 완료 후에 Node 실행하여 node --version으로 어떤 버전에 있는지 확인 가능합니다.Node 환경에 진입할 때에는 .. 2024. 9. 5.
Visual Studio Code (VS Code) 소개 및 간단한 기능들 Visual Studio Code는 마이크로소프트에서 개발한 무료 소스 코드 편집기 소프트웨어입니다. 이 소프트웨어는 Windows, macOS, Linux 그리고 웹 브라우저에서 실행할 수 있습니다. 주요 기능으로는 디버깅 지원, 지능형 코드 완성, 코드 스니펫, 그리고 Git을 활용한 내장형 버전 제어가 포함되어 있습니다. VS Code는 JavaScript, Python, C++ 등 다양한 프로그래밍 언어를 지원하며, 수많은 확장 기능(Extensions)을 통해 기능을 확장할 수 있습니다. 초보자든 전문가든 상관없이, 필요한 기능들을 쉽게 설치하고 사용할 수 있습니다. 또한, VS Code의 UI는 사용자 취향에 맞게 커스터마이징할 수 있으며, 인터넷 연결 없이도 사용할 수 있는 것이 큰 장점입니.. 2024. 9. 4.
Document Object Model (DOM)에 대해 알아보기 문서 객체 모델 (DOM)은 HTML, XML 문서의 프로그래밍 인터페이스 (interface) 입니다. DOM은 웹 페이지의 요소를 노드(Node) 와 objects라는 객체로 표현하며, 이 노드들은 트리 (tree) 구조로 배열됩니다. 하단 사진들을 확인하면서 트리 구조가 뭔지 간단하게 보겠습니다.  각 노드는 HTML 요소, 속성, 텍스트 등을 나타냅니다. DOM을 사용하면 HTML의 특정 색션을 더 쉽게 변경하고 조작할 수 있습니다. JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 결론적으로 DOM은 JavaScript와 HTML이 같이 호환할 수 있도록 도와주는 통역/번역사입니다. DOM은 웹 페이지와의 상호작용을 가능하게 하는 중요한 기술입니다. JavaScri.. 2024. 9. 3.

티스토리툴바