수업 4일차

galoo·2023년 7월 3일

HelloVision Dx Data School

목록 보기

4/72

0703 오늘도 JS를 배울 예정이에요

✔ 저번 수업 복기

JS 출력하는 방법

body에 출력하기 : document.write, document.writeln
writeln? : 줄바꿈 x $\rarr$ 바로바로 처리합니다.
wirte : 데이터를 모았다가 보냅니다.
대화상자에 출력하기 : alert - (modal 이라고 표현)

modal?
$\rarr$ 한 번 제어권을 잡으면, 종료될 때 까지 제어권을 놓지 않는다.

console에 출력 : console.log()
브라우저 내에서는 볼 수 없고, 브라우저의 검사 창이나 IDE의 Console에서 확인 (브라우저 화면에서는 확인 불가)

데이터에 이름 붙이기

global vs local

global : 블록 외부에서 선언되서 모든 곳에서 사용 가능
local : 블록 안에서 만들어져서 블록 내부에서만 사용 가능

hoisting : 선언(만들기)하기 전에 사용하는 것 - JS만 존재
$\rarr$ 얘가 무슨 뜻인지 제대로 몰라서 헷갈려함. 기존 언어체제와 다름

해결 방법
기존 : name = data // global 로 만들어지며, hoisting 가능
해결 :
1. var name = data // local 변수로 만들어지며,
함수 안에서 만든 것은 함수 외부에서 사용 가능, hoisting 가능

let name = data // local 변수, hoisting 불가능

const name = data // 변경 할 수 없는 읽기 전용

데이터의 자료형

기본 자료형 : 숫자 문자열, boolean, undefined, null
연산자 : 연산을 수행해주는 부호 나 명령어

✔ 제어문 기초

제어문이란?

코드는 왼쪽에서 오른쪽으로 위에서 아래로 순차적으로 수행되는데
특정 블럭으로 분기하거나 반복하도록 해주는 명령어가 제어문 이다.

블럭 : 은 {}으로 구분합니다.

분기(branch)

값에 의한 분기 : switch(언어를 학습할 때 switch는 항상 확인해야 한다.)
조건(ture, false)에 의한 분기 : if

반복(Loop)

반복 : 횟수 지정을 합니다. (한 번 하고 기준점으로 다시 돌아옵니다.)
$\rarr$ 인덱스가 필요합니다.
순회 : 0개 이상의 데이터를 가진 collection을 순차적으로 접근 (iteration)

기타

반복을 빠져나오는 것 : break
다음 반복으로 넘어가는 것 : continue
현재 모듈의 수행을 종료하고 호출한 곳으로 돌아가는 것 : return

$\rarr$ 그냥 돌아가도 되지만 인수인계(내가 데이터를 들고 갈 수 있음)가 가능함
$\rarr$ return이 없다? : 끝났다. 이어서 작업할 수 없다.

값은 일반적으로 숫자, 하지만 "문자열" 도 값으로 취급하는 언어가 존재

✔ If

조건에 의한 분기 : if

표현방법

if(표현식){
		표현식이 Truthy 인 경우에 수행할 내용
}
else if(표현식){
		이전의 표현식이 Falsy 이고, 현재 표현식이 Truthy인 경우 수행할 내용
} 
else{
		이전 모든 표현식이 Falsy인 경우 수행할 내용
}

Falsy : false, 0, null, undefined, ""(빈 문자열)
if 는 1회 가능, else if는 0번 이상 무제한, else는 생략 혹은 1번 가능
else if와 else는 반드시 if와 함께 사용되어야 합니다.

표현식

표현식은 변수, 연산식, 리턴이 있는 함수 호출입니다.

✔ Switch

값에 의한 분기 : Switch

값은 정수와 문자열이 가능하다.
기본형식

