학습내용

• 자바스크립트 기초
• 데이터베이스의 이해

자바스크립트 기초

객체 key 접근

• object.key

• object['key']
key값으로 여백, 특수문자 등의 문자열이 사용된 경우엔 해당 표현식을 사용

배열 구조 분해 할당

객체나 배열을 변수로 분해하는 ES6 문법

const rainbow = ["빨","주","노","초","파","남","보"]
const [red, orange, yellow, green, blue, navy, purple] = rainbow

console.log(red, yellow, purple)
빨 노 보

배열 분해시 변수 이름을 마음대로 선언할 수 있으며 배열의 순서대로 할당된다. 일부만 선언할 경우 선언한 변수를 제외한 나머지 배열의 요소는 할당되지 않는다.

NaN

전역 객체의 속성으로 숫자가 아닌 값(Not a Number)

NaN을 반환하는 경우

• 숫자 인식 불가
  ex) parseInt('string'), Number(undefined)

• 허수를 반환하는 수학 계산식
  ex) Math.sqrt(-1)

  Math.sqrt()
  제곱근(루트)을 구하는 메서드
  [w3schools] JavaScript Math.sqrt()

• 피연산자가 NaN일 때
  ex) 3 + NaN

• 정의 불가능한 계산식
  ex) 0 * Infinity

  Infinity
  전역 객체의 속성으로 무한대를 나타내는 숫자값
  숫자를 0으로 나눴을 경우에도 Infinity를 반환

• 덧셈을 제외한 문자열 포함 계산식
  ex) "베터콜사울 보고싶다"/2, "배추전 원해"-2, "개피곤"*3 등

NaN 판별법

NaN은 모든 비교연산자를 사용할 때도, 다른 NaN과의 비교시에도 같지 않기 때문에 NaN을 판별하기 위해서는 아래의 표현식을 사용한다. 이와 같이 자기자신과 비교가 같지 않은 경우는 오직 NaN뿐이다.

NaN === NaN // false
Number.NaN === Number.NaN // false
NaN === Number.NaN // false

Number.NaN
NaN과 마찬가지로 Not a Number를 나타낸다.

• isNaN()
  현재값이 Nan이거나 숫자로 변환시 Nan이 되는 경우 true

  isNaN(NaN);         // true
   isNaN(Number.NaN);  // true
   isNaN(Number('7')) // false
   isNaN(Number('배고파')) // true
   isNaN('만두 먹고싶다') // true

• Number.isNan()
  현재값이 NaN인 경우에만 true

  Number.isNaN(NaN) // true
   Number.isNaN(Number.NaN) // true
   Number.isNaN(Number('7')) // false
   Number.isNaN(Number('졸려워')) // true
   Number.isNaN('저녁 언제 먹지') // false

  마지막 예제에서는 false를 반환했다. 문자열은 숫자열가 아니지만 문자열 자체가 NaN인 것은 아니기 때문이다. 문자열을 NaN으로 만들기 위해선 Number처럼 숫자로 변환하는 작업이 우선시 되어야 한다.
  단, isNaN은 기본적으로 인자를 숫자로 변환하는 과정을 거쳐서 판별하기 때문에 별도의 작업이 필요하지 않다.

함수

함수 선언식과 함수 표현식

• 함수 선언식

function sayHello () {
	return "hello, world!"
}

• 함수 표현식

const sayHello = function(){
	return "hello, world!"
}

작동방식은 함수 선언식과 함수 표현식이 동일하다. 단, 함수 선언식은 호이스팅의 영향을 받고 함수 표현식은 받지 않는다.

화살표 함수

• 기본형

  const sayHello = () => {
      return "hello world!"
  }

• 암시적 반환(Implicit return)

  const sayHello = () => "hello world!"

  반환값을 한 줄로 표현할 수 있는 함수일시 return 생략

• 익명 함수

  예시①

  // 기본형
  const sayHelloOnClick = () => {
      console.log('hello friend')
  }
  <App onClick={sayHelloOnClick} />
  
  // 익명 함수
  <App onClick={() => console.log('hello friend')} />

  예시②

  // 예시 2 - 기본적인 함수 표현 방식
  const ReturnItem = (item) => {
      return <div>{item}</div>
  }
  {array.map(ReturnItem)}
  
  // ❗️ 예시 2 - 익명 함수
  {array.map((item)=> <div>{item}</div>))}

  재사용 가능성이 없는 일회성 함수에 사용

  
  

전개 구문(Spread Operator)

기존의 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 추가해서 새로운 객체나 배열을 생성. 기존의 객체와 배열에 영향을 주지 않는다.

const box = {size: "big", color: "red"};
const newBox = { ...box}; // {size: "big", color: "red"}
const newBlueBox = {...box, color: "blue" }; // {size: "big", color: "blue"}

map

배열 내의 모든 요소에 주어진 함수를 호출해서 해당 결과로 배열을 생성하는 메소드

const array = [1,2,3]
const mapArray = array.map(x => x+1);
console.log(mapArray) // [2,3,4]

filter

배열 내에서 주어진 함수의 조건을 부합하는 요소들을 모아 새로운 배열로 반환하는 메소드

const number = [1,2,3,4,5,6]
const even = number.filter(number => number % 2 == 0)
console.log(even) // [2,4,6]

---

데이터베이스의 이해

데이터베이스와 DBMS가 무엇인지 설명할 수 있는가?
관계형 데이터베이스(RDBMS)가 무엇인지 설명할 수 있는가?
NoSQL이 무엇인지 설명할 수 있는가?

데이터베이스

구조화된 정보 혹은 조직화된 데이터 모음
DBMS는 이 데이터들을 제어하는 프로그램으로 MySQL. Oracle Databse 등이 여기에 해당된다.

관계형 데이터베이스(RDBMS)

열과 행으로 이루어진 데이터베이스로 구조를 쉽게 파악할 수 있다. 단, 사전에 정의된 내용에 부합하는 형태의 데이터만 삽입 가능하다. 성능 향상에 비용이 높고, 데이터베이스 설계가 까다롭다는 단점이 있다.

SQL과 NoSQL

	SQL(Structured Query Language)	NoSQL(Not Only SQL)
데이터베이스 종류	RDBMS	DBMS
기원	RDBMS와 상호작용 하기 위함	데이터의 복잡도와 양의 증가로 정확성에 대한 중요도 감소
데이터 저장 구조	테이블	key-value, document, column 등
데이터 사전 정의	엄격	유연
확장	수직 확장(Scale Up)	수평 확장(Scale Out)

---

원래는 오늘 모던 자바스크립트 문서까지 다 읽는 게 목표였는데 집중이 잘 안돼서 하지 못했다.. 주말 내내 하루종일 프로젝트 하느라 못쉰데다가 발표 끝나고 갑자기 긴장이 탁 풀려버려서 그런지 계속 피곤하고 집중이 안된다. 이럴 때일수록 페이스를 잃지 않고 집중해야 하는데 말이다. 내일은 목표 공부를 반드시 끝내야지. 기다리고 기다리던 리액트를 배워야 하니까💜