Kim's DevRoom

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
12강 모든 수의 합 (12/15)

- 특정 배열안에 있는 수들을 모두 더한 값

// 숫자를 가지고 있는 배열 생성
let 수 = [1,5,-40, 200]

// 출력
수[0] + 수[1]+ 수[2]+수[3]
// 결과
166

// for문을 적용한 함수 생성
function 모든수의합(수){
	let 누적 = 0;
	
	for(let i = 0; i < 수.length; i++){
		누적 = 누적 + 수[i];
	}
	
	console.log(누적);
}

// 출력
모든수의합(수)
// 결과
166

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
11강 가장 큰 수 찾기 (11/15)

- 배열이 가지고 있는 숫자 중 가장 큰 수 찾기

// 숫자를 가지고 있는 배열 생성
let 숫자들 = [1,5,-40, 200, 35]

// 함수선언
function 가장큰수(숫자들){
	let 숫자 = 0;

	// 숫자배열을 돌릴 for문 생성
	for(let i = 0; i < 5; i++){
		// 숫자배열을 for문으로 돌리면서 숫자값과 비교하여 큰값을 숫자에 다시 넣어준다.
		if (숫자 < 숫자들[i]) {
			숫자 = 숫자들[i]
		}
	}
	
	console.log(숫자);
}

// 출력
가장큰수(숫자들)
// 결과
200

- 해당 함수가 가지고 있는 문제

1. 숫자들의 배열이 음수만으로 이루어져 있을 때 0이 출력

// 수정
let 숫자들 = [-1,-5,-40, -200, -35]

function 가장큰수(숫자들){
	// 숫자배열의 처음 숫자를 초기값으로 세팅한다.
	let 숫자 = 숫자들[0];

	// 숫자배열을 돌릴 for문 생성
	for(let i = 0; i < 5; i++){
		// 숫자배열을 for문으로 돌리면서 숫자값과 비교하여 큰값을 숫자에 다시 넣어준다.
		if (숫자 < 숫자들[i]) {
			숫자 = 숫자들[i]
		}
	}
	
	console.log(숫자);
}

// 출력
가장큰수(숫자들)
// 결과
-1

2. 배열의 길이가 5보다 클때

// 수정
let 숫자들 = [-1,-5,-40, -200, -35, 20, 40, 567]

function 가장큰수(숫자들){
	// 숫자배열의 처음 숫자를 초기값으로 세팅한다.
	let 숫자 = 숫자들[0];

	// 숫자배열을 돌릴 for문 생성
    // 숫자배열의 길이만큼 for문을 돌린다.
	for(let i = 0; i < 숫자들.length; i++){
		// 숫자배열을 for문으로 돌리면서 숫자값과 비교하여 큰값을 숫자에 다시 넣어준다.
		if (숫자 < 숫자들[i]) {
			숫자 = 숫자들[i]
		}
	}
	
	console.log(숫자);
}

// 출력
가장큰수(숫자들)
// 결과
567

인터넷이란

1. 인터넷

- 인터넷은 웹의 핵심적인 기술로 컴퓨터들 간 TCP/IP 통신 프로토콜을 이용해서 서로 통신 가능한 거대한

네트워크이다.

- 이해하기 쉽게 이야기하면 우리가 웹브라우저상에서 https://www.google.com/ 주소를 치면 구글 홈페이지가 화면에 출력된다. 이는 우리가 가지고 있는 컴퓨터가 구글이 가지고 있는 컴퓨터에 명령을 내려 구글 홈페이지를 볼 수 있는 것인데 이것이 인터넷이 동작하는 가장 기본적인 원리이다.

2. TCP/IP

- TCP/IP는 컴퓨터와 컴퓨터 간의 지역 네트워크(LAN) 광역 네트워크(WAN)에서 원활한 통신을 가능하도록 하기 위한 통신규약이다.

- TCP와 IP는 이름에서도 알 수 있듯이 2개의 프로토콜로 이루어져 있다. 그 이유는 IP 기반에 TCP가 사용돼서 이렇게 불리어지게 된 것이다. 쉽게 말해 IP 프로토콜 위에 TCP 프로토콜이 놓이게 된 것이라고 보면 된다.

- IP : 네트워크 상에서 컴퓨터는 각각 총 4바이트로 이루어져 있는 고유한 주소를 가지고 있는데 이것을 IP라고 한다.

