• 값 : 식(표현식)이 평가되어 생성된 결과를 말한다.
• 평가 : 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.

10 + 20 // 30
// 10 + 20은 평가되어 숫자값 30을 생성한다.

모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 변수에 할당되는 것은 값이다.

🗝 리터럴

• 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.

사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호('', ., [], {}, // 등)로 표기한 코드다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. ➡️ 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.

🔮 표현식

• 표현식 : 값으로 평가될 수 있는 문(statement). 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

let score = 100;

여기서 100은 리터럴이다. 리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식이다.

let score = 50+50;

50 + 50은 리터럴과 연산자로 이뤄져있다. 하지만 50+50도 평가되어 숫자 값 100을 생성하므로 표현식이다.

score // -> 100

변수 식별자를 참조하면 변수 값으로 평가된다. 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

이처럼 표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다. 다양한 표현식이 있지만 값으로 평가된다는 점에서 모두 동일하다.

📌 값으로 평가 될 수 있는 문은 모두 표현식이다.

//리터럴 표현식
10
'Hello'

//식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

//연산자 표현식
10+20
sum = 10
sum !== 10

//함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

표현식은 값으로 평가된다. 이때 표현식과 표현식이 평가된 값은 동치(동등한 관계)이다. 표현식은 값처럼 사용할 수 있다. 이것은 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미한다.

let x = 1+2 ;
x + 3 // -> 6

위의 예제 x+3은 표현식이다. 숫자값이 위치해야 할 좌항에 표현식 x를 사용할 수 있다. 이처럼 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어 낼 수 있다.

⚖️ 문

• 문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. ➡️ 문의 집합으로 이뤄진 것이 바로 프로그램이며, 문을 작성하고 순서에 맞게 나열하느 것이 프로그래밍이다.

문은 여러개의 토큰으로 구성된다.

• 토큰 : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미. ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론 이나 마침표 등의 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌수 없는 코드의 기본 요소 👉 모두 토큰 !

문을 명령문이라고도 부른다. 즉 문은 컴퓨터에 내리는 명령이다. 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

세미콜론

세미콜론(;)은 문의 종료를 나타낸다. 즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 하나씩 문을 실행한다. 따라서 문을 끝낼 때는 세미콜론을 붙여야한다.

단, 0개 이상의 문을 중괄호로 묶은 코드블록 ({...}) 뒤에는 세미콜론을 붙이지 않는다. if 문, for 문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성(self closing)을 갖기 때문이다.

❗️ 표현식인 문과 표현식이 아닌 문

문에는 표현식인 문과 표현식이 아닌 문이 있다.

• 표현식인 문 : 값으로 평가 될 수 있는 문.
• 표현식이 아닌 문 : 값으로 평가될 수 없는 문.

let x; // 변수 선언문은 표현식이 아닌 문이다.

x =100; // 할당문은 그 자체가 표현식이지만, 완전한 문이기도 하다. 즉 할당문은 표현식인 문이다.

👉 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다. 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다.

let foo = let x; // SyntaxError: Unexpected token let

let foo = x = 100;
console.log(foo); // 100

할당문을 값처럼 변수에 할당했다. 표현식인 문인 할당문은 할당한 값으로 평가된다. 즉 x=100은 x 변수에 할당한 값 100으로 평가된다. 따라서 foo 변수에는 100이 할당된다.

Promise 란 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체(object) 이다. 일반적인 콜백함수에 비해 흐름이 자연스럽고 유연한 코드를 작성할 수 있다.

📌 무거운 데이터나 작업을 할 때, 동기적으로 작업을 진행하게 되면 다음 코드가 실행되지 않는 문제가 생긴다.(홈페이지가 멈춰 사용자들이 이탈하는 경우가 생김!) 따라서 Promise와 같은 비동기 처리 방법을 이용해 비동기적으로 처리해줘야한다.

이 Promise는 정해진 장시간의 기능을 수행하고 나서, 정상적으로 기능이 수행되었다면 성공의 메세지와 함께 처리된 결과 값을 전달한다. 만약 기능이 수행되지 못했다면 error를 전달해준다.

Promise의 상태(state)

1. Pending: Promise가 만들어져서 우리가 지정한 기능이 수행 중일 때 pending 상태이다.
2. Fulfilled : 기능이 성공적으로 끝난다면, Fulfilled 상태가 된다.
3. Rejected : 파일을 찾을 수가 없거나 네트워크에 문제가 생긴다면 Rejected 상태가 된다.

Producer

const promise = new Promise((resolve, reject)=> {  
  //doing some heavy work(network, read files)
})

Promise는 클래스이기 때문에 new라는 키워드를 이용해서 object를 생성할 수 있다.

Promise의 생성자를 보면 executor라는 콜백함수를 전달해줘야 한다. 이 executor 안에는 2가지 콜백함수가 있는데, 이는 바로 resolve와 reject이다.

const promise = new Promise((resolve, reject)=> {
  setTimeout(() => {
   resolve('june');
  }, 2000);
})

• resolve : 기능을 정상적으로 수행해서, 마지막에 최종 데이터를 전달하는 콜백함수.

const promise = new Promise((resolve, reject)=> {
  setTimeout(() => {
   reject(new Error('No network'));
  }, 2000);
});

// Uncaught (in promise) Error : No network

• reject : 기능을 수행하다가 중간에 문제가 생기면 호출하게 되는 콜백함수. reject는 보통 Error라는 객체를 통해서 값을 전달하는데, Error는 자바스크립트에서 제공한다.

❗️ 새로운 Promise가 만들어 질 때는, executor 함수가 바로 자동적으로 실행된다. 불필요한 Network 통신이 일어날 수 있기 때문에 이를 유의해서 코드를 짜야한다.

Consumers : then, catch, finally

promise
.then((value)=>{
  console.log(value)
}) // june
.catch((error)=>{
  console.log(error)
}) // Error : No network
.finally(()=>{
  console.log('finally');
}) // finally

• then : 여기서 받아오는 value 파라미터에는 Promise가 정상적으로 잘 수행이 되어서 마지막으로 resolve 콜백함수에서 전달된 'june'이라는 값이 들어온다.

• catch : Promise가 기능을 수행하다가 error가 발생한 경우에만 사용할 수 있다.

• finally : 성공 실패 여부와 상관없이 무조건 호출된다. 따라서 성공 여부에 상관 없이 마지막으로 실행시키고 싶은 기능이 있을 때, finally를 사용하면 된다.

📌 Promise에 then을 호출하게 되면 결국 똑같은 Promise를 리턴하기 때문에, 그 리턴된 Promise에 catch를 호출할 수 있는 것! 이것을 체이닝 (Chaining)이라고 한다.

Promise chaining

const fetchNumber = new Promise((resolve, reject)=> {
  setTimeout(()=> resolve(1), 1000); 
});

fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
  return new Promise((resolve, reject) =>{
    setTimeout(()=> resolve(num -1), 1000)
  });
})
.then(num => console.log(num))
// (2초 뒤) 5 

