자바스크립트란?

[자바스크립트 수업 들어가기전...]

• 자바스크립트 강사님 : 조영광 (cho@uvc.co.kr)

-과제
공통 : 예습
1차 : 오늘 배운 내용 중 이해하기 힘든 부분이 있었다면 교재에 실린 문제를 직접 타이핑
2차, 3차 : 수준에 맞는 과제 전달
질문 : 1. 구글링 , 2. 동기, 3. 이메일
제출 : 희망자에 한해 제출
제목 : [홍길동]-22/07/19 과제 제출
내용 : 메모장 파일에 작성해 첨부
질문 or 에러 발생시 상황에 대한 내용 첨부

강의 내용

1. 자바스크립트란? - 자바스크립트가 뭔지? 탄생은? 역사나 특징, 단어와 개념

2. 개발환경 - 컴퓨터가 알아듣기 쉽게 코드를 작성하는 "에디터"에 관한 내용들

3. 기본문법

4. 데이터 타입 & 변수

5. 연산자 - 덧셈 뺄셈 곱셈 나눗셈 etc...

6. 제어문 - for while etc... 함수를 제어할 수 있는

7. 객체 - property + method

8. 함수

9. 스코프 - 중첩되는 함수중에 유효한 범위가 어디인지 (교집합)

10. 실행 컨텍스트

11. 클로저

12. ES6 추가 기능 - 자바 version6에서 추가된 기능들

13. number, Math, Date, String - 내장함수, 이미 들어있어 그걸 활용하는 방법

14. 배열 - 공간, 공간마다 숫자가 있고 문자가 있는데 이걸 어떻게 가공하는지

15 이터러블 - 배열에 있는 넘들을 화살로 찍어가며 쭉 넘어가

16 스프레드 문법

17. 비동기 프로그래밍 - 들어와서 순번을 기다려 = 동기, 안기다려 = 비동기

18. 프로미스 - 콜백함수의 개선버전?

19. async / await - 프로미스를 좀 더 간편하게 나온거

20. 프로젝트 - 개인 프로젝트

[1장 자바스크립트란?]
자바와 자바스크립트는 다른언어이다.
개발당시에 알려진 컴퓨터언어들의 장점들을 짜집기 해서 10일만에 만들어버린 언어
굉장히 자유롭게 여기저기서 쓸 수 있는 언어

자바나 파이썬같은 언어는 환경을 다운로드해야지만 사용이 가능하지만 자바스크립트는 웹브라우저에서 바로 사용할 수 있다. feat.f12
실제로 웹 브라우저에서 많이 쓰이는 것을 확인 할 수 있는데, 네이버홈페이지에서 움직이거나 페이지가 부분변경되는 점들은 전부 자바스크립트로 작동하기 때문에 옵션에서 자바스크립트 사용을 중지하면 페이지이동은 가능하지만 부분기능은 사용할 수 없다.

와우.. 처음 알았음 ㅋㅋ 네이버에서 웹툰미리보기가 안눌러지니 얼마나 당황스러운가ㅋㅋㅋ

초창기에는 웹페이지의 보조적인 기능만 담당했지만,
1999년 Ajax가 등장하여 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있게 됨(성능향상)

동기란, 첫번째 task가 끝날때 까지 다음 Task가 기다리는것, 비동기는 안기다려 개인주의야 따로놀아

2008년 구글의 V8자바스크립트 엔진등장 (빠른 성능향상)
2009년 Node.js의 등장으로 브라우저에서만 동작하는 자바스크립트를 서버용으로 개발하기 위한 환경을 만들어주는데, 이로 인해 프론트엔드 + 백엔드영역을 아우르는 웹프로그래밍 언어가 됨

인터프리터 언어 vs 컴파일러 언어
인터프리터 : 컴파일없이 즉시 실행가능 but 처리속도가 느려
컴파일러 : 컴파일을 통해 실행가능한 파일로 변경해야하며, 처리속도가 빨라

여기서 실행속도는 말 그대로 "실행"속도 인듯

ES6? (ECMA script6)
Netscape는 Javascript, MS는 Jscript 각자 갈길을 가다가 ECMA(이크마)로 통일
현재는 ver.6까지 나옴

자바는 크로스 플랫폼이다.
웹/모바일 하이브리드(Ionic)/서버(Node.js)/데스크톱(Electron)/머신러닝(Tensorflow.js)/로보틱스(johnny-Five) 지원
웹 어플리케이션에서 할 수 있는 기능이 많아 짐에 따라, 개발 복잡도가 증가하였고, 이를 해소하기위해 라이브러리가 출현함 -> 유연한 확장이 쉬운 프레임워크 출현 (Vue.js, Reack, Angular, etc...)