switch(정수나 문자열 표현식){
	case 값1 : 
    		()안의 내용이 값1일 때 수행할 내용
    case 값2 : 
    		()안의 내용이 값2일 때 수행할 내용
    ....
    default :
    		일치하는 값이 없을 때 수행할 내용

JS에서 Switch는 Fallthrough가 기본이어서, 일치하는 값을 만나면
break를 만날때 까지 계속 수행합니다.

break를 안걸면 만약 case 값1이 적합하다면 이후 2, 3,, 쭉 갑니다.

정수나 문자열 표현식에 true를 설정하면, 값의 자리에 조건을 설정해서 true인 경우에 수행하도록 할 수 있습니다.
- 그렇게 된다면 값 자리에 조건문을 걸어서 true false가 나오도록 할 수 있습니다.
case의 개수는 제한이 없습니다.
default는 생략하거나 한 번만 나와야 합니다. (언어마다 생략여부 확인해야함)

if로 쓸 수 있는거 switch로 쓰면 switch가 더 빠르다.

if는 한 개씩 다 지나가야 하지만, switch는 아닙니다.
switch는 위에서부터 내려오며 계산하는게 아니라, 값을 바로 찾아가는 것이다.

코드 짤 때 나오는 실수들(If, Switch)

도달할 수 없는 코드를 작성하는 것
- 코드를 확인 할 때, 기능 test(블랙 박스) 혹은 구조 test(화이트 박스)를 진행한다. 이들은 whitebox test에서 확인할 수 있다.
```
if(score>80){
		....
}
else if(score>90){
		도달할 수 없는 코드
}
```
- 안에 있는 조건은 절대로 만족할 수 없다.

모든 상황에 대한 처리를 해주는 것이 좋다.
- 예외처리는 중요합니다.

✔ 반복문

while

while(boolean 표현식){
		표현식이 Falsy가 아니면 수행할 내용
}

- 표현식을 확인하면서 {}의 내용을 반복

do ~ while

do{
		표현식이 Falsy가 아니면 수행할 내용
}while(boolean 표현식)

- 표현식을 확인해서 표현식이 Falsy가 아니라면 {} 안의 내용을 반복
- 하지만, Fasly라면 우선 한 번 수행함

While은 한 번도 수행하지 않을 수 있지만,
do ~ while은 반드시 1번은 수행해야 합니다.

for

for(처음 한 번만 수행되는 식 ; 판별 식 ; 두 번째 부터 수행할 식){
	판별식이 falsy가 아닌 경우 수행할 내용
}

- while과 유사한 용도로 사용할 수 있고, 객체나 배열을 순회하는 용도로 사용 가능
- 3가지의 식은 생략 가능합니다.
- for에서 첫 번쨰와 세 번쨰의 식의 자리에는 여러 개의 수행문 작성 가능합니다. 
','를 통해 구별합니다.
	- 이를 잘 사용하시면 for의 개수를 줄일 수 있습니다.

for ~ in

for(임시변수 in 배열이나 객체){
		수행할 문장
}

- 배열에서는 인덱스가 순서대로 임시변수에 대입이 되고, 
- 객체의 경우에는 속성이 임시 변수에 대입이 됩니다.

len arr=["아담","이브","애플"] 이 있다고 가정합니다.

for(idx in arr){
	console.log(idx); //0,1,2 출력 JS만 인덱스가 온답니다.
    console.log(arr[idx]); // 아담, 이브, 애플이 출력
}

- 배열은 이렇게 순회한답니다.

제어문 안에 제어문 사용하기

for 안에 for 쓰기 무조건 가능합니다.

for(let i =1 ; i<6; i+=1){
            for(let j=0; j<i; j+=1){
                document.write("*")
            }
            document.write("<br/>")
}

Break

반복문을 종료하는 역할입니다.
~~할 때 까지 합시다. 하면 break를 씁니다.

//break, 반복문 자체를 중단하자.
        for (let i = 1; i < 6; i += 1) {
            if (i % 2 == 0) {
                break
            }
            document.write(i)
        }

Continue

다음 반복문으로 넘어가는 역할입니다.

//continue, 이번만 빼고 해보자.
        for(let i =1 ; i<6; i+=1){
            if(i%2==0){
                continue
            }
            document.write(i)
        }

✔Function(함수)

개요

별도의 메모리를 할당받아서
목적
- 모듈화 : 프로그램을 용도 별로 적절히 분할
- 메모리를 효율적으로 이용하기 위해서
종류
- user define fuction : 사용자 정의 함수
- maker function : 언어가 제공
- 3rd party function : 다른 개발자가 만들어서 제공(조심)

왜 3rd pary function이 위협적일까요?
$\rarr$ 내가 모르는 제3자의 자료 입니다.
$\rarr$ 파이썬 모듈에 등록이 된 것이 아니라면, 검증되지 않은 것입니다.

사용자 정의 함수 생성과 호출

사용자 정의 함수 선언(생성)

function 함수이름(매개변수 나열){
	함수 내용 작성
    return  데이터 // 상황에 따라 생략될 수 있습니다.
}

혹은

let 이나 var 변수이름= function 함수이름(매개변수 나열){
	함수 내용 작성
    return  데이터 // 상황에 따라 생략될 수 있습니다.
}

동일하게 let f2=function(){}을 한다면, 해당 선언이 뒤에 호출을 해야한다.
그게 아닌 function f1(){}을 한다면 호출이 먼저와도 좋다.
하지만 let f2=function() 꼴을 사용하도록 노력하자.

아래 코드는 최근에 권장하는 코드 방식입니다.

함수 호출 : 함수를 실행
함수이름(매개변수 대입)

주의할 점은 함수이름 만 기재하는 것은 함수를 참조하는 것입니다.

document.write(내용): 함수를 호출
document.write : 함수를 참조 - 내용이 있는 곳의 참조

매개변수(Argument, Parameter, 인자, 인수)

함수를 호출할 때 넘겨주는 데이터
개수 제한은 없고 함수를 만들 때 이름만 기재하면 됩니다.
함수를 호출할 때, 데이터를 대입해야 하는데 뒤에서부터 생략이 가능합니다.

함수를 확인할 때, 매개변수를 잘 확인해야 합니다.
$\rarr$ 이것을 가지고 불러오기 때문입니다.

JS나 Python은 매개변수의 자료형을 기재하기 않기 때문에, 이름을 잘 만들어주어야 합니다.

이름() 이런 것을 본다면, 해당 이름의 document를 확인하세요 무조건

let integerAddWithInteger = function(a,b){
            // 2개의 정수를 입력받아서 더한 후 결과를 출력하는 함수입니다.
            let r=a+b;
            document.write(a+"+"+b+"=",a+b)
        } // 실제 함수

document를 검색해 보면
let integerAddWithInteger = function(a,b){
	//2개의 정수를 입력받아서 더한 후 결과를 출력하는 함수입니다.
}
주석과 함수명, 파라미터 이렇게만 있을 것이다. 
대신 parameter에서 ... 이 붙으면 더 줘도 된다는 것이다.

함수 호출 시, 파라미터는 뒤에서 부터 생략이 가능하며, 해당 값은 undefined가 입력됩니다.

integerAddWithInteger(100) // 이러면 a는 100이 되지만, 
b는 undefined가 됩니다.
결과는 제대로 안나오겠네요

Return

함수가 작업을 수행하고, 호출하는 곳으로 돌아가는 제어 명령어
return 다음에 하나의 데이터를 가지고 돌아갈 수 있습니다.
return 다음에 데이터를 기재해서 돌아가면 그 결과를 재활용 할 수 있습니다.

파이썬에서 데이터 전처리 함수나 분석 함수는
특별한 경우가 아니면 데이터를 Return 합니다.

❗
전처리 함수에서 데이터 원본에 작업을 수행하는 것은 굉장히 위험한 행동입니다.

요새 파이썬 document는 max(a,b..) $\rarr$ int 이렇게 해준다.
func(a,b,...) $\rarr$ None이면 return 없다는 것이다.

result = integerAddWithInteger(100,200)
result=integerAddWithInteger(result,200)
document.write(result)
이게 개발자 입장(출력) 에서는 괜찮다.
하지만, 분석가는 절대로 하면 안된다.
바로 기존 데이터를 덮어 씌우는 행위이다❗
사본을 계속 만들어 거기에 return을 해야 한다.

Return을 하는 이유는 원본에 영향을 미치지 않게 하기 위해서이다.

JS에서 함수는 일급 객체이다?

일급 객체가 뭔데?

함수도 하나의 자료형으로 간주한다.(하나의 데이터로 본다.)
함수의 내용을 변수에 대입하는 것이 가능하고,
매개변수로 사용하는 것도 가능하고 리턴하는 것도 가능하다.

함수의 내용을 변수에 대입하는 이유는?
- 이벤트 처리나 다형성 구현을 위해서 (Delegate)
함수를 매개변수로 받는 이유는 함수에 따라 수행하는 일을 다르게 하기 위해
- Map reduce Programming에서 사용(map, filter, reduce)
함수를 리턴하는 경우는 대부분 Closure를 구현하기 위해서이다.

Delegate

함수의 내용을 다른 변수에 담아서 호출하는 것 : Delegate(위임)

ex)
클릭을 하였을 때, 발동할 함수를 만드세요!
$\rarr$ 함수이름을 마음껏 만들어도 click에 집어넣으면 아무 상관 X

