엘리스 AI트랙 5기 2차 프로젝트인 데이터 분석 웹 서비스 프로젝트가 시작되었다. 🐰 3주간 진행되는 이번 프로젝트는 데이터 분석을 통해 '1개 이상의 그래프가 들어간 웹서비스'를 제작하는 것이다. 1차 프로젝트는 모든 팀이 포트폴리오 공유 웹 서비스라는 주제로 진행하는 것이었고,스켈레톤 코드와 필수 구현기능도 엘리스측에서 픽스해주어서 바로 기능 개발부터 시작했었다. 2차 프로젝트부터는 자유주제인줄 알고 내가 만들고 싶은 서비스를 만들어 볼 수도 있겠다 싶어서 기대했었는데이번 프로젝트도 주어지는 주제 안에서 세부적인 주제를 정하는 방식으로주어진 주제가 무려 환경문제이다..😮 환경문제와 관련된 데이터를 시각화하는 웹 서비스라니..그래도 우선 착실하게 자료를 조사하고 첫 팀 미팅 때 제안할 아이..
JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있다. 이는 C 또는 Java 등 다른 언어가 가진 모델과는 다르다. 이벤트 루프 (Event Loop) : Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행된다. 브라우저는 단일 스레드에서 이벤트 드리븐(event-driven)방식으로 동작한다. 자바스크립트는 단일 스레드 기반의 언어이다. (💡 자바스크립트가 단일 스레드 기반의 언어라는 말은 '자바스크립트 엔진이 단일 호출 스택을 사..
1️⃣ 프로젝트와 데이터 분석 데이터 : 현실 세계의 일들을 관찰, 측정해서 얻은 값 정보 : 데이터를 처리해서 얻는 의미있는 값 데이터 분석 : 데이터를 활용하여 원하는 정보를 얻어내기 위한 일련의 과정 데이터 분석 프로젝트 문제정의 → 가설 설정 → 데이터 준비 → 데이터 분석 → 결과 정리 1) 문제 정의 현재 풀고자 하는 문제가 무엇인지를 명확히 정의 여행을 위해 가장 저렴한 가격으로 항공편을 예매하고자 한다. → 문제 정의 : 언제 비행기 표를 예매해야 할까? 2) 가설 설정 문제를 해결하기 위한 데이터 분석의 토대인 가설 설정 - 문제와의 관련성 고려해야 한다. - 정의한 문제 해결을 위한 가설 설정을 통해 필요한 데이터 셋과 데이터 분석 방향을 이해할 수 있다. 가설 1 - 비수기에 구매하면..
Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org 1️⃣ Redux 소개 A Predictable State Container for JS Apps JavaScript application들의 state(상태)를 관리하는 방법 - 앱 전체 상태를 쉽게 관리하기 위한 라이브러리이다. - Redux의 많은 개념들이 Flux pattern에서 차용되었다. - redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 Redux를 활용한 앱 구축 사례가 많다. - React와 함께 사용되면서 유명해졌지만, React만을 위한 라이브러리가 아니다. (React, Angular, Vue, Vanil..
1️⃣ Matplotlib 소개 파이썬에서 데이터를 그래프나 차트로 시각화할 수 있는 라이브러리 그래프 그려보기 import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 2, 3, 4, 5] plt.plot(x, y) 그래프 제목, 라벨 작성하기 import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 2, 3, 4, 5] plt.plot(x, y) plt.title("First Plot") plt.xlabel("x") plt.ylabel("y") subplots - 보통 여러 개의 그래프를 그릴 때 사용한다. - figure와 axes를 직접 생성한다. import matplotlib.pyplot as ..
1️⃣ 조건으로 검색하기 데이터 프레임에서 각 컬럼마다 조건을 충족하는 값만 추출할 수 있다. Numpy의 마스킹 연산처럼 조건식을 직접 쓸 수도 있고, query() 함수를 이용하는 방법도 있다. 1) masking 연산 import numpy as np import pandas as pd df = pd.DataFrame(np.random.rand(5, 2), columns=["A", "B"]) df["A"] < 0.5 2) 조건에 맞는 DataFrame row 추출 import numpy as np import pandas as pd df = pd.DataFrame(np.random.rand(5, 2), columns=["A", "B"]) # 마스킹 연산 df[(df["A"] < 0.5) & (df[..
1️⃣ Pandas 소개 구조화된 데이터를 효과적으로 처리하고 저장할 수 있는 Python 라이브러리 - Array 계산에 특화된 NumPy를 기반으로 구성되어 다양한 기능을 제공한다. - 특히, 행과 열을 가진 2차원 데이터와 엑셀 데이터에 대해서 데이터 프레임이라는 효율적인 자료구조를 제공하여 조금 더 익숙하고 강력한 데이터 연산을 제공한다. 2️⃣ Series 데이터 - numpy array가 보강된 형태로서 Data와 Index를 가지고 있다. import pandas as pd data = pd.Series([1, 2, 3, 4]) data - 인덱스를 가지고 있고 인덱스로 접근 가능하다. data = pd.Series([1, 2, 3, 4], index=['a', 'b', 'c', 'd']) ..
정적 웹페이지 : 고정된 HTML, CSS, 자바스크립트, 이미지 등을 서버가 줘서 변하지 않는 웹페이지 ex) 단순한 정보소개 페이지 동적 웹페이지 : 게시판이나 통계페이지처럼 데이터베이스 등 계속 바뀌는 내용에 따라 사용자가 방문할 때마다 서버가 그때그때 HTML 내용들을 렌더링해서 보냄 ex) JSP, PHP MPA 더보기 - 여러개의 페이지로 구성되어 요청 때마다 정해진 페이지를 반환한다. - 주로 ssr 방식으로 html문서 렌더링 - 사용자가 페이지를 요청할 때마다 요청한 UI와 필요한 데이터를 서버가 HTML로 파싱해서 보여주는 방식 - 사용자가 아주 사소한 요청을 하더라도 매번 전체 페이지를 렌더링 해줘야함 - 완성된 형태의 HTML파일을 서버에서 전달받기때문에 검색엔진이 페이지를 크롤링하..
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML문서이고, (PDF나 이미지 등 다른 형태일 수도 있음) 자원의 주소는 URI (Uniform Resource Identifier)에 의해 결정된다. 브라우저의 기본 구조 사용자 인터페이스 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. (주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등) 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어. 렌더링 엔진 요청한 콘텐츠를 브라우저 화면에 표시. (ex. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시) 통신 HTTP요청과 같은 네트워크 호출에 사용. 독립적인 인터페이스로 각 플랫폼 하부에서 실행. 자바스크립트 해석..
1️⃣ NumPy 소개 NumPy (Numerical Python) Python에서 대규모 다차원 배열을 다룰 수 있게 도와주는 라이브러리 - Numpy 라이브러리는 효율적인 데이터분석이 가능하도록 N차원의 배열 객체를 지원한다. - Numpy의 배열은 파이썬의 list()보다도 빠른 연산과 효율적인 메모리 사용이 가능하기 때문에 빅데이터 분석 등에 널리쓰인다. 왜 다차원 배열을 다루는가? - NumPy를 사용하는 이유 1) 데이터의 대부분은 숫자 배열로 볼 수 있다. ex) 흑백이미지는 해당 픽셀에 대한 명암을 나타내는 2차원 배열 데이터로 나타낼 수 있다. 사운드 데이터는 시간 대비 음악을 나타내는 1차원 배열로 볼 수 있다. 2) 파이썬 리스트에 비해, 빠른 연산을 지원하고 메모리를 효율적으로 사용..
