본문 바로가기

전체 글323

빅데이터 부트캠프 82일차 (React) React - 메타(구, 페이스북)에서 만든 프론트 엔드 라이브러리 - Single Page Applicationi(SPA) 개발시 사용 설치 - vscode cmd에서 [npx create-react-app 폴더명] 실행 및 종료 - json파일이 있는 폴더로 위치 이동후 cmd에 npm start - ctrl+c : React 종료 JSX - 리액트 구조 생성시 사용되는 JavaScript에 XML을 추가한 js 확장 문법 - 하나의 파일에 JavaScript와 HTML을 동시에 작성할 수 있어 편리함 규칙 - react에서는 태그 클래스명 설정을 class가 아닌 className 사용! ex) (X) => (O) - 태그는 반드시 닫혀야함 ex) or - 2개 이상의 태그가 나열된다면 반드시 상위.. 2022. 11. 3.
빅데이터 부트캠프 82일차 (JavaScript) JSON(JavaScript Object Notation) - 데이터를 문자열의 형태로 주고 받도록 만들어진 내장객체 - JavaScript는 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원 - stringify() = JSON 객체 -> 문자열 변환 - parse() = 문자열 -> JSON 객체 변환 - JSON에서 이름 작성시 작은 따옴표('') 사용 불가 => 큰 따옴표("")만 사용 XMLHttpRequest - 서버와의 상호작용을 위해 사용하는 JavaScript 객체(XML 이외의 데이터들도 수집가능) - readyState = XMLHttpRequest 객체의 현재 상태 출력 (4가 정상적인 실행을 의미) - status = 서버의 문서 존재 여부 출력 (200= 문서 .. 2022. 11. 3.
빅데이터 부트캠프 81일차 Context - 실행할 코드에 필요한 환경 정보(변수, 변수값, ...)들을 저장한 객체 - Record = 변수, 변수값 - Outer = 외부 환경 참조 - 클로저(closure) = 자기가 갖고 있지 않은 외부 변수를 참조하는 함수 (자기가 갖고 있는 변수를 사용하면 클로저가 X) - 스코프(scope) = 변수에 접근할 수 있는 범위 (global, local) - 렉시컬 스코프(Lexical Scope) = 함수가 호출된 시점에서의 값을 참조하는 것이 아니라 생성 당시 환경의 값을 참조하는 스코프의 특징 삼항연산자 - [(조건) ? 참일때 실행문 : 거짓일때 실행문] 형식으로 조건문을 입력하는 것 DOM (Document Object Model, 문서 객체 모델) - XML이나 HTML 문서의.. 2022. 11. 2.
key=lambda를 이용한 2차원 정렬 파이썬의 익명함수인 lambda를 이용하면 [[0,1],[2,4]]와 같은 2차원의 리스트를 더욱 편리하게 정렬시킬 수 있음 ★ sort()와 sorted()는 내림차순을 설정할 수 있는 reverse와 정렬의 기준을 설정하는 key 파라미터를 선택적으로 입력할 수 있음! ex) li = [[0,4], [1, -4], [1,3], [2,3], [3,4]]인 경우 1. li.sort(key=lambda x:x[1]) = 2차원 리스트의 두번째 원소를 기준으로 오름차순(1순위), 두번째 원소가 같을 경우 첫번째 원소 기준으로 다시 오름차순(2순위) 정렬 => [[1, -4], [1,3], [2,3], [0,4], [3,4]] 2. li.sort(key=lambda x:-x[1]) = 2차원 리스트의 두번째 .. 2022. 11. 1.
빅데이터 부트캠프 80일차 ※ 렌더링 = HTML,CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정 함수 정의 1. 선언식 function 함수명(인자) {실행식} ※ JS에서는 Java와 다르게 정의된 인자수 보다 초과되는 인자를 입력해도 초과되는 인자가 무시되어 실행됨 ex) function add(x, y){return x+y} => add(2,5) = add(2,5,9) = 7 2. 표현식 let 함수명 = function(인자) {실행식} 3. 화살표 함수 (표현식에서 function 대신 => 입력) let 함수명 = (인자) => {실행식} ※ 일반적으로 화살표 함수로 함수 정의를 하는 추세 즉시 실행 함수 - 함수가 정의되자마자 바로 실행되도록 설정하는 방법 - 함수의 실행식{} 다음.. 2022. 11. 1.
count()와 Counter() 리스트에서 특정 원소의 개수를 구하는 방법으로 Python의 기본 메소드인 count()를 이용하는 방법과 Collections 모듈의 Counter를 이용하는 방법이 있다. count() - 시간복잡도가 O(N)이고 보통 for문을 이용하여 리스트의 각 원소의 개수를 파악하기 때문에 O(N^2)의 시간복잡도 Counter - from Collections import Counter로 따로 import 해줘야함 - 리스트를 전체적으로 한번에 싹 훓고 딕셔너리 형태로 각 원소의 개수를 반환하기 때문에 O(N)의 시간복잡도 - 서로 같은 key를 갖고 있다면 Counter 간의 연산 가능 (만약 전체적으로 큰 Counter로 작은 Counter를 빼면 빈값 반환) - Counter()를 적용하여 결과값을 도.. 2022. 10. 31.
itertools (순열과 조합) itertools - 파이썬에서 반복되는 데이터를 처리하는 기능을 포함하고 있는 라이브러리 - 코테에서 유용한 메소드는 순열 함수인 permutations과 조합 함수인 combinations - import itertools - 시간복잡도 = O(N!) 주요 메서드 - 주요 메서드 모두 리스트를 이용하며 결과값도 리스트로 반환함 - permutations(리스트, 숫자) = 해당 리스트에서 지정한 숫자만큼 데이터를 뽑아(중복 X) 일렬로 나열하는 모든 경우를 반환 (순열) - combinations(리스트, 숫자) = 해당 리스트에서 지정한 숫자만큼 데이터를 뽑아(중복 X) 순서를 고려하지 않고 나열하는 모든 경우를 반환 (조합) - product(리스트, 숫자) = 데이터의 중복이 허용되는 permu.. 2022. 10. 31.
bisect bisect - 파이썬에서 이진 탐색을 쉽게 구현할 수 있도록 해주는 라이브러리 - 정렬된 리스트에서 특정 범위에 속하는 원소 개수를 구할 때 유용함 (bisect는 숫자 데이터에서만 적용 가능!!) - 시간복잡도 = O(logN) import bisect - bisect_left(리스트, 숫자 데이터) = 해당 리스트에서 지정한 숫자 데이터가 들어갈 수 있는 인덱스의 최솟값 반환 => 오름차순으로 정렬된 리스트에서 해당 숫자 데이터보다 작은 데이터의 개수 - bisect_right(리스트, 숫자 데이터) = 해당 리스트에서 지정한 숫자 데이터가 들어갈 수 있는 인덱스의 최댓값 반환 => 오름차순으로 정렬된 리스트에서 해당 숫자 데이터보다 큰 숫자 데이터의 개수 ex) A=리스트, a, b= 서로 다른 .. 2022. 10. 31.
빅데이터 부트캠프 79일차 (JavaScript) JavaScript - 웹페이지를 동적으로 만들어주는 언어 - 객체 기반의 스크립트 프로그래밍 언어 - Python과 같은 인터프리터 방식 명령 적용 방식 - 내부 body script = 파일 내에서 태그 내에 코드 작성 - 외부 body script = 를 통해 외부에서 작성한 js코드 적용 변수 선언 방식 - var = 기본적인 선언 방식 (처음에 선언한 후 다음에 또 다른 줄에서 같은 변수를 재선언하면 재선언한 변수가 적용) - let = 한번 선언하면 다음에 재선언 불가(일종의 전역변수로 {}내에서 지역변수로 재정의하여 사용가능) - const = 한번 선언하면 다음에 재선언 불가 (일종의 상수로 {}내에서 지역변수 재정의도 불가능) => 코드의 안정성을 위해 var 사용은 지양되는 추세 기본 .. 2022. 10. 31.
빅데이터 부트캠프 79일차 (CSS) float - 웹 페이지에서 이미지를 텍스트와 어떻게 부유시킬지 설정하는 속성 ※ 부유 = 기본적인 문서 배치에서 벗어나 요소의 모서리를 페이지의 왼쪽이나 오른쪽으로 이동시키는 것 - left = 이미지를 페이지 왼쪽, 텍스트를 페이지 오른쪽으로 배치 - right = 이미지를 페이지 오른쪽, 텍스트 페이지 왼쪽으로 배치 clear - float의 영향을 받지 않도록 하는 속성 - float과 마찬가지로 left, right, both 속성 존재 - .clearfix:after{ content: ""; display: block; clear: both } position - 해당 태그를 어디로 위치시킬지 설정하는 속성 - top, bottom, left, right 등의 위치 속성 요소와 함께 입력 - .. 2022. 10. 31.
자주 쓰이는 math 모듈 메소드 정의 - 수학 함수 사용을 가능하게 하는 파이썬 모듈 - import math 메소드 종류 - ceil() = 올림 - floor() = 내림 - gcd() = 최대공약수 계산 - lcm() = 최소공배수 계산 - factorial() = 팩토리얼(!) 계산 - sqrt() = 제곱근 계산 2022. 10. 29.
빅데이터 부트캠프 78일차 CSS(Cascading Style Sheets) 정의 - HTML 등의 마크업 언어로 작성된 문서가 실제로 웹 사이트에 표현되는 방법을 정해주는 스타일 시트 언어 종류 1. 인라인 스타일 - 태그 안에 style 속성을 이용하여 CSS 적용 2. 임베디드 스타일 - (HTML의 CSS 태그)을 이용하여 CSS 적용 3. 링크 스타일 - CSS 파일을 따로 만들어 CSS파일 링크를 통해 적용 선택자(Selector) 1. 태그 선택자 -> [태그명 {속성명 : 속성값;}] 형태로 입력하여 설정 2. 그룹 선택자 -> [태그명1, 태그명2, ... {속성명 : 속성값;}] 형태로 입력하여 여러 태그에 대해 공통적으로 설정 3. 클래스 선택자 -> [.클래스명 {속성명 : 속성값;}] 형태로 입력하여 설정 .. 2022. 10. 28.
빅데이터 부트캠프 77일차 Front-End - 웹에서 프론트엔드는 사용자에게 시각적으로 보여지는 부분, 즉 사용자가 볼 수 있는 화면(인터페이스)을 의미 - UI(User Interface) = 사용자 환경 - UX(User eXperience) = 사용자 경험 HTML(HyperText Markup Language) - 하이퍼텍스트(HyperText) = 참조를 통해 현재 웹 페이지에서 다른 웹 페이지로 이동할 수 있도록 하는 텍스트 - 마크업 언어(Markup Language) = 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종 -> HTML = 참조를 통해 현재 웹 페이지에서 다른 웹 페이지로 이동할 수 있도록 하는 기능을 가진 문서의 구조를 설계하기 위해 사용하.. 2022. 10. 27.
빅데이터 부트캠프 76일차 JSP(Java Server Page)- HTML 코드에 JAVA 코드를 넣어 동적 웹 페이지를 생성하는 웹 어플리케이션 도구 (HTML에 Java를 추가적으로 사용할 수 있도록 한 것)- JSP에 Java 코드를 사용할 수 있지만 Java로 코드를 많이 작성하면 그만큼 효율성이 감소하여 Java 코드를 최소화하는 것이 좋음※ 원래 HTML에서는 Java로는 코드 작성이 불가능 하고 JavaScript를 이용하여 태그 안에 코드를 작성함- jsp파일에서는 특정 변수명이 기본적으로 특정한 타입의 객체로 인식되도록 설정되어 있음기본 객체 변수- out -> PrintWriter 객체- request -> HttpServletRequest 객체- session -> HttpSession 객체- pageCon.. 2022. 10. 26.
빅데이터 부트캠프 75일차 세션(Session)- client 별로 서버에 저장되는 정보 - 서버가 종료되거나 유효시간(마지막 접근 시간 이후의 지정한 시간)이 지나면 자동 삭제됨- 세션에는 데이터를 지칭할 이름과 데이터가 저장됨 (이름-데이터는 key-value와 비슷한 형식)- 자바에서 세션을 생성하는 방법 (request = HttpServletRequest 객체)-> HttpSession session = request.getSession() HttpSession- setAttribute(이름, 데이터) = 세션에 지정한 이름으로 데이터 저장 - getAttribute(이름) = 세션에 저장된 데이터 조회 (사전에 정의한 데이터에 대한 이름과 일치해야 함)- invalidate() = 섹션 객체 자체를 삭제- removeA.. 2022. 10. 25.