Kim's DevRoom

자바스크립트 형 변환

1) 숫자형으로 변환

- 자바스크립트에서 숫자형으로의 변환은 parseInt()와 Number()가 있는데 이 두 함수는 숫자형으로의 변환해주는 함수라는 공통점이 있지만 약간의 다른 점이 있다. 아래 예제를 보면 이해가 쉽다.

ex)

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

코딩 입문 - 하다 보니 알게 되는 자바스크립트

13강 숨 고르기 (13/15)

14강 프런트엔드 개발자 (14/15)
- 프런트엔드 : 웹사이트들을 보거나 또는 앱 애플리케이션을 다운로드하여 사용할 때 사용자들은 잘 정돈된 레이아웃의 인터페이스를 볼 수 있다.
이러한 인터페이스를 기술분야에서는 프런트엔드라고 부른다.
- 프런트엔드 개발은 주로 웹 및 모바일 솔루션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는 데 초점을 맞추고 있다.
- 프런트엔드 언어 : HTML, CSS, JAVASCRIPT
- 프런트엔드 개발시 기술 : AngularJS, ReactJS, Bootstrap

15강 백엔드 개발자 (15/15)
- 백엔드 : 소프트웨어 개발 프로세스에서 서버 측 개발 분야
- 데이터를 저장하고 관리하며 웹사이트의 클라이언트 측에서 요청하는 데이터들을 매끄럽게 보여줄 수 있도록 한다.
- 백엔드 개발자 : 프런트엔드 영역의 요청을 받고 응답을 받는 사람들
- 백엔드 언어 : PHP, Node.js, JAVSCRIPT, C++, Java, Python
- 백엔드 개발시 기술 : Express, Laravel, C#

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

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()

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

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

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);
    }
}

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

코딩 입문 - 하다 보니 알게 되는 자바스크립트
2강 체온계 만들기 (2/15)

- 체온계 : 온도를 조건으로 분류하여 상태를 알려줌
- 조건문 : if
if (조건) {
    결과
}

// 함수선언
function 체온계(a) {
    // 조건설정
    if (a < 34.0) {
        console.log('저온');
    }
    // 조건설정
    if (34.0 < a && a < 37.0) {
        console.log('정상');
    }
    // 조건설정
    if (a > 37) {
        console.log('고온');
    }
}

// 함수호출
체온계(33);
// 결과값
저온

// 함수호출
체온계(38);
// 결과값
고온

// 함수호출
체온계(36);
// 결과값
정상