하늘 보면서 살자구요

DOM Document Objects Model 이라 불리는 문서 객체 모델이란, HTML의 요소인 head, body, div 등의 문서 객체를 조합해서 만든 전체적인 형태를 말합니다. 즉, HTML의 요소를 자바스크립트에서 조작하고 활용할 수 있습니다. 문서 객체를 조작할 때는 특별히 DOMContentLoaded 이벤트를 사용할 수 있습니다. HTML 페이지는 코드를 위에서 아래로 실행하는데 이 이벤트는 해당 페이지를 모두 읽고 나서 실행시키는 이벤트입니다. 즉, html 문서 안에 script가 어디에 존재하여도 결과는 동일하게 페이지가 등장한다는 것입니다!! 즉, 자바스크립트를 통해 HTML 각 요소에 접근할 수 있습니다. head, body, title 등 HTML 요소에 대해서는 docume..

객체 객체(object)란, 이름(키)과 값으로 구성된 '속성'을 가진 기본 데이터 타입이다. 함수, 배열 등이 객체에 해당한다. 객체의 형태는 파이썬의 딕셔너리와 유사하다. 키와 값의 묶음으로 정의되기 때문이다. 객체는 속성으로 구성되어 있는데 속성 중 함수는 특별히 '메소드'라고 부른다. 메소드 내에서 자기 자신의 속성을 출력하고 싶을 때는 this.키 로 해당 속성에 접근할 수 있다. 객체에서 값을 불러올 때는 객체[키] 혹은 객체.키 로 요소에 접근할 수 있다. 객체의 속성을 제거할 때는 다음 키워드를 이용한다. delete 객체.속성 자료형은 객체와 객체가 아닌 것으로 나눌 수 있다. 그러한 자료형은 기본 자료형으로 숫자, 문자열, 불 등이 있다. 자료형 변환 함수(Number, String, ..

함수 객체 지향 프로그래밍에서 중요한 기능 중 하나다. 함수란, 입력을 받고 특정한 작업을 수행한 후 결과를 출력하는 기능이다. 여기서 입력값은 매개변수, 결과값은 리턴값이라고 부른다. 함수는 코드의 집합이라고도 한다. 임의로 함수를 만들 수 있는데, 그 내용들은 기존의 함수들로 이루어지기 때문이다. 그렇다면 함수는 굳이 왜 만드는 걸까? 함수로 코드를 정의해 놓으면 반복 작업을 피할 수 있고 그만큼 코드의 가독성이 좋아진다. 함수만 수정하면 되기 때문에 유지보수가 적다는 장점도 있다. 선언적 함수와 익명 함수 선언적 함수는 다음과 같이 생성한다. function 함수이름(매개변수) { 실행문 실행문 return 리턴값 } 이러한 선언적 함수는 기능이 많아지거나 함수를 덮어써야 하는 경우 처리과정에 대해..

배열 배열(array)은 여러 자료를 묶어서 활용할 수 있는 자료형이다. 배열의 형식은 다음과 같다. [ 요소, 요소, 요소, ···, 요소] 배열은 문자열과 유사하게 인덱스로 요소를 사용한다. 주의해야 할 것은 첫번째 요소의 인덱스는 0이다. 배열 요소의 개수는 배열.length로 확인할 수 있다. 배열은 const로 선언한다. 반면, push() 메소드로 뒷순서로 요소를 추가할 수 있다. 혹은 인덱스로 자리를 지정하여 요소를 추가할 수 있다. 요소를 제거할 때는 splice() 메서드를 이용해 제거한다. splice(인덱스, 제거할 요소 개) 메서드는 인덱스 위치부터 해당 개수의 요소를 제거한다. indexOf(요소) 메서드는 특정 값의 위치를 반환한다. 이를 이용해 요소는 알지만 위치를 모를 때에도..

조건문 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용한다. 비교 연산자와 논리 연산자를 이용해 조건을 구성하고 참이냐 거짓이냐에 따라 다른 코드를 실행한다. 아래는 일반적인 if else 구문이다. if (조건) { 참일 때 실행할 문장 } else { 거짓일 때 실행할 문장 } 참일 때 조건문을 넣으면 중첩 조건문이 된다. 만약 겹치지 않는 3가지 이상의 조건으로 나누는 경우 파이썬의 elif와 유사하게 if else if 조건문을 사용할 수 있다. if if if ...로 쓰는 건 좀 그런 것 같아서 형식상 앞에 else를 붙인 느낌 가능하다면 논리 연산자를 이용해 다음과 같이 간결하게 중첩 조건문을 사용하지 않는 것이 좋다. switch 조건문 switch (자료) { case 조건A: 예문..

어쩌다보니 혼공js 책을 얻었는데 책도 있는 김에 오랜만에 혼공단 10기를 시작했다. 역시 시작은 Hello World부터 띄워야지 자바스크립트란? HTML과 CSS로 이루어진 웹사이트에 자바스크립트의 등장으로 '기능'이 부여됐다. 정적인 웹 화면을 동적으로 만들거나 이벤트 처리가 가능해졌다. 이후 자바스크립트로 서버 사이드도 일부 처리 가능하게 되고 웹앱 같은 어플리케이션도 동일한 기능을 위해 새로운 언어를 사용할 필요성이 적어졌다. 기본적으로 html 코드 사이에 태그로서 동작한다. 웹의 개발자 도구의 console에서 간단하게 여러 명령어를 실행해 볼 수 있다. 실행 결과가 바로바로 뜨고 오류도 상세히 출력된다. 자료형 웬만해서는 대부분의 프로그래밍 언어의 자료형은 유사하다. 기본적으로 문자열, 숫..

정리된 데이터에서 유의미한 관계를 찾기 위해 통계를 이용한다. 평균 일반적으로 (산술)평균은 값을 모두 더해 개수로 나눈 것을 의미한다. 이와 달리 가중 평균은 각 값의 중요도에 따라 가중치를 부여하여 계산하는 평균값이다. 여기서는 나누는 값이 개수가 아닌 가중치의 총합이다. 이외에도 평균을 구하는 방식은 다양하다. 따라서 요약된 통계량은 오해를 일으키기 쉽기에 주의해야 한다. 중앙값 말 그대로 순서대로 놓았을 때 중앙에 위치한 값이다. 중복된 값을 포함하느냐에 따라 값이 달라지기도 한다. (홀수의 경우 중앙의 두 값을 평균한다) 분위수 분위수는 데이터를 늘어 놓았을 때 균등한 간격으로 나누는 기준점을 말한다. 주로 사분위수를 사용하며, (25%, 50%, 75%)로 각각 (제1, 제2, 제3)사분위수로..

3단원은 이다. 저번에 데이터를 수집했다면 이번엔 수집한 데이터를 편집한다. 전에 웹에서 데이터는 CSV, JSON, XML 등의 형식으로 주어진다고 배웠다. 이러한 데이터들은 파이썬의 '판다스'를 통해 '데이터 프레임'의 모습으로 정리된다. 파이썬의 방식으로 엑셀을 다루는 느낌이다. 파이썬은 문자열을 다루는 게 편리한 것 같다. 몇 가지 명령어로 셀 하나하나 필요한 부분만 남길 수 있고, 심지어 다른 열의 정보를 바탕으로 크롤링을 통해 누락된 셀을 자동으로 채울 수 있다. 더군다나 이 모든 과정을 함수로 자동화할 수 있다는게 가장 큰 장점인 것 같다. 같은 인덱스로 저장된 파일에 대해서 동일한 알고리즘으로 빠르게 원하는 모습으로 바꿀 수 있기 때문이다. 기본 미션 #2 데이터 프레임에서 열을 선택할 때..