개발자입니다
[비트캠프] 20일차(4주차5일) - Javascript(개요) 본문
OS, CPU, RAM, HDD, 기계어, 명령문 관계도
명령어(instructions set)를 전기신호로 CPU에 전달한다.
개발자가 기계어 파일을 작성한다. 하지만 직접 작성은 힘드므로 인간 친화적인 언어(C, C++, java, python)로 작성하고 Compiler가 compile해서 기계어로 만든다. 이는 HDD에 저장된다.
HDD 파일에 들어있는 일부 기계어를 실행하기 위해 RAM으로 복사하는데 이걸 loading이라 한다.
RAM에서 CPU로 명령어 전달하고 CPU는 실행 결과를 RAM으로 보낸다.
CPU에 Core가 2개 있다고 해보자. 이때 각 Core마다 메모리가 2개씩 있는데 L1, L2라 한다. 이는 캐시(Cache, 임시보관소)라고 한다.
- L1 Cache (8kB ~ 64kB) : instructions set (명령) 임시 보관
- L2 Cache (64kB ~ 4MB) : Data
- L3 Cache (8MB ~ 64MB) : Data (멀티미디어), Core끼리 공유
OS가 H/W 제어를 총괄한다. CPU, RAM, HDD를 관리한다.
<script> 태그
Web Browser는 <html> 태그 내용은 Renderer에게 맡긴다.
<script> 태그 내용은 JavaScript Engine에게 맡긴다.
javascript 문법 요약
① console 출력
console.log(값, 값, 값, ...); → Web Browser의 개발자 모드 콘솔창에 값을 출력
console : 도구 = object(객체)
log : 기능 = function(함수)
값... : 기능을 수행하는데 필요한 값(argument(인자), parameter)을 전달
② 변수와 값 할당
CPU에 값을 직접 전달할 수는 없다. RAM에 보관한 다음 CPU에 전달한다.
값을 저장할 메모리를 확보하는 명령문 → 변수(variables) 선언
메모리에 값을 저장 → 할당(assignment), 대입
변수명 = 변수명; → 변수에 들어있는 값 저장
변수명 = 함수(); → 함수의 실행결과 저장
= : assignment operator(기능)
변수 = (변수, 값, 함수, ...);
l-value r-value
l-value : 반드시 메모리여야 한다.
for 반복문
function (함수)
특정 기능을 수행하도록 짜놓은 명령문을 묶어서 이름을 붙인것. 필요할 때 언제든 재실행 가능! 코드 재사용성을 높이는 문법
함수는 함수 이름과 parameter, 리턴 값으로 되어있다.
함수 사용법은 함수를 호출하며 argument를 넣고 이를 실행한 결과를 변수에 저장한다.
parameter 선언시 앞에 var 붙이지 않는다.
argument를 받는 변수를 parameter라 한다.
중첩 함수 호출
중첩 함수는 괄호 가장 안쪽부터 함수 실행해서 리턴값을 놓고 이를 다시 괄호 바깥 함수가 실행한다.
함수 레퍼런스
함수의 이름은 함수의 주소를 보관하고 있는 변수다.
주소란? 데이터가 보관된 메모리의 위치
static type binding vs dynamic type binding
static type binding : 변수 선언할 때 메모리의 용도가 고정
Language류의 프로그래밍 언어
엄격한 만큼 프로그래밍이 까다롭다. 그러나 유지보수가 쉽다.
→ 긴 코드, 큰 프로젝트
dynamic type binding : 값을 넣을 때 변수의 유형이 바뀐다
script 류의 프로그래밍 언어에서 주로 사용
자유분방하여 프로그래밍이 쉽다. 그러나 유지보수가 어렵다.
→ 짧은 코드, 작은 프로젝트
객체 : 덩어리 (변수 + 함수 + 객체)
DOM API - 태그를 다루는 프로그램을 짤 때 사용하는 도구
Document Object Model : HTML을 객체 구조로 만든 것
Application Programming Interface(도구) : App.을 프로그래밍 할 때 사용하는 도구
tag를 tree 구조로 객체화 시킨 것
tag를 찾고, 변경하고, 추가하고, 삭제하기 쉽도록
tag를 다루기 쉽도록
객체와 함수, 파라미터의 관계
함수 = 메서드 = operator
*JavaScript 와 ECMAScript 관계
JavaScript에서 1997.6에 표준으로 제출한것을 ECMA-262로 채택해서 이를 기준으로 표준으로 만들었다.
FireFox, Chrome, Safari에서 지원되는 정도만 되면 된다.
태그 찾기 - 이벤트 리스너 등록
함수를 정의하면 메모리에 보관된다.
'onclick'이름으로 함수(의 주소) 저장
사용자가 tag1을 마우스로 클릭하면 'onclick'이라는 이름으로 저장된 함수를 호출한다. 만약 이 이름으로 저장된 함수가 없다면 아무일도 하지 않는다.
특정 이벤트가 발생했을 때 호출되는 함수 : event handler, event listener
tag의 content 설정
서버에 자원을 요청 : server-side rendering vs client-side rendering
server-side rendering 방식 - 서버에서 HTML을 만들어 준다
예) JSP, Thymleaf 등
client-side rendering 방식 - 클라이언트에서 HTML을 만든다
예) AJAX, React, Angular 등
JSON 포맷
JavaScript의 object literal 문법을 참고해서 만든 포맷
객체(변수) property 이름은 반드시 문자열로 표현한다.
문자열은 " "으로 표현한다.
함수는 표현할 수 없다. 변수만 가능하다.
JSON Built-in 객체
JSON.parse( ) 에 JSON 포맷 문자열을 넣으면 자바스크립트 객체를 반환해준다.
JSON.stringify( )에 자바스크립트 객체를 넣으면 JSON 포맷 문자열을 반환해준다.
조언
*언어마다 작성 규칙이 있다. 개성 살리지 말라.
*개발자는 좋은 키보드, 높은 메모리 써야한다. 돈 버는 사람이 취미로 하는 사람보다 돈을 더 써야한다.
과제
tic tac toe 만들기
html, css, javascipt 이용해서 tic tac toe 만들기
'네이버클라우드 AIaaS 개발자 양성과정 1기 > Javascript' 카테고리의 다른 글
| [비트캠프] 24일차(5주차4일) - Javascript(함수: 정의, closure, arrow function) (0) | 2022.12.08 |
|---|---|
| [비트캠프] 23일차(5주차3일) - Javascript(배열, 반복문, destructuring) (0) | 2022.12.07 |
| [비트캠프] 22일차(5주차2일) - Javascript(연산자, 조건문) (0) | 2022.12.06 |
| [비트캠프] 21일차(5주차1일) - Javascript(변수, 배열) (0) | 2022.12.05 |
| [비트캠프] 19일차(4주차4일) - 프로그래밍 언어론 (0) | 2022.12.01 |
