수업 3일차

오늘은 첫 금요일!
수업 끝나자마자 바로 집에 왔다!

집에서 쉬면서 오늘치 정리를 해보자🙆‍♂️

오늘 수업에서는 CSS 결론과 JS 입문을 배웠다. 컴퓨터 구조를 약간 곁들인.

CSS 정리

CSS 사용법

• 별도의 파일을 만들어 부르기
• HTML 내에서 style을 써서 만들기
• 태그 내에서 style을 만들기(inline)

이때, 맨 마지막인 태그 내에서 style 만들기는 가장 권장하지 않는다.

백엔드 개발자들은 CSS까지는 건들지 못한다 대부분...
CSS는 별개로 작업을 하기에 태그 내에서 style을 만들어 버린다면, 백,프론트 둘다 같은 문서로 작업하게 되는 꼴이다.

유지보수의 관점에서는 쪼개서 작업하는 것이 가장 좋다.

JavaScript 입문하기!

JavaScript란?

쉽게 말해서 웹 페이지의 동적 처리를 향상키시기 위한 목적으로 탄생한 프로그래밍 언어 입니다.

• 스크립트 : 한 줄씩 읽어서 번역합니다.
• 동적 바인딩 : 실행할 때 메모리의 크기가 결정됩니다.
• 객체 기반 언어 : 클래스를 만들지 않고 객체를 바로 생성해서 사용하는 것이 가능합니다.
• 플랫폼에 독립적입니다.

플랫폼이란?
운영체제나 디바이스를 뜻합니다.
플랫폼에 독립적이라면 실행파일을 만들지 않고,
버츄얼 머신의 도움을 받아 실행하는 언어입니다.

플랫폼에 종속적인 언어의 예는 C언어 입니다.
C언어는 바이너리 파일을 생성합니다.

JS 작성 방법

• HTML 파일 내부에 script태그 만들고 작성 (내장형)

<script>
		document.getElementById("btn").addEventListener("click",
              function(){
                  alert("버튼을 클릭했어요")
              }
        )
</script>

• HTML 태그 안에 포함해서 실행 (inline)

<tag eventname="script code">

• 외부에 JS 파일을 만들어서 사용

<script type="text/javascript" src="js 파일의 전체 경로"></script>

컴퓨터의 오류

• 에러 (문법 구조를 틀렸을 때 생기는 물리적 에러 & 알고리즘이 틀려 잘못된 결과가 출력된 논리적 에러)
• 예외(Exceoption) : 에러는 아니다. 즉, 실행은 되지만 특수한 상황을 만나면 실행이 안된다.(paninc)
• 특수한 상황을 만나면 프로그램이 중단되도록 설정한 것

에러 코드 확인 방법

• 가장 무식한 방법 : 소스코드를 위에서부터 하나씩 읽어 나가기
• 디버거 : 디버깅(버그를 찾는다)->메모리의 값을 확인해 나간다.(물리적 에러는 찾지 못한다.)
• 코드 에러 검출 툴

다시 JS의 규칙

• 대소문자를 구분한다.
• 줄 단위로 읽어서 실행한다.

줄의 마지막에 세미콜론(;)을 붙일 필요는 굳이 없지만 관습적으로 하는 경우가 많음
하지만, 한 줄에 2개 이상의 명령어를 사용하는 경우에는 반드시 세미콜론을 붙여 구분해야 합니다.

주석

주석은 해석하지 않는 코드로 코드에 대한 보충 설명을 작성할 용도로 사용합니다.

• 한 줄 주석
  // 주석내용

• 블럭 주석
  /* 블럭 주석할 내용*/

• 해석하지 않고 문자열로 처리
  <![CDATA[내용물]]>

예약어(Keyword)와 사용자 정의 명칭

예약어 : 프로그래밍 언어가 기능을 정한 명령어나 기호

사용자 정의 명칭 : 개발자가 기능을 정하는 단어
예약어(keyword)는 사용자 정의 명칭으로 사용할 수 없다.
생각 외로 str은 예약어가 아니다.

문자로 시작해야 하며, 일반적으로 _ 와 $는 사용이 가능하다.

