본문 바로가기

전체 글

 (143)
📘ES6의 주요 기능과 사용법 ✅ ES6(ECMAScript 2015)란?자바스크립트 발전 역사에서 가장 큰 변화가 있었던 버전, 현대 자바스크립트의 기초가 되는 버전 ES6의 정의ES6(ECMAScript 2015)는 ECMAScript 표준의 여섯 번째 버전으로, 자바스크립트 언어의 문법과 기능을 정의한 국제 표준 사양즉, 'ES6 = ECMAScript6 = ECMAScript 2015' ✅ 등장 배경ES6 이전 (특히 ES5)은 자바스크립트가 단순한 웹페이지 보조용 스크립트로 쓰이던 시절의 문법 중심이었다. 하지만,웹서비스가 복잡해지고 규모가 커지면서 문제가 발생했다.전역 변수 충돌, 복잡한 비동기 처리, 객체 지향 문법 부족, 코드 재사용 어려움 등..이러한 문제를 해결하기 위해 ES6가 대대적으로 업데이트되었다.✅ ES6의..
📘크롬 개발자 도구, Firefox 개발자 도구 등 브라우저 개발자 도구의 기능과 사용법 ✅ 개발자 도구(DevTolls)란?웹 브라우저에 내장된 웹 페이지 분석 및 디버깅 도구프론트앤드 개발자, 디자이너, QA, 퍼블리셔가HTML 구조, CSS 스타일, 네트워크 요청, 콘솔 로그, 성능, 반응형 테스트 등을실시간으로 확인하고 수정할 수 있게 해준다.Chrome / Edge : F12 또는 Ctrl + Shift + I firefox : Ctrl + Shift + IMac Cmd + Option + I✅ 주요 패널 별 기능Elements ( 요소 / 검사 )HTML 과 CSS 구조를 실시간으로 확인하고 수정 가능마우스로 페이지 내 요소 클릭 시 해당 DOM 선택CSS 스타일을 즉시 수정해 디자인 테스트 가능 Console ( 콘솔 )자바스크립트 로그 (console.log) 확인에러 메세지 ..
📘 페이지 로딩 속도, 캐싱, 렌더링 최적화 등 웹 성능 최적화 ✅ 페이지 로딩 속도 최적화리소스 최적화 : HTML,CSS,JS 파일을 압축 (minify)하고 불필요한 코드 제거이미지 최적화 : WebP,AVIF 같은 차세대 이미지 포맷 사용, lazy loading 적용번들링&코드 분할 : Webpack, Vite 같은 툴로 코드 분리 -> 초기 로딩 속도 향상CDN 활용 : 정적 리소스를 CDN에 배포해 사용자와 가까운 서버에서 전달네트워크 요청 최소화 : HTTP 요청 수 줄이고, 필요한 경우 HTTP/2,HTTP/3 적용✅ 캐싱(Caching)브라우저 캐싱 : cache-control, ETag, Last-Modified 헤더를 활용해 자주 변하지 않는 리소스 재사용서비스 워커 (Service Worker) : PWA 구조로 오프라인 접근 및 네트워크..
📘 Vue, React, Angular 등 대표적인 JavaScript 프레임워크 ✅ React / 라이브러리 (UI 구축 중심 페이스북 Meta 제작)React의 특징은 컴포넌트 기반 UI 설계 ( 재사용성 높음)Virtual DOM을 사용해 효율적인 렌더링단방향 데이터 흐름( 상위-> 하위 props 전달)상태 관리 : React 자체 useState,useRenducer + Redux,Zustand 등 외부 라이브러리 활용비교적 자유도가 높고, 생태계가 커서 다양한 선택지가 있다. 사용법import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}>증가 );..
📘 브라우저의 렌더링 엔진, 동작 방식 ✅ 브라우저의 렌더링 엔진브라우저 렌더링 엔진(Rendering Engine)은 우리가 웹 브라우저에서 HTML,CSS,JavaScript 같은 리소스를 받아와서 화면에 실제로 보이는 UI로 변환하는 핵심 엔진이다. 브라우저마다 렌더링 엔진이 다르지만 동작 방식은 공통적으로 단계를 거친다.✅ 브라우저 렌더링 엔진 동작 과정1. HTML 파싱 (Parsing HTML)서버에서 받은 HTML문서를 읽어들이고 DOM트리 생성 DOM은 문서의 구조를 객체 형태로 표현2. CSS파싱 (Parsing CSS)CSS파일과 태그, 인라인 스타일을 파싱해서 CSSOM 트리를 만든다.CSSSOM은 각 요소가 어떤 스타일을 가져야하는지 표현 3. 렌더 트리(Render Tree) 생성DOM + CSSOM을 합쳐서 렌더 트리..
📘 Virtual DOM ✅ Virtual DOM이란?Virtual DOM(가상 DOM)은 실제 DOM의 가벼운 사본 (JavaScript 객체) 이다.화면에 변경이 샐길 때, 바로 실제 DOM을 수정하지 않고 Virtual DOM에서 먼저 연산을 수행 한다.그 다음 변화가 생긴 부분만 실제 DOM에 반영(diff&patch)하여 성능을 최적화 한다.✅ 왜 필요할까?실제 DOM 조작은 느리다. ( DOM은 트리 구조라, 변경 시 많은 재계산 ->reflow,repaint 발생)Virtual DOM은 메모리 상의 객체이므로 빠른 연산 가능React,Vue 같은 라이브러리는 Virtual DOM을 활용해 필요한 부분만 업데이트 한다.✅ 동작 과정 (React 기준)상태(state) 변경 -> 새로은 Virtual DOM 생성이전 V..
📘 DOM(Document Object Model)이란 무엇이고 어떻게 작동할까 ✅ DOM이란?DOM(Document Object Model)은 HTML XML 문서를 트리 구조로 (Tree Structure)로 표현한 것각 HTML 태그(요소) -> 객체 (Object)로 취급된다.자바스크립트를 통해 이 객체들을 조회, 수정, 추가 , 삭제 할 수 있다.즉, 웹 페이지의 구조와 내용을 메모리에 올려놓은 객체 모델 이라고 이해하면 된다. ✅ DOM의 작동 방식사용자가 HTML문서를 요청 -> 브라우저가 HTML 파일을 다운로드브라우저의 파서(Parser)가 HTML을 해석 -> DOM트리 (DOM Tree) 생성이 루트(root) 노드가 되고, 그 안에 ,가 자식 노드로 들어간다.document.getElementById("Id명")->특정 요소 접근element.innerText ..
📘 AJAX를 사용하여 비동기적으로 데이터를 처리하는 방법 ✅ AJAX의란?AJAX는 웹 페이지 전체를 새로 고치지 않고도 서버와 데이터를 주고 받을 수 있게 해주는 방식이다.주로 XMLHttpRequest 객체나 fetch API를 사용해서 구현한다. ✅ AJAX 기본 개념동기(synchronous) 서버에 요청을 보내면 응답이 오기 전까지 코드 실행이 멈춘다.비동기(Asynchronous) 서버 요청을 보낸 뒤 응답을 기다리지 않고 다음 코드를 실행. 응답이 오면 콜백 또는 프로미스를 통해 처리 XMLHttpRequest 사용// 1. 객체 생성 const xhr = new XMLHttpRequest(); // 2. 요청 초기화 (GET 방식) xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", ..

티스토리툴바