플러터는 거의 Widget으로 이루어져 있다고 한다. UI를 구성하는 기본 단위인 Widget이라는게 어떤건지 Widget을 구성하기 위한 디자인 가이드 라인인 Material Design과 Cupertino Design을 알아보자.

Flutter 코드 실제 이미지

Flutter에서 위젯이란, UI를 구성하는 기본 단위다. 마지막으로 공부했던 React에 Component와 유사하다고 생각이 든다.

UI가 어떻게 표시 될 지를 결정하는 부분이다.

기본적인 Widget

• 레이아웃 : Row, Column, Scaffold, Stack
• 구조 : Button, Toast, MenuDrawer
• 스타일 : TextStyle, Color, Padding
• 애니메이션 : FadeInPhoto, Transform
• 위치 & 정렬 : Center, Padding

우선 처음 접한 언어는 Dart다!

Dart란?

• Google에서 개발한 고급 프로그래밍 언어.
• 객체지향 프로그래밍 언어다.
• 안정적이고 빠르게 어플리케이션을 만들기 위해 개발 되었다.
• Dart는 크로스 플랫폼이 가능하도록 설계 되어있다.
• 두 가지 컴파일러(JIT, AOT)를 보유하고 있다.
• JavaScript / Python와는 별개로 강력한 타입 시스템을 갖추고 있다.
• 코드의 안정성과 가독성을 높일 수 있다.

Dart의 변수와 타입

Dart의 변수와 타입에는 기존에 알고 있던 것들이다.

• 기본형 - bool, int, double, String, null
• 자료형 - List, Set, Map
• 확장형 - Object, Enum, Future, Stream

Dart의 연산자

• 산술 연산자 - +, -, *, /, %, ~/, i++, i--, ++i, --i
• 비교 연산자 - ==, !=, >, >=, <, <=
• 논리 연산자 - &&, ||, ??
• 할당 연산자 =, *=, /=, +=, -=, &=, ^=

Null Safety 타입/연산자가 있다. 2.12 버전부터 Null값에 대한 안정성을 위해 Null Safety라는 개념이 도입되었다. Nullable Type *Null을 허용하는 타입 / 변수 뒤에 ?을 붙여 활용 ex) int?, double?, bool? .... *Non-nullable Type Null을 비허용하는 타입 / 변수 뒤에 !을 붙여 활용 (해당 값이 null인 경우 에러 발생) ex) int!, double!, bool! ....

Dart의 클래스 - 생성자

클래스란?

• 클래스는 일종의 객체를 만들기 위한 Template
• 클래스를 활용하여 일종의 데이터와 코드를 그룹화하여 관련된 코드를 유지하고, 객체를 쉽게 만들어 객체지향 프로그래밍을 효과적으로 활용이 가능하다.

  Class의 구성요소 필드 - 클래스 내부에 선언된 데이터 (변수/상수 등) 메서드 - 클래스 내부에 선언 된 기능(함수) 생성자 - 클래스 인스턴스를 생성할 때 사용되는 코드

생성자란?

• 클래스의 인스턴스를 생성하는데 사용되는 코드이다.
• 생성자를 통해 매개변수를 전달하거나 클래스 내 필드의 초기값 설정한다.

Default contrucotrs: 기본 생성자로, 생성자를 선언하지 않을 경우 제공되는 생성자. Named contructors: 개발자가 필요에 의해 생성한 생성자로 클래스에 대한 여러 생성자를 구현하거나, 추가적인 클래스의 명확성을 제공한다. Redirecting constructors: 목적이 동일한 생성자로 전달하기 위한 생성자로 생성자의 본문은 비어 있지만 전달 된 생성자에 대한 초기값 등을 구현할 때 활용 Const constructor: 상수 생성자로, 클래스가 불변의 객체를 생성하는 경우 활용 Factory constructor: 매번 새로운 인스턴스를 만들지 않는 생성자를 활용할 때 사용한다. 이미 존재하는 인스턴스를 반환하거나 단순한 초기 값을 부여가 아닌 연산이 파필요한 객체 생성 시 활용한다.

얼마만의 velog를 접속한지 모르겠다..

프론트엔드를 공부하면서 좌절과 불안함을 많이 느꼈었다. 국비과정을 통해 HTML과 CSS, Django를 알게 되었지만 프론트엔드로서 필요한 스킬들을 제대로 배우지 못하였고 따로 공부를 하고자 했던 제로베이스 부트캠프는 내가 생각했던것과 많이 다른 말로 할 수 없는 무언가를 느꼈고 의욕조차 나질 않게 되어 그만두게 되고 따로 혼자 독학하면서 이게 맞나? 이해가 안되는데? 하면서 서서히 지치게 된것 같다.

불안, 공포, 압박 등등....

그렇게 지쳐갈때즈음 나이에서 오는 압박과 집안형편 등으로 불안감이 고조가 되었고 내 욕심만으로는 이 길을 계속 걸어갈 수 없겠구나라는 생각이 들었고 하여 다른 직무로 무작정 알아보기 시작했다 경영지원, 총무, 생산직, 품질관리 등 다양한 직무를 상대로 이력서를 넣고 면접을 봤지만 이렇다 할 좋은 기회가 오지는 않았다. 여태껏 살아오면서 노력하고 열심히 살지 않았던 나를 탓하면서 1~2달이 순식간에 흘렀다.

다시 공부를?

과연 총무, 경영지원 등 사무직들은 필수적으로 회계가 필요했고 결국은 어떠한 직업을 얻으려면 직무에 맞는 스킬이 필요했고 그러려면 공부를 해야했다. 그럼 처음부터 생소한 공부를 하기보단 내가 하고 있었던 개발 공부를 다시 해보자 생각이 들었고 웹개발을 다시 공부하려다보니 이제는 기억도 나지 않는 HTML/CSS/JavaScript/React를 생각하니 이것도 앞이 까맣게 보이기 시작했다. 그러던 중 flutter 강의 홍보를 우연히 보게 되었고 어차피 제로베이스 느낌처럼 시작할거면 웹개발은 해봤으니 앱개발을 해보자라는 생각이 들었고 그렇게 flutter 공부를 시작하게 되었다.

이 악물고 해보자

flutter를 공부해서 취업이 될지 중간에 포기하고 다른 일을 하러 갈지는 그 누구도 모른다. 다만 다시 마음 잡고 공부하는 만큼 이 악물고 시작해보기로 했다. 물론 상황에 따라 당장 노가다라도 갈지도 모르겠지만...

🚖 다시한번 처음부터 정리

1일차 배운거 복습하며 정리하기!

1. 데이터 타입

데이터 타입의 언어는 2개로 나뉜다. 하나는 강형언어 다른 하나는 약형언어이다.

