230221_38일차 : JavaScript / 파이썬

1교시, 2교시, 3교시, 4교시 - JavaScript(jQuery/Ajax)

1. jQuery

(3) jQuery 실습

연두 ) 숫자가 계속해서 더해지는 변수가 아니라 1 또는 0 으로 바뀌는 것이므로 굳이 변수 선언할 필요없이 직접 넣어주는게 단순하다

2. Ajax - '비동기통신'

(1) Ajax(Asynchronous Javascript and XML)

- Ajax란? 필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 진행하는 비동기적인 웹 어플리케이션을 제작하기 위한 웹개발 기법

- 동기통신(Synchronous) : request가 있으면 해당 response가 전달될 때까지 다른 request를 요청할 수 없는 통신방법

(순서대로 진행하며, 사용자의 요청이 들어오면 그 응답이 끝날 때까지 다른 작업을 수행하지 못함)

  비동기통신 : request를 보내더라도 response를 언제받아도 상관없이 다른 request를 요청할 수 있는 통신방법

(여러 요청을 확인하여 동시에 수행을 시작함. 효율적)

검색결과 확인 / 아이디 일치여부확인, 검색어자동완성

=> 동기vs비동기 통신 차이 : 사용자 입장에서는 화면갱신이 없고, 요청과 응답 사이 시간에도 다른일을 할 수 있어 편리하고 빠른듯한 환경을 느낄수 있다

 

(2) 데이터형식 : 데이터를 주고받을 때는 특정한 형식으로 맞춰주어야한다

① CSV(comma-separated values) : 쉼표를 기준으로 항목을 구분하여 저장한 데이터(+엑셀과 호환되는 장점/배열과 유사)

처음본사람이 쉽게 이해하기 어려우나, 그렇기 때문에 용량이 작다

② XML(eXtensible Markup Language) : 다목적 마크업 언어로 태그 등을 이용하여 데이터의 구조를 작성하는 기술(데이터 관련 수정이 잦은 경우)

country, name 등 다양한 태그를 통해 가독성이 좋지만 그만큼 데이터의 용량이 커진다

③ JSON(JavaScript Object Notation) : '키-값' 쌍으로 이루어진 데이터 오브젝트를 전달하기 위한 개방형 표준 포맷

좌) 배열 [], 객체 {}, 객체 {} 순으로 이뤄져있음 > 인덱스와 . 의 순서로 접근

(3) aJax 또는 Fetch로 데이터 가져오기

- Open API 사용하는 방법

① 회원가입

: 구글 '영화진흥위원회 API' 검색 > 해당 사이트에서 회원가입 > 로그인 

② 내가 필요한 API : 주간주말 박스오피스 선택

③ 샘플코드 보기 : JSON 선택 (해당페이지의 맨하단)

④ key 신청(사용자의 id부여) - 사이트별로 방법이 다양함 / 상단 '키 발급/관리' - 키발급받기 - 본인의 로컬에 올리므로 로컬주소 확인하여 복붙(주의:/제외) - 발급키 발급완료 

⑤ 샘플코드 뜯어보기

⑥ 모르는 내용 문서, doc 확인

⑦ Url 테스트

정상적으로 나온 화면을 확인 > 위의 url을 복사하여 사용한다

- 데이터 가져오기

① Ajax

+빨강) success 시, 실행될 함수는 처음에 res라는 매개변수를 이용하여 콘솔창의 가져온 데이터들을 확인하여 내가 원하는 정보로 접근한다.

② Fetch : aJax와는 다르게 res.json() 과 같이 내가 가져온 데이터타입을 명시하여 파싱해야한다

보라 ) body : '123' 는 어떤 데이터를 보낼 건지를 나타냄. 보내고자하는 데이터가 배열이면 배열의 형태로 작성

 

5교시, 6교시, 7교시, 8교시 - 파이썬(NumPy/Pandas)

1. NumPy

(5) 실습 - 키와 몸무게로 bmi구하기

① 관련파일 업로드 & 파일내용확인

파일을 드래그엔 드랍하여 upload

몸무게와 키 / p(파운드) / ,로 구분

② txt파일 불러오기

③ BMI 구하기

(6) 라이브러리 추가기능

- Boolean 색인(인덱싱) : 배열 안에서 조건을 충족하는 True인 값들만 추출해주는 인덱싱 방법

=> 배열[인덱스번호] 가 아닌, 배열[조건]

+ 아래 우측 ) 서로 다른 넘파이배열과 함께 원하는 조건을 찾는 경우 : 찾고자하는 넘파이배열에서 '조건이 True인 식'이 [대괄호에]에 들어간다  

- 범용함수(Universally Function) : numPy에서 제공하는 함수 / sum(), mean(), max(), min() 등

2. Pandas

(1) Pandas

- Pandas란? Panel datas / 텍스트 형태의 데이터를 표의 형태로 정리하여, 분석하기 편리하도록

- 데이터구조 : Series가 모여서 DataFrame을 이룬다

+ index/Columns

(2) Pandas 사용하기 - Series

① Pandas 라이브러리 불러오기

② Series 생성하기

③ Series 데이터 확인하기

④ Series에 이름을 지정(데이터에 정보를 나타내기)

⑤ Series 데이터 구조의 연산( Series 데이터 구조는 넘파이배열의 형태--> 연산이 가능)

⑥ Series 인덱싱, 슬라이싱 + boolean인덱싱 / and, or => &. | / 다중조건은 우선순위 () 필수