JavaScript(4)

1.Function

1)개요
=>자주 사용되는 코드를 하나의 이름으로 묶어두고 하나의 명령의 형태로 호출하는데 독립적으로 메모리를 할당받아서 실행

2)종류
=>Javascript에서 제공하는 함수
=>사용자 정의 함수
=>3rd party 함수: 다른 개발자가 만든 함수

3)함수는 일급 객체
=>함수도 하나의 자료형, 데이터
=>함수를 변수에 대입하는 것이 가능
=>함수를 리턴하는 것이 가능
=>함수 안에 함수를 만드는 것이 가능
=>함수를 매개변수로 사용하는 것이 가능

4)함수 생성
=>function 다음에 이름을 기재
function 함수이름(매개변수 나열){
함수의 내용
}

 

=>함수를 변수에 대입
var | let | const 이름 = function(매개변수 나열){
함수의 내용;
}

 

5)함수 호출
함수이름(매개변수 대입)

6)함수의 매개변수
=>함수를 호출할 때 넘겨주는 데이터를 매개변수(argument 또는 parameter)라고 합니다.
=>javascript에서는 함수를 호출할 때 뒤에서부터 매개변수를 생략할 수 있는데 생략을 하면 undefined
=>추가로 대입하는 것도 가능한데 이 경우는 내부에서 arguments[인덱스]를 이용해서 사용할 수 있습니다.

7)callback 함수
=>이벤트가 발생했을 때 호출되는 함수

8)중첩 함수
=>함수 안에 함수가 존재하는 경우

9)고차 함수(High Order Function)
=>함수가 다른 함수를 리턴하는 경우
=>currying 이라고 하는데 디자인 패턴 중 하나

10)closure
=>함수가 함수를 리턴해서 외부에서 함수 내부의 변수의 값을 수정하는 것

11)자바스크립트도 매개변수 초기화(기본값 설정) 가능

 

12)내장 함수: 실제로는 window 객체가 가지고 있는 메서드인데 window 객체는 내부 요소를 객체 이름을 생략한 형태로 호출이 가능
=>alert
=>confirm: alert 와 사용법은 같은데 버튼이 2개가 만들어지고 누른 버튼에 따라 true 와 false
=>prompt(메시지, 기본데이터): 텍스트를 입력받는 대화상자를 출력하는 함수로 확인을 누르면 입력한 문자열을 리턴하고 취소를 누르면 null 리턴

=>eval: 문자열을 대입하면 문자열에 해당하는 객체를 찾아서 리턴해주는 함수

=>인코딩 과 디코딩 관련 함수
- Encoding: 데이터를 컴퓨터에 저장되는 형태로 변환하는 것
- Decoding: 컴퓨터에 저장된 데이터를 인간이 알아 볼 수 있도록 변환한 것
- 인코딩 관련 함수
escape: 일부 특수문자를 제외한 문자를 인코딩 해서 리턴하는 함수

encodeURI: 인터넷 URL에서 사용하는 특수문자를 제외하고 인코딩하는 함수 - 중요
  URL은 반드시 인코딩해서 사용

encodeURIComponent: 알파벳 과 숫자를 제외한 모든 문자 인코딩

- 디코딩 함수
unescape, decodeURI, decodeURIComponent

=>parseInt 와 parseFloat
- 숫자로 된 문자열을 숫자로 변환해주는 함수

 

2.OOP(객체 지향 프로그래밍)

=>자바스크립트는 객체 기반 언어인데 타입스크립트는 객체 지향 언어

객체 기반 언어는 클래스가 없는데 객체 지향 언어는 클래스가 있음

 

1)Object
=>관련있는 속성(데이터) 과 메서드(함수)의 집합
=>다른 언어에서는 대부분 Instance 라고 표현
=>종류
- 사용자 정의 객체

- 내장 객체: 제공되는 객체
  일반 객체
  BOM: 브라우저에서 제공하는 객체
  DOM: HTML 문서에서 만든 객체

- 3rd party 객체

=>사용자 정의 객체 생성
{이름: 데이터, 이름: 데이터...}
- 함수도 데이터

=>사용자 정의 객체 사용
- 이름.속성이름 또는 함수 호출
- 속성을 호출할 때는 이름[속성이름] 으로 호출 가능
- 자바스크립트 객체는 동적으로 생성되므로 필요한 속성을 나중에 추가해도 됩니다.
파이썬도 클래스를 만들 때 제약을 설정하지 않으면 동일

=>for 임시변수 in 객체{ }
- 객체의 모든 속성이 임시변수에 대입