강형언어의 특징은 변수 선언시 데이터 타입을 지정하는 언어로, C++ JAVA등의 언어가 있다.

약형언어는 변수 선언시 데이터 타입을 지정하지 않는 언어로, 값에 따라 자동으로 데이터 타입이 결정된다.

// 강형언어의 예시

String name = "홍길동";
name = 25; // 에러
int age = 30;

// 약형언어의 예시

var name = "홍길동";
name = 25; // 문자열에서 숫자로 재할당 즉  다른 타입으로 재할당 가능
var age = 30;

데이터 타입의 종류는 2가지다. 기본 타입(Primitive type) ** 과 **참조 타입(Refrence type) 으로 나뉜다.

1. 기본타입

• 숫자(Number)
• 문자열(String)
• 논리값(Boolean)
• null
• undefined
• BigInt
• Symbol

2. 참조 타입

• 객체(Object) 배열(Array) 함수(Function) 날짜(Date) 정규표현식(RegExp) .....

기본 타입 예시

// Number
var num = 100;
var floatNum = 3.14;

// String
var s1 = "single quote";
var s2 = "double quote";

// Boolean
var b1 = true;
var b2 = false;

// undefined

var emptyval;

// null
var nullVal = null;

console.log(num, floatNum, s1, s2, b1, b2, emptyval, nullVal);
console.log(
  typeof num,
  typeof floatNum,
  typeof s1,
  typeof s2,
  typeof b1,
  typeof b2,
  typeof emptyval,
  typeof nullVal
);

위 코드에 값이다. 그렇다면 위에 있는 타입들에 대해서 알아보자.

1-1. 기본 데이터 타입

숫자(Number)

• 64비트 부동소수점 방식.
• 정수, 실수, 음수 양수 구별이 없다.
• ex) var temp = 15; var temp = 15.3; 등으로 구별이 없다.

문자열(String)

• 큰 따옴표나 작은 따옴표 안에 기술한다.
• ex) var name = "김철수"; var name = '김철수'; 등으로 선언한다.

논리값(Boolean)

• 참(true) 또는 거짓(false) 둘 중 하나의 값을 가지는 데이터다.
• ex) var male = true; var male = false; 등으로 참과 거짓을 나눈다.

Undefined

• 값이 없음을 나타냄.
• 값이 할당되지 않은 변수에 타입과 값 모두 undefined로 지정된다.

Null

• 값이 없음을 나타냄.
• 개발자가 의도적으로 값을 비우게 한다.
• 데이터 타입은 object가 된다.

BigInt

• 기본 Number의 범위는 약 1.7976931348623157e+308으로 Number.MAX_VALUE;로 선언한다.
• Number의 안전한 정수 범위는 약 9000조까지로 Number.MAX_SAFE_INTEGER;로 선언한다
• BigInt의 선언 방식은 값뒤에 n을 붙이거나 BigInt()함수의 인자로 값을 지정한다.
• ex) var b1 = 12345n; var b2 = BigInt(maxSafeNum);

Symbol

• 불변하고 고유함이 보장되는 값이다.
• 주로 객체의 속성을 정의할 때 다른 속성키와 충돌하지 않도록 만들때 필요하다.

  var s1 = Symbol("hello");
  var s2 = Symbol("world");
  var s3 = Symbol("hello");
  

console.log(s1 === s2); // false console.log(s2 === s3); // false console.log(s1, s2, s3); // false

### 2. 참조형 데이터 타입(Object, 객체)

**Object**

- key-value 쌍의 데이터 집합(속성, property)
- 속성의 값으로 모든 데이터 타입 지정 가능하다.
값으로 함수가 지정된 속성을 메소드(method)라 한다.
- 여러개의 속성을 포함할 수 있다.

#### 2-1. 객체 생성

**객체 생성 1**
- 객체 생성.
- Object 생성자 함수로 생성 후 속성과 기능 부여.
- 객체의 속성과 기능에 접근할 때는 dot연산자(.)를 이용하거나 ['속성명'] 표기 사용.

```js
var foo = new Object();
foo.name = "kim";
foo["age"] = 30;
foo.job = "student";
foo["married"] = false;

console.log(foo["name"], foo.age, foo.job, foo["married"]); // kim, 30, student, false
console.log(typeof foo, foo); // object {name: kim, age: 30, job: student, married: false}

객체 생성 2

• JSON(JavaScript Object Notation) 표기법을 이용한다.
• {속성명1: 속성값1, 속성명2: 속성값2,...}
• stringfy를 쓰면 문자열로 변환
• parse를 쓰면 객체로 변환

var foo1 = {
  name: "lee",
  age: 35,
  job: "teacher",
  married: true,
};

console.log(foo1["name"], foo1.age, foo1.job, foo1["married"]); // lee 35 teacher true
console.log(typeof foo1, foo1); 
// object {name: lee, age: 35, job: teacher, married: true}
var strfoo1 = JSON.stringify(foo1);
console.log(typeof strfoo1, strfoo1, strfoo1.age);
// string {name: lee, age: 35, job: teacher, married: true}
var objfoo = JSON.parse(strfoo1);
console.log(typeof objfoo, objfoo, objfoo.age);
// object {name: lee, age: 35, job: teacher, married: true}

JSON 표기법

• 자바스크립트의 객체와 배열을 표기하기 위한 리터럴이다.
• 객체는 대부분의 언어가 object, record, struct, dictionary, hash table, map, 연상배열 등으로 구현한다.
• 배열은 대부분의 언어가 array, vector, list, sequence 등으로 구현한다.
• 통신에서 교환하는 데이터의 포맷으로 널리 사용된다.

객체 표기법

• {속성명1: 속성값1, 속성명2: 속성값2....}

배열 표기법

• [요소값1, 요소값2, 요소값3]

객체의 모든 속성 접근

• for in 구문

  // 객체 생성
  var foo = {
  name: "foo",
  major: "computer science",
  };
  // 객체 프로퍼티 읽기
  console.log(foo.name.toUpperCase(), foo["major"], foo.sub /*.toupperCase()*/); // FOO computer science undefined
  

// 객체 프로퍼티 갱신 foo.major = "electronic engineering"; console.log(foo.name.toUpperCase(), foo["major"], foo.sub /.toupperCase()/); // FOO electronic engineering undefined

// 객체 프로퍼티 동적 생성 foo.sub = "computer engineering"; console.log(foo.name.toUpperCase(), foo["major"], foo.sub /.toupperCase()/); // FOO electronic engineering computer engineering

// 객체 프로퍼티 삭제 delete foo.major; console.log(foo.name.toUpperCase(), foo["major"], foo.sub /.toupperCase()/); //FOO undefined computer engineering

// 객체 모든 프로퍼티 읽기

for (var prop in foo) { console.log(prop, foo[prop]); } // name foo // sub computer engineering

```

