리액트(React)👉🏻사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리 📌Virtual DOM (가상 DOM)👉🏻실제 DOM의 경량화 된 사본으로 메모리 상에서만 존재 동작 방식상태 변화(useState)Virtual DOM 렌더링: 리액트는 먼저 Virtual DOM에 변경 사항을 적용차이 비교 (Diffing): Virtual DOM의 현재 상태와 이전 상태를 비교하여 변경된 부분을 찾아냄실제 DOM 업데이트: Virtual DOM에서 계산된 차이점만 실제 DOM에 반영📌Single Page Application (SPA)👉🏻단일 HTML페이지로 구성되어, 다른 페이지로 이동할 때 마다 전체 페이지를 로드 하지 않고 필요한 부분만 동적으로 로드 함컴포넌트 기반 구조🔹리액..

문서 객체 모델 (DOM, Document Object Model)▪️웹 페이지의 구조를 표현하는 프로그래밍 인터페이스▪️웹 페이지의 각 요소를 객체로 표현▪️JavaScript를 통해 웹 페이지를 동적으로 수정하거나 새로운 요소를 추가하는 등 다양한 작업을 할 수 있다.DOM의 주요 메서드1️⃣ 요소 선택:document.getElementById(id) : ID로 요소를 선택document.getElementsByClassName(className) : 클래스 이름으로 요소 선택document.getElementsByTagName(tagName) : 태그 이름으로 요소 선택document.querySelector(selector) : CSS 선택자로 요소 선택 (단일 요소, 첫 번째 요소 선택)doc..

prototype▪️new를 사용해서 객체를 생성한다 → 생성 할 때마다 다 별개의 객체가 생성 됨▪️공통적인 부분, 특정 함수나 값을 재 사용하려면 prototype 속성, 메서드로 정의한다function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function () { console.log(this.sound); }}//객체 생성//새로운 객체를 만들 때에는 new 키워드를 앞에 붙여주어야 함const dog = new Animal('개', '멍멍이', '멍멍');const cat = new Animal('고양이', '야옹이', '야옹..

JavaScript▶️ 클라이언트와 서버 측 모두에서 사용할 수 있는 스크립트 언어▪️인터프리터 언어: 자바스크립트는 별도의 컴파일 없이 실행, 브라우저에서 바로 실행 ▪️동적 언어: 데이터 타입 선언 없이도 변수를 생성 ▪️비동기 프로그래밍 지원: 콜백, 프로미스, async/await을 통해 비동기 코드를 효율적으로 처리콘솔 출력console.log("Hello, World!");변수 선언▪️ var: 함수 스코프를 가짐.   1️⃣변수 스코프 : 함수 단위   *️⃣ ES6 이후에는 지양하고 있다   2️⃣ var 중복 선언이 가능 --> 의도치 않게 다른 값을 사용할 수도 있음    3️⃣ 호이스팅 된다 선언한 변수보다 먼저 사용 가능▪️ let: 블록 스코프를 가짐.▪️ const: 상수, 블록..

CSS3에서 사용되는 단위와 크기 단위1. px (픽셀)고정된 크기화면의 1픽셀 크기로 설정.반응형 디자인보다는 정확한 크기를 지정할 때 사용.div { width: 100px; /* 100픽셀 */}2. % (퍼센트)부모 요소 크기에 대한 비율로 설정반응형 디자인에서 주로 사용div { width: 50%; /* 부모 요소 너비의 50% */}3. em부모 요소의 폰트 크기를 기준으로 한 상대적 단위.1em은 부모 요소의 현재 폰트 크기와 동일.요소의 크기나 여백 등을 상대적으로 설정할 때 유용/* 부모 요소 */body { font-size: 16px; /* 루트 폰트 크기 */}/* 자식 요소 */p { font-size: 1.5em; /* 16px × 1.5 = 24px */}h1 { f..

▪️ 마크업 언어(XML,HTML,JSON…): 텍스트 문서나 데이터의 구조와 의미를 정의하고 표현장점: 데이터 구조화, 표준화,SEO 및 접근성 향상 등등 항목  HTML  XML  JSON 풀 네임HyperText Markup LanguageExtensible Markup LanguageJavaScript Object Notation역할웹 페이지의 구조와 콘텐츠를 정의데이터의 구조와 계층적 표현데이터 교환 및 표현을 간결하게 표현용도웹 브라우저에서 문서의 표시 및 렌더링데이터 저장 및 전송, 계층적 데이터 구조 정의클라이언트-서버 간 간단한 데이터 교환  🧩 XML JSON 비교  특징  XML  JSON 가독성태그 기반, 사람이 읽기 쉬움더 간결하고 쉽게 읽힘검증XML Schema 및 D..

2024년 마지막 TIL🙀전공 수업에서 Node.js를 접할 일이 있었는데 스프링처럼 웹 서버 구축하는 프레임워크 인줄 알았음하지만 node.js는 자바스크립트 런타임 환경임오늘 새로 알게 된건 자바스크립트는 기본적으로 브라우저에서 실행 되지만 브라우저 밖(서버)에서 실행시키려면 node가 필요함. 자바스크립트의 특정 버전에 따라 필요한 node 버전도 다름, 그 버전을 간편하게 관리 해주는 것이 nvm이다 . 하지만 JVM와는 다르게 서버 구축도 해줌!Node.Js자바 ➡️ JVM (Java Virtual Machine) 자바 프로그램을 실행하는 런타임 환경자바 스크립트 ➡️ node.js 자바스크립트 런타임 환경 ▪️node: 자바스크립트가 브라우저 밖에서도 작동하게 해줌▪️nvm: node의 버전..