[2일차] <자바스크립트란?>, <타입이란?> 키워드 및 질문

[xeunnie]

[2일차] [챕터 2] 키워드 및 질문

[모던 자바스크립트 Deep Dive]

<2장 자바스크립트란?>

1. 자바스크립트의 탄생
2. 자바스크립트의 표준화
3. 자바스크립트의 성장과 역사
4. 자바스크립트와 ECMA Script
5. 자바스크립트의 특징
6. ES6 브라우저 지원 현황

[우아한 타입스크립트 with 리액트]

<2-1장 타입이란?>

• 자료형으로서의 타입
• 집합으로서의 타입
• 정적 타입과 동적 타입
• 강타입과 약타입
• 컴파일 방식

[Stella-516]

<모던 딥다이브 자바스크립트>
-키워드
렌더링
로직
Ajax
런타임
Node.js
프레임워크

<우아한 타입스크립트>
-키워드
타입/변수
컴파일타임
런타임

-질문
크로스 브라우징 이슈현상이란?
Ajax란? 등장배경과 이로 인한 변화?
정적 타입과 동적타입의 차이점?
강타입의 단점?

[202110861]

크로스 브라우징 이슈현상이란?

• 브라우저마다 웹페이지가 정상적으로 동작하지 않는 현상

Ajax란? 등장배경과 이로 인한 변화?

• JS를 이용해 서버와 브라우저가 비동기 형식으로 데이터를 교환할 수 있는 통신 기능

정적 타입과 동적타입의 차이점?

• 정적 타입: 개발자가 코드로 타입을 지정한 순간 (컴파일 타임에 결정됨)
• 동적 타입: 따로 지정을 안 한 상태에서 실행을 했을 때 타입이 결정됨 (런타임에서 결정)

강타입의 단점?

• 다른 타입의 값끼리 연산할 때 에러가 발생함으로 유연하게? 코드를 작성할 수 없음

[xeunnie]

• A1. 크로스 브라우징 이슈현상이란?
  크로스 브라우징이란? 모든 브라우저에서 웹페이지가 동일하게 동작하도록 하는 기술적 접근 방식이다.
  크로스 브라우징 이슈란? 각 브라우저의 렌더링 엔진 차이, 자바스크립트 해석 방식, CSS 규칙 지원 차이 등으로 인해 웹사이트가 브라우저 마다 다르게 렌더링 되거나 정상 동작하지 않는 문제를 말한다. 폴리필 사용과, CSS 리셋, 웹표준 준수 등으로 해결한다.

• A2. Ajax란? 등장배경과 이로 인한 변화?
  Ajax는 서버와 비동기적으로 데이터를 주고받을 수 있는 기술이다.
  Ajax는 기존의 전체 페이지 새로고침해야하는 문제를 해결하기 위해 도입됐다.
  일부 데이터만 갱신하는 방식이 가능해지자 구글맵을 시작으로 웹사이트의 구현의 규모가 확장되는 게기가 됐다.

• A3. 정적 타입과 동적타입의 차이점?
  변수 타입이 결정되는 타이밍에 따라 나뉜다.
  컴파일 시 변수의 타입이 결정되는 것이 정적타입으로, 타입오류를 미연에 방지하게 한다.
  런타임에 변수의 타입이 결정되는 것이 동적 타입으로, 유연성을 가지지만 타입 오류 발생 가능성이 높다.

• A4. 강타입의 단점?
  강타입은 엄격한 타입 변환 규칙 적용으로 인하여 유연성이 떨어진다.
  명시적인 형변환 수행이 부가적으로 필요하기 때문에 초기 개발 시간이 증가할 수 있다.

[202110861]

<모던 자바스크립트 Deep Dive>

1. 키워드

• 크로스 브라우징
• Ajax
• JQuery
• V8 자바스크립트 엔진
• Node.js
• SPA
• 컴파일러 언어
• 인터프리터 언어

2. 질문

• Q1. 크로스 브라우징이란? 발생하는 원인은?
• Q2. 컴파일러 언어와 인터프리터 언어의 차이

<우아한 타입스크립트>

1. 키워드

• 컴파일 타임
• 런타임
• 암묵적 타입 변환
• 타입 시스템

2. 질문

• Q3. 자료형 타입 7가지란?
• Q4. 정적 타입 시스템과 동적 타입 시스템의 차이

[202110861]

Q1. 크로스 브라우징이란? 발생하는 원인은?