결국 제로베이스 부트캠프를 하차하였다.

제로베이스 부트캠프를 하차하게되었다. 점점 밀려오는 게으름이 결국 발목을 붙잡았다. 사전녹화된 강의를 보며 혼자 공부를 하다 보니 그렇게 된것 같다는 생각이 들기도 하면서 누굴 탓하겠는가 결국 내 잘못인것을.. 그리고 하차하게 된 계기가 하나 더 있는데 인스타 를 보다 우연히 발견한 멋쟁이사자차럼 프론트엔드스쿨 플러스라는 과정이 있어 봤더니 kdt수료생을 기준으로 모집하는 프론트엔드 강의였다. 마침 필요한 자바스크립트와 리액트에 대하여 심화적으로 강의를 한다하여 신청을 하고 제로베이스는 자진하차하게 되었다!

리액트를 아직 접하지도 못했지만 일단 신청을..

신청 후 간단한 인터뷰와 동시에 합격했고 어제 OT를 진행하였고 오늘부터 자바스크립트 이론에 대하여 수업을 진행하였다. 사실 오프라인 수업이 끌려서 신청한거지만 이론 교육은 줌으로 대체하여 진행하고 프로젝트만 오프라인으로 변경되어 아쉽긴 하지만 그래도 화이팅 해보자는 생각에 오랜만에 블로그 글을 올리려 한다.

앞으로는 그날에 배웠던 이론에 대하여 정리하고 따로 결제한 인강을 들으면서 블로그 정리를 할 예정이다!

REST

우선 RESTful을 알아보기전에 REST를 알아보자. REST(Representational State Transfer) 즉, 대표상태전송이라고 한다. 웹이 HTTP의 설계 상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍쳐로서 REST를 소개했고 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도했다고 한다!

REST 개념

1. 모든 리소스에 대해 고유의 URI을 부여한다.

2. HTTP Method를 이용해 CRUD 명령을 내림.

CRUD와 HTTP Method

CRUD CREATE, READ, UPDATE, DELETE HTTP Method POST, GET, PUT, DELETE 이 부분에 대해서는 다른편에서 제대로 다루어보겠다.

어찌되었든 위에서 말한 대표 상태 전송 REST는 URI가 부여된 리소스의 상태를 응답으로 전송한다는 의미를 가지게 된다.

URL과 URI의 차이점은 또 다음편에 계속!

REST 구성 요소

1. 자원(Resource)

• 모든 자원에는 고유한 ID가 존재하고, 이 자원은 서버에 존재한다. REST는 자원에 접근할 때 URI를 이용한다.

2. 메서드(Method)

• REST는 HTTP 메서드를 사용하는데 HTTP 메서드의 종류는 GET, POST, PUT, DELETE 등이 존재한다.
• GET: GET을 통해 해당 리소스를 조회한다. 리소스를 조회하고 해당 도큐먼트에 대한 정보를 가져온다.
• POST: POST를 통해 URI를 요청하면 리소스를 생성한다.
• PUT: PUT을 통해 리소스를 수정한다.
• DELETE: DELETE를 통해 리소스 삭제한다.

3. 메시지(Message)

• 메시지는 HTTP header, body, 응답 상태 코드 등으로 구성되어 있다. header에는 HTTP body에 어떤 데이터가 담겼는지 표시하고 body는 자원 정보를 JSON, XML으로 전달하게 된다. 응답상태 코드는 200~500사이의 숫자로 알려준다.

응답상태 코드 1XX: Informational(정보 제공) 임시 응답으로 현재 클라이언트의 요청까지는 처리되었으니 계속 진행하라는 의미 2XX: Success(성공) 클라이언트의 요청이 서버에서 성공적으로 처리되었다는 의미 3XX: Redirection(리다이렉션) 완전한 처리를 위해서 추가 동작이 필요한 경우다. 주로 서버의 주소 또는 요청한 URI의 웹 문서가 이동되었으니 그 주소로 다시 시도하라는 의미 4XX: Client Error(클라이언트 에러) 없는 페이지를 요청하는 등 클라이언트의 요청 메시지 내용이 잘못된 경우를 의미 5XX: Server Error(서버 에러) 서버 사정으로 메시지 처리에 문제가 발생한 경우다 서버의 부하, DB 처리 과정 오류, 서버에서 익셉션이 발생하는 경우를 의미

REST 장/단점

API

API는 Application Programming Interface의 줄임말이다. API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 말한다.

API의 작동 구조

API 아키텍처는 일반적으로 클라이언트와 서버 측면에서 설명이 된다. API가 생성된 시기와 이유에 따라 API는 네 가지 방식으로 작동한다.

REST API

자 드디어 REST API가 나왔다. REST API는 REST 기반으로 서비스 API를 구현한 것이다. 웹 애플리케이션이 제공하는 각각의 데이터를 리소스로 간주하고 각각의 자원에 고유한 URI를 할당함으로써 이를 표현한 API이다.

REST API의 장점

• 통합 : API는 새로운 애플리케이션을 기존 소프트웨어 시스템과 통합하는데 사용된다. 각 기능들을 처음부터 작성할 필요가 없기 때문에 개발에 있어 용이.

• 혁신 : 기업은 신속하게 대응하고 혁신적인 서비스의 신속한 배포를 지원해야 한다. 따라서 전체 코드를 다시 작성할 필요 없이 API를 변경할 수 있다.

• 확장 : API는 다양한 플랫폼에서 고객의 요구 사항을 충족할 수 있는 고유 기회를 제공한다. 예로 지도 API를 사용하면 웹, 모바일 등을 통해 지도 정보 통합이 가능하다.

• 유지 관리의 용이성 : API는 두 시스템 간의 게이트웨이 역할을 한다. API가 영향을 받지 않도록 각 시스템은 내부적으로 변경해야 한다.

RESTful API

REST는 위 정의들을 구현하는 방식에 제약을 두지 않기 때문에 구체적인 가이드라인이 없다. 하지만 RESTful이라는 개념을 통해 그 가이드라인이 제시됩니다. RESTful는 REST를 REST답게 쓰기 위한 방법으로 누군가가 공식적으로 발표한 것이 아니라 여러 개발자들이 비공식적으로 의견을 제시한 것들로 명확한 정의는 없다. 즉 개발자마다 생각하는 RESTful의 내용이 다르다. 하지만 RESTful의 목적은 명확하다. 이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것이다.

한때 논란이 있었던 HTTPS 검열 사건... 오늘은 HTTP, HTTPS에 대해서 알아보자!

HTTP

HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜이다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답한다.

HTTP 작동

클라이언트 서버에게 요청을 보내는 리소스 사용자 ex) 웹 브라우저, 모바일 애플리케이션, IoT 등 서버 클라이언트에게 요청에 대한 응답을 제공하는 리소스 관리자

클라이언트(웹 브라우저, 모바일 등)가 브라우저를 통해서 어떠한 서비스를 URI를 통해 서버에 요청(Request)하면 서버에서는 해당 요청에 대한 결과를 응답(Response)하는 형태로 동작한다.

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전이다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정한다.

HTTP와 HTTPS의 차이점

HTTP는 암호화가 추가되지 않았기 때문에 보안에 취약한 반면, HTTPS는 안전하게 데이터를 주고받을 수 있다. 하지만 HTTPS를 이용하면 암호화/복호화의 과정이 필요하기 때문에 HTTP보다 속도가 느리다. 또한 HTTPS는 인증서를 발급하고 유지하기 위한 추가 비용이 발생하다.

그렇다면 언제 HTTP를 쓰고, 언제 HTTPS를 쓰는 것이 좋은가?

개인 정보와 같은 민감한 데이터를 주고 받아야 한다면 HTTPS를 이용해야 하지만, 노출이 되어도 괜찮은 단순한 정보 조회 등 만을 처리하고 있다면 HTTP를 이용하면 된다.

브라우저 저장소

브라우저 저장소는 클라이언트 웹 브라우저에 저장할 수 있는 기능이다. 쿠키가 첫등장하면서 쿠키를 사용하였지만 쿠키의 단점들이 부각되면서 Web Storage가 도입되어 사용되었다.

쿠키의 단점

• 적은 저장공간과 보안 문제
• 성능저하 문제
• HTTP 특성인 비연결성, 무상태성 때문에 클라이언트의 정보들이 페이지를 이동할때마다 초기화

📢 HTTP의 비연결성, 무상태성

• 비연결성(Connectionless): 클라이언트가 서버에게 Request를 보내고, 서버가 클라이언트에게 Response를 보내면 접속을 종료한다.
• 무상태성(Stateless): 통신이 끝나면 상태 정보를 유지하지 않는다.

그렇다면 쿠키 대신 나온 Web Storage에 대해서 알아보자.

Web Storage

HTML5부터 제공하는 기능으로서 데이터를 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능이다.

특징

• 쿠키에 비해 많은 정보를 저장할 수 있다.
• 단순한 문자열을 넘어 객체 정보를 저장할 수 있다.
• 만료 기간의 설정이 없어 영구적으로 데이터 저장이 가능하다.

종류

LocalStorage 보관 기한이 없는 데이터를 저장할 수 있는 객체 브라우저를 끄거나, 컴퓨터를 재실행해도 데이터가 사라지지 않는다. 도메인마다 별도의 LocalStorage가 생성되고 같은 도메인에서 전역적으로 공유가 가능하며, windows 전역 객체의 LocalStorage라는 컬렉션을 통해서 저장과 조회가 이루어 진다.

Session Storage 세션스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장된다. Session Storage는 Local Storage와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

IndexedDB

IndexedDB는 비동기적으로 데이터를 저장하고 검색한다. 또한, IndexedDB는 키-값 쌍이 아닌, 객체 형태로 데이터를 저장하며, 저장된 데이터는 색인(index)을 사용하여 검색한다. 이를 통해 대용량의 데이터를 빠르게 검색할 수 있다.

IndexedDB 와 Storage 차이

IndexedDB 많은 데이터를 저장하기 하고, 이를 Index 를 이용하여, 빠르게 검색할 수 있게 설계 되었다. Storage 인 Local Storage 와 Session Storage 는 최대 10MB 만 저장이 가능하며, 오직 String 형태만 저장이 가능하다. IndexedDB 는 javascript 가 이해하는 어떠한 값이라도 모두 저장할 수 있다. IndexedDB 는 용량 제한은 특별히 없으나, HDD 저장소 상태 나 브라우저의 상태에 따라서 달라 질 수 있다. 시크릿 모드에서 IndexedDB, Storage 를 사용하면, 값은 저장되지 않고 브라우저 종료시 사라진다. 작은 규모의 데이터는 Storage 를 사용하는것이 좋지만, 큰 데이터는 IndexedDB 를 사용하는 것이 여러모로 유리하다.

이번에는 class를 활용해 모듈화 하는 이유에 대해 알아보려고 한다.

그렇다면 우선 class가 무엇인지부터 알고 가야한다.

Class란?

Class는 객체지향 프로그래밍에서 객체를 생성하기 위한 일종의 설계도이다. 검색을 해봤을 때 다들 붕어빵과 붕어빵틀을 비유로 드는데 여기서 붕어빵은 객체, 붕어빵틀은 클래스로 비유로 든다.

이유로는 클래스는 객체를 생성하기 위한 템플릿이다. Class를 통해 원하는 구조의 객체 틀을 짜놓고 비슷한 모양의 객체를 계속 찍어낼 수 있기에 붕어빵과 붕어빵 틀을 예시로 드는 사람들이 많다.

이는 객체지향 프로그래밍과 깊은 연관성을 가지고 있으므로 객체지향 프로그래밍에 대해서는 다음에 한번 정리해서 글을 써보겠다.

JavaScript와 Class의 관계

자바스크립트는 프로토타입 기반 객체지향 언어이다. 이는 클래스가 필요 없는 언어이다. ES5까지는 해도 생성자 함수와 프로토타입을 통해 상속을 사용했지만 ES6에 도입된 클래스 더북에 훨씬 간편하게 구현할 수 있게 되었다.

// 생성자 함수 (ES5)
var Person = (function() {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.sayHi = function () {
        console.log('Hi, ' + this.name)
    }
}());

var me = new Person('Kang')
me.sayHi() // Hi, Kang

// 클래스 (ES6)
class Person {
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        console.log('Hi, ' + this.name)
    }
}

const me = new Person('Kang')
me.sayHi() // Hi, Kang

Class의 특징

클래스는 일급 객체이며, 다음 특징을 갖는다.

• 런타임에 생성이 가능하다.
• 변수나 자료구조에 저장할 수 있다.
• 함수의 매개변수에 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.

🎈 일급 객체란* (First-class object) 함수의 매개변수로 전달되거나, 함수의 결과로 반환되거나, 변수에 할당될 수 있는 모든 객체를 가리킨다.

모듈화란?

모듈이란 재사용할 수 있는 단위로 나눈 코드들의 묶음이다.

모듈의 특징