언더바 혹은 $ 표시는 지양하자.
숫자는 시작 문자로는 사용할 수 없지만, 사용 가능합니다.
중간에 공백은 안됩니다.

한글도 사용 가능합니다. 하지만 지양합니다.
why? 인코딩 문제가 생겨서 그렇기 때문입니다.

Data의 분류 (알아두면 좋다)

(1) Literal : 프로그래밍 언어에서 데이터를 표현하는 일종의 방법

10진 정수 : 987
실수 : 3.2, 0.32E+0001
bool : true, false
문자열 : "문자열나열하세요", '문자열 나열하세요' (JS에선 '' == "")
가리키는 데이터가 없다 : null

(2) Mutable Data와 Immutable Data

변경 가능 데이터와 변경 불가능 데이터
왜 나눠놨는가?(중요한 의미를 갖습니다.)
왜 중요해? 
Mutable Data는 수정이 가능합니다. 이말은 동시에 이 데이터를 사용하면 안됩니다.
Immutable data로 제공해야 한다. (결과 제공 시)

(3) Scala Data와 Vector Data

Scala Data : 1개의 데이터 (스칼라는 무조건 한개가 들어있어야 한다.)
Vector Data : 0개 이상의 데이터 (데이터가 없을 수 있다.)
분석가라면 Vector Data를 잘 써야 한다.

(4) 데이터 유형에 따른 분류

정형 : 테이블 형태 처럼, 구조가 일정한 데이터(class, rdb)
비정형 : 구조가 일정하지 않은 데이터(map, nosql)
반정형 : 일반적으로 비정형처럼 보이지만, 메타 데이터를 포함하고 있어서 정형으로 변경이 가능한 데이터(xml, json, yaml)

(5) 저장하고 있는 데이터의 종류에 따른 분류

Value : 값
Reference : 참조

메시지를 출력하는 방법

• 대화 상자로 출력하기
  alert(데이터)

• HTML 문서 내에 출력하기(화면)

(1)document.wirte(데이터) : 여러 개의 write가 있는 경우, 모아서 출력하기
(2)document.wirteln(데이터) : 무조건 바로바로 출력하기

• 검사 창의 console에 출력하기
  console.log(데이터)
  왜 console에다가 출력하는 걸까?
  디버깅을 하기 위해서 이다. log는 정말 중요하다.

데이터에 이름 붙이기

(1) 전역 변수(Global Data)로 만들기

• 만들면 아무 곳에서나 사용할 수 있는 데이터
• 이름 = 값 (값에 이름을 붙이는 행위)
• 이름을 호출하면 값이 온다.

값에다가 이름을 붙이는 이유는?
1. 프로그램이 가장 싫어하는 것은 똑같은 것을 여러번 하는 것 이다.
2. 수정, 유지보수 하기 쉬워지게 하려고 변수를 만드는 것이다.

(2) 지역 변수(Local Data)로 만들기

• 만들면 자신의 영역에서만 사용이 가능합니다.
• var 이름 = 값 // hoisting이 가능하며, 값을 변경할 수 있는 형태로 생성
• let 이름 = 값 // hoisting 이 불가능하며, 값을 변경할 수 있는 형태로 생성 -권장 (변수)
• const 이름 = 값 // 값을 변경할 수 없습니다. (상수)

(3) 값 변경

• 기존 이름 =값

  a=8 에이는 8이라고 읽지 마세요.
  a=8이면 8이 먼저 동작합니다.
  8을 먼저 저장하고 a라는 이름을 이용해 접근할 수 있도록 만들어줍니다. 라고 말해보자

(4) hoisting

• 이름을 만들기 전에 사용이 가능 한 것
• 이름을 만들어야 뒤에 가용이 가능한데, 이름 안만들고 먼저 써도 가능
• 요샌 이거 못하게 하려고 let 권장
• 이게 가능하다면 var hi=8 이 있다면 그 위에 hi 변수를 써도 된다는것이다.

데이터 종류를 확인하는 방법

• typeof 변수명
  console.log(typeof age)