=>속성 in 객체
- 속성이 객체에 존재하면 true 그렇지 않으면 false를 리턴
- 자바스크립트는 브라우저가 해석하기 때문에 브라우저 별로 속성이 달라서 속성의 존재 여부를 확인해서 다른 속성으로 대체하는 경우가 많습니다
최근에는 이런 경우가 많이 없어졌는데 IE 6.0 을 지원해야 하는 경우라면 이 문법은 중요

=>객체의 속성 제거
delete(객체.속성)

 

2)생성자(Constructor)
=>객체를 생성해주는 함수
=>동일한 속성을 갖는 객체를 여러 개 만들어야 하는 경우에 사용
타입 스크립트에서는 class를 이용
=>생성 방법
function 이름(매개변수){
내용;
내용을 만들 때 this. 을 이용하면 함수의 지역변수가 만들어지는 것이 아니고 객체의 속성이 만들어 집니다.
}

=>호출 방법
new 이름(매개변수) 으로 호출하면 객체가 만들어지고 그 id를 리턴

3)class
=>ES6(ECMA 2015)에서 부터 지원
=>선언
class 클래스이름{ 내용 }: 기본 클래스로부터 상속
class 클래스이름 extends 상위클래스이름 { 내용 }

=>react 초창기에는 컴포넌트를 클래스로 만들었는데 최근에는 함수로 만듭니다.
=>클래스로 만들게 되면 기본 클래스로부터 상속을 받기 때문에 불필요한 멤버가 만들어지는 경우가 있기 때문
예전에는 클라이언트 애플리케이션이 view 의 역할만 수행했기 때문에 무겁지 않았지만 최근에는 클라이언트 애플리케이션이 view의 역할을 넘어서서 처리도 수행하는 경우가 많기 때문에 무거워지면 안된다고 생각해서 함수를 이용해서 프로그래밍 하는 경우가 많습니다.

=>클래스 안에서 생성자를 만들고자 하는 경우는 constructor(매개변수){내용}

 

4)배열
=>배열의 생성: [데이터 나열]
=>for(임시변수 of 배열){ 내용;}
배열의 모든 요소를 순서대로 임시 변수에 대입
of 대신에 in을 사용하면 인덱스가 리턴됩니다.

5)구조 분해 할당

변수 나열 = 객체 또는 배열
=>배열의 경우
- 데이터가 순서대로 대입됩니다.
- 변수의 개수가 데이터 개수보다 적으면 변수의 개수 만큼만 대입됩니다.
- 변수의 개수가 데이터 개수보다 많으면 뒤의 변수에는 undefined 가 대입됩니다.

=>객체의 경우
변수의 이름 과 객체 내의 속성 이름이 같은 경우 매핑됩니다.

=>spread 연산자
구조 분해 할당을 할 때 앞에 ... 을 붙이면 나머지 전부가 됩니다.

 

3.예외처리

1)형식
try{
예외 발생 가능성이 있는 코드
}catch(예외 변수){
예외가 발생했을 때 수행할 내용
}finally{
예외 발생 여부에 상관없이 수행할 내용
}
=>catch 나 finally 중 하나는 생략 가능

2)예외 변수의 멤버
=>message
=>description
=>name

3)예외처리를 하는 경우
=>외부 자원을 사용하는 경우
- 파일 읽고 쓰기
- 서버에게 요청
- 데이터베이스 접근

4)예외 처리의 목적
=>예외가 발생하더라도 작업을 계속 수행하기 위해서 - 서버
=>예외가 발생했을 때 정상적인 종료를 수행하도록 하기 위해서
=>예외의 내용을 로깅(텍스트를 기록)해서 유지보수 나 안정적인 코드를 만들기 위해서
=>최근에는 예외가 발생하면 운영자에게 메시지를 전송하기도 합니다.
이 경우에 JIRA 와 Slack을 이용하는 경우가 많음

 

4.모듈 프로그래밍

1)Module
=>독립적으로 실행할 수 있는 코드의 집합
=>자바스크립트에서는 클래스 나 함수 단위로 모듈을 작성

2)export
=>현재 모듈에서 생성한 것을 외부에서 사용할 수 있도록 내보내는 기능을 수행하는 예약어
=>기본적으로 export 데이터 형태로 작성
=>export default 데이터의 형태로 작성하면 이 모듈을 가져오면 기본적으로 데이터가 export 됩니다.
이 문법은 하나의 모듈에서 한 번만 사용 가능
=>예시
export default expression - import 모듈 명을 사용하면 expression 을 바로 사용 가능

export let name1, name2.... nameN - 배열의 형태로 내보내는 것으로 받을 때는 순서대로 가져다가 사용

export {name1, name2, ... nameN} - 객체의 형태로 내보내는 것으로 받을 때는 이름을 가지고 가져다가 사용

export {원래이름 as 새로운이름,} - 사용하는 곳에서는 새로운 이름을 이용