then 은 값을 전달할 수도, Promise 자체를 전달할 수도 있다!

에러 핸들링 : Error Handling

const getHen = () => {
  new Promise((resolve, reject)=> {
  setTimeout(()=> resolve('🐓'), 1000);
  });
}

const getEgg = (hen) => {
  new Promise((resolve, reject)=> {
  setTimeout(() => 
  reject(new Error(`error! ${hen} => 🥚`)), 1000);
  });
}

const cook = (egg) => {
  new Promise((resolve, reject)=> {
  setTimeout(()=> resolve(`${egg} => 🍳`), 1000);
  });
}

getHen
.then(hen => getEgg(hen))
.then(egg => cook(egg))
.then(meal => console.log(meal))
.catch(error => console.log(error));

//Error : error! 🐓 => 🥚 at promise

참고 자료 : 드림코딩 by 엘리 - Promise 강의

애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.

10+20

👉 자바스크립트 엔진이 위 자바스크립트 코드를 계산(평가)하려면 먼저 10, 20, + 라는 기호(리터럴과 연산자)의 의미를 알고 있어야 하며 10+20이라는 식(표현식)의 의미도 해석(파싱)할 수 있어야 한다.

10(피연산자) +(연산자) 20(피연산자)

컴퓨터는 연산과 기억을 수행하는 부품이 나눠져있다. 컴퓨터는 CPU를 이용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기 즉 1바이트의 단위로 데이터를 저장하거나 읽어들인다.

각 셀은 고유의 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며, 0부터 시작해서 메모리 크기 만큼의 정수로 표현된다.

컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상 등)와 상관 없이 모두 2진수로 저장된다.

10+20이라는 연산을 했다는 것은 그 연산 결과가 필요하고 이를 사용해 무언가를 하겠다는 의도가 있었을 것이다. 만약 연산결과 30을 재사용하고 싶다면 30이 저장된 메모리 공간에 직접 접근하는 방법밖에 없다.

👉 하지만 메모리 주소를 통해 값에 직접 접근하는 것은 위험하다. 원본 값에 접근해 이를 변경하게 된다면 문제가 생길 수 있다. ex) 만약 실수로 운영체제를 사용하고 있는 값을 변경하게 된다면 시스템을 멈추게하는 치명적인 오류가 발생할 수도 있기 때문!

👩🏻‍💻 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

간단히 말하자면 변수는 값의 위치를 가리키는 상징적인 이름이다. 변수 ➡️ 프로그래밍 언어 컴파일러 or 인터프리터 ➡️ 값이 저장된 메모리 공간의 주소로 치환되어 실행