역시 공대는 효율이지

[2장 개발환경]
Node.js 설치, Visual studio code 설치
cmd 에서,
node -v 로 버전확인
npm -v 로 버전확인

npm에서 warning 은 왜 뜨는거??

vs code에서 프로젝트를 진행할 때 파일단위가 아닌 폴더단위로 생각하고 가져와
vs code 맨아래 보라색 라인은 status!
폴더가 선택이되면 파란색으로 변경돼 이렇게 되면 컴퓨터에서 만든 폴더와 동기화되어 있는 상태인 것

Tip, 확장에서 Korea 라고 쳐서 한국어서포트를 다운받아 ㅋㅋ 영어 어렵지
태그를 한번에 수정할 수 있는 auto rename tag !!
Live server, 서버를 띄워서 ~ 뭐라하셨지 ...
Prettier, 포맷을 바꾸는 것 컨트롤 +, 로 셋팅에 들어가서 default formatter 를 해당 확장파일로 저장

html 개발환경 체험해보기
왼쪽 test 항목에서, file 새로만들기, ~~.html, 개발환경으로 넘어가서 doc + tap or html을 타입한 후 html5를 선택하면 기본환경이 깔리게 돼

아까 설치한 rename.tag를 확인하려면 div + tap 으로 division (전체적인 레이아웃)을 열어주고, div 뒤에 글을 쓰면 뒤에 있는 태그에도 똑같이 변경되는게 확인돼
prettier를 확인하려면 div 뒤에 hello를 여러개 복잡하게 쓰고 저장을 눌러보면, 저장될 때 정렬이 되는게 보여

js 환경체험하기
보통 콘솔띄워바 라고들 부르는데 브라우저에 로그를 남기는 작업(개발자환경)
서버가 배정이되고 서버에 접속하면 서버에서는 html에서 작성한 내용이보이고 js에서 작성한 내용은 개발자페이지에 들어가면 보임f12
html 환경 script scr 에서 js파일의 이름을 바꾸니 html환경내용은 그대로인데 개발자환경내용이 변경되니 조심해서 변경할 수 있도록

[3장 기본문법]

변수
값을 할당하고 그 저장된 값을 참조하기 위해 사용한다.
의미를 알 수 있게 이름을 지어주어야 가독성이 좋아진다.

선언방법
var 를 사용하여 변수 선언

(ES6에서는 let? const? => 기존에 있던 문법에서 문제가 발생해서 해결하기 위해 탄생)

할당방법
선언된 변수에 =을 사용하여 값을 할당

선언과 할당은 분리해서 사용해도 되고 한번에 사용해도 됩니다

값
str이라는 이름의 변수를 선언하고, 선언한 변수에다가 '이름'를 값으로 할당
var str = 'hello meta';

필수 용어
데이터 타입 (Data Type) : 프로그래밍 언어에서 사용할 수 있는 값의 종류
변수 (Variable) : 값이 저장된 메모리 공간의 주소를 가리키는 식별자
리터럴 (literal) : 소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위

연산자
뎃셈 뺄셈 곱셈 나눗셈
산술 할당 비교 논리 타입 연산등을 수행해 하나의 값을 만든다

주석
코드의 의미를 설명하기 위해 꼭 필요한 기능
한줄은 //
여러줄은 / ~ /

표현식
하나의 값으로 평가된다? => 하나의 값으로 나오는 식

문(statement)
단계별로 수행 될 명령들의 집합
조건문~, 반복문~

함수(function)
어떤 작업을 수행하기 위해 필요한 "문"들을 모아서 정의한 "코드블록"

객체(Object)
자바스크립트는 객체기반의 언어, 모든 것이 객체

배열
1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용

시작은 항상 0 부터 ㅋㅋㅋ Like, Ground floor in the UK

[4장 데이터 타입&변수]

데이터 타입
메모리 저장공간을 알맞게 확보하기 위해 메모리크기를 결정짓는 데이터 타입을 고려

슛자는 뭐시기 글자는 저시기 등등 이렇게 미리 결정을 해버리면 사용될 메모리 크기가 줄어들지

원시 타입(Pass-by-value) vs 객체 타입
원시 타입은 변경 불가능
한번 선언/할당된 변수는 계속 메모리에 남아있기때문에 나중에 사용하지 않게 되면 Garbage라고 쓰지 않는 데이터들을 지워주는 작업이 필요하다

