1. JSX 정의와 역할JSX(A syntax extension to JavaScript) - 자바스크립트의 확장 문법const element = example code JSX의 역할JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거침jsx에 따라 코드를 작성해도 최종적으로는 JavaScript로 나옴리액트에서는 createElement 함수가 이 역할을 수행함React.createElement( type, // 엘리먼트 유형, 타입 e.g. div, span [props], // 속성 [...children] // 현재 엘리먼트가 포함한 자식 엘리먼트)  JSX vs !JSX ### JSX를 사용한 코드const element = ( Hello Wor..

1. 리액트는 무엇인가?사용자 인터페이스를 만들기 위한 javascript 라이브러리- 라이브러리: 자주 사용되는 기능들을 정리해 모아 놓은 것- 사용자 인터페이스(UI): 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간 입력과 출력을 제어해 주는 것=> UI 라이브러리ex) AngularJS, React, Vue.js 프레임워크 vs 라이브러리- 프레임워크: 제어 권한이 프레임워크에 있음- 라이브러리: 제어 권한이 개발자에게 있음 2. 리액트의 장점- 빠른 업데이트 & 렌더링 속도Virtual DOM: 가상의 DOM(Document Object Model, 웹페이지를 정의하는 하나의 객체)DOM은 HTML element들을 tree 형태로 표현한 것, Virtual DOM은 이러한 DOM을 ..

1. HTML과 CSS- HTML (Hyper Text Markup Language) 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언더(마크업이란 문서나 데이터를 처리하기 위해 문서에 추가되는 정보) Tag(태그): 웹사이트의 구조- html: html의 시작과 끝- head: 웹 사이트의 속성 (제목, 설명 등의 메타 데이터)- body: 웹 사이트에서 보이는 콘텐츠한 사이트 내에서 여러 페이지를 방문하기 위해서는 수십장 이상의 페이지를 개발해야한다.이러한 문제를 해결하기 위해서 등장한 개념이 SPA - SPA (Single Page Application)하나의 페이지로 웹 사이트를  표현페이지가 하나라는 것은 html이 하나라는 것 - CSS (Cascading Style Sheets)html을 ..

영화진흥위원회(KOFIC)에서 제공하는 API를 활용해 보았다. 1. 키 발급 영화진흥위원회 오픈API OPEN API 서비스 영화진흥위원회 영화관입장권통합전산망에서 제공하는 오픈API 서비스로 더욱 풍요롭고 편안한 영화 서비스를 즐겨보세요. www.kobis.or.kr 먼저 Open API를 활용하기 위해 키를 발급받아준다. 사용 목적과 관리명 정도만 입력하면 간단하게 발급받을 수 있다. 몰랐는데 영화 관련 데이터가 생각보다 많이 제공되고 있었다. 네이버 블로거 중에 매주 박스오피스 통계를 제공해주시는 분이 계셔서 가끔 봤었는데 여기서 받아서 쓰시는 건가.. 생각함 2. 서비스 정보 확인 영화진흥위원회 오픈API 제공서비스 영화관입장권통합전산망이 제공하는 오픈API서비스 모음입니다. 사용 가능한 서비스..

네이버 개발자센터 API를 활용해 네이버 검색 시 플레이스에 나오는 5개의 장소를 출력해보는 코드를 작성해보았다. 1. 내 애플리케이션 등록 NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 네이버 API를 사용하기 위해서는 우선 위 사이트에서 내 애플리케이션 등록을 해줘야 한다. 여러 네이버 API가 있는데 여기서는 검색을 선택해 주어야 한다. 다른 카테고리를 선택하고 아래의 코드를 실행하면 401 오류 뜸 아마도 애플리케이션을 등록하고 난 후 내 애플리케이션 > 애플리케이션 정보에..

08-3 위상정렬 위상정렬 (진입차수를 이용한 정렬) 사이클이 없는 방향 그래프에서 노드 순서를 찾는 알고리즘 시간복잡도(노드 수: V, 에지 수: E): O(V+E) 항상 유일한 값으로 정렬되지 않음(정답이 여러개일 수 있음) 위상정렬 핵심이론 원리 이해하기 ① 진입차수 배열 초기화 진입차수: 자기 자신을 가리키는 에지의 개수 ② 진입 차수가 0인 노드를 선택하고 선택된 노드를 정렬 배열에 저장합니다. 위상 정렬 배열의 수가 원래 노드의 개수와 같다면 종료

08-2 유니온 파인드 유니온 파인드 union 연산 + find 연산 수행두 노드가 연결되어있는지 여부 확인 목적 > union, find 연산 - union 연산: 각 노드가 속한 집합을 1개로 합치는 연산, 노드 a,b가 a ∈ A, b ∈ B일 때 union(a,b)는 A∪B를 말함 - find 연산: 특정 노드 a에 관해 a가 속한 집합의 대표 노드를 반환하는 연산, 노드 a가 a ∈ A 일 때, find(a)는 A집합의 대표 노드를 반환 유니온 파인드 원리 이해하기 ① 초기화: 1차원 배열에 대표노드 저장 초기값은 각 노드가 모두 대표 노드 이므로 자신의 인덱스 값으로 초기화 ② 2개의 노드를 선택해 각각의 대표 노드를 찾아 연결하는 union 연산 수행 *union연산 시 항상 대표노드끼리 ..

08-1 그래프의 표현에지리스트에지를 중심으로 그래프를 표현- 가중치 없는 그래프 표현배열의 행은 2개면 충분> 만약 방향이 없는 그래프라면 1,2와 2,1을 모두 배열에 넣어주는 방법이 있음 (혹은 배열에는 1,2만 넣고 꺼내오는 코드에서 1,2와 2,1을 사용 가능하게 해도 됨)- 가중치 있는 그래프 표현행을 3개로 늘려 3번째 행에 가중치 저장벨만-포드, 크루스칼 알고리즘에서 사용특정 노드와 관련되어 있는 에지를 탐색하기 쉽지 않음ex) 2에서 출발하는 노드를 알고싶다면 s노드 열 전체를 탐색해야 해서 어려움 인접행렬2차원 배열을 자료구조로 이용하여 그래프를 표현N = [N][N]노드와 관련된 에지를 탐색하려면 N번 접근해야하므로 노드 개수에 비해 공간효율성이 떨어짐노드 개수가 많은 경우 아예 2차..