❗️ 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수있다.

let result = 10 + 20 
// result : 변수명
// 30 : 변수값

• 변수명 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 ➡️ 사람이 이해할 수 있는 언어로 값이 저장된 메모리 공간에 붙인 상징적인 이름.
• 변수값 : 변수에 저장된 값.
• 할당(assignment) : 변수에 값을 저장하는 것.
• 참조(reference) : 변수에 저장된 값을 읽어 들이는 것.

🔖 식별자

식별자: 어떤 값을 구별해서 식별할 수 있는 고유한 이름. 메모리상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자.

• 식별자는 값이 아니라 메모리 주소에 붙인 이름❗️
• 식별자라는 용어는 변수명에만 국한되지 않는다. 변수, 함수, 클래스 등의 이름은 모두 식별자다.
• 변수, 함수, 클래스 등의 이름과 같은 식별자는 선언에 의해 자바스크립트 엔진에 식별자 존재를 알린다.

🖍 변수 선언

변수 선언

: 변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것.

• 변수를 사용하려면 반드시 선언이 필요하다.
• 변수를 선언할 때는 var,let,const 키워드를 사용한다.(ES6에서 let, const가 도입되었음.)

var score;
console.log(score) // undefined

👉 변수 선언 이후, 아직 변수 값을 할당하지 않았다. 변수 선언에 의한 메모리 공간은 비어있을 것으로 예상되나 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.

변수의 3단계 생성 과정

변수는 아래와 같이 3단계의 과정을 통해 생성됩니다.

1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다. (변수를 실행컨텍스트의 변수객체에 등록한다.)
2. 초기화 단계 : 실행 컨텍스트에 등록 된 변수객체에 대한 메모리를 할당한다. 이 단계에서 변수는 undefined로 초기화 된다.
3. 할당 단계 : undefined로 초기화 된 변수에 값을 할당한다.

❓ 변수 이름은 어디에 등록될까 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트 에 등록된다. 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다. 변수 이름과 변수값은 실행 컨텍스트 내에 key/value 형식인 객체로 등록되어 관리된다.

console.log(name) // undefined
var name

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다. 위 코드에서 var로 선언된 변수 name은 hoisting 되어 선언과 초기화가 동시에 이뤄진다. var 키워드로 선언한 변수는 undefined로 암묵적인 초기화가 자동 수행된다.

변수 실행 시점과 변수 hoisting

console.log(name) // undefined
var name // 변수 선언문

변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 이 때 참조에러가 발생하지 않고 undefined가 출력된다. ➡️ 변수 선언이 소스코드가 한 줄 씩 실행되는 시점, 즉 런타임이 아니라 그 전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 이 때, 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 그리고 소스코드의 평과 과정이 끝나면 비로소 선언문을 제외하고 소스코드를 한줄씩 순차적으로 실행한다.

➡️ 이처럼 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅 hoisting 이라고 한다.

(var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 된다.)

💡 let, const이 되지만 hoisting var로 선언된 변수처럼 선언 전에 참조를 할 수 없다. let, const는 초기화 되기전 TDZ(Temporal Dead Zone) 라는 곳에 머물러 초기화(혹은 할당)가 될 때까지 잠시 '죽어있는 상태'이기 때문에 선언 전에 참조가 불가능하다. 이때는 선언하지 않은 변수에 접근하면 'Reference Error : 변수 is not defined'가 뜬다.

💥 var 키워드로 선언한 변수의 특징

1. 변수 중복 선언 허용 : 만약 동일한 변수가 이미 선언되어있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용 발생.

2. 함수 레벨 스코프 : var 키워드로 선언한 변수는 함수 레벨의 스코프를 지역 스코프로 인정한다. ➡️ var는 함수 레벨 스코프를 가지므로, 블록 내부에 선언되어도 외부에서 접근할 수 있다.

3. 변수 호이스팅 : 변수 선언문이 스코프의 선두에 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ➡️ 변수 선언문 이전에 변수를 참조하는 것은 변수 호이스팅에 의해 에러를 발생시키지는 않지만, 프로그램의 흐름상 맞지 않을 뿐더러 가독성을 떨어트리고 오류를 발생시킬 여지를 남긴다.

값의 할당

변수에 값을 할당(assignment) 할 때는 할당 연산자 =를 사용한다. 할당 연산자는 우변의 값을 좌변의 변수에 할당한다.

var name; // 변수 선언
name = 'june'; // 값의 할당

var name = 'june'; // 변수 선언과 값의 할당

변수 선언, 값의 할당을 2개의 문으로 나눠 포현한 코드 = 변수 선언, 값의 할당을 하나로 단축 표현한 코드 ➡️ 자바스크립트 엔진은 선언과 할당을 하나의 문으로 단축 표현해도 2개의 문으로 나누어 각각 실행함.