• 유지보수성: 기능들이 모듈화가 잘되어있다면 기능을 개선하거나 수정이 용이하다.
• 네임스페이스화: 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아지면 겹치는 네임이 생기는데 그 때 모듈로 분리하면 해결가능하다.
• 재사용성: 똑같은 코드를 반복하지 않고 모듈로 분리시켜 사용이 가능하다.

Class 모듈화

Class는 객체를 생성하기 위한 일종의 템플릿으로, 객체의 속성과 메서드를 정의하는데 사용된다. 이를 활용하여 Class에 해당하는 기능들을 만들고 조합해 모듈화를 할 수 있다. Class를 사용해 모듈화를 사용하면 좋은 점은 코드들이 구조화 되고, 그로 인해 재사용성이 높아진다. 또 각각의 기준에 따라 구분해놓아 가독성과 유지보수가 좋아진다.

Excution Context

• JS엔진이 JavaScript 코드를 실행할 때 컴퓨터로부터 할당받은 메모리 공간에 필요한 정보(코드, 변수, 함수)를 저장해 두는 공간

Excution Context의 종류

1. Global Executiaon Context

• js코드를 실행시키게되면 기본적으로 생성하는 Context
• 현재 실행되는 코드에서 함수"안"에 있지않은 모든 정보를 담는다
• js 프로그램마다 단 하나의 GEC만 존재가능
• js 코드 실행이 마무리 될때까지 존재

2. Function Executiaon Context

• js코드를 실행중 함수가 실행될때마다 생성되는 Context = 여러개 생성가능
• 현재 실행되는 함수의 인자값과 그 안에서 선언된 모든 정보를 담는다

3. Garbage Collection 과 Memory 해제

• 참조 횟수(Reference count)가 0이 된 개체(변수,함수)는 주기적으로 메모리에서 지운다
• Mark and sweep 알고리즘 사용

Mark and sweep 알고리즘? Mark and sweep 알고리즘은 가비지 컬렉션 알고리즘 중, 메모리 관리를 위해 사용되는 알고리즘 중 하나이다. 이 알고리즘은 동적으로 할당된 메모리에서 사용하지 않는 객체(또는 쓰레기)를 식별하고, 회수하여, 메모리 누수를 방지하는데 사용된다.

Execution Context의 Phase

1. 생성단계(Creation Phase)

• 해당 execution context에서 사용할 코드, 변수, 함수들을 준비해 두는 단계

2. 실행단계(Execution Phase)

• 코드를 한줄한줄 실행하면서 이미 준비해둔 변수, 함수에 계산완료된 값들을 할당하는 단계

계획한대로 흘러가지 않는구만....

2개월차 좋았던 점

음 우선 2개월차부터는 JavaScript에 대한 과정이 시작되었다. HTML/CSS보다 미흡한 실력이 바로 JavaScript였다. 자고로 프론트엔드 개발자라면 JavaScript를 모르면 안된다는 말이 나를 계속 찔러왔지만 드디어 지금에서야 기초를 다루고 있는 점에서 좋았다.

1개월차에 수정한 학습 계획표대로 공부하고 있는가?

게을러지는 부분은 많이 개선되었다고 생각한다. 또 HTML/CSS를 이용한 클론코딩 또는 웹페이지 만들기는 미루고 미루다 더이상은 그럴 수 없다고 느꼈기에 드디어 시작하게 되었다! 클론코딩할 웹페이지는 op.gg!

우선은 HTML/CSS로만 이루어진 웹페이지를 만들어보고 만든 후 api를 사용하고 JavaScript가 필요하면 리팩토링을 통해 수정하는 형식으로 만들어보려고 한다. 이 클론 코딩은 추후 계속 정리하면서 글 작성을 할 예정이다!

나머지 4개월간의 학습 계획

사실 아무래도 인강의 형식이다 보니 가끔씩 나태해지는 내 모습을 보게 된다. 이 부분을 적극 개선하고 또 배웠다고 해서 넘어가는게 아니고 그 부분에 대한 실습 or 복습을 진행하여 배웠던 지식들은 끝까지 머릿속에 우겨넣으려고 한다!

• 배열(Array) 안에 N개 만큼의 배열이 존재하는 객체
• 2/3차원 지도 정보, RGB를 저장하는 2차원 사진 파일 등을 표현할 때 활용 가능

2차원 배열 예제

• 2차원 배열은 array[N][M]으로 접근하여, 배열(Array) 전체를 push(), pop()가능

let array = [
  [101, 102, 103],
  [201, 202, 203],
  [301, 302, 303]
];

console.log(array); // output: [[ 101, 102, 103], [ 201, 202, 203], [ 301, 302, 303]]
console.log(array[0]); // output: [101, 102, 103] 첫번째 배열 전체
console.log(array[1][0]); // output: 201 2번째 배열에 첫번째 요소
console.log(array[2][2]); // output: 303 3번째 배열에 3번째 요소

let arr_2 = array.pop();
console.log(array.length); // output: 3
console.log(arr_2); // output: [ 301, 302, 303 ]
// pop을 사용할 경우 가장 뒷쪽에 배열을 빼게 된다.
console.log(array); // output: [[ 101, 102, 103], [ 201, 202, 203]]

let array_num = array.push([401, 402, 403]);
console.log(array.length); // output: 3
console.log(array.num); // output: 3
console.log(array); // output: [[ 101, 102, 103], [ 201, 202, 203]. [ 401, 402, 403 ]]

2차원 배열 반복문 예제

• 이중 for loop를 사용한 2차원 배열 접근

let array = [
  [101, 102, 103],
  [201, 202, 203],
  [301, 302, 303]
];

