Changseon Shin

Changseon Shin

WannaBe Web Front-end Developer

[Day 03] 프로그램 + 운영체제 + Javascript Tutorial

프로그램과 프로그래밍

프로그램?

  • 0과 1로 구성된 기계어로 쓰여져 있다.

기계어

  • CPU에 의해 직접 실행될 수 있는 언어
  • CPU와 메모리를 어떻게 조작할 것인가를 표현
  • CPU의 종류에 따라 사용할 수 있는 기계어가 정해져 있고, 이를 명령어 세트(instruction set)라고 한다.
    • CPU에 따라 명령어가 다르기 때문에 각각 돌아가는 프로그램이 다르다.

프로그래밍 언어

  • 기계에 명령을 내릴 목적으로 만들어진 언어
  • 기계에게 친절한 언어인지, 사람에게 친절한 언어인지에 따라 저급 언어와 고급 언어로 분류
    • 기계어는 저급 언어
    • Javascript, Python은 고급 언어
    • C, C++은 중간쯤 언어

프로그램의 실행

  • 기계어로 작성된 프로그램은 바로 실행될 수 있음
    • 보조 기억장치(HDD, SSD)에 설치된 프로그램은 주 기억장치(RAM)로 옮겨진 후 실행된다. (속도때문)
  • 기계어로 작성되지 않은 프로그램은 적절한 변환 과정을 거친 후 실행될 수 있음
    • 컴파일러(Compiler) - 언어를 (기계어로) 변환해주는 프로그램
      • ex) C Compiler
    • 인터프리터(Interpreter) - 언어를 해석한 뒤 간접적으로 실행시켜주는 프로그램
      • ex) Web Browser 내부의 Javascript Interpreter
      • 주 기억장치의 자바스크립트 해석기가 CPU 에서 연산된다.
      • 요즘에는 자바스크립트도 컴파일러를 통해 변환된 뒤 실행되는 경우가 있다.
      • Google Chrome 같은 요즘 Browser - 자바스크립트를 인터프리터를 거치지 않고 컴파일러를 통해 동작시키기 때문에 속도가 더 빠르다.

프로그램의 제작 - 언어

  • 프로그래밍 언어 선택의 기준
    • Javascript, 혹은 웹을 선택한 이유는 무엇인가요?
    • ‘최고의 프로그래밍 언어’ 란 것이 존재할까?
      • 자신이 만들고자 하는 프로그램(목적)이 무엇이냐에 따라 적합한 언어를 선택한다.

프로그램의 제작 - API

  • API = Application Programming Interface
    • Application을 프로그래밍 하는 데 있어서 기반이 되는 기반(기준)
    • 특정한 기능을 프로그래밍 하는 데 기준이 된다.
    • 프로그램을 사용하는 데 있어서 API가 동작의 근거가 된다. (API가 다르면 동작 X)
  • 프로그래머는 다른 사람들이 많들어놓은 수많은 프로그램을 API를 통해 활용하여 프로그래밍을 하게 된다.
    • Windows, macOS, Linux, …
    • 웹 브라우저, 포토샵, 엑셀, …
    • DirectX, 하드웨어 드라이버, …
    • React, Angular, Vue, …

프로그래밍이란

  • 사전적 의미
    • 프로그램을 짜는 행위
  • 실질적 의미
    • 목적에 맞는 프로그래밍 언어와 필요한 API를 활용해서 쓸모 있는 프로그램을 만드는 행위

‘좋은’ 프로그래머가 되려면 어디까지 알아야 하나요?

  • 자동차 운전을 잘 하기 위해 엔진 설계법까지 알아야 할 필요는 없습니다.
  • 자동차 운전을 잘 하려면 핸들과 기어 조작, 엑셀, 브레이크, …
  • 무엇을 만드는 프로그래머가 되고 싶나요? 그 일을 잘하기 위해서는 어떤 선택을 해야 할까요?

운영체제

운영체제

  • 하드웨어를 관리하는 프로그램
  • 여러 프로그램이 한정된 자원(CPU, 메모리, 입출력 장치)을 공유하는 데 문제가 없도록 중재한다. -> 자원 관리
  • 다른 프로그램이 컴퓨터 자원을 사용할 수 있도록 API를 제공

윈도우용 프로그램은 왜 맥에서 실행할 수 없는 걸까요?

  • 서로 다른 운영체제 API

  • 서로 다른 실행파일 형식

    • PE 포맷 (윈도우)
    • Mach-O
    • ELF (리눅스)

Javascript Tutorial

  1. 대소문자의 구분

    • Javascript는 대소문자를 구분합니다.

      ex) function !== Function

  2. 세미콜론(;)

    • Javascript는 세미콜론(;)을 이용해서 각 구문을 구분합니다.

      const a = 1;
const b = 2;

  3. 공백(space)

    • Javascript는 공백에 민감하지 않기 때문에 문법 요소만 잘 지키면 공백의 수가 코드의 실행에 영향을 미치지 않습니다.

      const x = 1;
const     x     =    1;
// 위의 두 구문은 완벽히 똑같은 동작을 합니다.

  4. 주석(comment)

    // 한 줄 주석
/* 여러 줄 주석 */

  5. 값(value)과 리터럴(literal)

    • 값(value)을 프로그래밍 언어에서 표현하기 위한 표기법을 리터럴(literal)이라고 합니다.

      1 // 정수
