웹 개발자 도전기

생성자 함수 (상속)자바스크립트에서 생성자 함수와프로토타입을 사용하여 상속을 구현하는 것은 객체 지향 프로그래밍의 기본적인 방식 중 하나 이다. 이를 통해 코드를 재사용하고 객체 간의 관계를 명확히 할 수 있습니다. 1. 생성자 함수 정의 및 상속의 개념생성자 함수 정의 : 생성자 함수는 객체를 생성하고 초기화하는 역활을 합니다.상속 : 자식 생성자 함수가 부모 생성자 함수의 프로퍼티와 메소드를 상속받아 재사용하는 것을 의미합니다.2. 생성자 함수 상속의 이점재사용성 : 부모 생성자 함수의 코드를 재사용하여 중복을 줄입니다.확장성 : 부모 생성자에 없는 새로운 프로퍼티나 메소드를 자식 생성자에서 추가할 수 있습니다.유지보수성 : 필요에 따라 부모 생성자의 프로퍼티나 메소드를 재정의할 수 있습니다.3. 생..

프로토타입과 상속자바스크립트는 프로토타입(prototype) 기반 상속을 지원하는 객체 지향 프로그래밍 언어입니다.자바와 같은 클래스 기반 언어와는 달리 자바스크립트는 모든 객체가 다른 객체를 상속받을 수 있는 프로토타입 체인(prototype chain)을 사용합니다. 프로토타입 객체란?프로토타입 객체는 생성자 함수로 생성된 모든 인스턴스에 상속하려는 속성과 메서드를 정의하기 위한 부모 객체입니다.생성자 함수를 정의하면 자바스크립트 엔진은 생성 단계에서 생성자 함수와 연결된 프로토타입 객체를 자동으로 생성합니다. 프로토타입 체인모든 자바스크립트 객체의 최상위 부모 객체는 Object 프로토타입 객체입니다. _proto_ 와 prototype 프로퍼티_proto_ 프로퍼티는 생성된 인스턴스의 부모(프로토..

모듈은 코드의 재사용성과 유지보수성을 높여주는 중요한 개념입니다.자바스크립트에서는 주로 CommonJS와 ECMAScript6(ES6) 모듈 형식을 사용합니다. 모듈(Module) 이란 ?모듈의 정의 : 특정 기능을 수행하는 함수나 변수들의 코드 집합.재사용성 : 모듈은 자체로 하나의 프로그램이면서 다른 프로그램의 부품으로 사용할 수 있습니다.코드 관리 : 파일 단위로 모듈을 작성하면 여러 프로그램에서 재사용할 수 있어 관리하기 편리합니다.구조화 : 애플리케이션의 규모가 커지면 기능별로 모듈화하여 개발하는 것이 중요합니다.구성 요소 : 모듈은 특정 목적을 가진 여러 개의 함수 , 생성자 함수 또는 객체로 구성된 하나의 파일로 이루어집니다. 노드(Node.js)에서의 모듈 형식Node.js 에서는 두 가지..

자바스크립트 객체의 종류 1. 사용자 정의 객체개발자가 직접 정의한 객체로 이름: 값 쌍으로 구성된 프로퍼티와 메서드를 가질 수 있습니다. 프로퍼티 이름은 문자열, 숫자, 심벌만 사용할 수 있으며 각 프로퍼티는 쉼표(,)로 구분합니다. 2. 내장 객체 (Built-in Object)자바스크립트 언어에 미리 정의된 객체로 프로그램 개발 시 자주 사용하는 요소들을 포함합니다. 대표적인 예로 Number, Boolean, Date, Math, Array 등이 있습니다. 3. 문서 객체 모델 (DOM: Document Object Model)웹 문서의 요소들은 메모리 상에 객체로 생성되어 있는데 이를 DOM이라 한다. 예를 들어 document 객체는 웹 문서 자체를 image 객체는 이미지 요소를 의미한다. ..

객체 지향 프로그래밍 개요 객체 지향 프로그래밍 (Object-Oriented Programming)객체 지향 프로그래밍은 '객체' 간의 상호작용을 중심으로 데이터를 처리하는 프로그래밍 개발 방법이다.현실 세계가 다양한 객체들의 상호작용으로 운영되듯이 프로그램도 여러 개의 독립된 단위인 '객체' 들의 모임으로 파악하고자 하는 프로그래밍 방식이다.객체 지향 프로그래밍은 현실 세계를 모방한 것이다.객체 (Object)실생활에 존재하는 명사형의 모든 실체(사람,사물,개념 등)를 말한다.예 : 자동차, 도서, 학생, 학과, 성적, 수강, 회원, 상품, 장바구니, 주문, 은행계좌 등객체의 특징 :식별 가능한 이름이 있으며 관련된 상태정보(속성)와 행위를 가진다.속성 : 예를 들어, 학생의 이름, 학과 , 학번 등..

함수 선언문 (Function Declaration)    기본 형식 :function 함수이름(매개변수){// 기능 구현    return 반환값;}    호이스팅이 되어 함수 선언 전에 호출할 수 있다.함수 표현식 (Function Expression)    기본 형식:let 변수 = function(매개변수){// 기능 구현    return 반환값;};    호이스팅되지 않아 선언 후에만 호출 가능합니다.화살표 함수 (Arrow Function)    기본 형식:const 함수 = (매개변수) => {// 기능 구현    return 반환값;};    간결한 문법으로 ' this ' 값을 상속받으며 생성자 함수로 사용할 수 없습니다.즉시 실행 함수 (IIFE)    기본 형식:(function()..

함수 ( function ) 란 ? 프로그램 개발 시 자주 사용하는 기능들을 여러 개의 명령들로 묶어 놓은 서브 프로그램을 말한다.기능별로 독립된 실행 코드 블록으로 묶어 놓으면 필요할 때마다 원하는 기능을 실행할 수 있고 같은 기능이 필요한 다른 곳에서도 다시 사용할 수 있는 장점이 있다.또한 에러 발생 시 에러 요신을 빠르게 유추할 수 있으며 유지보수가 수월하다.  함수 사례 일정 관리 프로그램 개발일정 추가 함수 : [추가] 버튼을 클릭하면 일정 목록에 추가하는 기능일정 목록 함수 : 목록을 화면에 표시하는 기능일정 수정 함수 : [수정] 버튼을 클릭하면 일정을 수정하는 기능일정 삭제 함수 : [삭제] 버튼을 클릭하면 목록에서 삭제하는 기능  함수 선언 및 사용 함수를 선언할 때는 function ..

제어문 이란? 프로그램의 실행 순서를 개발자가 원하는 방향으로 바꿀 수 있도록 해주는 문장을 말한다.모든 프로그램은 기본적으로 위에서 아래로 , 좌에서 우로 순차적으로 실행하는 흐름을 가진다.어떤 조건에 따라 명령 실행 순서를 바꾸거나 특정 구문만 계속 반복 실행하려면 조건문이나 반복문을 사용해야한다.조건을 체크하기 위해 비교 연산자나 논리 연산자가 중요하게 사용된다.  조건(분기)문 if문 , if ~ else 문 , if ~ else if문 , swich ~ case 문  반복문 while문 , do ~ while 문 , for 문  이동문 break , continue , return  if 문 if 다음에 소괄호를 사용해서 조건을 지정하고 조건 결과값에 따라 true이면 블록( {...} ) 안에..

연산자 란? 프로그램에서 특정한 동작을 하도록 지시하는 기호를 연산자라 한다.대부분의 프로그래밍 언어가 사용하는 연산자는 동일한 의미를 가진다.연산자 종류  산술 연산자산술 연산자는 이미 우리가 알고 있는 수학적 계산을 위해 사용하는 연산자이다.피 연산자가 두 개인 대표적인 이항 연산자로 사칙연산 및 나머지(%) 연산을 수행한다.  할당( 대입 ) 연산자할당 이라는 것은 = 연산자를 기준으로 오른쪽의 값을 왼쪽의 변수에 저장한다는 의미이다.복합 대입 연산자  증감 연산자(++ , --)변수의 앞이나 뒤에 붙어서 변수의 값을 1 증가시키거나 또는 1 감소시키는 단항 연산자이다.주의사항연산자가 어느 위치에 있는가에 따라 연산이 수행되는 시점이 다르기 때문에 앞뒤의 문맥을 잘 파악해서 사용해야 된다.연산자가 ..

변수란 ? 프로그래밍에서 값(문자열 , 숫자 등)을 저장하기 위해 사용하는 메모리 저장 공간이다.의미 있는 이름이 부여된 상자에 비유할 수 있다.변수를 통해 프로그램은 메모리의 특정 번지에 데이터를 저장하고 읽을 수 있다.   JavaScript 변수 선언 : let 과 const  자바스크립트는 변수 선언 시 데이터 타입을 명시하지 않고 let , const 키워드를 사용하여 선언할 수 있다. ` let ` 키워드특징 : 블록 범위 변수를 선언합니다.용도 : 값이 변경될 수 있는 변수를 선언할 때 사용합니다. ` const ` 키워드특징 : 블록 범위 상수를 선언합니다.용도 : 값을 변경할 수 없는 변수를 선언할 때 사용합니다. 상수로 선언된 변수는 재할당이 불가능합니다.   자바스크립트 변수의 특징 ..