Polymorphism

이름은 똑같은데 다른 함수를 호출한다. : Polymorphism(다형성)
게임을 예시로, 종족마다 공격 단축키를 한개로 설정할 수 있다는 것이다.
동일한 코드가 대입된 내용에 따라 다른 함수를 호출합니다.
동일한 메시지에 대하여 다르게 반응하는 성질 입니다.

Map Reduce Programming

MAP은 데이터 변환
Filter는 데이터를 고르고
Reduce는 뭐야?

Closure

함수 내부에서 함수를 리턴해서 함수 내부의 데이터를 외부에서 변경하는 것

function outer(){
            let data=0; //함수 안에서 만든 변수라서 
            //함수 안에서만 사용이 가능합니다.
            //함수가 함수를 리턴합니다.
            return function(){
                data=data+1
                console.log(data)
            }
        }
//console.log(data)//이건 undefined이다.
// 내가 꼭 저 안에 있는 데이터를 가져오고 싶어!-> 
//안에 데이터가 사라지지 않게 해줘야한다.
let inner=outer()
inner()
inner()
inner()

단순히 outer()를 여러번 호출해도 의미가 없다.
하지만 let inner=outer()를 하게 되면 return되는 함수를 가져오기에 내부 데이터를 안전히 가져올 수 있게 된다.

