Skip to content

Latest commit

 

History

History
242 lines (205 loc) · 12.7 KB

1-4강.md

File metadata and controls

242 lines (205 loc) · 12.7 KB

1장. 프로그래밍

1-1. 프로그래밍이란?

  • 프로그래밍

    • 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션
    • 기계가 실행할 수 있게 정확하고 상세하게 요구사항을 설명하는 작업

  • 프로그래밍 이전에 할 일

    • 요구사항을 명확히 이해한 후, 적절한 문제 해결 방안을 정의
      • 요구사항을 명확히 이해 = 복잡함을 단순하게 분해하고 자료를 정리/구분하고, 순서에 맞게 행위를 배열하는 것
      • 문제 해결 방안을 위해서는 컴퓨팅 사고가 필요함.

  • 문제해결능력 > 알고리즘

1-2. 프로그래밍 언어

  • 문제해결방안 => 기계어로 번역 => 컴퓨터
  • 사람이 기계어로 직접 명령을 전달하긴 힘듬
  • 사람 => 프로그래밍 언어 => 컴파일러/인터프리터 => 컴퓨터
  • 프로그래밍 언어 = 구문 + 의미

1-3. 구문과 의미

  • 언어의 문법적/의미적 적합성을 확인
  • 문제 => 문제해결능력 => 해결방안 => 문법/의미(요구사항이 실현) => 코드
  • 프로그래밍
    • 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것

2장. 자바스크립트란?

2-1. 자바스크립트의 탄생

2-2. 자바스크립트의 표준화

  1. 컴퓨터 회사에서 자사브라우저에서만 동작하는 기능 추가 =>
  2. 브라우저에 따라 웹페이지가 정상적으로 동작 안함(크로스 브라우징 이슈) =>
  3. 모든 브라우저에서 정상적으로 동작하는 자바스크립트의 필요성 대두 =>
  4. ECMA 인터네셔널에 자바스크립트의 표준화 요청 =>
  5. 표준화된 자바스크립트 초안은 상표권 문제로 ECMAScript1(ES1)으로 명명

2-3. 자바스크립트 성장의 역사

  • 자바스크립트 초창기
    • HTML/CSS의 렌더링(HTML, CSS, JS를 브라우저에 시각적으로 출력)

2-3-1. Ajax

  • 자바스크립트를 이용해 서버와 브라우저가 비동기방식으로 데이터를 교환할 수 있는 통신기능
  • 서버로부터 필요한 데이터만 전송받아 변경해야하는 부분만 한정적으로 렌더링하는 방식

2-3-2. jQuery

  • DOM(Document Object Model)을 더욱 쉽게 제어
  • 크로스 브라우징 이슈 해결
  • 자바스크립트보다 배우기 쉽고 직관적

2-3-3. V8 자바스크립트 엔진

  • JS로 웹 애플리케이션 구축 시도 많아짐
  • 더욱 빠르게 동작하는 JS엔진의 필요성 대두
  • JS언어는 UX(User eXperience)을 제공

2-3-4. Node.js

  • V8 기반의 JS 런타임 환경
  • JS를 브라우저 이외의 환경에서도 동작할 수 있도록 JS엔진을 브라우저에서 독립시킨 JS실행환경
  • 서버 사이드 애플리케이션에 주로 사용
  • 빌트인(내장)API 제공
  • FE와 BE에서 JS를 사용할 수 있다는 동형성
  • 비동기 I/O 지원
  • 단일 스레드 이벤트 루프 기반으로 동작 => 요청처리성능 GOOD
    • SPA에 적합
      • SPA : 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생
    • CPU사용룰이 높은 APP에서는 비권장
  • 범용프로그래밍 언어화
  • 크로스 플랫폼을 위한 가장 중요한 언어

2-3-5. SPA 프레임워크

  • CBD(Component Based Development) 방법론 기반
  • Angular. React, Vue.js, Svelte 등