숫자
하나의 숫자 타입만 존재

var interger = 10; // 정수
var double = 10.12; // 실수
var negative = -20; // 음의 정수
var binary = 0b01000001; // 2진수
var octal = 0o101; // 8진수
var hex = 0x41; // 16진수

console.log(binary); // 65
console.log(octal); // 65
console.log(hex); // 65

// 표기법만 다를 뿐 같은 값이다.
console.log(binary === octal); // true (등호가 3개인 경우 타입과 값 모두 같은지 비교)
console.log(hex === octal); // true (등호가 2개일 경우 타입을 무시하고 값만 비교)

문자열(string)
var str = "string"; // 큰 따옴표
str = "string"; // 작은 따옴표
str = string; //백틱 (ES6 템플릿 리터럴)

str += " practice";
console.log(str);
// str 이라는 글자 뒤에 " practice"라는 글자를 더하고 할당한다
str = str.substring(0, 3);
console.log(str);
// substring 이라는 내부함수를 이용해서 (시작위치, 개수) 0부터 3까지의 문자를 잘라서 할당한다.
str = str.toUpperCase();
console.log(str);
// toUpperCase 라는 내부함수를 이용해서 선언된 str의 문자를 대문자로 할당한다.

결과값,
string practice
str
STR

불리언(boolean)
논리적 참과 거짓을 나타내는 true와 false로만 나타남
var x = "true";
var y = false;

console.log(typeof x);
console.log(typeof y);

결과값,
string
boolean

Undefined
선언 이후 값이 할당되지 않았을때 자바스크립트엔진에서 자동으로 할당해주는 값
var x = "true";
var y = false;

console.log(typeof x);
console.log(typeof y);

var test;
console.log(test);

null
null, Null, NULL 은 전부다 다르다!!
undefined와는 다르게 일부러 값이 없게 한것
var adress = "seoul";
adress = null;
console.log(adress);

Symbol type
ES6에서 추가된 내용

대문자 S에 유의할 것

객체타입
참조에 의한 전달(pass-by-reference)
이름과 값을 의미하는 프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적 주체
결국 하나의 주소를 두개의 객체에서 바라보고 있다.
값은 하나가 더 생기는 반면 객체는 주소를 공유하고 있기 때문에 하나만 바뀌면 같은 주소를 바라보고 있는 이름들의 값이 같이 바뀐다.

변수
고유 이름인 식별자를 명시한 것이다.
변수는 var, let, const 키워드를 사용하여 선언하고 할당 연산자를 이용해 값을 할당한다.
(추후에는 var는 사용하지않는다)

동적 타이핑
값이 할당되는 과정에서 값의 타입이 자동으로 입려되는 것(자바스크립트는 동적타입 언어)

총 연습,
var foo;
console.log(typeof foo);

var foo = 3; // number
console.log(typeof foo);

var foo = "22"; // string
console.log(typeof foo);

var foo = true; // boolean
console.log(typeof foo);

var foo = null; // object=> null타입으로 나와야 정상이지만 그냥 오브젝트로 나옴... 초창기 오류...
console.log(typeof foo);

var foo = {}; // 객체,object
console.log(typeof foo);

var foo = Symbol(); // 심벌, symbol
console.log(typeof foo);

var foo = []; // 배열, object
console.log(typeof foo);

var foo = function () {}; // 함수, function
console.log(typeof foo);

결과값,

변수 호이스팅
선언문이 해당 Scope의 선두로 옮겨져 동작하는 특성
console.log(foo); // foo가 아래쪽이 선언되었기 때문에 할당만 안된 거서처럼 undefined 로 출력
var foo = 123;
console.log(foo); // 123
{
// 블록 Scope 시작
var foo = 456;
} // 블록 Scope 끝
console.log(foo); // 456
console.log(y); // 선언, 할당이 어디에도 되지 않았기 때문에 에러
결과값,

[5장 연산자]

연산자, 산술 연산자, 이항 산술 연산자 )=> 덧셈 뺄셈 곱셈 나눗셈 나머지

단항 산술 연산자
1개의 피연산자를 대상으로 연산
++(증가), --(감소), +(양의 정수), -(양을 음수로, 음수를 양수로 반전)
var x = 10;
var y = x-- + 5 + --x;

console.log(x, y);

문자열 연결 연산자
+-연산자는 피연산자중 하나 이상의 문자열인 경우 문자열 연결 연산자로 동작한다.
"1" + "2"; // '12'
"1" + 2; // '12'