for (let i = 0; i < array.length; i++ { // i: 0 ~ 2 
  for (let j = 0; j < array[i].length; j++{ // j: 0 ~ 2
    console.log(array[i][j]);
    }
}
// outputL 101 ... 303

let fruits = [
 ["strawberry", 50],
 ["banana", 100],
 ["ice", 150],
];

for (let i = 0; i < array.length; i++){
 console.log(`fuit: ${fruits[i][0]}, amount: ${fruits[i][1]`}; 
//  보면서 왜 i의 1번째부터 찍는지 의문이었는데 보니 i의 0번째는 과일이름, i의 1번째는 가격이다
}

• 표준 Built-in 객체로써 수학적인 연산을 위한 속성값과 메서드를 제공하는 객체
• Math는 생성자 함수가 아니며, 모든 속성과 메서드는 정적이기에 Math.function()으로 언제든 호출 가능
• 대표 속성 및 메서드

  오일러 상수(e): Math.E PI(π): Math.PI 절대값: Math.abs(x) 최대값: Math.max(x) 최소값: Math.min(x) 랜덤 난수 값: Math.random() 제곱과 제곱근: Math.pow(x,y), Math.sqrt(x) 소수점 처리: Math.round(x), Math.ceil(x), Math.floor(x)

최대/최소/절대값

• 최대값: Math.max(...x), 최소값: Math.min(...x), 절대값: Math.abs(x)
• 배열을 인수로 받아 최대/최소를 산출하려면 apply 함수 혹은 스프레드 문법 사용 필요

/*1. Max/Min*/
console.log(Math.max(1, -1)); // output: 1
console.log(Math.min(1, -1)); // output: -1

console.log(Math.max(1, -1, 5, 23, 17, -4)); // output: 23
console.log(Math.min(1, -1, 5, 23, 17, -4)); // output: -4

let nums = [1, -1, 5, 23, 17, -4];
//use apply
console.log(`Max: ${Math.max.apply(null, nums)}`); // output: MAX: 23 
// values값만 받고 있기에 (nums)만사용하게 된다면 NaN로 출력된다.
console.log(`Min: ${Math.min.apply(null, nums)}`); // output: Min: -4

// use spread
console.log(`Max: ${Math.max(...nums)}`);// output: MAX: 23 
console.log(`Min: ${Math.min(...nums)}`);// output: MAX: -4

/*2. ABS*/
console.log(Math.abs(1)); // output: 1
console.log(Math.abs(-1)); // output: -1
console.log(Math.abs(-Infinity)); // output: Infinity

속성 및 랜덤

• 0과 1사이의 난수 랜덤 값: Math.random()

  /* 1. Math property */
  console.log(Math.E); // output: 2.718281828459045
  console.log(Math.PI); // output: 3.141592653589793
  

/* 2. Random */ for (let i = 0; i < 3; i++){ // 3 미만인 수를 랜덤으로 출력 console.log(Math.random()); }

for (let i = 0; i < 3; i++){ console.log(Number.parseInt(Math.random() * 10)); // *10은 1의자리를 구할수 있다. parseInt는 정수로 변환 }

#### 제곱/제곱근/소수점 처리
- 제곱 Math.pow(x,y), 제곱근: Math.sqrt(x)
- 소수점 이하 반올림 정수: Math.round(x)
- 소수점 이하 올림: Math.ceil(x), 소수점 이하 내림: Math.floor(x)
```js
/* 1. pow */
console.log(Math.pow(2, 3)); //output: 8 2의 3승
console.log(2 ** 3); // output : 8

/* 2. sqrt */
console.log(Math.sqrt(4)); // output: 2
console.log(Math.sqrt(2)); // output: 1.4142135623730951

/* 3. round, ceil, floor */
console.log(Math.round(3.5)); // output: 4 반올림
console.log(Math.round(-2.3)); // output: -2
console.log(Math.round(-2.7)); // output: -3

console.log(Math.ceil(3.5)); // output: 4 소수점 이하 올림
console.log(Math.ceil(-2.3)); // output: -2
console.log(Math.ceil(-2.7)); // output: -2

console.log(Math.floor(3.7)); // output: 4 소수점 이하 내림
console.log(Math.floor(-2.3)); // output: -3
console.log(Math.floor(-2.7)); // output: -3

• 다양한 자료형의 key를 허용하고, key-value 형태의 자료형을 저장 가능할 수 있는 Collection
• Map은 Object 대비 비교하면 다양한 key의 사용을 허용하고, 값의 추가/삭제 시 메서드를 통해 수행이 필요함
• 대표 속성 및 메서드

  생성자: new Map() 개수 확인: Map.size 요소 추가: Map.set(key,value) 요소 접근: Map.get(key) 요소 삭제: Map.delete(key) 전체 삭제: Map.clear() 요소 존재 여부 확인: Map.has(key) 그 밖의 메서드: Map.keys(), Map.value, Map.entires()

요소 추가/삭제

• 요소 추가: Map.set(key,value), 요소 접근: Map.get(key), 요소 전체 삭제: Map.clear()
• 다양한 자료형을 key로 사용 가능하며, map.set 호출 시 map이 반환되므로 체이닝 가능

  let map = new Map(); // map 변수 생성
  

map.set("name", "john"); // string key map.set(123, 456); // number key map.set(true, "bool_type"); // boolean key // set으로 추가

console.log(map); // output: Map(3) { 'name' => 'john', 123 => 456, true => 'bool_type' } console.log(map.get(123)); // output: 456 console.log(map.get("name")); // output: john console.log(map.size); // output: 3

// chaning map.clear(); // map 요소 전체 삭제 console.log(map); output: Map(0) {} map.set("name", "alice").set(123, 789).set(false, "bool_type"); // set으로 다시 추가 console.log(map); // output: Map(3) { 'name' => 'alice', 123 => 789, false => 'bool_type' }

#### Map 반복문
- Collection 객체인 Map이 가지고 있는 iterator 속성을 이용하여 for ...of 구문을 통해 반복문 수행 가능

```js
let recipe_juice = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
  ]);

for (let item of recipe_juice.keys()) console.log(item);
// output : strawberry, banana, ice
for (let amount of recipe_juice.values()) console.log(amount);
// output : 50, 100, 150
for (let entitiy of recipe_juice) console.log(enitiy);
// output : ['strawberry', 50] ["banana", 100] ["ice", 150]

console.log(recipe_juice);
// output: Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }

Map < - > Object 변환

• Object.entries(Object), Object.fromEntries(Map)를 통해 Map과 Object 간 변환이 가능

  let recipe_juice = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
  ]);
  

let recipe_juice_obj = Object.fromEntries(recipe_juice); let recipe_juice_kv = Object.entries(recipe_juice_obj); // [key, value] let recipe_juice_map = new Map(recipe_juice_kv);

console.log(recipe_juice_obj); // output: { strawberry: 50, banana: 100, ice: 150} console.log(recipe_juice_kv); // output [[ 'strawberry', 50 ], [ 'banana', 50 ], [ 'ice', 150 ]]

console.log(recipe_juice_map); // output Map(3) { strawberry: 50, banana: 100, ice: 150} ```

• 하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수
• 매개변수로 전달되는 함수는 콜백 함수(Callback function)
• 대표 배열 조작 메서드

  임의 정렬: Array.sort(callback funtion) 반복 작업: Array.forEach() 콜백함수 결과 배열 반환: Array.map() 조건 만족하는 하나의 값 반환: Array.find() 조건 만족하는 값 배열로 반환: Array.filter() 누적 결과 값 반환: Array.reduce()

sort() 문제와 한계점

• 문제점: 일의 자리 4가 10의 자리보다 뒤쪽에 정렬
• 원인: sort 메서드로 정렬될 때 배열의 요소가 일시적으로 문자열로 변경되어 발생