❗️ 변수 선언은 소스코드가 순차적으로 진행되는 시점인 런타임 이전에 실행되지만, 값의 할당은 소스코드가 순차적으로 진행되는 시점인 런타임에 실행된다.

console.log(name) // undefined

var name = 'june'; // 변수 선언과 값의 할당

console.log(name) // 'june'

❗️❗️ 변수에 값을 할당할 때는 이전 값 undefined가 저장되어있던 메모리 공간을 지우고 그 메모리 공간에 할당 값 'june'을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그 곳에 할당 값 'june'을 저장한다.

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. Node.js 또한 자바스크립트 엔진을 내장하고 있다. 👉 하지만 브라우저와 Node.js는 용도가 다르다.

브라우저

• HTML,CSS,자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주목적.
• 보안상의 이유로 브라우저 환경의 자바스크립트는 파일을 생성하고 수정할 수 있는 파일 시스템을 제공 ❌ : 각 사용자의 브라우저를 통해 사용자 컴퓨터 로컬의 파일을 삭제하거나 수정할 수 있다면 이는 사용자 컴퓨터가 악성 코드에 그대로 노출되는 것이나 다름없다.
• 클라이언트 사이드 Web API 제공.

Node.js

• 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주목적. : 따라서 브라우저에서 제공하는 DOM API는 Node.js에서 제공되지 않는다.
• 파일을 생성하고 수정할 수 있는 파일 시스템을 기본 제공한다.
• Node.js의 고유의 API를 제공.

🔦 웹 브라우저

구글 크롬 브라우저의 점유율은 65.47%!

개발자 도구

• Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링 된 뷰를 확인해 볼 수 있다. 단 편집한 내용이 저장되지 않는다. 웹페이지가 의도된대로 렌더링 되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.

• Console : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.

• Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.

• Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.

• Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

🪜 Node.js

클라이언트 사이드, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발이 가능하다. 하지만 프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크또는 라이브러리를 도입하거나 Babel, Webpack, Eslint 등 여러가지 도구를 사용할 필요가 있다.

Node.js와 npm

Node.js

2009년, 라이언 달이 발표한 Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 간단히 말해 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이다.

npm

npm은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command Line Interface)를 제공한다.

1995년, 약 90%의 시장 점유율로 웹브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다. 그래서 탄생한 것이 바로 브랜던 아이크(Brandon Eich)가 개발한 자바스크립트(JavaScript)이다.

이렇게 탄생한 자바스크립트는 현재 모든 브라우저의 표준 프로그래밍 언어로 자리 잡았다. 하지만 자바스크립트 탄생 뒤 얼마 지나지 않아 마이크로소프트의 JScript가 출시되었다. 넷스케이프와 마이크로소프트는 자사의 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 작동되는 기능을 경쟁적으로 추가하게 되었고, 결국 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다.

💡 이에 따라 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되었고, 1997년 ECMA-262라고 불리는 자바스크립트 초판(ECMAScript 1) 사양이 완성되었다. 이후 1999년 ECMAScript3(ES3), 2009년에는 HTML5와 함께 ECMAScript(ES5)가 표준 사양으로 출시 되었다.

2015년 ES6는 let/const 키워드, 화살표 수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖춰야할 기능들을 대거 도입하는 큰 변화가 있었다. ES6 이후의 버전업은 비교적 작은 기능을 추가하는 수준으로 매년 공개할 것으로 예고되었다.

ECMAScript 버전별 특징

🏃 자바스크립트 성장의 역사

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.

💡 렌더링(Rendering) 렌더링이란 HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다. 때로는 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR: Server Side Rendering)을 가리키기도한다.

Ajax

1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHHttpRequest라는 이름으로 등장했다.

• 이전의 웹페이지 : HTML 코드를 서버로부터 전송 받아 웹페이 전체를 렌더링하는 방식으로 동작. 👉 변경할 필요가 없는 부분까지 포함된 HTML 코드를 다시 전송받기 때문에 불필요한 데이터 통신이 발생, 처음부터 다시 렌더링해야하기 때문에 성능면에서 불리함. 화면이 전환될 때 순간적으로 깜박이는 현상이 발생. 👉 Ajax의 등장 : 서버로부터 필요한 데이터만 전송받아 변경해야하는 부분만 한정적으로 렌더링 가능.

ex) 구글맵스 : 웹 애플리케이션 프로그래밍 언어로서의 자바스크립트의 가능성을 확인하는 계기.

jQuery

2006년, jQuery의 등장으로 DOM을 더욱 쉽게 제어할 수 있게 되었고, 크로스 브라우징 이슈도 어느 정도 해결되었다. 자바스크립트보다 배우기 쉽고 직관적이다.