1 + 2; // 3
1 + true; // 2(true ->1)
1 + false; // 1(false ->0)
true + false; // 1
1 + null; // 1(null ->0)
1 + undefined; // NaN (undefined 는 숫자로 변환되지 않는다)

할당연산자
우항에 있는 피연산자의 평가결과를 좌항에 있는 변수에 할당한다.
var x;

x = 10;
console.log(x);
x += 5;
console.log(x);
x -= 5;
console.log(x);
x *= 5;
console.log(x);
x /= 5;
console.log(x);
x %= 5;
console.log(x);

var str = "My name is kim";
console.log(str);
str += " test";
console.log(str);

비교연산자
좌항과 우항의 피연산자를 비교하여 불리언 값으로 반환한다.
주로 if문이나 for문과 같은 제어문의 조건식에서 사용한다.

동등/일치 비교연산자
동등비교(==), 일치비교(===), 부동등비교(!=), 불일치비교(!==)
동등은 타입을 고려하지 않고 값만 비교, 일치는 타입까지 고려하여 비교한다.
NaN 은 유일하게 자기 자신과도 일치 하지 않는 수
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); // true

삼항 조건 연산자
조건식? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
var score = 70;
var result = score >= 60 ? "pass" : "fail";
console.log(result);

var x = 2;
var result = x % 2 ? "홀수" : "짝수";
console.log(result);
// 값이 0 이면 false, 값이 1 이면 true =>이걸 응용

var height = 160;
// height 가 140보다 작으면 '140보다 작다'를
// height 가 140보다 크면 '140보다 크다'를 반환한다.
var value = height > 140 ? "140보다 크다" : "140보다 작다";
console.log(value);

논리 연산자
OR, AND, NOT
// OR 연산자 (논리합) 둘중에 하나만 참이면 참을 출력
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// AND 연산자 (논리곱) 모두 참이여야 참을 출력
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

// NOT 연산자 (부정) 그냥 부정해... 다 부정이야 다죽어
console.log(!true); // false
console.log(!false); // true

과제
공통과제
제어문 (93 ~ 118), 객체(128 ~ 153) 읽어오기
1-1차
예제 타이핑 : 예제 07-01 ~ 예제 07-33

[6장 제어문]

주어진 조건에 따라 코드 블록을 실행(조건문)하거나 반복실행(반복문)할 때 사용한다. {}
// 블록문
{
var foo = 10;
console.log(foo);
}

// 제어문
var x = 0;
while (x < 10) {
x++;
}
console.log(x); // 10

// 함수 선언문
function sum(x, y) {
return x + y;
}
console.log(sum(1, 2)); // 3

조건문
주어신 조건식의 평가 결과에 따라 코드블럭의 실행을 결정한다.
if (조건식) {
// 조건식이 참이면 이 코드블록이 실행된다.
} else {
// 조건식이 거짓이면 이 코드블록이 실행된다.
}

if (조건식1) {
// 조건식1이 참이면 이 코드블록이 실행된다.
} else if (조건식2) {
// 조건식2가 참이면 이 코드블록이 실행된다.
} else {
// 조건식1과 조건식2 모두 거짓이면 이 코드블록이 실행된다.
}

var num = 5;
var kind;

// if 문
if (num > 0) {
kind = "양수"; // 음수를 구별할 수 없다.
}
console.log(kind); // 양수

// if...else 문
if (num > 0) {
kind = "양수";
} else {
kind = "음수"; // 0은 음수도 아니다.
}
console.log(kind); // 양수

// if...else if 문
if (num > 0) {
kind = "양수";
} else if (num < 0) {
kind = "음수";
} else {
kind = "0";
}
console.log(kind); // 양수

var x = 2;
var reuslt;
if (x % 2) {
result = "홀수";
} else {
result = "짝수";
}
console.log(result);

var size = 300;
var foot;
if (size < 230) {
foot = "작은 발";
} else if (size < 280) {
foot = "평균 발";
} else {
foot = "왕발";
}
console.log(foot);

var score = 76;
var testresult;

if (score >= 90) {
testresult = "A";
} else if (score >= 80) {
testresult = "B";
} else if (score >= 70) {
testresult = "C";
} else {
testresult = "F";
}
console.log(testresult);

var aa = 10; // X
var bb = 20; // Y
var comptest;

if (aa === bb) {
comptest = "두 수가 같다";
} else {
if (aa > bb) {
comptest = "X가 Y보다 크다";
} else {
comptest = "Y가 X보다 크다";
}
}
console.log(comptest);

후.. 첫날 끝