종류
1. number : 숫자
2. string : 문자열(문자의 집합)
3. boolean : true, false
4. undefined : 정의되지 않은
5. null : 가리키는 데이터가 없는 상태(결측, 이름은 있지만 데이터 자체가 없음)

형 변환

• 데이터의 종류를 변환한다.

문자열을 숫자로 변환하자 : Number(문자열)
숫자를 문자열로 변환하자 : String(숫자)

Array(배열)

동일한 형태를 갖는 데이터의 모임으로, 하나의 이름으로 생성합니다.
JS의 배열은 list 입니다.

생성방법

let 이름 = [초기값, 값, 값,..]
let 이름 = new Array(값 나열하기)
let 이름 = new Array(개수) : 저장 공간만 확보하기

Operator(연산자)

연산을 수행해주는 명령어나 기호

(1) 연산의 분류
산술 연산(Arithmetic) : 연산의 결과가 숫자로 리턴
논리 연산(Logical) : 연산의 결과가 boolean으로 리턴

다항 연산(Unary, 영어로 기억하세요) : 데이터가 1개만 있으면 수행되는 연산
이항 연산(Binary) : 데이터가 2개 있어야 수행되는 연산
삼항 연산(Ternary) : 데이터가 3개 있어야 수행되는 연산
-> 이게 python에서는 중요한 의미입니다.

(2) 할당 연산자
= : 오른쪽의 데이터를 왼쪽의 이름이 가리킬 수 있도록 하는 연산자
왼쪽에는 반드시 이름이 와야 하고, 오른쪽은 이름, 리터럴(데이터 표현), 계산식과 함수 호출 모두 가능합니다.
등호의 왼쪽이 아닌 곳에서 이름이 사용되면 이 경우는 이름이 아니고, 가리키는 데이터임을 기억합시다.

리터럴은 한 번 사용하면 절대 삭제되지 않는 곳에 저장한 뒤, 이를 쓴다고 하면 이거를 가져옴
무한으로 즐기며 재사용 합니다.

(3) 산술 연산자

• : 숫자끼리는 덧셈, 문자열과 숫자, 문자열과 문자열은 결합(이어붙이기)을 진행함

• : 예 그겁니다.

• : 숫자로 구성된 문자열을 가지고 연산을 한다면 신기하게 실제 곱하기를 진행함
  / : 당연히 나누기입니다.
  % : 나머지 입니다. 실수도 가능하긴 한데, 실수를 가지고 나머지를 구하면 결과가 이상하게 나올 수 있습니다.
  

(4) 증감 연산자
정수 변수에만 사용이 가능한 연산자 입니다.
++ : 정수 변수의 값을 1 증가 시킵니다.
-- : 정수 변수의 값을 1 감소 시킵니다.
주의 할 점 변수 앞에 ++ 뒤에 ++ 이 가능합니다. 앞에쓰면 prefix 뒤에 쓰면 postfix
prefix : 먼저 증가 이후, 작업
postfix : 작업 이후, 증가

(5) 비교 연산자 : 논리 연산자
연산자 : >, >=, <, <=, ==(같다), !=(다르다)
주의할 점
실수 데이터와 실수 연산의 결과를 비교할 때에는 주의하셔야 합니다.
==>머신 엡실론 문제가 있습니다.

(6) 산술 비트 연산
정수 데이터를 2진수로 변경해서 비트 단위로 연산한 다음에, 결과를 10진수 정수로 리턴
~(1의 보수)
^(exclusive OR, XOR)
&(and)
|(or)

and 와 or는 데이터 분석에서 아주 중요합니다. js에서는 잘 사용은 안한다.

~ : 단항 연산자로 1의 보수를 구해주는 연산자.
양수는 ~하면 절대값이 1증가 음수는 1감소임 절대값이
이거를 왜 하는거야?
색상 반전에 쓰인다.
뭐 xray 반전하면 잘보일 수 있기때문에 이런거에도 쓰임

^ : 같으면 0 다르면 1
두개가 같냐 다르냐를 확인할 때 매우 빠릅니다.
진품 가품 판별 등..