❓ jQuery의 현재와 미래 2020 시점, jQuery는 여전히 “웹사이트용 자바스크립트 라이브러리 사용 동향”에서 제이쿼리는 76%의 사용률로 압도적인 1위를 기록하고 있습니다. 하지만 개발자들 사이에서의 위상은 예전 같지가 않습니다. 제이쿼리(jQuery)를 아직도 사용하나요? - 제이쿼리의 현재와 미래

V8 자바스크립트 엔진

2008년, V8 자바스크립트 엔진의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.

• V8 자바스크립트 엔진 : 자바스크립트 발전 ➡️ 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동
• 개발에서 프론트엔드 영역이 주목받는 계기로 작용!

Node.js

2009년, 라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.

• Node.js는 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다.
• 프론트엔드와 백엔드 영역에서 자바스크립트를 사용할 수 있다는 동형성(isomorphic)은 별도의 언어를 학습하기 위한 시간을 덜 수 있다는 장점!
• 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋음 👉 따라서 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Application)에 적합하다.

❓ 비동기 I/O (비동기 입출력) 데이터 전송을 마치기 전에 기타 프로세스가 계속하도록 허가하는 입출력 처리의 한 형태이다. 📎 CPU 사용률 활용 관점에서 보는 비동기 I/O : 참고 블로그

SPA 프레임워크

모던 웹 어플리케이션은 데스크탑 어플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승했다. 이전의 개발 방식을 유지하기 어려워졌고, 더욱 유연하고 확장하기 쉬운 어플리케이션 아키텍쳐 구축을 위해 여러 프레임워크가 등장하게 되었다.

CBD(Component Based Development) 방법론을 기반으로 하는 SPA가 대중화 되면서 Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리를 많이 사용하고 있다.

💻 자바스크립트와 ECMAScript

자바스크립트는 일반적으로 ECMAScript를 아우르는 개념!

• ECMAScript : 자바스크립트의 표준 사양. ECMA-262 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정함. 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

• JavaScript : 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등)를 아우르는 개념이다.

❓ 클라이언트 사이드 Web API는 월드 아이드 웹 콘소시엄에서 별도의 사양으로 관리하고 있다. MDN web docs의 Web API 페이지를 참고!

📌 자바스크립트의 특징

• 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.
• 자바스크립트 또한 기존의 프로그래밍 언어에서 많은 영향을 받았다. : 기본 문법은 C, 자바와 유사하다.
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다. 👉 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다.

🗝 모던 자바스크립트 엔진 : 크롬의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore, 마이크로소프트 엣지의 Chakara 등

• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

비록 다른 객체 지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다.

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이를 위해 먼저 무엇을 실행하고 싶은지 정의할 필요가 있다. 다시 말해 프로그래밍에 앞서 해결해야할 문제(요구사항)을 명확히 이해한 후 적절한 문제 해결 방안을 정의할 필요가 있다.

프로그래밍 ≠ 알고리즘

💡 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상사하게 요구사항을 설명하는 작업이며, 그 결과물이 코드이다.

프로그래밍 언어

명령을 수행하는 주체는 컴퓨터다. 컴퓨터가 이해할 수 있는 언어, 기계어로 명령을 전달해야 한다. 기계어는 비트 단위로 기술되어 있기 때문에 사람이 기계어를 이해해서 직접 명령을 전달하는 것은 매우 어려운 일이다.

기계어로 직접 명령하는 대신, 사람이 이해할 수 있는 약속된 구문 = 프로그래밍 언어를 사용해 프로그램을 작성한 후 그것을 컴퓨터로 이해할 수 있는 기계어로 변환하는 일종의 번역기를 이용하는 것이다.

이 일종의 번역기를 컴파일러(compiler) 혹은 인터프리터(interpreter)라고 한다.

구문과 의미

프로그래밍 언어는 구문(syntax)과 의미(semantics)의 조합으로 구성된다.

const number = 'string';
console.log(number*number); // NaN

자바스크립트의 변수에는 어떠한 타입의 값도 할당할 수 있다. 따라서 위의 예제는 문법적으로 전혀 문제가 없다. 하지만 의미적으로 옳지 않다. number라는 이름의 변수에 문자열이 할당되어 있기 때문이다. number라는 이름의 변수에는 숫자를 할당하는 것이 의미적으로 옳다.

결국 문제 해결 능력을 통해 만들어낸 해결방안은 프로그래밍 언어의 문법을 사용해 표현한다.

즉, 작성된 코드는 해결 방안의 구체적 구현물이다. 그리고 이것은 프로그래밍 언어의 문법에 부합하는 것은 물론이고 수행하고자하는 바를 정확히 수행하는 것, 즉 요구사항이 실현(문제가 해결)되어야 의미가 있다.

대부분의 프로그래밍 언어는 변수와 값, 키워드,연산자,표현식과 문,조건문과 반복문에 의한 흐름제어 함수 그리고 자료 구조인 객체, 배열 등과 같은 문법을 제공한다.