// Number, String 정렬을 할 때 String으로 변환되어 4와 10을 문자열 기준으로 바꾼다.
// 단순 4와 10을 4 1로 판단하여 10이 앞으로 오게된다.
let nums = [1, -1, 4, 0, 2, 3, 10, 20, 12];

console.log(nums.sort());
// output: [-1, 0, 1, 10, 12, 2, 20, 3, 4]
// 10이 중간에 들어오게된다
console.log(nums.reverse());
// output: [4, 3, 20, 2, 12, 10, 1, 0, -1]

• 한계점: 대소문자 구분 없이 정렬하고 싶지만, 대소문자 구분되어 정렬

let fruits = ["apple", "Orange", "orange", "melon"];
// 대문자가 소문자보다 큰값으로 적용된다.
console.log(fruits.sort());
// output: ['Orange', 'apple', 'melon', 'orange']
console.log(fruits.reverse());
// output: ['orange', 'melon', 'apple', 'Orange']

sort() 고차함수

• .sort()함수의 매개변수로 함수를 넣어 고차함수를 이용한 정렬 수행 가능

let nums = [1, -1, 4, 0, 2, 3, 10, 20, 12];

console.log(nums.sort());
// output: [-1, 0, 1, 10, 12, 2, 20, 3, 4]
// 10이 중간에 들어오게된다
console.log(nums.reverse());
// output: [4, 3, 20, 2, 12, 10, 1, 0, -1]

let ascending_order = function (x, y){ 
  // 콜백함수를 사용하여 정렬을 바꿔준다.
 return x-y;  
  // x 1 y -1일때 연산을하게 되면 1-1 0 0보다 큰 값이 되어 둘의 위치를 바꿔주게 된다. 
  // 또 -1 4를 비교했을 때 음수가 나오게 되기 때문에 변하지 않는다. 
};

let ascending_order = function (x, y){
 return y-x; 
  // x가 12 y 20일때 연산을 하면 20 - 12 = 8로 양수가 나오기 때문에
  // 두 수의 위치를 바꿔준다
};

• 문자열 정렬

let ascending_order = function(x, y){
  x = x.toUpperCase();
  y = y.toUpperCase(); // 대문자로 모두 치환한후 연산

  if (x > y) // 오름차순 x가 y보다 크면 자리를 바꿔주고
    return 1;
  else if (y > x) // y가 x보다 크다면 뒤로
    return -1;
  else 
    return 0;
};


let descending_order = function(x, y){
  x = x.toUpperCase();
  y = y.toUpperCase(); 

  if (x < y) //  
    return 1;
  else if (y < x) 
    return -1;
  else 
    return 0;
};

let fruits = ["apple", "Orange", "orange", "melon"];
console.log(fruits.sort(ascending_order));
// output: ['apple', 'melon', 'Orange', 'orange']
console.log(fruits.sort(descending_order));
// output: ['Orange', 'orange', 'melon', 'apple']

• 여러 개체값을 순차적으로 나열한 자료 구조(알고리즘 내 사용 빈도 多)
• 배열 내 값을 요소라고 하며, 배열 요소는 index로 접근
• 대표 속성과 메서드

  배열 크기 및 배열 여부 확인: Array.length, Array.isArray() 배열 추가/삭제: Array.push(), Array.pop(), Array.shift(), Array.unshift(), Array.splice(), Array.slice() 배열 탐색: Array.indexOf(), Array.lastIndexOf(), Array.includes() 배열 변형(callback 미사용): Array.sort(), Array.reverse(), Array.join

배열 선언/접근/속성

• 선언: new Array() 혹은 [ ]를 통해 선언하며,사이즈 혹은 값을 입력하여 초기화도 가능
• 접근 방법: Array[index]를 통해 index를 통하여 O(1)접근
• 배열 속성: Array.length를 통해 배열 요소의 개수 확인 가능

let arr_1 = new Array(10);
let arr_2 = [];

console.log(arr_1); // output : [ 10 empty items ]
console.log(arr_2); // output : []

let fruits= ["apple", "orange", "melon"];
console.log(fruits); // output : "apple","melon"
console.log(fruits.length); // output : 3

fruits[1] = "kiwi";
console.log(frutis); // output: apple kiwi melon

배열의 실체

• 자바스크립트에서 배열은 다른언어에서 말하는 일반적인 배열이 아닌 Hash 기반의 객체
• 메모리가 연속적인 밀집 배열(dense array)가 아닌 비연속적인 희소 배열(sparse array)

let nums = [];

nums[0] = "one";
nums[1] = "two";
console.log(nums.length); // 2


nums["once"] = "once"; // 문자열로도 추가할 수 있음
nums["twice"] = "twice"; 

console.log(nums); // output: one, two, once: once, twice: twice

배열 타입 확인 및 요소 삭제

배열 타입 확인

• 배열 타입 확인 방법: Array.isArray(value)

let num = 123.456;
let str = "Here I am!";
let fruits = ["apple", "orange", "melon"];

console.log(Array.isArray(num)); // output: false
console.log(Array.isArray(str)); // output: false
console.log(Array.isArray(fruits)); // output: true

배열 요소 삭제

• 배열 일부 요소 삭제: delete array[index] (삭제해도 배열 사이즈가 그대로인 문제점)

let fruits = ["apple", "orange", "melon"];

console.log(fruits); // output: [ 'apple', 'orange', 'melon']
console.log(fruits.length); // output: 3

delete fruits[1];
console.log(fruits); // output: [ 'apple', <1 empty item>, 'melon' ] 
console.log(fruits.length); // output 3

• 자바스크립트에서 일반적인 숫자는 64비트 형식의 IEEE-754 표준 기반 형태로 저장되는 자료형
• 10진수 외에도 16진수, 2진수, 8진수의 다양한 진수 사용

  16진수(Hexadecimal)표기: 0xFF 8진수(Octal) 표기: 0o71 2진수(Binary) 표기: 0b1101

• 대표 상수 값

  [MAX | MIN]_VALUE, [MAX | MIN]_SAFE_INTEGER, [POSITIVE | NEGATIVE]_INFINITY, NaN

• 대표 메서드

  문자열로 변환: Number.toString() 특정 자리수까지 제한하여 숫자 표현: Number.toFixed(), Number.toPrecision() 타입 확인: Nuber.isNaN(), Number.isFinite()

지수 / 진법

• 지수 표기법

  아주 큰 숫자나 아주 작은 숫자를 표기하기 위해 지수 표기법(e)으로 0의 개수를 대체 표기 가능

  let billion_1 = 1000000000; // 10억
  let billion_2 = 1e9; // 1 + 0 9개
  let us = 1e-6; // micro sec, 왼쪽으로 6번 소수점 이동
  

