개인공부용 학습 정리

🚀JavaScript

1. JavaScript 객체

1) Object(객체)

• 데이터를 저장하고 사용할 수 있는 속성과 기능을 수행하는 메서드를 모아놓은 것
• 객체의 종류
  • 사용자 정의 객체 : 직접 생성하는 객체
  • 내장 객체 : 제공되는 객체
    • 일반 객체
    • BOM(브라우저 객체 모델)
    • DOM(문서 객체 모델)
  • 3rd Party 객체 : 외부 라이브러리에서 제공하는 객체

2) JavaScript 객체 생성

• 객체 생성

var | let | const 객체명 = {"속성명1":데이터1, "속성명2":데이터2, ... }

• 요소 접근 : 객체명["속성명"] 또는 객체명.속성명
• UpSert : 객체명.속성명 = 데이터
  • 이 속성이 있으면 데이터 update
  • 이 속성이 없으면 데이터 insert
• 객체 삭제 : delete 객체명.속성명
• 객체 속성 제거 : delete(객체명.속성명)

3) Method

• Function : 전역
• Method : 객체에 해당하는 함수, 제한적, Receiver를 통해서만 접근 가능
• Property : 객체에 해당하는 변수
• 속성 안에 메서드를 작성하거나 대입하는 것이 가능
• 객체 내의 메서드 안에서 this를 이용하면 자신의 객체에 대한 속성을 호출해서 사용
• 객체를 통한 내부 메서드 호출 : 객체명.메서드(매개변수)

4) 생성자 함수 (Constructor)

• 동일한 모양의 객체를 생성할 수 있도록 해주는 메서드
• 객체의 속성을 만들 때는 생성자 메서드 안에서 this를 이용해서 생성

function 생성자메서드명(name, ... 매개변수) {
  		this.name = name;
		내용;
}
// 또는
let 생성자메서드명 = function(name, ... 매개변수){
    	this.name = name;
		내용;
}

//객체 생성
var | let | const 객체명 = new 생성자메서드명(매개변수);

5) 클래스 (class)

• 동일한 모양의 객체를 생성할 수 있도록 해주는 모형
• 클래스명은 관습적으로 대문자로 시작
• class는 Hoisting의 영향 받지 않기때문에 선언 전에 사용하면 에러
• constructor는 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할

let 클래스명 = class {
  		constructor(매개변수) {
          	내용
        }
  	메서드 나열
}

new 클래스명(매개변수);

• 실습

let Member = class {
		constructor(name) {
			this.name = name
		}
    //클래스 안에 메소드 만들 때는 let이나 function 생략 가능
	prt() {
		document.write(this.name)
	}
}
//클래스이름을 적지만 실제로는 constructor가 호출됨
new Member("recordhyo")

접근자 메서드 (getter 와 setter)

• getter : 속성을 리턴하는 메서드
  • get속성이름
  • 매개변수 없고 속성을 리턴하기만 하면 됨
  • 속성의 자료형이 boolean인 경우 get대신 is를 사용하기도함
• setter : 속성의 값을 수정하는 메서드
  • set속성이름(매개변수)
  • 매개변수는 1개이고 매개변수의 값을 속성에 대입함
  • 내용을 작성하는 경우에 대부분 유효성검사를 위해 이용함

static 메서드

• 클래스의 prototype에 연결되지 않고 클래스에 직접 연결하기 위한 메서드
• 인스턴스로는 호출할 수 없고 클래스 이름으로만 호출 가능
  • 보통 유틸리티 함수를 만드는데 사용됨
• 메서드 이름 앞에 static 만 기재하면 됨

2. JavaScript 객체 고급

1) 상속 (Inheritance)

• 하위 클래스가 상위 클래스의 모든 것을 물려받는 것
• 클래스를 상속받으면 상속받은 클래스의 메서드와 프로퍼티를 사용할 수 있음
• class Sub extends Super {}

관련 용어

• is-a관계 : 객체지향에서 상속관계를 is-a관계라고 함
• 상위클래스 : Super 나 base 클래스, 상속하는 클래스
• 하위클래스 : Sub 나 derived 클래스, 상속받는 클래스
• 단일 상속 : 하나의 클래스로부터 상속받는 것
• 다중 상속 : 2개 이상의 클래스로부터 상속받는 것

Overriding (재정의)

• 상위 클래스에 존재하는 메서드를 하위 클래스에서 다시 정의하는 것
• 추상 메서드를 다시 만드는 것은 재정의가 아니고 구현임
• 재정의의 목적은 기능 추가
  • 항상 상위 클래스의 메서드를 호출하고 해야함
  • 새로운 기능을 만든다면 이름 다르게해야함

Super

• 하위 클래스에서 상위 클래스의 메서드를 호출할 때
• super.메서드이름()

3. Built-In Object

• 내장 객체, 자바스크립트가 제공하는 객체
• 종류
  • 일반 객체 : 프로그래밍에 필요한 객체
  • BOM (Browser Object Model) : 브라우저와 관련된 객체
  • DOM (Document Objedt Model) : body태그와 관련된 객체

1) 일반 객체

• Object : 최상위 객체
  • 자바스크립트의 모든 객체는 이 객체를 상속받음
• Math 객체
  • 수학과 관련된 기능 제공, 인스턴스 생성하지 않고 사용
  • Math.속성 또는 메서드이름() 의 형태로 사용
• String 객체
  • String은 변경할 수 없는 문자열 저장하기 때문에 모든 메서드 작업 후에 리턴을 함
  • IndexOf, trim(공백제거), split, substring(위치로쪼개기) 등
• Array 객체
  • length, sort, map, filter, for ~ in (순회) 등
• Sort
  • 자바스크립트는 자리수가 같아야 비교가 됨 - 사용자 정의 정렬 지원

2) BOM

• Window 나 navigator 객체 많이 이용

3) DOM

• body와 관련된 태그
• DOM을 가져올 때는 document.getElementById(아이디)로 찾아옴

4. 비동기 처리

1) 동기와 비동기

• 동기 : 순서대로 하나씩 처리
  • 하나의 작업 끝날 때까지 기다려야해서 나머지 작업은 중지상태가 됨
• 비동기 : 웹페이지를 리로드하지 않고 데이터를 불러오는 방식
  • 작업 수행 중 다른 작업을 수행할 수 있도록 함
  • 끝나면 반드시 알려줘야함 (Callback)

2) ajax (Asynchronous Javascript And XML)

• 자바스크립트와 XML을 이용한 비동기 통신 처리를 구현하는 기술
• 전체 페이지 새로고침 없이도 데이터를 받아올 수 있으며 페이지의 일부를 업데이트

5. JavaScript 라이브러리

• jQuery : 크로스 플랫폼의 자바스크립트 라이브러리 - Edge 생기면서 굳이 사용할 필요 없어짐
• bootstrap : 반응형 웹 (디바이스크기별)을 쉽게 만들 수 있음
• d3js : 자바스크립트로 차트 등 데이터를 시각화해줌
• express.js : 자바스크립트로 웹서버 만들 때 이용
• nest.js : Spring 처럼 사용 가능 + express.js
• axios : ajax를 편리하게 사용하게 함
• SPA Framework
  • vue.js : 점진적으로 채택할 수 있음 (중국에서 주로 사용)
  • react : vue.js랑 비슷
  • next.js : react의 툴체인
• 모바일 앱 라이브러리
  • react-native : figma로 화면 개발 후 사용
  • ionic : 최근에는 사용 안함
• electron : PC용 애플리케이션