2-4. 자바스크립트와 ECMAScript

  • Javascript(클라이언트 사이드 Web API) > ECMAScript(핵심 문법 규정)

2-5. 자바스크립트의 특징

  • 자바스크립트
    • 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
    • 인터프리터 언어
    • 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

2-6. ES6 브라우저 지원 현황

  • EX를 제외한 모던 브라우저의 ES6 지원비율은 100%에 육박하지만 EX와 구형 브라우저는 대부분 ES6를 지원하지 않음.
  • 브라우저에서 지원하지 않는 최신기능 사용 시 트랜스파일러(ex.바벨)을 이용해 소스코드를 다운그레이드 한다.

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

3-1. 자바스크립트 실행 환경

  • JS는 브라우저 환경/Node.js환경에서 실행 가능
  • 브라우저 JS
    • 웹페이지를 브라우저에 렌더링하는 목적
  • Node.js JS
    • 브라우저 외부에서 JS실행환경을 제공하는 것이 주된 목적
  • 브라우저/Node.js JS는 ECMAScript실행/ECMAScript 이외의 추가기능은 확인되지 않음
  • 브라우저
    • client
      • side
      • APIs
    • ECMAScript
  • Node.js
    • Node.js Host APIs

3-2. 웹 브라우저

3-2-1. 개발자 도구

  • 단축키
    • windows : F12/ctrl+shift+I
    • Mac : command+option+I
  • 기능
    • Element
      • 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인
      • 단, 편집한 내용이 저장되진 않음
    • Console
      • 로딩된 웹페이지의 에러를 확인하거나 JS소스코드에 작성한 console.log메서드의 실행 결과를 확인
    • Source
      • 로딩된 웹페이지의 자바스크립트 코드를 디버깅
    • Network
      • 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인
    • Application
      • 웹 스토리지, 세션, 쿠키를 확인/관리

3-2-2. 콘솔

  • console은 JS코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳
  • 구현단계에서 코드의 실행결과를 확인하면서 개발을 진행하기 위해 console.log메서드를 사용
  • 콘솔은 JS코드를 직접 입력해 그 결과를 확인할 수 있는 REPL(READ EVAL PRINT LOOP :입력, 수행, 출력, 반복)환경으로 사용
  • 여러 줄로 이뤄진 JS코드를 실행할 때 줄바꿈이 필요한 경우, shift+enter

3-2-3. 브라우저에서 자바스크립트 실행

3-2-4. 디버깅

3-3. Node.js

3-3-1. Node.js와 npm소개

  • 프로젝트의 규모가 커짐에 따라 프레임워크/라이브러리를 도입하거나 여러가지 도구를 사용할 때 Node.js와 npm이 필요하다.
  • npm
    • 자바스크립트 패키지 매니저
    • Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공
    • 자신이 작성한 패키지 공개/ 필요한 패키지 검색해 재사용
  • Node.js 설치 후, 터미널에 node -v 또는 npm -v를 입력해 Node.js버전 출력 확인
  • Node.js에서 자바스크립트를 입력하기 위한 명령어 node
  • Node.js에서 JS실행 시 node 파일명.js명령어 입력
  • Node.js에서 JS종료 시 명령어 ctrl+c를 두 번 입력

3-3-2. Node.js 설치

3-3-3. Node.js REPL

3-4. 비주얼 스튜디오 코드

3-4-1. 비주얼 스튜디오 코드 설치

  • 코드 에디터를 사용하면 코드자동완성, 문법오류감지, 디버깅, Git연동 등 편리한 기능을 활용 가능