console.log(billion_1); // output: 1000000000 console.log(billion_2); // output: 1000000000 console.log(us); // output: 0.000001

- 진법 표기 
> 진법 표기를 지원하기 위해 0x(16진수), 0o(8진수), 0b(2진수)로 N 진수 표기 가능

```js
console.log(0x0f); // output: 15
console.log(0o17); // output: 15
console.log(0b1111); // output: 15

Number 상수 값

• 지수로 표기되는 양수 최대 / 최소 값: Number.MAX_VALUE, Number.MIN_VALUE
• 안전하게 표기되는 최대(양수)/최소(음수) 값: Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER
• 무한대 양수 / 음수 값: Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY
• 부동 소수점 산술에서 정의되지 않거나 표현할 수 없는 값으로 해석될 수 있는 숫자 데이터 유형: Number.NaN

console.log(Number.MAX_VALUE); // output: 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // output: 5e-324

console.log(Number.MAX_SAFE_INTEGER); // output: 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // output: -9007199254740991

console.log(Number.POSITIVE_INFINITY); // output: Infinity
console.log(Number.NEGATIVE_INFINITY); // output: Infinity

console.log(Number.NaN); // output: NaN
console.log(NaN); // output: NaN

• 콜백 함수(Callback Function)란 다른 함수의 매개변수로 전달되어 수행되어지는 함수
• 고차 함수(Higher-order-Function)란 매개변수를 통해 함수를 받아 호출하는 함수

콜백 함수 예제

function add(x,y) {
 return x + y;
}

function sub(x,y) {
 return x - y;
}

function mul(x,y) {
 return x * y;
}

function div(x,y) {
 return x / y;
}

function calculator(callback, x, y){
 return callback(x,y);
}

console.log(calculator(add, 7, 3)); // output: 10
console.log(calculator(sub, 7, 3)); // output: 4
console.log(calculator(mul, 7, 3)); // output: 21
console.log(calculator(div, 7, 3)); // output: 2.3333333333335

call by *

call by value

• 값에 의한 복사로 함수 내에서 매개 변수 값을 변경 시켜도 영향이 미치지 않음
• 원시 타입(primitive type)을 매개 변수로 넘겼을 때 발생

  let a = 1; // a는 1이다 선언
  let add = function (b) { b = b + 1; }; // add(1) 매개변수 b를 받을 때 b의자리에 a를 넣었을때 1이다. 하여 값에 대한 복사로 b = 2이다.
  add(a); // caller
  console.log(a); //  b는 2이지만 a는 1이다 a와 b는 각각 다른 메모리 

call by reference

• 주소에 대한 복사로 함수 내에서 매개 변수 내 값을 변경시키면 원본 데이터에도 영향을 받음
• 객체 타입(object type)을 매개 변수로 넘겼을 때 발생

var a = { v : 1}; // 객체를 선언
var add = function (b) { b.v = b.v + 1; }; // 동일하게 add 함수를 호출하고 b라는곳에 a를 주소값을 복사하게 되는데 함수내에서 b를 건들게 된다.
// 2라는 값을 b에 복사시켜줬고 주소에 대한 참조값을 복사하여 객체에 대한 영향을 끼쳤기 때문에 2로 출력이 된다.
add(a); caller
console.log(a.v); // output: 2

• 함수 스스로 자신을 참조해 호출하면서 동일한 코드가 계속적으로 수행되는 함수 호출 방법
• 재귀 함수는 특정 조건이 됐을 때 자신을 그만 호출되도록 제한하는 exit code가 필요

재귀 함수 예제

// 1. basic recursive function

function recursive(num){ // 값을 하나씩 줄여가면서 0이 될 때 종료되는 함수
  if (num == 0) retrun 0; // num이 0 일때는 return
  retrun num + recursive(num - 1); // 3 + 2 + 1 의 합
  // 3 + (2 + (1 + 0))
}

console.log(recursive(3)); // 3이 num으로 넘어감  output: 6 

// 2. factorial function

// 3! 3 * 2 * 1
function factorial(x){
  if (x == 0) return 1; // *는 0으로만 나오기 때문에 return에 1로 지정

  return x * factorial(x - 1);
}

const num = 3;
let result = factorial(num);

// The factorial of 3 is 6

console.log(`The factorial of ${num} is ${result}`);

• 함수는 다수의 명령문을 코드 블록으로 감싸고, 하나의 실행 단위로 만든 코드의 집합
• 유사한 동작을 하는 코드를 하나로 묶어, 범용성을 확대시킨 블록 코드
• 함수는 정의부분과 호출 부분으로 구성
• 함수는 가급적 한가지 일만 하며, 매개 변수는 최대 3개 이내로 작성을 권함

함수 정의

• 함수 선언식(Function Declarations) ```js /* function func(arg1, arg2, .....argN){ expression; }

• / function add(x, y) { return x + y; }

• 함수 표현식(Function Expressions) ```js /* const func = function (arg1, arg2, .....argN){ expression; }

• / const add = function (x, y) { return x + y; }

• 화살표 함수(Arrow Function) ```js /* const func = (arg1, arg2, ....argN) => expression;

• / const func = (x,y) => x+ y;

### 함수 호출

- 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
- ES6에서 도입된 기본값을 통해 undefined 변수가 들어올 경우 값 초기화 지정 가능
- 함수의 이름은 어떤 기능을 하는지 유추할 수 있도록 제작하는게 코드리뷰에 용이함
```js
// 1. default value 
function print_add(x, y = 10){
    console.log( x + y ); // x와 y를 더해주고 콘솔로 출력하게 해주는 함수
} 
print_add(10, 20, 30) // output: 30 x와 y 이후에 값은 넘어오게 되지만 핸들링을 하지 않아 무시
print_add(10, 20); //output: 30
print_add(10); // output: 20 y값이 없기에 기본값이 10으로 설정되어 20이 출력
print_add(); // output: NaN  x와 y에 값이 없으면 undifined가 들어가게 되어 NaN만 출력


// 2. dynamic parameters
function print_min(){
    // console.log(arguments);
  console.log(arguments[0] - arguments[1]); // arguments라는 내부변수 사용
}
print_min(10, 20); // output : -10

함수 반환

• return 후 코드는 수행되지 않으며, default return value는 undefined

function add(x,y){
    return x + y // x + y를 더해주는 함수 return은 break와도 같은 역할을 한다
  console.log("hello"); // return으로 인해  미 수행 코드
}

function dummy(){}

function checkAge(age){
    if (age >= 18){
        retrun true;
    }else{
        retrun false;    
    }
}

console.log(add(10, 20)); // output : 30
console.log(dummy()); // output: undefined
console.log(checkAge(14)); // output: false
console.log(checkAge(20)); // output: true