cpu 선 개수 = bit수

cpu와 ram을 연결하기 위해 선이 필요하다.

ram은 데이터, 명령을 보냄 cpu는 결과데이터를 보냄

cpu 제조사는 cpu 통해 명령 실행시키는 방법을 명세서로 제공한다? -> 명령어 셋 (instructions set=기계어) : 신호보내는 bit 규칙 연산자를 명령하는 코드가 다름 cpu제조사마다 명령어다름 (전기 신호를 보내는 규칙이 다름)

같은 제조사라도 cpu버전이 업그레이드되면 면 명령 규칙 추가됨, 또 cpu마다 명령어 다름 ex) i계열과 제온계열

  • 명령어 작성 : 기계어
  1. cpu 명령어 셋 명세서를 보고 직접 명령어 (기계어) 작성
  2. cpu를 통해 실행
  • 기계어 특징
  1. cpu bit가 적은 8bit시절에는 개발자가 직접 작성하기도 했다.
  2. 보통 2진수를 짧게 표현한 16진수를 사용해서 작성한다.
  3. 인간의 언어와 거리가 멀기 때문에 작성하기 매우 불편
  4. cpu bit가 32bit, 64bit로 늘어나면서 더 어렵게 되었다.
  5. cpu마다 명령어 (전기적 신호=bit규칙)가 다르기 때문에 다양한 cpu에서 실행할 수 있는 명령어를 작성하기 매우 힘들다. (중요!)
  • 명령어 작성 : assembly
  1. 직접 기계어로 작성하는 대신 간결한 영어 단어로 이루어진 명령어 사용 ex) add r1, r2;
  2. compiler가 어셈블리어를 기계어로 번역
  3. cpu를 통해 실행
  • 어셈블리어 특징
  1. 명령어가 영어단어와 비슷해서 작성하기 편하다.
  2. cpu마다 다르게 작성할 필요가 없다. (컴파일러가 cpu에 맞춰서 번역해줌) (cpu마다 전용 컴파일러가 따로 있음)
  • 명령어 작성 : C
  1. 더 인간 친화적인 프로그래밍 언어로 명령어 작성
  2. C 컴파일러가 번역
  • c언어 실습

hello.c파일 생성

커밋 후 리눅스 접속

gcc설치 (gcc컴파일러 : a.out(리눅스용 인텔 cpu 기계어 코드) 리턴. 윈도우에선 파일 실행 못 함) sudo yum install gcc

윈도우용 인텔 cpu c컴파일러 설치 (a.exe 파일 리턴.)

컴파일 방식 c파일을 읽으면 c컴파일러가 컴파일,

jit (just in time)

실행과 동시에 컴파일

사용자가 명령어셋(기계어) 입력하면 hdd/ssd/cd-rom/dvd/msb에 저장

저장된 명령문을 cpu에 바로 넣지 못 함

loading : 파일에 들어있는 일부 기계어를 실행하기 위해 ram에 복사

2코어 cpu의 경우 각각 코어마다 l1 cache, l2 cache를 가짐 두 코어가 공유하는 걸 l3 cache라 부름

cache는 임시 보관소 ram보다 휘발성 강함

l1 cache : 8kb~64kb 데이터 사용, 참조에 가장 먼저 사용 cpu가 가장 빠르게 접근하며 여기서 데이터 찾지 못하면 l2 메모리로 넘어감 명령셋 임시 보관

l2 cache : 64kb~4mb l1보다 속도느림

데이터 임시 보관

l3 cache : 8mb~64mb

멀티미디어 데이터 임시 보관 코어끼리 공유(메모리 부족할때 사용)

os : l1, l2, l3 포함한 ram, hdd 등 하드웨어들의 저장을 총괄(제어)

사용자가 인간친화적 언어로 명령문 작성하면 컴파일러가 기계어로 컴파일 후 저장

  • 웹브라우저와 자바스크립트

script태그 안에 js코드 작성

웹브라우저는 html 처리 시 렌더링엔진에 맡김 script 태그를 만나 js 처리 시 js엔진에 맡김 명령문 위에서 아래 순으로 실행

