분류 전체보기50 [MongoDB] 소개 Mongo(Humongous) DB? NoSQL DBMS의 한 종류 MongoDB는 NoSQL 로 분류되는 *크로스플랫폼 도큐먼트 지향 데이터베이스 시스템 더보기 *크로스플랫폼이란? 하나 이상의 플랫폼에서 실행가능한 소프트웨어 예) 한 앱이 안드로이드와 아이폰에서 기능상, 외관상 차이 없이 똑같이 실행 된다면 이러한 앱을 크로스 플랫폼으로 개발된 것이라고 볼수 있음 mongo는 humongous를 줄인 표현, 엄청 큰 DB 라는 뜻이다. MongoDB의 특징 JSON 형태의 동적 스키마형 문서 사용 (= BSON) 가장 기본적인 데이터를 문서 Document 라고 부른다. (RDBMS = Row) 이 Document 의 집합을 Collection 이라고 함 (RDBMS = Table) Collection.. 2020. 5. 27. React Hook 이해하기 - useEffect (Effect Hook) useEffect가 하는 일 리액트에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야 하는지를 말한다. 리액트에게 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 후 Effect를 불러온다. useEffect를 컴포넌트 안에서 불러내는 이유 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 우리가 지정한 state 또는 props에 접근 할 수 있게 되고, 특별한 API 없이도 값을 가져올 수 있기 때문이다. useEffect는 렌더링 이후 매번 수행되나? useEffect는 렌더링 이후 매번 수행 된다. ( 첫번째 렌더링 ~ 이후 모든 업데이트에서 수행 됨 ) 마운팅, 업데이트라는 방식으로 생각하는 것 보다 -> 렌더링 이후에 발생 하는 것 이라고 생각하는 것이 쉽다. useEffect.. 2020. 5. 25. React Hook 이해하기 - useState (State Hook) React Hook, useState useState는 state를 함수 컴포넌트 안에서 사용할 수 있도록 해준다. 기존에는 state를 추가하고, 변경하고 싶을 때 클래스(Class) 컴포넌트로 바꾸어 사용했으나, 이제 함수형 컴포넌트안에서 Hook을 이용해 state를 사용할 수 있다. Hook의 규칙 최상위 레벨에서만 Hook을 호출해야 한다. 오직 React 함수 내에서만 Hook을 호출해야 한다. useState를 사용하여 state 초기화 하기 import React, { useState } from 'react'; export default function Sample() { // 새로운 state 변수 선언 및 할당 const [count, setCount] = useState(0); } .. 2020. 5. 25. [JavaScript] Generator Function 이해하기 Generator Function GeneratorFunction GeneratorFunction 생성자는 새로운 generator function 객체를 생성한다. JavaScript 에서 모든 generator function 은 실제로 GeneratorFunction object 이다. developer.mozilla.org Generator Function을 처음 알게 된건, Redux-saga를 통해 알에 되었다 모양은 function* 이렇게 function 선언 다음에 * 가 붙은 모양이다. function* generatorTest() { yeild console.log(5); yeild console.log(10); } 일반 함수는 함수를 호출하면 Funtion안에 선언된 로직들이 일괄 .. 2020. 5. 25. 리덕스(Redux), 리덕스 미들웨어(Redux-Middleware) 이해하기 리덕스(Redux) 이해하기 리덕스(Redux)란? 스토어(Store)라는 저장소를 가지고 상태데이터(State)들의 모음을 저장해두고 액션(Action)으로만 이 상태데이터(State)를 변경할 수 있도록 하는 제한 액션(Action)으로 상태데이터(State)를 변경하기 위해서는 스토어(Store)에 디스패치(Dispatch)를 해줘야 함 리덕스 미들웨어 (Redux Middleware) 네트워크 요청의 상태관리와 전달받은 데이터 상태관리를 더욱 효율적이고 쉽게 할 수 있도록 도와 주는 것 리덕스 미들웨어의 역할 Action이 Dispatch 되어서 이를 처리하기 전에, 사전에 지정된 작업들을 설정 함 미들웨어는 “Action과 Reducer 사이의 중간 역할자” 라고 이해 할 수 있음 Reducer.. 2020. 5. 22. Typescript 이해하기 이번 포스팅은 타입스크립트에 대해 알아보고 기초 문법들을 살펴보겠습니다. 타입스크립트를 왜 쓸까? 에러를 방지하기 위해 많은 단위 테스트들이 필요하지만, 타입스크립트를 통해 이런 오류들에 대해 선언과 동시에 예방? 할 수 있고, 타입스크립트 컴파일러에 의해 코드 오타, 타입에러 등 컴파일 타임에 모든 유형 오류를 알려주기 때문에 코딩과 동시에 에러를 잡을 수 있어 코드품질 향상을 도와줄 수 있다. 타입스크립트 환경 구성하기 $ yarn global add typescript 또는 $ npm install -g typescript 그 다음, 아래 명령어를 입력하면 타입스크립트 설정파일인 (tsconfig.json) 파일이 생성됩니다. $ tsc --init 설정파일을 살펴보기 /tsconfig.json {.. 2020. 5. 22. Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른 속도와 개발환경을 구성해줍니다. 그럼 시작해볼까요. 첫번째 리액트 앱 만들기 터미널을 열고, 프로젝트가 생성될 곳으로 이동해준 뒤 create-react-app 모듈을 Global 로 설치 해줍시다. npm i -g create-react-app 설치가 완료 된 후, 리액트 앱을 생성합니다. create-react-app [프로젝트명, 대문자가 들어가지 않도록합니다.] npx create-react-app [프로젝트 명, 소문자로만 작성] npx create-re.. 2020. 5. 22. [Java] Ajax 파일업로드(엑셀) 및 Poi 라이브러리 사용하기 Ajax 비동기통신을 사용해 엑셀파일업로드 후 Controller에서 엑셀데이터를 파싱해보자 업로드가 필요한 페이지 html파일에 아래와 같이 Form과 Input[type=file]을 만들어 줍니다. 페이지.html 데이터 업로드 엑셀파일만 업로드 가능(xls, xlsx) 이제 자바스크립트로 Ajax 코드블럭을 아래와 같이 생성해줍니다. 프로젝트 Maven pom.xml 에 아래와 같이 poi 라이브러리 및 파일 업로드 처리를 위한 라이브러리를 추가해줍니다. org.apache.poi poi-ooxml 3.17 commons-fileupload commons-fileupload 1.3.2 이제 컨트롤러로 넘어옵시다. 아래 소스는 파일업로드 처리 -> 업로드 한 파일을 Poi 라이브러리로 파싱합니다. @.. 2019. 11. 26. [OpenLayers] 시작하기 시작하기 앞서, OpenLayers란 무엇인가? 구글맵(GoogleMap)과 같이 웹 페이지에 동적인 맵을 표출하여 지도기반 서비스를 개발할 수 있도록 도와주는 완전히 공개 된 오픈 소스 JavaScript입니다 주요 기능으로는, 원하는 좌표에 마커 기능 그리기(Draw) 기능 ( 점, 선, 원, 다각형 등 ) 좌표체계의 변환을 돕는 기능 내장 레이어 형식을 제공하여 맵위에 레이어를 쌓을 수 있음 객체들을 각각 관리할 수 있음 좌표와 좌표간 거리 측정 등 다양한 계산 기능 PostgreSQL(PostGIS), GeoServer를 연동하여 기능을 더욱 더 확장시킬 수 있음 OpenLayers 6.0 적용하기 오픈레이어 공식사이트 - https://openlayers.org/download/ OpenLaye.. 2019. 11. 18. [PostgreSQL] 확장프로그램 PostGIS 적용하기 이 포스팅은 PostgreSQL과 PostGIS가 설치되어 있다는 가정하에 진행됩니다. PostgreSQL과 PostGIS를 먼저 설치해해 주세요. PostgreSQL 다운로드 (https://www.postgresql.org/download/) 모두 설치하셨다면 pgAdmin을 실행해줍니다. pgAdmin은 오라클의 SQL Developer와 같은 PostgreSQL 전용 GUI 툴입니다. PostgreSQL을 선택 -> Object -> Create -> Database 선택 Database 이름을 지정해주고 [Save] 클릭 이렇게 새로운 데이터베이스를 생성해보았습니다. 이제부터 생성된 데이터베이스에 PostGIS 확장 프로그램을 적용시켜 보겠습니다. 아래 그림처럼 현재 데이터베이스에 Functio.. 2019. 10. 31. 이전 1 2 3 4 5 다음