User와 분석가

User의 니즈는 UI/UX 관점이다.
분석가는 관심사는 데이터 관점이다.
- 분석가는 필요로 하는 데이터가 바뀐다.
- 이전에는 view(화면)을 제공해주었다.
- 이제는 그럼 RestAPI를 쓰자. 분석가는 view가 아닌 data 필요
자꾸 제한을 둬야겠다.
Global은 없애고 Closure를 사용하자.

화살표 함수(Arrow Function)

함수를 이름 없이 생성하는 것

(매개변수 나열)=>{
	함수의 내용 작성
}

함수를 미리 만들어두지 않고, 필요할 때 만들어서 사용하는 개념
일반적으로 이벤트 처리를 할 때, 주로 이용합니다.
- 이벤트 처리 함수는, 이벤트가 발생하지 않으면 필요없는 함수이기 때문
- 이벤트(Event) : 사용자나 시스템이 발생시키는 사건

const arrow=()=>{
        alert("이름 없는 함수네요");
}
arrow();

익명함수
익명(이름없는)이라는 단어가 나오면 필요할 때
만들어서 사용하겠다는 의미이다.

내장함수(Maker Function)

프로그래밍 언어가 제공하는 함수
JS에서는 Window 객체가 제공하는 함수를 내장 함수로 간주