ram에 값을 저장할 메모리를 확보하는 명령문 = 변수(variables) 선언

var 변수명; or let 변수명; or const 변수명;

메모리에 값을 저장하는 명령문 = 할당, 대입 (assignment)

변수명 = 값; or 변수명 = 변수명; or 변수명 = 함수();

값 or 변수에 들어있는 값 or 함수 실행 결과값 할당

변수 = 값;

l-value에 r-value를 할당 l-value 는 반드시 메모리여야 한다.

함수 (function) : 특정 기능을 수행하도록 짜놓은 명령문을 묶어서 이름을 붙인 것 필요할 때 언제든 재실행 가능

  • 함수 정의

function 함수명(parameter값, parameter값) { return 결과값; }

  • 함수 호출

var sum=plus(argument값,argument값); 변수 선언 후 함수의 리턴값을 할당

  • 함수 레퍼런스(주소)

객체의 주소를 변수에 저장하는 것

객체의 주소를 가리키는 변수는 여러개일 수 있음

함수명은 함수의 주소를 보관하는 변수

주소는 데이터가 보관된 메모리의 위치

명령문 데이터는 ram에 저장됨

static type binding vs dynamic type binding

static type binding

java int a; (변수선언 시 메모리의 용도가 고정. 정수만 가능)

a=10; o a=0.1; x

language 류 프로그래밍언어

엄격하여 프로그래밍까다롭지만 유지보수쉽다.

긴 코드, 큰 프로젝트

dynamic type binding

javascript var a; (값을 넣을 때 변수의 유형이 바뀜. 그때 그때 변수를 바꿀 수 있음)

script류 프로그래밍언어

자유분방해 프로그래밍쉽지만 유지보수어렵다.

짧은 코드, 작은 프로젝트

객체 = 덩어리(변수+함수+객체)

var obj=new object(); obj.name=홍길동 key와 value를 묶어 저장

  • object literal(값을 코드로 표현한 것) : 객체를 js코드로 표현 var obj={ name:홍길동 }

문자열의 literal : “abc”, ‘abc’ 숫자의 literal : 10, 3.14 논리의 literal : true, false 변수값이 저장된 적없는 상태의 literal : undefined 객체 주소가 저장되지 않는 상태 : null

DOM API - getElementById()
Document(HTML) Object(객체) Model(구조로 만든 것) Application Programming Interface(도구) 태그를 다루는 app을 프로그래밍할 떄 사용하는 도구 tag를 tree구조로 객체화 tag를 찾고 변경하고 추가하고 삭제하기 쉬움
  • 객체와 메서트(함수)와 파라미터(변수)의 관계 document.getElementById() 객체.함수실제일하는놈 객체는 함수가 일할 때 참고할 데이터(기본데이터)

ex) 학생명단.find(“홍길동”) =>학생정보덩어리(객체)

class : 기본데이터를 만드는 설계도

함수=작업자(operator)=method

이것이 객체지향 프로그래밍의 기본 문법

  • javascript와 ECMAscript의 관계 ECMA (유럽컴퓨터제조업자모임)

자바스크립트가 표준안으로 채택되어 ECMA-262라는 표준화된 언어가 됨. 크롬과 크로미움의 관계

document는 DOM tree를 가리킨다

  • 웹페이지 조립 html 특정 영역에 html 삽입가능

서버에 자원을 요청

server-side rendering: 서버에서 html을 만들어 준다.
    1. html에서 서버에 요청
    2. 서버에서 html보냄
    3. html에서 그대로 삽입
    ex) JSP, Thymleaf등

client-side rendering: 클라이언트에서 html을 만든다.
    1. html에서 서버에 요청
    2. 서버에서 json or xml 데이터보냄
    3. html에서 데이터를 받아 html을 만들어 삽입
    ex) AJAX 기술 -> react, angular 등
  • json 포맷

var obj={ name: ‘홍길동’ hello: function() {} }; 이러한 js의 object literal 문법을 참고하여 만든 포맷

