국비지원교육 21일차(5주차&자바스크립트)

참고사이트

https://tcpschool.com/javascript/intro

코딩교육 티씨피스쿨

 

 

이걸 교재삼아 자바스크립트를 배웠다.

 

내용을 배우기전 기본상식에 대해서도 설명해주셨다.

 

프론트엔드 front-end

백엔드 back-end

풀스택 full-stack

 

si : 신규개발

sm : 유지/보수

솔루션 : 회사 자체내의 제품을 만듦

 

엔지니어라고 불리면 개발보단 운영이다.

 

단축키 : ctrl+/ >사용하면 주석처리가 된다.

 

 

인터프리터
컴파일러

 

인터프리터 : 한줄 한줄 기계어로 바꾸고 한줄마다 실행시킨다. 써나간 순서대로 실행이 된다.

컴파일러 : 파일 하나를 기계어를 통으로 바꾸고 실행시킨다.

 

두개는 구분할 수 있어야하며 이 개념은 꼭 알아야한다.

 

 

자바스크립트

 

 

자바스크립트는 객체지향형 프로그래밍이다.

 

 

CRUD

 

Create Read Update Delete

생성 읽기 수정 삭제

자바스크립트는 crud할 수 있는 능력이 있다.

쉽게 설명하면 내마음에대로 조작할 수 있다.

 

 

 

자바스크립트 문법

 

1. 자바스크립트의 실행문은 세미콜론(;)으로 구분된다.

하지만 지금은 발전을 해서 쓰지 않아도 되긴 하지만 쓰는 연습을 위해 사용하는걸로 하자.

 

2. 자바스크립트는 대소문자를 구분한다.

 

3. 리터럴(literal)은 문자 그대로를 의미한다.

ex) 12 >숫자리터럴  / "javascript" >문자리터럴

 

4. 식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다.

 

- camel case방식

가장 많이 쓰는 방법인데 식별자가 여러 단어로 이루어질 경우에 첫번빼 단어는 모두 소문자로 작성하고, 그 다음 단어부터는 첫 문자만 대문자로 작성하는 방식

낙타모양인것 같다고 해서 camel이란 이름이 붙여졌다.

ex) userFirstName

 

- underscore case방식

식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는 방식

 

5. 키워드 또는 예약어라고 하는데 특별한 용도로 사용하기 위해 사용되는 언어이다.

 

6. 주석이란 코드 내에 삽입된 일종의 설명문이다. 

- 한 줄 주석: //주석문

- 여러 줄 주석: /*주석문*/

 

vscode에서 쓰게 되면 이렇게 표기된다.

자바스크립트 주석쓰는 법

 

 

 

 

자바스크립트는 외부문서로 만들어서 따로 가져올 수 있다.

따로 두는 이유는 관리하기가 편해서 이렇게도 쓸 수 있으니 알아두도록하자.

자바스크립트 외부문서 사용법

 

자바스크립트의 기본타입

 

타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다.

 

1. 숫자(number)
10e6 > e는 10의 6승이다라는 뜻. 그래서 결과는 10000000 
0이 총 6개가 있고, 원래 10이 있기 때문에 0이 총 7개가 나온다.

10e-6; 은 소수점을 표현한다. 0.00001이 결과값이다.

2. 문자열(string)
홀따옴표와 쌍따옴표로 사용한다.

"나는 담비다"
'나는 담비다'
모두 사용가능하다.

만약 쌍따옴표안에 쌍따옴표를 쓰고 싶다면 이렇게 사용하면된다.

역슬래쉬를 사용하면 된다.

 

 

번외로 자바스크립트는 줄바꿈<br>이 사용이 되지 않기 때문에 줄바꿈을 하고 싶고, 탭을 사용하고 싶다면 이렇게 사용하면 된다. n이 줄바꿈이고, t가 탭으로 사용된다.

 

3. 불린(boolean) 
불린, 불리언 등등으로 말할 수 있다.
불리언 값은 참(true)과 거짓(false)을 표현한다. 자바스크립트는 false가 아닌 것을 true라고 한다.

4. 심볼(symvol)
심볼타입은 ECMAScript6부터 새롭게 추가된 타입니다.
유일하고 변경할 수 없는 타입으로 객체의 프로퍼티를 위한 식별자로 사용할 수 있다.

 

5. null과 undefined

 

null이란 아직 '값'이 정해지지 않은 것을 의미한다. 변수는 존재하지만 내용이 이어지지 않은 상태이다. 
예를들어 교실이 있고, 수업이 있는데 만약에 수업이 없는상태고 교실만 있다면 이건 null 인 상태이다.

undefined란 '타입'이 정해지지 않은 것을 의미한다. 변수가 있으면 숫자도 들어갈 수도 있고 문자도 들어올 수 있는데 여기서 이 변수에 대한 값이 지정이 안되었을때를 말한다.

 

6. typeof 연산자
어떤타입인지 확인할 때 사용할 수 있다.

 

연산자는 + - 를 의미한다. 자바스크립트는 문자타입 연산자가 있는 것이다.

 

 

 

7. 객체

객체는 어떤 덩어리로 생각할 수 있다.

 

 

 

타입변환

1. 묵시적 타입변환
+, -, /가 있다면 숫자열과 함께 사용한다.
오직 +만 문자열과 같이 사용할 수 있다.

 3-"문자열"; //NaN으로 표현된다.
NaN은 Not A Number를 의미한다.

 

2. 명시적 타입변환
자바스크립트에서는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입을 변환할 방법도 제공한다.
- Number()
- String() 문자로 바꿀 때 사용
- Boolean()
- Object()
- parseInt() 정수로 바꿀 때 사용
- parseFloat()

 

 