• 브라우저마다 웹페이지가 정상적으로 동작하지 않는 현상. 다르게 보이는 현상
• 자바스크립트와 JScript가 표준화 되지 못했기 때문

Q2. 컴파일러 언어와 인터프리터 언어의 차이

• 컴파일러 언어: 소스 코드를 한번에 기계어로 변환 시켜주기 때문에 속도가 빠름. 실행 파일을 생성함
• 인터프리터 언어: 코드를 한줄씩 읽으면서 바이트 코드로 변환하기 때문에 속도가 느리며, 실행파일을 생성하지 않음.

Q3. 자료형 타입 7가지란?

• undefined, null, Boolean, String, Numeric, Symbol, Object

Q4. 정적 타입 시스템과 동적 타입 시스템의 차이

• 정적 타입: 개발자가 코드로 타입을 지정한 순간 (컴파일 타임에 결정됨)
• 동적 타입: 따로 지정을 안 한 상태에서 실행을 했을 때 타입이 결정됨 (런타임에서 결정)

[xeunnie]

• A1. 크로스 브라우징이란? 발생하는 원인은?
  크로스 브라우징이란? 모든 브라우저에서 웹페이지가 동일하게 동작하도록 하는 기술적 접근 방식이다
  크로스 브라우징 이슈란? 웹사이트가 브라우저 마다 다르게 렌더링 되거나 정상 동작하지 않는 문제를 말한다.
  각 브라우저의 렌더링 엔진 차이, 자바스크립트 해석 방식, CSS 규칙 지원 차이 등으로 인해 발생하게 됐다.

• A2. 컴파일러 언어와 인터프리터 언어의 차이
  컴파일러 언어는 코드를 한 번에 기계어로 변환한 후 실행하며, 실행 속도가 빠르다.(예: C, Java)
  인터프리터 언어는 코드를 한 줄씩 해석하며 실행하기 때문에 디버깅이 쉽지만 속도가 느리다. (예: Javascript, Python)

• A3. 자료형 타입 7가지란?
  자바스크립트의 기본 데이터 타입은 undefined, null, Boolean, String, Symbol, Number(BigInt 포함), Object이다.
  이 중 원시 타입(Primitive Type)은 Object를 제외한 6가지이며, 불변성을 갖는다.

• A4. 정적 타입 시스템과 동적 타입 시스템의 차이
  정적 타입 시스템은 변수의 타입이 컴파일 시 고정되며, 타입 안정성이 높다. (예: TypeScript, Java)
  동적 타입 시스템은 변수의 타입이 실행 중에 결정되며, 유연하지만 타입 에러가 발생할 가능성이 크다. (예: JavaScript, Python )

[xeunnie]

[모던 자바스크립트 Deep Dive]

키워드

• 크로스 브라우징 이슈
• V8엔진
• SPA

질문

• Q1. 자바스크립트와 ECMAScript는 어떤 차이가 있나요?
• Q2. Node.js의 특징과 한계점은 무엇인가요?

[우아한 타입스크립트]

키워드

• 정적 타입 vs 동적 타입
• 강타입 vs 약타입
• 타입 시스템

질문

• Q3. 정적 타입과 동적 타입의 차이점은 무엇인가요?
• Q4. 강타입과 약타입의 차이는 무엇이며, 자바스크립트와 타입스크립트는 각각 어디에 속하나요?

[xeunnie]

• A1. 자바스크립트와 ECMAScript는 어떤 차이가 있나요?
  ECMAScript는 자바스크립트의 표준 명세이며, ES6 이후 매년 새로운 버전이 발표되고 있다.
  자바스크립트는 ECMAScript를 기반으로 하며, 브라우저 환경에서 DOM, Web API 등을 추가로 포함한다.
  즉, ECMAScript는 자바스크립트의 핵심 언어 사양이라고 볼 수 있다.

• A2. Node.js의 특징과 한계점은 무엇인가요?
  Node.js는 V8 엔진 기반의 자바스크립트 런타임 환경으로, 서버 측에서도 자바스크립트를 실행할 수 있게 해준다.
  비동기 I/O와 단일 스레드 이벤트 루프를 활용하여 빠른 요청 처리 성능을 제공하지만,
  CPU 집약적인 작업에는 적합하지 않으며, 멀티 스레딩이 필요한 경우 제약이 있다.

• A3. 질문 중복으로 생략

