[TIL4me]자바스크립트 #01

소진수·2021년 7월 18일
0

JAVASCRIPT

목록 보기
3/10
post-thumbnail

1장. 프로그래밍

요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것

2장. 자바스크립트

  • ECMAscript: 상표권문제로 명명된 자바스크립트의 표준 사양인 ECMA-262 명칭

  • 렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것

    • 혹은 "서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정"를 의미
  • Ajax: 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

    • Anchronous JavaScript and XML
    • 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링하는 방식을 가능케함
  • JQuery: DOM을 쉽게 제어하고 크로스 브라우징 이슈를 해결함


  • V8 자바스크립트 엔진: 구글에서 개발한 빠르게 동작하는 자바스크립트 엔진

  • V8을 기준으로 자바스크립트가 웹 어플리케이션 프로그래밍 언어로 정착

  • Node.js: V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

    • 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경.

    • 서버 사이드 어플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, HTTP, 파일시스템, 빌트인 API를 제공한다

    • 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 Request 처리 성능이 좋다.

      • I/O: 데이터 등의 모든 항목의 입력과 출력을 의미

      • [https://www.nextree.co.kr/p7292/]: 비동기 I/O: ""자세한 내용""

      • Node.js는 데이터를 실시간으로 처리하는 SPA(single page application)에 적합하다.


자바스크립트

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

자바스크립트의 특징

  • 인터프리터 언어
    • 개발자가 별도의 컴파일 작업을 수행하지 않는다
    • 모던 자바스크립트 엔진가 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 단점을 해결했다.
  • 멀티 패러다임 프로그래밍 언어
    • 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 언어

3장. 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행환경

  • node.js는 브라우저 외부에서 자바스크립트 개발 환경을 제공하는 것이 주목적이다.
    • node.js에서는 brower가 제공하는 DOM API 등의 API를 제공하지 않는다.
    • Node.js에서는 파일을 생성하고 수정하는 파일 시스템을 기본 제공하지만 브라우저는 제공하지 않는다

Node.js

크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

  • npm: 자바스크립트 패키지 매니저
    • Node.js에서 사용할 수 있는 모듈을 패키지화해서 모아둔 저장소
    • 패키지 설치 및 관리를 위한 CLI(command line interface)를 제공
  • REPL: Read Eval Print Loop
    • Node.js에서 제공하는 기능으로 간단한 자바스크립트 코드를 실행해 결과를 확인할 수 있다

4장. 변수

변수란 무엇인가? 왜 필요한가?

  • 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념
    • 평가, 리터럴, 연산자, 피연산자, 표현식, 파싱(해석),
    • 메모리, 메모리셀, 저장(write), 읽기(read), 메모리 주소(memory address)
  • 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
    • 값의 위치를 가르키는 상징적인 이름
      • 변수명, 변수값
      • 할당: 변수에 값을 저장하는 것
      • 참조: 변수에 저장된 값을 읽는 것

식별자

변수 이름을 식별자(identifier) 라고도 한다.

  • 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 의미한다
  • 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

변수 선언

  • 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
  • 키워드: 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어이다.

자바스크립트 엔진의 변수 선언 과정

  • 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
  • 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

변수 이름이 등록되는 곳

  • 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역.
  • 이를 통해 식별자와 스코프를 관리
  • 변수 이름과 변수 값은 객체로 등록되어 관리

변수 선언의 실행 시점과 변수 호이스팅

  • 변수 선언의 실행 시점
    • 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
    • 따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있다.
    • 그렇기때문에 변수 선언 이전에 코드를 실행하면 참조 에러(ReferenceError)가 발생해야 하지만 undefined가 출력된다
  • 변수 호이스팅: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

값의 할당

var score; // 변수선언
score = 80; // 값의 할당
var score = 80; // 변수선언과 값의 할당
  • 런타임: 소스코드가 순차적으로 실행되는 시점
    • 변수 선언은 런타임 이전에 먼저 실행된다
    • 값의 할당은 런타임에 실행된다

값의 재할당

  • 변수는 값의 재할당이 가능하다.

  • 만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아닌 상수이다.

  • 상수는 단 한번만 할당할 수 있는 변수이다. Ex) const

5장. 표현식과 문

개념을 이해한다는 것은 바로 용어를 이해하고 설명할 수 있다는 것

  • 표현식(expression)이 평가(evaluate)되어 생성된 결과
  • 평가: 표현식을 해석(parsing)해서 값을 생성하거나 참조하는 것

리터럴

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

표현식

  • 값으로 평가될 수 있는 문(statement)

  • 표현식이 평가(evaluate)되면 새로운 값을 생성하거나 기존값을 참조한다

  • 표현식의 모양과 상관없이 값으로 평가될 수 있는 문은 표현식이다.

  • 문은 프로그램을 구성하는 기본단위이자 최소 실행 단위이다.
  • 문을 이루는 것은 여러 토큰이다.
  • 토큰: 문법적 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미
    • Ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등
  • 문을 명령문이라고도 부른다.
    • 선언문, 할당문, 조건문, 반복문 등으로 구분된다.

6장. 데이터 타입

​ 원시타입: 숫자, 문자열, 불리언, undefined, null, 심벌

​ 객체타입: 객체, 함수, 배열 등

숫자 타입

  • 자바스크립트는 "실수, Infinity, -infinity, NaN(not a number)"로 숫자 타입의 값을 처리한다.

문자열 타입

  • 작은따음표(''), 큰따음표(""), 백틱(``)으로 감싸서 표기.
  • 가장 대중적인 표기법은 작은따음표를 사용
  • 문자열이 생성되면 해당 문자열은 변경할 수 없는 "변경 불가능한 값(Immutable value)이다."

템플릿 리터럴

  • 멀티라인 문자열
    • 일반 문자열 내에서는 개행이 허용되지 않는다
    • 백슬래쉬( \ )로 시작하는 이스케이프 시퀸스를 사용한다
      • ex) \b: 백스페이스, \n 개행
  • 표현식 삽입
    • ${ }: 으로 감싸진 표현식은 문자열로 취급된다

불리언

  • true or false

undefined

  • 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈상태(garbage value가 들어있다)로 두지않고 undefined로 초기화한다.

null

  • 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다
  • 변수에 null을 할당하는 것은 변수가 이전에 참조한 값을 더이상 참조하지 않는다는 의미이다

심벌

  • 나중에 다룬다

객체

  • 11장에서 다룬다
profile
느려서 바쁘다

0개의 댓글