back-end

1. npm create vite@latest : 리액트 파일 생성 명령어2. Y : 파일 생성 여부를 물어봄. y 입력 시 생성 진행3. 원하는 프로젝트 이름 입력, 키보드로 react선택, 키보드로 JS 선택4. 해당 폴더로 이동 npm i : package.json에 기록되어 있는 dependency 설치npm run dev → react 실행. index.html을 기준으로 실행됨http://localhost:5173/ : 해당 URL 접속 시 연결 확인 가능서버 종료 : 터미널 클릭 후 Ctrl + C main.html main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-d..

기본 함수 (function)의 this기본 함수는 호출될 때의 컨텍스트에 따라 this가 결정일반 함수는 실행 당시의 객체 컨텍스트에 따라 this가 동적으로 바뀜 화살표 함수 (=>)의 this화살표 함수는 this를 렉시컬(lexical)하게 바인딩한다 렉시컬(lexical) : 함수를 정의할 때 상위 스코프의 this를 고정하는 것const obj = { name: 'Hello', clickBtn: () => { console.log(this.name); // this는 obj가 아님! 외부 스코프의 this }};obj.clickBtn(); // undefined  이 때의 this는 obj가 아니라 obj를 감싸는 외부 스코프(전역)의 this즉, 함수가 어디에서 정의되었는지에 따라..

1. getElementById, getElementsByClassName, getElementsByTagName✅ 장점성능이 빠름 (특히 getElementById)❌ 단점getElementsByClassName과 getElementsByTagName은 HTMLCollection을 반환 → 배열 같지만 실제 배열 아님 (Array methods 사용 불가)복잡한 CSS 선택자는 사용할 수 없음 2. querySelector, querySelectorAll✅ 장점CSS 선택자 문법 지원 → #id, .class, div > span, ul li.active 등 복잡한 선택 가능더 유연하고 강력함querySelector는 단일 요소, querySelectorAll은 NodeList 반환 → 반복문 가능 (..

Bubbling, CapturingDOM(Document Object Model) 요소에 이벤트 발생 시, 그 이벤트가 어떻게 전달되는지를 정의하는 방식 이벤트 전파(Event Propagation)브라우저에서 이벤트 발생 시, 이벤트는 DOM 트리 상에서 여러 단계에 걸쳐 전파된다.Capturing Phase (캡처링 단계)이벤트가 상위 요소에서 하위 요소로 내려오면서 전파Target Phase (타깃 단계)이벤트가 실제로 발생한 요소(target) 에 도달Bubbling Phase (버블링 단계)이벤트가 타깃 요소에서 다시 상위 요소로 전파이벤트가 발생하면 해당 이벤트는 자식 요소에서 부모 요소로 전파되는 '버블링(bubbling)' 이 일어나게 된다.버블링 전파 시, 부모 요소에 등록된 이벤트 리스..

비동기란→ 코드 실행을 막지 않고, 오래 걸리는 작업을 기다리며 다음 작업을 먼저 실행하는 방식 보통 외부 API를 사용할 경우 비동기로 처리한다. 외부 API를 사용할 때 비동기를 쓰는 이유1. 응답을 기다리면 전체 앱이 멈추기 때문외부 API는 보통 네트워크를 통해 요청을 보낸 후, 응답을 받기까지 시간 걸린다동기 방식일 경우, 응답이 올 때까지 브라우저나 앱이 멈춘다사용자 입장에서는 버벅이거나 멈춘 것처럼 느껴짐2. 여러 작업 동시 처리 가능 비동기 방식일 경우API 응답을 기다리는 동안 다른 UI 렌더링, 이벤트 처리 가능네트워크 작업과 사용자 입력을 동시에 처리 가능  JS의 비동기 처리 방법AJAX (Asynchronous JavaScript and XML)서버와 비동기적으로 데이터를 주고받기..

🔹 DOM이란?DOM (Document Object Model) 은 문서(Document) 를 객체(Object) 로 표현하는 모델(Model) 이다.문서 객체: , 같은 HTML 태그를 JavaScript가 조작할 수 있도록 객체로 변환한 것.모델: 문서 객체를 트리(Tree) 구조로 표현하여 브라우저가 HTML을 이해하는 방식. 🔹 DOM의 역할웹 브라우저는 HTML 문서를 트리 구조로 변환하여 이해하고, JavaScript는 이를 활용해 검색, 수정, 추가, 삭제 등의 작업을 수행할 수 있다. 🔹 Tree 구조란?Root Node: 최상위 노드로, DOM에서는 이 해당된다.Parent & Child: 상위 노드를 부모(Parent), 하위 노드를 자식(Child)이라 한다.Leaf Node:..