객체가 소유한 함수는 메서드라고 한다.

메서드는 리시버를 호출해야 하고 메서드는 리시버와 함께 호출해야 하는데, window 객체의 메서드 만은 리시버를 생략하면 winodw 객체의 메서드가 호출됩니다.
alert(메시지) : 모달 대화상자로 메시지를 출력
confrim(메시지) : 확인 과 취소 버튼을 제공하고, 확인을 누르면 True가, 취소를 누르면 False가 리턴되는 함수 (예, 아니오를 만들 수 있음)
- 리턴이 있기에 결과를 받아야 한다. True, False일때 다르게 만들 수 있다.
인코딩 & 디코딩 함수들

Encoding : 메모리에 저장되는 형태로 변환하는 것
Decoding : 우리가 알아 볼 수 있는 형태로 변환하는 것

TIP

CSV 깨짐 : utf-8, cp949

크롤링 깨짐 : utf-8, euc-kr

iso-latin1(8859-1) : 어디서 뭘 받아왔다 -> 이거일 수 있음 utf-8 변환하자
이렇게 변환해보자.

인코딩 & 디코딩 실습

let redvelvet = "name=아이린"
let encoding=encodeURI(redvelvet)
alert(encoding)
encoding=decodeURI(redvelvet)
alert(encoding)

✔OOP(객체 지향 프로그래밍)

객체(Object)

프로그래밍에서 존재하는 모든 것은 객체이다.
동일한 목적을 달성하기 위해 모인 속성(변수, 상수)과 메서드(함수)의 집합
Instance?
- 클래스를 기반으로 만들어진 객체이다.

a=3 이는 객체라고 해도 괜찮습니다.
하지만 인스턴스라고 하지 않습니다.
클래스 기반이 아니기 때문입니다.

클래스 : 속성과 메서드를 모아놓은 틀

클래스 : 하나의 모형
인스턴스 : 모형을 기반으로 해서 우리가 사용할 수 있도록 하는 것

모델하우스는 돈 주고 안산다, 모델 하우스를 기반으로 실제 집을 만든다.
실제 집이 인스턴스이다. 집집마다 인테리어는 다르게 할 수 있지만
구조는 똑같다.
그 구조가 모델하우스이다.
인스턴스를 만든다면 new를 쓴다.

객체와 클래스 : 배포의 단위가 아님 목적 달성을 위해 모아놓은거지
라이브러리와 패키지 : 배포의 단위
여기서 더 큰 개념 : Framework, Developer Kit
- 무언가를 만드는 것이다. jdk가 그 예시임
- 소니 sdk 등...
- Spring Framework : 스프링 기반으로 프로그램을 만들 수 있게 해주는 것

(예시)
연락처를 만들어줘

그럼 연락처를 먼저 쓸거야?
-> 아니지 이름 전화번호... 등의 틀을 만들겠지?(이게 class, schema)
-> 이 구조를 만드는 것을 모델링이라고 한다.
-> 이후 데이터를 입력하겠지?(실제 데이터)
-> 그것을 인스턴스라고 한다.(실제 사용되는 데이터)
-> 틀을 스키마, 클래스
-> 클래스 하나에 인스턴스는 여러개가 가능하다.
-> 인스턴스는 의미를 부여해야한다.

객체 지향의 3대 성질

캡슐화(Encapsulation) : 클래스와 인스턴스를 생성하는 것
- 불필요한 것들을 외부에서 사용 못하도록 포장하는 것(랩핑)

상속(Inheritance) : 하위 객체가 상위 객체로 부터 물려 받는 것
- 재사용 때문에 하는 것입니다.(중복된 코드 사용 x)

다형성(Polymorphism) : 동일한 메시지에 대하여 다르게 반응하는 성질

오늘은 여기까지... 살려죠..

galoo

밀가루 귀여워요

이전 포스트

수업 3일차

다음 포스트