날짜(Date)를 숫자로 변환

 

- getDate() //날짜 중 일자를 숫자로 반환함. (1 ~ 31)
- getDay() //날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6)
- getFullYear() //날짜 중 연도를 4자리 숫자로 반환함. (yyyy년)
- getMonth() //날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11)
- getTime() //1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환함.
- getHours() //시간 중 시를 숫자로 반환함. (0 ~ 23)
- getMinutes() //시간 중 분을 숫자로 반환함. (0 ~ 59)
- getSeconds() // 시간 중 초를 숫자로 반환함. (0 ~ 59)
- getMilliseconds() //시간 중 초를 밀리초(millisecond) 단위의 숫자로 반환함. (0 ~ 999)

 

 

변수

 

 

변수는 무언가를 저장하기 위해 사용한다. 
자바스크립트에서 var 또는 const또는 let 키워드를 사용하여 변수를 선언한다.
선언된 변수는 나중에 초기화할수도 있고 선언과 동시에 초기화할 수도 있다.

자바스크립트에서 변수는 이름을 가지고 식별하므로 변수의 이름은 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)로만 구성한다. 그리고 시작을 숫자로 할 수는 없다. 

 

 

변수를 선언하여  각 변수를 토대로  이렇게 나타낼 수 있다.

 

const는 상수이며 재할당과 재선언이 불가하다.

let은 재할당은 가능하지만 재선언은 불가하다.

 

현재 개발할 때는 let을 사용하는 경우가 많다.

 

쉼표를 사용하여 여러 변수를 동시에 선언하거나 초기화할 수도 있다.

 

연산자(operator)

 

 

자바스크립트는 여러 종류의 연산을 위한 다양한 연산자를 제공하고 있다.


1. 산술연산자
산술 연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자이다.

+ 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함.
- 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌.
* 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함.
/ 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔.
% 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환함.

++d : 항에 사용하기 전에 +1해줌
d++ : 항에 사용하고나서 +1해줌


2. 대입연산자
대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이다.

= 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함.
+= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입함.
-= 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입함.
*= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입함.
/= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입함.
%= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입함.

3. 증감 연산자
증감 연산자는 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자이다.

++x 먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함.
x++ 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴.
--x 먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함.
x-- 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴.


4. 비교연산자
비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환한다.

5. 논리 연산자
논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환한다.

&& 논리식이 모두 참이면 참을 반환함. (논리 AND 연산)
|| 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산)
! 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산)

 

진리표

 

6. 비트 연산자
비트 연산자는 논리 연산자와 비슷하지만, 비트(bit) 단위로 논리 연산을 수행한다.

7. void연산자
아무것도 안하는 함수이다. void 연산자는 피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환한다.

 

 

 

제어문

 

프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문이다. 

 

 

조건문(conditional statements)

조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다. 


1. if 문

만약 a이면 b이다. // a가 true일 경우 b가 출력된다. false일 경우 아무것도 출력 되지 않는다.

2. if / else 문

if 문과 같이 사용할 수 있는 else 문은 if 문의 표현식 결과가 거짓(false)일 때 주어진 실행문을 실행한다.

 

3. if / else if / else 문

else if 문은 if 문처럼 표현식을 설정할 수 있으므로, 중첩된 if 문을 좀 더 간결하게 표현할 수 있다. 하나의 조건문 안에서 if 문과 else 문은 단 한 번만 사용될 수 있다. 하지만 else if 문은 여러 번 사용되어 다양한 조건을 설정할 수 있다.

이런식으로 사용할 수 있는데 만약 아래예시처럼 사용하게 되면score는 90보다도 크고, 80보다도 크기 때문에 A랑 B랑 한번에 출력된다. 위에 예제에선 if/else를 사용했기 때문에 A만 출력된다.

 

이러한 이유로 if/else if/else문을 사용하는 것이다.

4. switch 문
switch는 if중에서 ==으로 구성된 경우 사용 가능

주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문이다.

 

아래 예제처럼 이용 가능하다. break는 꼭 써주어야 한다. 맨 마지막에는 상관 없다.

아래처럼 응용도 가능하다

 

반복문

 

반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문이다.  

 

반복문을 사용하기 이 단계들을 생각하자.

1단계 : 반복되는 패턴을 찾기

2단계 : 반복되지 않는 것의 패턴을 찾기

3단계 : 시작과 끝을 파악

만약 끝이 명확하지 않으면 while

끝이 명확하다면 for

1. while 문
while 문은 특정 조건을 만족할 때까지 계속해서 주어진 실행문을 반복 실행

2. do / while 문
while 문은 루프에 진입하기 전에 먼저 표현식부터 검사한다. 하지만 do / while 문은 먼저 루프를 한 번 실행한 후에 표현식을 검사한다. 즉, do / while 문은 표현식의 결과와 상관없이 무조건 한 번은 루프를 실행한다.

3. for 문
for 문은 while 문과는 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문이다. 따라서 while 문보다는 좀 더 간결하게 반복문을 표현할 수 있다.

 

 

4. for / in 문
for / in 문은 일반적인 for 문과는 전혀 다른 형태의 반복문이다.
for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티를 순회할 수 있도록 해준다. 

배열의 모든 내용을 그냥 처음부터 끝까지 쭉 나열해준다는 말이다.

5. for / of 문
for / of 문은 반복할 수 있는 객체를 순회할 수 있도록 해주는 반복문이다.
자바스크립트에서 반복할 수 있는 객체에는 Array, Map, Set, arguments 객체 등이 있다
이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입한다.