3-4-2. 내장 터미널

  • VS코드 내장터미널 단축키
    • ctrl+```

3-4-3. Code Runner 확장 플러그인

  • VS확장 프로그램 "Code Runner"
    • VS 내장 터미널에서 단축키를 사용해 JS를 비롯한 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행
    • ctrl+alt+N(ctrl+option+N)을 사용해 현재 표시 중인 자바스크립트 파일 실행
    • 클라이언트 사이드 WEB API가 포함된 소스코드는 Code Runner을 통해 실행하지 말고 브라우저 환경에서 실행해야 한다.

3-4-4. Live Server 확장 플러그인

  • VS확장 프로그램 "Live Server"
    • 소스코드를 수정할 때마다 수정사항을 브라우저에 자동으로 변경

4장. 변수

4-1. 변수란 무엇인가? 왜 필요한가?

  • 변수

    • 프로그래밍 언어에서 데이터를 관리하기 위한 핵심개념

  • 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공

  • 컴퓨터

    • CPU를 사용해 연산
    • Memory를 사용해 데이터를 기억
    • 변수 X
      • 결과값이 Memory상 임의의 위치에 저장
        • 재사용 시, 메모리 주소를 통해 메모리 공간에 직접 접근
          • 메모리에 직접 접근 시, 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템이 멈추는 치명적 오류발생
          • 동일한 컴퓨터에서 동일한 코드를 실행해도 코드가 실행될 때마다 값이 저장될 메모리 주소는 변경됨.

  • 변수

    • 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
    • 값의 위치를 가리키는 상징적인 이름

  • 변수의 속성

    • 변수 이름(변수명)
      • 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
    • 변수 값
      • 변수에 저장된 값
    • 할당(대입/저장)
      • 변수에 값을 저장하는 행위
    • 참조
      • 변수에 저장된 값을 읽어들이는 행위

4-2. 식별자

  • 식별자
    • 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
    • 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
    • 식별자는 메모리 주소에 붙인 이름이다.
    • 단, 식별자라는 용어는 변수이름에만 국한해서 사용하지 않는다.
    • 식별자는 네이밍규칙을 준수해야하며, 선언에 의해 JS엔진에 식별자의 존재를 알린다.

4-3. 변수 선언

  • 변수선언
    • 값을 저장하기 위한 메모리 공간을 확보하고, 변수이름과 확보된 메모리공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
  • 변수선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다.
  • 변수를 사용하려면 반드시 선언이 필요하다.
  • 변수를 선언할 때는 var, let, const 키워드를 사용한다.
  • 변수선언에 의해 확보된 메모리 공간에는 JS엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.
    • 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값(garbage value)이 남아있을 수 있다.

참조에러(Reference Error)

식별자를 통해 값을 참조하려 했지만, JS엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러

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

  • 소스코드의 평가과정(소스코드를 실행하기 위한 준비)
    • 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행
  • 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행(런타임,Runtime)

변수 호이스팅

변수 선언문이 코드의 선두에 끌어올려진 것처럼 동작하는 JS고유의 특징

JS에서는 모든 선언문이 호이스팅 됨

4-5. 값의 할당

  • 변수에 값을 할당(대입/저장)할 때는 할당연산자(=)를 사용한다.
  • 할당연산자(=)는 우변의 값을 좌변의 변수에 할당한다.

값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

4-6. 값의 재할당

  • 재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.
  • 상수(Constant)는 값을 재할당할 수 없고, 변수에 저장된 값을 변경할 수 없다.

4-7. 식별자 네이밍 규칙

  • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코더(_), 달러 기호($)를 포함할 수 있다.
  • 단, 식별자는 숫자로 시작하는 것은 허용하지 않는다.
  • 예약어는 식별자로 사용할 수 없다.
  • 변수는 쉼표(,)로 구분해 하나의 문에서 여러 개를 한번에 선언할 수 있다.

단, 가독성이 나빠지므로 권장하지 않는다.

  • 알파벳 이외의 문자로 식별자를 명명하는 것은 권장되지 않는다.
  • JS는 대소문자를 구별한다.
  • 변수 이름은 변수의 존재목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야한다.
  • 네이밍 컨벤션(naming convention)
    • 하나 이상의 영어단어로 구성된 식별자를 만들 때, 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명규칙
      • 카멜 케이스(변수, 함수)
      • 파스칼 케이스(생성자 함수, 클래스 이름)
      • 스네이크 케이스
      • 헝가리 케이스