💡 프로그래밍 언어가 제공하는 문법을 적절히 사용해 변수를 통해 값을 저장하고 참조하며 연산자로 값을 연산, 평가하고 조건문과 반복문에 의한 흐름제어로 코드의 실행 순서를 제어하고 함수로 재사용 가능한 문의 집합을 만들며 객체, 배열 등으로 자료를 구조화한다. 결국 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

제한 사항

seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다.

Javascript

function solution(seoul) {
  const findKim = (v) => v === 'Kim';
  const x = seoul.indexOf('Kim')
  if(seoul.some(findKim)){
    return `김서방은 ${x}에 있다`;
  }
        }

내가 푼 풀이 방법은 이렇다! some 함수를 사용해 주어진 배열안에서 'Kim'이라는 요소가 존재하면 true 값을 반환한다. 'Kim'이 존재하면, indexOf 함수를 사용해 배열안에서의 위치를 파악할 수 있다.

❗️풀고나서 생각해보니 배열 'seoul'안에는 무조건 'Kim'이 포함되어있다는 제한 사항이 있으니 간단하게 indexOf 함수만 사용해도 문제를 쉽게 풀 수 있다.

더 간단한 풀이방법!

function solution(seoul) {
  const x = seoul.indexOf('Kim')
    return `김서방은 ${x}에 있다`;
  }

리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리입니다. 앵귤러가 웹 애플리케이션에 필요한 다수의 기능을 제공하는 것과는 달리 리액트는 UI 기능만 제공합니다.

따라서 전역 상태 관리나 라우팅 또는 빌드 시스템 등을 각 개발자가 직접 구축해야합니다. 전반적인 시스템을 개발자가 구축할 수 있다는 점에서 자유도가 높다는 장점이 있지만, 개발 환경을 직접 구축해야한다는 번거롭다는 단점이 있습니다.

리액트 팀에서는 create-react-app (CRA)이라는 툴을 제공해서 이 단점을 어느정도는 보완합니다.

리액트의 특징

• UI를 자동으로 업데이트 해준다.

• 프로그램의 상태가 변하면 UI도 변경이 됩니다. 보통 API통신이나 사용자 이벤트를 통해서 프로그램의 상태값을 변경하는데, 이때 리액트가 변경된 상태값을 기반으로 UI를 자동으로 업데이트 해줍니다.

• 가상돔(virtual dom)을 통해 UI를 빠르게 업데이트 합니다.

• 리액트의 가장 큰 장점!

• 가상 돔은 이전 UI 상태를 메모리에 유지해서 변경된 부분만 실제 돔에 반영해주는 기술이다. 가상 돔 덕분에 불필요한 렌더링이 줄어들어 성능이 좋아짐!

📌 가상돔 덕분에 리액트가 다른 프레임워크 혹은 순수 자바스크립트보다 더 빠르다고 이해하면 x 순수 자바스크립트로 특정 프로젝트에 맞게 최적화를 하면 리액트나 앵귤러로 작업한 코드보다 더 빠르게 동작할 수 있음. 즉 프로젝트의 성격에 따라 성능 최적화 방법은 다르다!

• state는 불변 변수로 관리한다.

• 어떤 객체의 속성을 변경한다고 할 때, 새로운 객체를 만들어서 값을 할당하는 것.

• render 함수는 순수 함수로 작성한다.

• 순수 함수 : 입력값이 같으면 출력값이 같다.

• 랜덤 함수 사용 x : 렌더 함수 내에서 랜덤 함수나 날짜 함수 등을 사용하게 되면 입력 값이 같아도 출력값이 다를 수 있음.

• 외부상태 변경 x : 렌더 함수 내부에서 외부상태를 변경하게 되면 다른 렌더 함수의 출력값에 영향을 줄 수 있음.

😎 이렇게 코드에서 불변 변수와 순수 함수를 적극적으로 사용하면 복잡도가 낮아지고 버그가 나올 확률이 줄어든다. 더 중요한 것은, 렌더링 성능을 크게 향상시킬 수 있음.

1차 프로젝트 내 기능 중 카운트다운 타이머에 대한 내용을 정리해보고자 합니다. 제가 맡은 런칭특가 페이지와 타임딜 섹션에서 일부 사용되는 기능입니다.

setInterval 와 newDate(),getTime() 그리고 Math.floor를 활용해서 로직을 구현했습니다. 어느정도 이해를 하고 있던 메소드들이었지만, 제대로 사용을 해보는 것은 처음이기 때문에 구글링해서 여기저기 자료들을 참고해서 작성했습니다.

• newDate()는 현재 시간을 보여주며, getTime()과 함께 사용될 때는 1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자를 나타냅니다. 따라서 1970년 1월 1일 자정을 기준으로 현재 시간까지의 경과시간을 밀리 초로 나타내는 함수입니다.

• Math.floor 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다. 간단히 말해 소수점 이하를 버림하는 함수입니다.

