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..

원시 자료형과 참조 자료형 원시 자료형: 고정된 저장 공간 사용 참조 자료형: 동적으로 변하는 저장 공간 사용(함수, 배열, 객체 등) 학습 목표 * 원시 자료형과 참조 자료형의 구분이 필요한 이유? * 원시 자료형과 참조 자료형의 차이? * 원시 자료형은 변수에 값이 할당되고 참조 자료형은 “주소”가 할당된다 * 참조 자료형은 동적으로 크기가 변하는 특별한 보관함을 사용한다원시, 참조 자료형 쉽게 이해하기 원시 자료형: 값(value)가 stack에 직접적으로 저장되어 있다. 값을 stack 보관함에서 바로 꺼내오는 구조 참조 자료형: 보관함에 값이 저장이 된 것이 아니라 어디를 참조 해라는 “주소”가 저장되어 있다. 그 주소에 해당하는 값은 heap에 저장이 되어 있어서 보관함에서 주소를 보고 hea..

배열, 객체 checkpoint 간단 정리 배열 unshift/shift/push/pop의 특징 → 원본 배열을 변화시킨다(mutable) 메서드 기능 return ================================================================ unshift 배열의 맨 앞에 요소 추가 배열의 새로운 길이(length) shift 배열의 맨 앞의 요소 제거 제거된 요소(element) push 배열의 맨 뒤에 요소 추가 배열의 새로운 길이(length) pop 배열의 맨 뒤의 요소 제거 제거된 요소(element) array.slice() → immutable 메서드(원본 배열을 변화x) → start는 포함 end는 미포함(strat, end는 index값임) arr...

배열, 객체 배열과 객체라는 개념을 통해, 수 많은 데이터를 한 번에 처리 배열과 객체는 참조 타입(reference type) 데이터 참조 타입 데이터는 이전에 학습한 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격을 가짐 배열 기초 학습 목표 [배열 기초] * 용어들에 대한 이해 - index, element, length - arr[0], push, pop * 배열에서 특정 인덱스의 요소(element)를 조회하거나 변경 * 이중 배열: 배열의 요소가 배열 * 이중 배열의 요소를 조회, 변경 [배열의 반복] * 배열의 요소를 반복적으로 불러오는 방법 * 배열에 각 요소에 대해 반복하는 코드 실행 - 기본적인 for문을 응용한 다양한 for문 만들기 - 반복문에 ..

ch – 반복문 단순한 반복을 보다 효율적이고 간결하게 할 수 있도록 하는 반복문 [학습 목표] for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용한 다양한 for문 생성 for문과 while문의 차이 이해 반복문에 조건문을 적용하여 특정 조건에서만 반복문 실행되게 하기 이중 for문에 대한 이해 반복문 기초 반복문: 같거나 비슷한 코드를 여러 번 실행시켜야 할 때 쓰는 구문 → 반복할 조건을 코드로 작성 for 구문 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다 for(초기문;조건문;증감문){ //반복할 내용 } ex) let sum=1; for(1et n=2;n

# ch-조건문(conditional) - truthy, falsy가 조건문에서 작동하는 방식 이해 - 비교 연산자를 통한 엄격한 비교(===, !==) 이해 - if, else if, else를 이해 - 논리연산자(&&, ||, ! …) 사용해보기 - 복잡한 조건문을 활용하여 실생활 문제 해결 알고리즘 구현 # 조건문 기초 Boolean 타입에 대한 이해 조건문은 어떤 조건을 판별하는 **기준**을 만드는 것 조건문에는 반드시 **비교 연산자**가 필요 , ===(같다), !==(다르다) 비교의 결과는 항상 Boolean, 즉 true 또는 false 이다 ==, != 은 느슨한 비교이므로 사용하지 않는 것이 좋다! → 예외 케이스가 많아서 정확한 결과를 도출하기 어렵기 때문 # 조건문 사용..