내 컴퓨터의 IP주소를 확인하는 방법은 윈도우라면 cmd에서 ipconfig, 유닉스 계열이면 ifconfig로 치면 주소가 나온다.

- TCP : 클라이언트와 서버 간에 데이터를 신뢰성 있게 전달하기 위해 만들어진 프로토콜이다. TCP는 근거리 통신망(LAN), 원거리 통신망(WAN), 인트라넷, 인터넷 등 컴퓨터에서 실행되는 프로그램 간에 일련의 데이터를 안정적으로 순서대로 에러 없이 데이터를 교환할 수 있게 한다.

HTTP와 HTTPS

1. http란

- Hyper Text Transfer Protocol의 약자로 서버와 클라이언트 사이에 데이터를 주고받기 위한 프로토콜이다.

- 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 호트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다.

2. https란

- Hyper Text Transfer Protocol Over Secure Socket Layer의 약자로 인터넷상에서 정보를 암호화하는 SSL프로토콜을 이용하여 웹브라우저와 서버가 데이터를 주고받는 통신규약이다.

- 간단히 이야기하면 http의 보안이 강화된 버전이라고 할 수 있다.

3. http와 https의 차이점

- http는 웹을 지탱하는 심플한 기술이지만 치명적인 단점이 있다. 이는 서버와 클라이언트 사이에 데이터 전송 시 텍스트 그대로 전송된다는 점이다.

- 이를 보완하기 위한 것이 https인데 https는 중간에 데이터 통신을 도청하더라도 텍스트 그대로가 아니라 암호화된 텍스트 이기 때문에 복호화하기 전까지는 내용을 알 수 없다.

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
10강 공항 검색대 만들기-큐 (10/15)

- 공항 검색대 특징 : 컨베이어벨트에서 물건이 놓여 검사가 되어 승객에서 도착한다. 

처음에 검사를 받은 물건이 처음에 나온다.
- 큐 : 데이터를 집어넣을 수 있는 선형(linear) 자료형으로 먼저 집어넣은 데이터가 먼저 나온다. 

이 특징을 줄여서 FIFO(First In First Out)라고 부른다.

// 물건이 올려져 있는 컨베이어벨트 변수 생성
let 컨베이어벨트 = ["물건1","물건2","물건3"];

// 처음에 올려진 물건을 꺼낸다.
컨베이어밸트.shift(); :: 결과 '물건1'

// 내물건은 변수에 따로 담는다.
let 내_물건 = 컨베이어밸트.shift();

// 출력
컨베이어벨트
// 결과
['물건3']

// 출력
내_물건
// 결과
'물건2'

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
9강 택배 상하차 하기-스택 (9/15)

- 택배 상하차 특징 : 차에 택배 물건을 싣는다. 제일 마지막에 넣은 택배 물건이 제일 먼저 나온다.
- 스택 : 데이터를 넣을 수 있는 선형 자료형으로 나중에 집어넣은 데이터가 먼저 나온다. 이 특징을 줄여 LIFO(Last In First Out)라고 부른다.
데이터를 집어넣는 push, 데이터를 추출하는 pop 등의 작업을 할 수 있습니다.

// 물건을 실을 택배차 변수 생성
let 택배들 = []

// 택배를 싣는다
택배들.push("아이패드");
택배들.push("햇반");
택배들.push("생수");
택배들.push("피아노");

// 출력
택배들
// 결과
(4) ['아이패드', '햇반', '생수', '피아노']

// 햇반을 꺼내기 위해 마지막 넣은 순서대로 꺼낸다.
택배들.pop() :: 결과 '피아노'
택배들.pop() :: 결과 '생수'

//햇반을 변수에 담는다.
let 택배 = 택배들.pop()

// 출력
택배들
// 결과
['아이패드']

// 출력
택배
// 결과
'햇반'

css란 무엇인가?

1) css

- cascading style sheets의 줄임말로 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.

- 쉽게 말하면 내가 설계해둔 html에 모양(스타일)을 적용하는 것이다.

- 아래에 css가 적용된 것과 적용되지 않은 페이지를 보면 이해가 쉽다.

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
7강 수산시장 만들기(상) (7/15)

- 수산시장 : 물고기의 그람수를 측정하여 가격을 매긴다.
- 배열 : 동일한 특성을 가지며 일정한 규칙에 따라 여러 요소가 나열된 있는 데이터들의 집합

