JS/Node - 객체 지향 JavaScript 객체 지향 프로그래밍(OOP; Object-oriented programming)은 데이터와 기능을 한 곳에 모아 처리하는 것. 속성과 메소드가 하나의 “객체” 라는 개념에 포함되고 자바스크립트의 타입은 object와는 다른 것이다. → 클래스(Class)라고 부른다 학습 목표 * 클래스와 인스턴스 - new 키워드 사용법 - class 키워드 사용법 * 객체 지향 프로그래밍의 특징 - 캡슐화 - 상속 - 추상화 - 다형성 * JavaScript에서 객체 지향 프로그래밍 구현 - ProtoType에 대한 이해 * 객체 지향 프로그래밍의 상속(inheritance) - 상속 관계를 가진 현실 세계의 모델을 코드로 작성하기 - 클래스 상속의 원리 - Proto..

유효성 검사 ex) 웹사이트 “회원가입” 할때? 아이디, 이메일, 비번 필수 암호는 숫자와 특수문자 포함 등등.. → 이런거 검사하는 기능을 유효성 검사 최소 기능 제품(MVP) 만들기 연습 학습 목표 * DOM 기초 실습을 통한 구체적 사용법 querySelector onclick, onkeyup, addEventListener 메소드 이벤트 핸들러 함수 → 이벤트 발생한 곳의 정보 확인 이벤트 핸들러 함수 → 유효성 검사 실행 * 유효성 검사에 필요한 기술 요소 검사에 필요한 HTML 엘리먼트, CSS 속성 - display: none - 유효성 검사에 활용할 수 있는 정규 표현식 사용법 기초 * 관심사 분리를 적용하거나 유효성 검사 함수를 따로 분리해서 설계하기 유효성 검사 hands-on 1 엘리..

js/browser – DOM(Document Object Model) DOM은 프로그래머 관점에서 바라 본 HTML DOM 이해하기 DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. 학습 목표 * DOM의 개념 * DOM의 구조와 HTML과 비교 * HTML에서 JavaScript 파일을 불러올 때의 주의점 - ` // html 파일과 같은 디렉토리에 있는 ~파일 불러옴 → 웹 브라우저는 코드를 해석하는 과정에서 요소를 만나면 html 해석을 일시 정지하고 요소를 먼저 실행한다. ..

Spread/Rest 문법 Spread 문법(immutable) ; 전개 구문(각 요소를 펼쳐주는 문법) 주로 “배열을 풀어서” 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용 인터넷 익스플로러는 지원하지 않음(브라우저 호환성) function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 1+2+3=6을 리턴 // `...` 을 붙이는 게 핵심? Rest 문법: ... 파라미터 쓰는 것! 파라미터를 배열의 형태로 받아서 사용 가능 → 정해지지 않은 파라미터는 배열로 나타냄 파라미터 개수가 가변적일 때 유용 function f(a, b, ...theArgs) { // ... } function..