2.5 // 부동소수점 실수
'hello world' // 작은 따옴표 문자열
"Javascript" // 큰 따옴표 문자열
true // 참임을 나타내는 진리값
false // 거짓임을 나타내는 진리값
null // '존재하지 않음'을 나타내는 값
undefined // '정의된 적 없음'을 나타내는 값

  6. 값의 타입(type)

    • typeof 연산자는 피연산자의 타입을 가리키는 문자열을 반환합니다.

      typeof 1 // 'number'
typeof 2.5 // 'number'
typeof 'hello world' // 'string'
typeof true // 'boolean'
typeof null // 'object'
typeof undefined // 'undefined'
// ...

  7. 표현식(expression)과 연산자(operator)

    • 표현식 : Javascript 문장의 구성요소를 구분하는 하나의 단위, 값으로 변환될 수 있는 부분

      // 사칙 연산
1 + 3;
2 - 4;
3 * 5;
4 / 6;
     
// 연산자 우선순위(operator precedence)
1 + 2 * 3;		// * 먼제
(1 + 2) * 3;	// ()먼저
     
// 논리 연산
true || false;	// true
true && false;	// false
     
// 진리값으로 취급하기
1 || 0;	// true
1 && 0;	// false

  8. 변수(variable)

    • 값을 재사용하기 위해 이름을 붙일 수 있고, 이름을 변수라고 합니다.

    • let변수에는 값을 여러번 다시 대입할 수 있지만, const변수에서는 값을 한번만 대입할 수 있습니다.

      // 한 변수의 선언
let v;
     
// 값의 대입
v = 1;
     
// 변수의 선언과 값의 대입을 동시에 할 수 있습니다.
let x = 1;
     
// 여러 변수를 한 번에 선언하고 대입할 수 있습니다.
let y = 2, z = x + y;
     
// const 변수(=== 상수)
const c = 1;
c = 2;	// 에러!! 상수는 한 번 대입된 값을 바꿀 수 없습니다.
     
// 선언한 변수를 사용하기
x;			// 1
typeof x;	// number
x * z		// 3

  9. 제어 흐름

    • 특정 조건 만족할 때만 코드를 실행시키거나, 코드를 여러 번 실행시킬 수 있습니다.

      // if 구문
if(2 > 1) {
    console.log('괄호 안의 값이 true 이면 이 코드 실행');
} else {
    console.log('괄호 안의 값이 false 이면 이 코드 실행');
}
     
// while 구문
let i = 0;
while(i < 5) {
    console.log('이 코드는 ${i+1}번 째 실행되고 있습니다.');
    i++;
}
     
// for 구문
for(let i=0; i < 5; i++) { //for(초기값; 조건문; 갱신)   
    console.log('이 코드는 ${i+1}번 째 실행되고 있습니다.');
}

  10. 함수(function)

    • 코드 덩어리에 이름을 붙여서 재사용할 수 있는데, 이를 함수라 부릅니다.

      // `function` 키워드를 이용한 함수 선언
function add(X, y) {
    return x + y;
}
      
// arrow function (new feature on ES2015)
// 변수 식별자 = (인자) => 표현식;
const multiply = (x, y) => x * y;
      
// 함수 호출하기
add(1, 2);	// 3
multiply(3, 4);	// 12

    • 브라우저 내장 함수

      // prompt, console.log, alert
const answer = prompt('이름이 무엇인가요?');
console.log(answer);
alert(answer);

  11. 객체(Object)

    • 여러 개의 값을 한꺼번에 담아 통(containter)처럼 사용할 수 있는 자료구조

    • 객체에는 이름(name)에 값(value)이 연결되어 저장됩니다.

    • 이름-값 쌍을 객체의 속성(property)라고 합니다.

      // 객체의 생성
const obj = {
    x: 0,	// 객체의 속성. 속성 이름: x, 속성 값: 0
    y: 1
}
      
// 객체의 속성에 접근하기
obj.x;
obj['y'];
      
// 객체의 속성 변경하기
obj.x += 1;
obj['y'] -= 1;
      
// 객체의 속성 삭제하기
delete obj.x;

    • 객체의 속성을 통해 사용하는 함수를 메소드(method)라고 부릅니다.

      const obj = {
    x: 0,
    increaseX: function() {
        this.x = this.x + 1;
    }
};
      
obj.increaseX();
console.log(obj.jx);	// 1

  12. 배열(array)

    • 배열은 특수한 형태의 객체(object)입니다.

    • 배열에 담은 데이터는 요소(element) 혹은 항목(item)이라고 부릅니다.

    • 배열 요소 간에는 순서가 존재하며, 이름 대신에 인덱스(index)를 이용해 값(value)에 접근합니다.

      // 배열의 생성
const arr = ['one', 'two', 'three'];
      
// 인덱스를 사용해 배열의 요소(element)에 접근할 수 있습니다.
// 인덱스는 0부터 시작합니다.
arr[0];	// 'one'
arr[1]; // 'two'
      
// 여러 타입의 값이 들어있는 배열
[1, 2, 3, 'a', 'b', {x: 0, y: 0, name: '원점'}];
      
// 배열에 요소 추가하기
arr.push('four');
      
// 배열의 요소 삭제하기
arr.splice(3, 1); // 인덱스가 3인 요소부터 시작해서 1개를 삭제

댓글남기기

참고