{ “name”: “홍길동” “age”: 20 } 객체(변수) property 이름을 반드시 문자열로 표현 반드시 쌍따옴표써야함. 함수 사용 불가

JavaScript Object Notation

  • json built-in 객체

  • 객체와 함수

  1. document.getElementById(“btn1”) 객체.함수(파라미터)

객체 : 함수가 작업 시 사용하는 기본 데이터 함수=오퍼레이터=메서드 : 작업을 수행 파라미터=매개변수=인자 : 작업을 제어하는 부가 데이터

여기서 객체는 함수가 실행하는데 사용할 데이터

자바에서 이 함수를 인스턴스메서드로 부름

  1. window.alert(“Hello,world!”) 객체.함수(파라미터) 도구함.도구(기능 수행에 필요한 부가 데이터)

여기서 객체는 함수를 보관하는 용도

자바에서 이 함수를 스태틱메서드로 부름

  • 인터프리트 방식과 자바스크립트

명령문 한줄씩 인터프리트해서 실행 => 명령문이 잘못 작성됐다 하더라도 실행 전까지 알 수 없다.

  • 컴파일 방식

명령문을 컴파일하여 기계어로 번역 => 명령문이 잘못됐으면 컴파일과정에서 모두 걸러진다. =>소스코드에서 오류 존재 => 기계어로 번역된 상태에선 문법오류는 없는 상태

노드 : V8엔진으로

노드모듈 폴더지우더라도 패키지.json, 패키지락.json이 있으면 npm install만 입력해도 그 속에 있는 라이브러리 설치됨

라이브러리는 공유하는게 아니라 라이브러리 정보만 공유

  • 서버 localhost:5500에선 html exam05_1.html

locahost:3000에선 url /exam05_1 /exam05_2

  • 클라이언트 exam05_1.html

클라이언트 html파일 script태그에서 서버에 요청하면 서버에서 응답하고 script삽입

async 작업을 순차적으로 실행하지 않고 병렬 실행하고 싶을 때 promise씀

배열의 항목 하나 당 1byte

메모리 시작 주소를 가지고 배열의 항목을 가리키기 때문에 인덱스는 0부터 시작한다.

변수사용 우선순위 const let var

  • 문법 literal : 값을 표현하는 문법 variables : 값을 저장하는 메모리를 준비하는 문법 operators : 연산자 제어문들 : 명령문의 실행흐름을 제어하는 문법 분기문 if~else 분기문 switch 반복문while 반복문for function : 명령을 재사용, 관리하기 쉽도록 기능 단위로 묶는 문법 object : 데이터를 다루기 쉽도록 그룹으로 묶는 문법 함수들을 관리하기 쉽도록 역할 단위로 그룹으로 묶는 문법 module : 객체와 함수들을 재사용하기 쉽도록 그룹으로 묶는 문법

  • 이미지와 바이트 수

  1. 흑백사진
  • 1픽셀 크기(1비트) 0bit: 검정 1bit: 흰색
  • 9픽셀 크기 1px _ 1bit = 1 9px _ 9bit = 9
  1. 칼라사진(천연색상)
  • 1픽셀 크기(3바이트) RGB
  • 9픽셀 크기 1px _ 3byte = 3byte 9px _ 3byte = 27byte
  1. HD급 크기 사진

1920*1080 = 2,073,600px(화소)

(1920*1080) * 3byte = 6,220,800byte = 6,075KB = 약 5,93MB

  1. 천만화소급 사진 10,000,000 * 3byte = 30,000,000byte =28MB

천만화소급 사진은 관리하기 쉽게 압축(encoding)

  • 손실압축 ex)jpeg
  • 비손실압축 ex) gif

압축해제(decoding)하여 비트맵이미지로 만들어야 출력 가능

프로그래밍 트렌드

  1. 절차적 프로그래밍 ex) basic, wbol

  2. function 명령어를 기능 단위로 묶음 코드가 길어져도 관리 용이하고 재사용, 가독성 좋아짐