8강 수산시장 만들기(하) (8/15)

// 변수 생성
let 광어 = 100

// 출력
광어
// 결과
100

// 입력받은 물고기 인자값의 가격을 측정하는 함수 생성
function 가격측정(물고기){
    console.log(물고기*10);
}

// 출력
가격측정(광어)
// 결과
1000

// 여러마리가 있으면 하나하나 출력할수 없기에 배열이란것을 사용한다.

// 배열 생성
let 광어들 = [100, 150, 200, 50];

// 출력
광어들
// 결과
(4) [100, 150, 200, 50]

// 개별출력
광어들[0]
100
광어들[1]
150
광어들[2]
200
광어들[3]
50

// 배열과 반복문을 통해 반복되는 출력작업을 쉽게 처리
for(let i = 0; i < 4; i++){
    가격측정(광어들[i])
}
// 결과
1000
1500
2000
500

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
5강 명함 만들기(상) (5/15)

- 명함 : 이름과 소개가 들어있는 종이
- 변수 : 값을 저장하는 공간이며 계속 변하는 값

function 명함(){
    console.log("이름 : 손당근");
    console.log("직업 : 개발자");
	console.log("손당근은 내 별명입니다.");
}

//변수적용
function 명함(){
	let 이름 = "손당근";
    console.log("이름 : "+이름);
    console.log("직업 : 개발자");
	console.log(이름+"은 내 별명입니다.");
}

//출력
명함()
//결과
이름 : 손당근
직업 : 개발자
손당근은 내 별명입니다.

6강 명함 만들기(하) (6/15)
- 객체 : 데이터 또는 함수의 집합으로 속성과 행위를 담고 있다.
- 명함 => 변수들을 알맞게 조합해서 출력하는 일

// 객체 선언
let 명함 = {}
// 출력
console.log(명함);
// 결과 => object속성을 가지고 있다.
{}

// 객체로 명함 만들기
// 객체선언 => 이름,나이,직업의 속성과 출력함수를 가지고 있는 객체 생성
let 명함 = {
  이름:"손당근",
  나이:50,
  직업:"개발자",
  출력(){
    console.log("이름 : "+이름);
    console.log("나이 : "+나이);
  }
}
// 객체안에 있는 속성 출력방법
console.log(명함.이름);
// 결과
손당근

// 객체안에 있는 함수 출력방법
명함.출력();
// 결과
Uncaught ReferenceError: 이름 is not defined
    at Object.출력 (<anonymous>:6:23)
    at <anonymous>:1:4

//원인
-출력 함수 안에 사용하는 이름과 나이의 변수가 선언되지 않았기 때문에 에러가 발생
-명함 안에 있는 이름은 변수가 아니라 명함의 속성이기 때문에 변수명만 선언하여 가져올 수 없다.

//수정
let 명함 = {
  이름:"손당근",
  나이:50,
  직업:"개발자",
  출력(){
    console.log("이름 : "+this.이름);
    console.log("나이 : "+this.나이);
  }
}
//출력
명함.출력();
//결과
이름 : 손당근
나이 : 50

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
3강 구구단 만들기(상) (3/15)

- 구구단 : 1~9까지의 수를 두 수끼리 서로 곱하여 그 값을 나타낸 것
- 입력한 값의 구구단을 출력
- 구구단에서의 고정값(중복 값)을 인자로 받는다.

function 구구단() {
    console.log(2*1);
    console.log(2*2);
    console.log(2*3);
    console.log(2*4);
    console.log(2*5);
    console.log(2*6);
    console.log(2*7);
    console.log(2*8);
    console.log(2*9);
}
// 고정값을 인자로 받기
function 구구단(a) {
    console.log(a*1);
    console.log(a*2);
    console.log(a*3);
    console.log(a*4);
    console.log(a*5);
    console.log(a*6);
    console.log(a*7);
    console.log(a*8);
    console.log(a*9);
}

4강 구구단 만들기(하) (4/15)
- 반복문을 사용하여 구구단 고도화 시키기

- 반복문
for (인자값 초기값; 인자 값의 조건; 인자 값의 변경 조건) {
    결과
}

for (var i = 1; i < 10; i++) {
    console.log('asd');
}
// 구구단 함수에 반복문 적용
function 구구단(a) {
    for (var i = 1; i < 10; i++) {
        console.log(a*i);
    }
}