& : 둘다 1이면 1 아니면 0
0이 1개라도 있으면 0이다.
포맷
전체 공간을 쓸 수 있다.
포맷은 지우는게 아니라, 해당 공간을 전부 적을 수 있도록 하는 것이다.
1이면 이 공간은 사용중이니 쓸 수 없다. 0이면 사용중이 아니니 쓸 수 있다.
데이터를 삭제하거나 여러 개의 조건을 만족해야 하는 것을 만들 때 이용

| : 둘 중 하나만 1이어도 1 둘다 0이면 0
기록
0이랑 |하는게 붙여넣기 입니다.
데이터를 삭제 하거나 여러 개의 조건 중 하나 이상 만족하는 것을 만들고자 할 때 사용

&,|는 파이썬 행렬연산에서 많이 쓸겁니다.
얘들은 데이터를 낱개 단위로 계산하는것을 기억하자 (분석가 입장)
&& 와 ||는 통으로 계산하는 것이다. (값은 무조건 하나)

'>>: 왼쪽의 데이터를 오른쪽의 데이터 만큼 왼쪽으로 밀어주는 연산자

<<: 왼쪽의 데이터를 오른쪽의 데이터 만큼 오른쪽으로 밀어주는 연산자

(7) 비트 논리 연산자

!(not) : true는 false로 false는 true로 변경해줍니다.

&& : 둘 다 True인 경우에만 true 아니면 false

|| : 둘 다 false인 경우에만 false 아니면 true

short circuit 또는 don't care
&&는 앞에 조건이 false이면 뒤의 조건을 확인하지 않습니다.
||는 앞에 조건이 true이면 뒤의 조건을 확인하지 않습니다.
순서는 바꿔도 상관없다.

// 3의 배수이고 4의 배수인 숫자의 개수를 확인하고 싶어요
let cnt=0
for(let i =0 ; i<=100; i++){
	if(i%3==0 && i%4==0){
		cnt+=1
	}
}
for(let i =0 ; i<=100; i++){
	if(i%4==0 && i%3==0){
		cnt+=1
	}
}

둘 중에 하나를 선택해야합니다.
밑에 걸로 써야 합니다.
앞에가 false면 뒤에를 갈 필요 없음
3배수는 33개 4배수는 25개
결국 8번 이득봅니다.

근데 얼마 안되는 것 같지?
=> 데이터 분석 직무를 갑니다.
=> 데이터 겁나 많아요, 그럼 속도 차이 미쳤습니다.

결론 : and나 or 조건을 만들 때, 이런것도 생각하고 만들어야 한다!!!!

(8) 복합 할당 연산자
이름 연산자 = 데이터
a+=10
왼쪽 이름의 데이터와 오른쪽 데이터를 연산한 후 다시 왼쪽 이름이 가리키도록 하는 것

(9) 삼항 연산자
boolean 데이터가 나오는 식 ? 값1 : 값2
앞에 있는 식이 true면 값1, false면 값2
result=(a==b) ? 1 : 10
a==b가 true면 result는 1 아니면 10이 되는 것이다.

(10) 기타 연산자
new : 생성자를 호출해서 객체를 생성

this : 생성자 안에서 객체 자신을 가리키는 연산자

typeof : 자료형을 리턴하는 연산자

delete : 삭제하는 연산

instance of : 객체의 자료형을 확인

in : 속성의 존재 여부를 확인

(11) JS에서만 적용되는 연산
동일성 여부
== : 데이터의 종류에 상관없이 값만 같으면 true
=== : 데이터의 종류도 같아야 true

!= : 데이터의 종류에 상관없이 값이 다르면 true
!== : 데이터의 종류도 달라야 true

Falsy : false로 간주하는 데이터

0
null
undefined
""(비어있는 문자열)
이 위에 애들은 false로 간주합니다. 그래서 false처럼 동작합니다.

nullish operator
왼쪽의 데이터가 null 또는 undefined면 오른쪽 데이터를 대입하는 것
let r=데이터 ?? 데이터
왼쪽 데이터가 없다면 오른쪽을 넣어라