• clearInterval은 seInterval과 짝을 이룹니다.setInterval 함수는 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을 때 사용합니다. 그리고 중지하고 싶을 때는 clearInterval 함수를 사용합니다. clearInterval 함수의 매개변수는 setInterval 함수가 리턴해주는 값을 사용합니다.

• 위에서 언급했듯이, setInterval 함수는 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을 때 사용합니다. this.count 함수를 1초마다 실행시키고 싶은 경우 setInterval(this.count,1000)의 형태로 사용하면됩니다. (1000ms=1s)

• 여기서 하나의 문제점을 발견합니다. 예를 들어 5시간 4분 3초가 남은 경우 5:3:4의 형태로 출력되는 문제입니다. 틀린 표현은 아니지만 통상적인 남은 시간으로 받아들여지지는 않죠. 그래서 들어오는 숫자가 10 미만일 경우 앞에 0을 붙여주는 삼항연산자를 만들어, 05:03:04의 형태로 출력하게 해 문제를 해결했습니다.

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다. 하지만 조건에 따라 렌더링을 해야하는 경우 JSX 밖에서 if문을 사용해서 사전에 값을 설정하거나, {} 안에 조건부 연산자를 사용하면 된다. 조건부 연산자의 다른 이름은 삼항 연산자이다.

import React from 'react';

function App(){
  const name = '주니';
  return(
   <div>
    {name === '주니'?(
     <h1> ${name}님 어서오세요!</h1>
   ) : (
    <h2> 앗, 누구시죠? </h2>
    )}
   </div>
  );
}

export default App;

이렇게 코드를 작성한 후 저장하면 브라우저에서 '주니님 어서오세요!' 라는 문구를 볼 수 있다. 하지만 name 값을 다른 값으로 바꾸면,

import React from 'react';

function App(){
  const name = '선아';
  return(
   <div>
    {name === '주니'?(
     <h1> ${name}님 어서오세요!</h1>
   ) : (
    <h2> 앗, 누구시죠? </h2>
    )}
   </div>
  );
}

export default App;

'앗, 누구시죠?'가 나오게된다.

input 태그의 disabled 속성

HTML의 input type='button' 태그를 사용한 버튼을 활성화/비활성화 할때는 disabled 속성을 이용합니다.

<input type='button' value='활성화1'/>
<input type='button' disabled value='비활성화1'/>
<input type='button' disabled='disabled' value='비활성화2'/>

기본적으로 input 태그에 disabled 속성을 따로 명시해 주지 않으면, 버튼은 활성화됩니다. input 태그에 disabled 속성을 명시해주면, 버튼은 비활성화가 됩니다.

참고: https://hianna.tistory.com/477?category=764998 [어제 오늘 내일]

할당 연산자(Assignment operators)는 자바 스크립트의 변수에 값을 할당하는 데 사용됩니다.

x=10 과 y=5 로 주어진 경우, 아래 표는 할당 연산자들을 설명합니다.

문자열(String) 연산자

'+' 연산자는 문자열 변수 또는 텍스트 값을 추가 하는데도 사용될 수 있습니다.

const str = 'Hello' + ' ' + 'world';
document.writeln(str); // Hello world

숫자를 더 할 때 '+' 연산자를 사용하는 것처럼 문자열을 이어줄 때도 위와 같이 '+' 연산자를 사용할 수 있습니다. 문자열을 이어주는 방법 중 가장 성능이 뛰어납니다.

문자열을 추가하는데 += 연산자도 사용될 수 있습니다. concat() 메서드보다 할당 연산자 (+, +=)를 사용하는게 더 좋습니다. 성능 테스트 결과에 따르면 할당 연산자의 속도가 몇 배 빠릅니다.

let str = 'Hello';
str += ' ';
str += 'world';

document.writeln(str); // Hello world

CSS의 position 속성은 HTML 요소들의 위치를 설정하는 데 사용됩니다.

position 속성의 값으로는 static, relative, absolute, fixed, sticky 이렇게 다섯 가지가 있습니다.

요소를 배치하는 방법의 유형이며, 각 유형에 따라 top, bottom, left, right 속성으로 위치를 조절할 수 있습니다.

1. static

HTML 요소의 기본 position 값은 static입니다. position 속성을 주지 않으면 디폴트로 static이라는 속성값이 적용되는 것입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) element가 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

2. relative

static과 마찬가지로 element가 문서의 일반적인 흐름에 따라 배치가 됩니다. static과의 차이점은element가 자신의 static 위치에서 top, bottom, left, right와 같은 속성에 의한 상대적인(relative) 위치에 배치된다는 점입니다.

• relative를 사용시 element가 겹쳐지게도 보일 수 있으므로 주의가 필요합니다.

3. absolute

