1. JavaScipt란❓
프로그래밍 언어로,
ECMAScript와 웹 브라우저가 별도 지원하는 클라이언트 사이드 Web API 등을 모두 아우르는 개념을 이야기함.
✨ 추가설명
JavaScript의 시초는 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적 기능을 수행하기 위해 도입된 경량 프로그래밍 언어이며, 브렌던 아이크가 개발.
넷스케이프 커뮤니케이션즈의 자사 웹 브라우저인 넷스케이프 네비게이터2에 탑재되었고,
Mocha(모카)로 처음 명명되었으며,
라이브스크립트라는 이름을 한번 더 거쳐 자바스크립트라는 이름으로 최종 명명됨.
특징
- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 인터프리터 언어
- 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
2. 크로스 브라우징이란❓
웹 페이지 제작 시
최대한 많은 종류의 웹 브라우저에서 페이지가 정상적으로 동작할 수 있도록
웹 페이지를 만드는 방법론을 말함.
✨ 추가설명
과거 MS의 JScript를 탑재한 Internet Explorer와, 넷스케이프 커뮤니케이션즈의 모카를 탑재한 넷스케이프 네비게이터가 시장 경쟁력을 이끌어내기 위해 각각 자사의 제품에서만 동작하는 기능들을 개발하기 시작했고,
이로인해 브라우저에 따라 웹 페이지가 정상적으로 동작하지 못했고, 더 나아가 모든 페이지에서 정상적으로 동작되는 웹페이지를 구현하기가 어려워지는 상황을 초래했다. 이러한 상황을 통해 크로스 브라우징의 개념이 탄생하게 되었다.
3. ECMAScript란❓
자바스크립트의 파편화를 방지하고, 모든 브라우저에서 정상적으로 동작하는 표준화된 사양의 자바스크립트.
✨ 추가설명
크로스 브라우징 이슈가 발생한 이후, 넷스케이프 커뮤니케이션즈는 ECMA 인터내셔널에 자바스크립트 표준화를 요청하고, ECMA-262라 불리는 표준화된 자바스크립트 초판이 완성되었다.
4. Ajax란❓
JS를 사용하여 서버와 클라이언트 간에 XML데이터를 주고받는 기술을 이야기하며, 쉽게 이야기하자면
JS를 통해 서버와 클라이언트가 비동기 방식으로 데이터를 주고받는 기능을 이야기함.
✨ 추가설명
기본적으로 HTTP 프로토콜 방식에서는
클라이언트 쪽에서 request를 보내고, 서버쪽에서 Response를 받으면
이어졌던 연결이 끊기게 되며, 화면의 내용을 다시 갱신하기 위해 다시 requset를 하고 response를 진행하는 과정에서
많은 리소스가 낭비됨.
허나 Ajax의 경우,
HTML의 전체가 아닌 일부분만 갱신할 수 있도록
XMLHttpRequest 객체를 통해서 서버에 request를 하고,
이 경우에는 JSON이나 XML형태로 필요한 데이터만 받아 갱신하여 리소스를 아낄 수 있음.
+ 클라이언트와 서버
클라이언트(Client)
서버의 서비스를 받아서 사용하는 사용자 (장치 또는 프로그램).
클라이언트 장치) 데스크탑, 노트북, 스마트폰 등
클라이언트 프로그램) 웹 브라우저 등
서버(Server)
네트워크를 통해 클라이언트에게 서비스를 제공하는 시스템.
클라이언트의 요청에 대해 응답해주는 시스템이며,
흔히 웹브라우저를 통해 정보를 받을 수 있듯이 이 또한 서버로부터 정보를 받아 우리가 볼 수 있는 것이다.
👀 알아가기
주소창에 www.google.com을 입력하게 되면...
www.google.com에 해당하는 웹 서버로 요청 전송- 해당 웹 서버는 클라이언트 (웹 브라우저)의 요청 확인
- DB에서
www.google.com라는 도메인의 웹사이트를 찾음 - 클라이언트에게 제공.
웹 동작 방식에 대한 조금 더 자세한 부분은 추후 한 발자국 더, CS에서 다루도록 하자..!
+ 동기, 비동기
동기적 처리 (Synchronous)
서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있는 처리방식.
안정적인 데이터 통신이 가능하나,
한번에 많은 작업을 처리하기에 부적합하다.
비동기적 처리 (Asynchronous)
서버로 요청을 보내고 응답을 기다리지 않고, 바로 다음 동작을 수행할 수 있는 처리방식.
동기적 처리보다 구현하기 복잡하나,
병렬적인 작업 처리가 가능하다.
5. 렌더링이란❓
HTML, CSS, JS의 코드를 해석하여 웹 브라우저상에서 사용자에게 화면으로 전달되는 과정을 이야기함.
6. ES6 특징❓
범용 프로그래밍 언어로서 갖춰야 할 기능들이 대거 업데이트됨.
블록 레벨 스코프인 let과 const 지원화살표 함수추가로 익명함수 표현이 가능for of반복문 추가class추가- 템플릿 문자열
'${문자열}'로 간단하게 문자열 처리 가능 - 모듈 기능 키워드
import, export추가 spread 연산자추가map,set자료구조 추가
7. var, let, const의 차이점❓
각각의 차이점은
에 따라 나뉜다.
1) 변수 선언 방식
var
중복선언이 가능하며, 마지막에 할당된 값이 변수에 저장됨.
변수를 유연하게 사용 가능하지만, 기존에 선언해둔 변수에 또 다시 재할당을 하는 등의 실수가 발생할 수 있고, 특히나 코드의 양이 많을 때 동일한 변수명 때문에 디버깅에 어려움을 겪을 수 있음.
이를 보완하는것이 ECMAScript2015(ES6)의 let과 const임.
let
중복 선언이 불가하나, 재할당이 가능.
중복 선언을 시도할 경우
Uncaught SyntaxError: Identifier '변수명' has already been declared
라는 오류가 출력됨.
const
let과의 차이점은 immutable(재할당)의 여부임.
중복 선언과 재할당이 모두 불가능함.
재할당을 시도할 경우
Uncaught TypeError: Assignment to constant variable
이라는 오류가 출력됨.
2) 스코프
유효한 참조 범위가 서로 다르다.
var 는 함수 레벨 스코프로,
함수 내에서 선언될 시 해당 함수 내에서만 유효하고, 외부에서는 참조할 수 없음.
이로인해
함수 내부에서 선언된 변수는 지역변수,
함수 외부에서 선언된 변수는 전역변수로 취급됨.
let과 const는 블록 레벨 스코프로,
코드블록 ({...}) 내부에서 선언될 시, 해당 코드 블록 내에서만 유효하며, 외부에서는 참조할 수 없게된다.
즉, 코드블록 내부에서 선언된 변수는 지역변수로 취급이 된다.
3) 호이스팅
함수 내부에 있는 모든 선언들을 해당 함수의 유효 범위 최상단에 선언하는 것을 뜻함.
(미리 선언문을 실행해둔다고 이해하면 됨.)
✨ 추가설명
실제로 코드가 끌어올려지는 것이 아니라 함수 실행 전 해당 함수를 한 번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻하며, 실제 메모리에서는 변화가 없음.
1. var, 함수선언문 : 호이스팅이 발생함
/* 변수 호이스팅 */
console.log(a); // undefined
var a = 1;
console.log(a); // 1
/* 함수 호이스팅 */
test(); // test
function test() {
console.log("test");
}-
코드 실행 전 JS 내부에서 미리 a라는 변수를 선언하고,
undefined로 초기화를 해두었기 때문에 변수a선언 전 참조된 a 값은 에러가 아닌undefined를 출력하게 됨. -
함수 선언문도 선언되기 전 호출됨에도 에러가 발생하지 않음.
2. let, const, 함수표현식 : 호이스팅이 발생하나, 다른 방식으로 작동됨
/* 변수 호이스팅 */
console.log(a); // ReferenceError: a is not defined
let a = 1;
console.log(a); // 5
/* 함수 호이스팅 */
foo(); // error
var foo = function() {
console.log("foo");
}-
변수 a가 선언되기 전 참조하여 에러가 발생.
이는 호이스팅이 발생하지 않기 때문이 아니라, 변수 선언 & 초기화 사이에 일시적으로 변수값을 참조할 수 없는 구간인TDZ(Temporal Dead Zone)에 빠졌기 때문에 에러가 발생함. -
함수표현식을 사용하거나 let 또는 const 로 변수를 선언하는 경우, 자바스크립트 내부에서는
코드 실행 전은 변수 선언만해둘뿐,초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함. 그렇기 때문에 호이스팅이 발생하기는 하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보이는 것.
