# DOM(Document Object Model) HTML문서를 객체로 표현한 것 입니다. 그래서 JS에서 HTML을 제어할 수 있게 해줍니다. DOM API 사용 예 const element = document.querySelector('h1'); console.log(element.textContent); ## DOM vs Element 노드(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 요소(Element) : HTML 요소를 의미 요소(Element)는 노드(Node)의 하위 개념 ### 예시 코드 1 (childNodes와 children) index.html 1 텍스트1 2 텍스트2 main.js // Node vs Element // - 노드(Node) : HTML 요소,..

# 클로저(Closure) 함수가 선언될 때의 유효범위(렉시컬 범위)를 기억하고 있다가, 함수가 외부에서 호출될 때 그 유효범위의 특정 변수를 참조할 수 있는 개념을 말합니다. ## 개념 이해 예시 코드 1 function createCount() { let a = 0; return function () { return a += 1; } } const count = createCount(); console.log(count()); // 1 console.log(count()); // 2 console.log(count()); // 3 createCount(외부 함수)의 내부의 함수를 클로저 함수라고 합니다. 클로저 함수가 a를 참조하므로 외부 함수가 종료되어도, 변수a는 사라지지 않고 a의 값은 계속 유..

목차 01. Console 02. Cookie, Storage 03. Location # Console 콘솔에 메시지나 객체를 출력합니다. console .log() // 일반 메세지 .warn() // 경고 메세지 .error() // 에러 메세지 .dir() // 속성을 볼 수 있는 객체를 출력 ## 예시 코드 console.log(document.body); console.warn(document.body); console.error(document.body); console.dir(document.body); javascript에서는 body 요소를 하나의 객체 데이터로 취급합니다. console.dir를 사용하면 html로 표시하는 것이 아니라 javascript의 객체 모양으로 출력합니다. #..

목차 이벤트 추가 및 제거 이벤트 객체 기본 동작 방지 버블링과 캡처링 이벤트 옵션 이벤트 위임 키보드 이벤트 양식과 포커스 이벤트 커스텀 이벤트와 디스패치 # 이벤트 추가 및 제거 .addEventListener()로 이벤트를 등록합니다. 대상에 이벤트 청취(Listen)를 등록합니다. 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler)가 호출됩니다. .removeEventListener()로 등록된 이벤트를 제거합니다. 대상에 등록했던 이벤트 청취(Listen)를 제거합니다. 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수 있습니다. ## 예시 코드 click ### .addEventListener()의 예시코드 // main.js // .addEventListener() ..

사이드 프로젝트：10개 기술스택으로 구현하는 풀스택 서버리스 프로젝트 with React Part 3. 프로젝트 설계하기 Ch03. TDD - 테스트 주도 개발 # TDD(Test-Driven Development)를 활용하기 - "Test-Driven Development"의 약자 한국어로는 "테스트 주도 개발" - 디자인 → 로직 구현 → 테스트 ❌ - 디자인 → 테스트 코드 → 로직 구현 ✅ - 소프트웨어를 동작시키기 위한 로직을 구현하기 전에 테스트 코드를 먼저 구현하는 것을 프로세스화 한 개발 방법(론 중의 하나이다.) ## 테스트 코드가 왜 중요한가요? - 작성한 코드가 의도적으로 동작하는지 수시로 빠르게 검증할 수 있다. 매번 서버를 돌려서 수동적으로 input/output을 검증하는 비효율..

# TailWindCSS - HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임 워크 입니다. ## CSS 프레임 워크란? - CSS 프레임워크는 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음입니다. - 더 빠르게 애플리케이션을 스타일링 하는데 도움을 줍니다. ### CSS FRAMEWORK 종류 for React JS 1. Material UI 2. React Bootstrap 3. Semantic UI 4. Ant Design 5. Materialize . . ## Tailwind CSS의 장점 Tailwind CSS는 부트스트랩과 비슷하게 m-1, flex와 같이 미리..