3)import
import 이름 from "모듈이름" - 모듈에서 default 로 export 된 객체를 이름으로 받아서 사용

import * as 이름 from "모듈이름" - 모듈에서 export 된 모든 멤버를 이름으로 객체로 만들어서 사용
이름.멤버 의 형태로 사용

import {속성 이름 나열} from "모듈이름" - 모듈에서 export 된 데이터 중에 속성 이름에 해당하는 것만 가져와서 사용

import {속성 as 새로운이름} from "모듈이름" - 모듈에서 export 된 데이터 중에 속성 이름에 해당하는 것을 새로운 이름으로 가져와서 사용

import "모듈이름" - css 같은 파일을 import 해서 사용

5.내장 객체

=>자바스크립트가 제공하는 객체
1)일반 내장 객체
=>https://devdocs.io/javascript 에서 도움말을 제공
=>배열 객체의 sort 메서드 동작 원리: 데이터를 문자열로 변경해서 정렬
숫자 데이터의 경우는 함수를 만들어서 대입해서 정렬을 수행해야 합니다.

=>데이터를 이용해서 문자열을 만들 때는 백틱 과 ${ }를 활용

2)BOM
=>브라우저 객체
=>타이머 관련 함수
setTimeout(함수, 시간): 시간 후에 한 번만 함수를 호출 

setInterval(함수, 시간): 시간 단위로 계속 호출

clearTimeout 과 clearInterval은 타이머를 중지

=>navigator 객체
userAgent: 클라이언트 정보 리턴 - 모바일인지 아닌 지 확인 가능

3)DOM
=>DOM은 HTML 태그 안에 포함된 객체
=>태그에 id를 부여하고 document.getElementById("아이디")를 이용해서 가져옵니다.
=>이벤트 처리를 할 때는
DOM객체.addEventListener("이벤트 이름", (e) => {이벤트 처리 내용});
를 권장합니다.

react에서는 이 방법을 사용하지 않고 함수를 만들고 함수를 컴포넌트 태그 안에 이벤트를 적고 함수를 대입하는 구조로 이벤트 처리를 합니다.

=>window 의 load 이벤트: body에 있는 태그를 전부 메모리 할당 한 후 발생하는 이벤트
html 파일이 출력되자 마자 무엇인가를 하고자 하면 이 이벤트를 활용합니다.

 

6.비동기 처리

=>react 나 vue는 UI 와 관련된 부분만 처리
비동기 처리는 자바스크립트 코드를 그대로 사용

1)동기 와 비동기 차이
=>동기는 작업이 발생하면 종료될 때 까지 다른 작업을 수행하지 못하는 것이고 비동기는 작업을 수행하는 도중 다른 작업을 처리할 수 있는 것
=>alert는 동기적으로 동작하고 timer는 비동기로 동작합니다.

2)비동기(다른 언어에서는 스레드)로 처리해야 하는 작업
=>Web API 요청: 서버에게 요청하는 작업은 시간이 걸리는 작업이므로 비동기로 처리하는 것을 권장합니다.
안드로이드 나 iOS는 강제 사항입니다.

=>작업 시간이 긴 작업은 되도록이면 비동기로 처리

3)Promise
=>최근의 자바스크립트에서 비동기 작업 처리에 Promise를 사용하는 것을 권장
new Promise((resolve, reject) => {
비동기 작업
작업이 성공한 경우는 resolve 에게 데이터를 전송하고 실패한 경우는 reject에게 데이터를 전달하도록 작성
}
.then(작업이 성공했을 때 수행할 내용)
.then()
...
.catch(예외가 발생했을 때 수행할 내용)

=>이런식으로 코드 만드는 것이 어려워서 서버에서 데이터 받아오는 부분을 axios 와 같은 라이브러리를 많이 이용합니다.
axios는 기본적으로 fetch API를 이용하고 Promise를 이용해서 비동기 처리를 수행합니다.

4)ajax
=>비동기로 서버에게 데이터를 요청하는 기술
=>XMLHttpRequest 객체를 이용
=>ajax 나 fetch API는 동일한 도메인의 서버(SOP - Same Origin Policy)에게만 요청이 가능
다른 도메인에게 요청을 할 때는 프록시를 구축하거나 서버 애플리케이션에서 CORS 설정을 추가해주어야 합니다.

=>준비 작업: 로컬에서 ajax를 테스트하는 경우 CORS 에러가 발생하는 경우가 있는데 이 문제를 해결
- node 를 설치
- npm install http-server -g
- html 파일을 실행할 때 npx http-server -p 포트번호 로 실행해서 서버 환경에서 실행하도록 해주면 에러가 발생하지 않습니다.
포트번호는 생략하면 8080 이고 브라우저 접속할 때는 localhost:포트번호/파일명 으로 접속이 가능합니다.