• A4. 강타입과 약타입의 차이는 무엇이며, 자바스크립트와 타입스크립트는 각각 어디에 속하나요?
  강타입은 서로 다른 타입 간 자동 변환을 허용하지 않으며, 타입 안정성이 높다.
  약타입은 타입 변환이 자유로워 개발이 유연하지만, 예기치 않은 버그가 발생할 가능성이 있다.
  JavaScript는 약타입, TypeScript는 강타입 언어에 속한다.

[202110861]

Q1. 자바스크립트와 ECMAScript는 어떤 차이가 있나요?

• ECMAScript는 자바스크립트를 표준화시킨 것. 핵심 문법을 규정한 것

Q2. Node.js의 특징과 한계 점은 무엇인가요?

• 특징: 비동기 I/O를 지원, 단일 스레드 이벤트 루프 기반으로 동작함.
• 한계점: 동시 처리가 필요할 때 혹은 CPU 사용률이 높을 때 사용하긴 힘듦.

Q3. 정적 타입과 동적 타입의 차이점은 무엇인가요?

• 정적 타입: 개발자가 코드로 타입을 지정한 순간 (컴파일 타임에 결정됨)
• 동적 타입: 따로 지정을 안 한 상태에서 실행을 했을 때 타입이 결정됨 (런타임에서 결정)

Q4. 강타입과 약타입의 차이는 무엇이며, 자바스크립트와 타입스크립트는 각각 어디에 속하나요?

• 강타입은 서로 다른 타입을 가진 값끼리 연산할 때 에러가 발생 (ex. 타입스크립트)
• 약타입은 발생하지 않는다. (ex. 자바스크립트)

[wlgusqkr]

<모던 자바스크립트 Deep Dive>

키워드
V8 자바스크립트 엔진
크로스 브라우징
Ajax
Node.js
컴파일러, 인터프리터 언어
질문
Q1. Node.js란 무엇인가?
Q2. SPA 프레임워크가 등장한 이유는?
<우아한 타입스크립트>

키워드
컴파일 타임
런타임
정적 타입
동적 타입
질문
Q3. 타입스크립트의 컴파일 결과가 자바스크립트인 이유?

[xeunnie]

• A1. Node.js란 무엇인가?
  Node.js는 구글 V8 엔진 기반의 자바스크립트 런타임 환경으로,
  비동기 I/O와 단일 스레드 이벤트 루프를 사용하여 웹 서버 및 API 개발에 최적화되어 있다.
  대표적인 패키지 관리자(NPM)와 함께 활용되며, 실시간 애플리케이션 개발에 많이 사용된다.

• A2. SPA 프레임워크가 등장한 이유는?
  기존의 멀티 페이지 애플리케이션은 페이지 전환 시마다 전체 HTML을 다시 로드해야 하는 비효율성이 존재했다.
  SPA는 필요한 데이터만 갱신해 화면 전환의 속도를 개선했다.
  이를 위해 라액트, 뷰, 앵귤러 등 컴포넌트 기반 프레임워크가 등장하여 관리 효율성을 높였다.

• A3. 타입스크립트의 컴파일 결과가 자바스크립트인 이유?
  타입스크립트는 브라우저에서 직접 실행되지 않으며, 자바스크립트로 변환(트랜스파일) 후 실행된다.
  이는 브라우저가 ES 기반으로 동작하기 때문에, 표준 자바스크립트 코드가 필요하기 때문이다.
  따라서 TypeScript 코드는 ES5, ES6 등의 JavaScript 코드로 변환된 후 실행된다.

[202110861]

Q1. Node.js란 무엇인가?

• 자바스크립트 엔진 기반의 실행 환경
• 비동기 I/O를 지원, 단일 스레드 이벤트 루프 기반으로 동작

Q2. SPA 프레임워크가 등장한 이유는?

• 등장 전에는 MPA 접근 방식을 사용했고 복잡해진 개발 과정을 수행하기 어려웠음. 또한 페이지 전환 시 HTML 문서를 전체 로드 해야 해서 네트워크 지연과 서버 응답 시간으로 인해 페이지 로딩이 느려지는 문제가 있음
• SPA 등장 후 컴포넌트 기반 아키텍처, 클라이언트 사이드 라우팅(필요한 부분만 업데이트), 상태 관리, 가상 DOM 기능을 제공함

Q3. 타입스크립트의 컴파일 결과가 자바스크립트인 이유?

• 타입스크립트는 자바스크립트의 슈퍼셋 버전이면서 브라우저에서 실행이 되지 않음.
• 타입