ex) C, cobol, fortran

  1. class function끼리 다시 class로 묶음 컴퓨터빨라져 기능이 많아지고 함수가 많아져도 관리용이, 재사용, 가독성좋아짐

ex) C++, java

  1. package class끼리 package로묶음

  2. module package끼리 module로 묶음 (.jar확장자 사용)

그룹화하는건 속도와 상관없음

디자인 패턴 : 속도와 상관없이 어떤 구조로 설계해야 기존 코드 수정 시 최소한으로 손댈 수 있는가에 대한 이론

Date() 생성자

new Date()

객체 생성 순서

  1. new : 빈 객체 생성
  2. Object() : 초기화
  3. Date() : 날짜 관련 프로퍼티(변수, 함수) 추가

new 혼자만 쓰는건 문법적으로 허락 안 됨

const arr = [,,~]; 1, 2, 3번 순서가 한 번에 적용됨 아래 명령문의 단축 문법

const arr = new Array(); arr[0] = ~ arr[1] = ~

생성자(constructor) : 빈 객체에 용도에 따라서 필요한 변수나 함수들을 채워넣는 일을 하는 아주 특별한 함수 = 객체가 자신의 역할을 제대로 수행할 수 있도록 필요한 값과 함수를 준비하는 일을 한다.

  1. new
  2. Array() 호출 2-1. Object() 생성자 호출 2-2. Array() 실행
  3. 값 추가

for (변수선언 및 초기화; 조건; 변수값 증감) {

}

property : 객체에 저장되는 값

  • 배열과 destructuring

let a = [‘name’, ‘홍길동’];

let key = a[0]; let value = a[1];

destructuring 문법 let [key, value] = [‘name’, ‘홍길동’];

function

function 함수명 (파라미터, 파라미터,..) { 명령문; return 표현식; } = function prototype(C/C++)=method signature(java) {function body}

자바는 함수명 앞에 데이터 타입 써야 하지만 js는 유연함

문장 (statement)

  • 표현식 (expression) : 값을 리턴하는 문장 literal, 변수, 식으로 이루어짐

데이터 포맷

  • binary 파일크기 작음 텍스트 에디터로 읽기 어렵

  • text 파일 크기 커짐 텍스트 에디터로 읽고 편집 가능

.csv 특징 간결하다 한 줄에 한 데이터 각 항목의 정보가 없다 -> 직관적 이해 어렵 계층 구조로 데이터 다룰 수 없다.

.xml 특징 (extensible markup language) 계층 구조의 데이터 표현 가능 각 항목의 의미(meta data) 표현 가능 -> 특정 조건의 항목 찾기 쉽다 데이터보다 meta data (태그=마크업)가 더 클 수 있다. -> 파일 크기가 큼

.json 특징 xml보다 더 간결한 meta data js와 유사해서 작성하기 익숙 배열, 객체로 이루어진 계층 구조

.yaml (yet another markup language, yaml ain’t markup language) 그냥 대괄호, 중괄호없이 키: 밸류만 쓰면 됨 계층구조는 들여쓰고 - 쓰면 됨 json보다 더 간결

설계도 방식과 프로토타이핑 방식

  1. 설계도 방식으로 객체 생성 (써브웨이) ex) java, c++ 설계도 작성하고 설계도에 따라 준비한 객체의 주소만 저장가능 (static type binding)

  2. 프로토타이핑 방식으로 객체 생성 ex) javascript 프로토타이핑: 객체의 원형 틀을 기반으로 프로퍼티를 추가하는 방식 (마라탕) 설계도 없음 빈 객체 생성하고 기본 프로퍼티 (객체라면 반드시 있어야 할 변수나 함수) 추가

객체 생성

빈 객체 생성 Object.create(null) create=new null=생성자

  1. 빈 객체 생성 Object.create(Object.prototype) create=new Object()

생성자 (constructor)

자바 생성자와 자바스크립트 생성자는 다름

new Object(); new: 빈 객체 생성 Object()=생성자: 빈 객체에 프로퍼티를 준비(삽입)시키는 것