absolute는 element가 문서의 일반적인 흐름을 따르지 않습니다. 대신 가장 가까운 위치에 있는 조상 element에 대해 상대적 위치로 배치됩니다. 조상 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직입니다.

4. fixed

fixed 역시 absolute와 마찬가지로 element가 문서의 일반적인 흐름에서 제거됩니다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치됩니다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.

웹 페이지를 방문해보면 로고나 선택박스들이 스크롤을 아래로 내려도 따라다니는 것을 보신적이 있으실 겁니다. 이러한 기능을 fixed를 통해 구현할 수 있습니다.

5. sticky

sticky는 element가 문서의 일반적인 흐름에 따라 배치되며 top, bottom, left, right 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적(relative) 위치에 배치됩니다. 그래서 sticky로 position을 지정했는데 top, bottom, left, right 속성이 주어지지 않으면 static으로 배치되는 위치와 같습니다. sticky는 relative와 마찬가지로 다른 요소들에 영향을 주지 않는 특징을 가집니다.

fixed 와 sticky의 차이점?

fixed와 sticky 둘 다 스크롤을 하더라도 보여지는 공통점을 가지고 있는데요. 이 두 position의 차이점은 fixed는 문서의 흐름을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면 sticky는 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치됩니다.

즉, fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있는 반면 sticky를 쓰면 그러한 상황을 예방할 수 있습니다.

Semantic Web Semantic Tag

Semantic Web

시맨틱 웹(Semantic Web) : 의미론적 웹

시맨틱 웹이란, 간단히 말하자면 의미를 가지고 있는 웹이라고 할 수 있습니다. 기존의 웹은 기계가 읽을 수 없는 정보의 형태를 가지고 있었다면, 시맨틱 웹은 기계가 읽을 수 있는 유의미한 정보의 형태를 가지고 있습니다.

시맨틱 웹의 등장은,기존의 잡다한 데이터의 집합의 불과했던 웹을 👉의미와 관련성을 지는 거대한 데이터베이스로 바꾸게 해준 시작인 셈입니다.

Semantic Tag

시맨틱 태그(Semantic tag): 의미를 가지는 태그

시맨틱 웹에서 사람과 기계가 읽고, 이해할 수 있는 형태의 정보로 이뤄진 태그입니다. HTML 문법을 아예 모르는 사람들이 봐도 웹이 어떻게 구성되어있는지 이해할 수 있도록 하는 태그이죠. 전체 HTML 구조와 컨텐츠의 의미를 명확히 정의해줘, 검색 엔진에서 검색하는데 더 용이하게 만들어주기도 합니다.

✅ 시맨틱 태그의 종류

• <header> : 페이지나 일부분의 머리말(헤더)부분을 지정
• <main> : 페이지의 가장 중요한 메인 부분을 지정
• <nav> : 페이지의 네비게이션 부분을 지정
• <section> : 페이지의 일부분을 지정
• <footer> : 페이지나 일부분의 꼬리말(푸더)부분을 지정
• <article> : 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용
• <aside> : 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑 버튼등에 사용
• <details> : 사용자가 보거나 숨길 수 있는 세부 콘텐츠를 정의할 때 사용
• <summary> : 부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냄
• <figure> : 사진, 다이어그램 등과 같은 부가적인 요소를 정의
• <details> : 부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냄

💡 왜 시맨틱 웹과 태그가 중요한 것인가?

시맨틱 웹은 컴퓨터가 사람을 대신해 정보를 읽고, 이해하고 가공해 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 지닌 차세대 지능형 웹입니다. 이해하기 쉬운 의미와 정보를 지닌 웹일 수록 사용자들이 정보를 얻고자 할 때, 더욱 쉽게 내가 원하는 정보에 접근할 수 있습니다.

간단히 말하자면, 👉검색 엔진을 통해 검색할 때, 찾고자 하는 정보를 더 쉽고 빠르고 정확하게 접근👈 할 수 있게 도와주기 때문!

그래서 img 태그와 CSS background-img 속성의 차이점은?

<img>는 의미를 가지고 있는 시맨틱 태그로, 에러가 발생해도 alt속성으로 어떤 이미지인지 알 수 있습니다. 인물 사진이나, 로고 혹은 다이어그램 등 이미지가 웹 컨텐츠의 한 부분이라면, <img>를 사용하는 것이 좋습니다.

반면, background-image 는 의미를 가진 시맨틱 태그가 아닌 속성으로 어떠한 정보나 의미를 가지고 있지 않습니다. 결국 컴퓨터는 이 태그가 어떤 이미지인지 읽을 수 없는 것이죠.

따라서 이미지에 정보를 담고, 검색 엔진에 의해 웹이 잘 노출되도록 하기 위해서는 <img>를 사용하는 것이 좋습니다. background-image 는 의미를 담지않는, 디자인적인 요소를 넣을 때 활용하는 것이 좋습니다.