front-end : HTML5, CSS3, Pug back-end : NodeJS, MongoDB, Express #4 ROUTERS 4.0 What are Routers router = url을 좀 더 관리하게 쉽게 해줌 작업 중인 주체를 기반으로 url을 그룹화 해줌 4.1 Making Our Routers 4.2 Cleaning the Code 폴더 안에 router와 controller를 따로 정리하게 관리하는 것이 좋음 router를 끌고 올 때는 반드시 export를 해주고 import해서 사용해야 함 4.3 Exports global router는 url을 깔끔하게 하기 위해 쓸 뿐 별도의 controller는 필요없음 controller를 만들고 router에서 사용하기 위해서 expor..
분류 전체보기
front-end : HTML5, CSS3, Pug back-end : NodeJS, MongoDB, Express #3 Introduction To EXPRESS 3.0 Your First Server //server.js import express from "express"; const app = express(); => application(server)를 생성한다. 서버는 항상 켜져있고 인터넷에 연결되어있는 컴퓨터라고 볼 수 있다. 서버는 외부 접속인 request를 항상 listening 한다. app.listen(4000, handleListening); => 서버가 포트4000을 listening하고 있다. 3.1 GET Requests 브라우저는 서버에 웹사이트를 request하고 페이지를..
front-end : HTML5, CSS3, Pug back-end : NodeJS, MongoDB, Express #1 Introduction 1.3 What is Node JS Nodejs = 브라우저 밖에서 쓸 수 있는 JS이다. = 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼으로 특히 서버사이트에서 많이 사용한다. Electron = 데스크탑 앱을 만들 수 있다. chromnium과 nodejs을 사용하고 js, html, css를 이용한다. React Native = 안드로이드, ios앱을 만들 수 있다. js와 reactjs를 사용한다. 1.4 What is NPM npm = js를 위한 패키지 매니저이다. = node.js에서 사용하는 모듈들을 패키지로 만들어 npm..
Django와 연동할 데이터베이스로 MongoDB를 선택했다. MongoDB를 사용하는 이유는 자연어처리를 거친 데이터들의 정확한 데이터 구조를 알기 어려워 명확한 스키마가 있는 SQL형태의 데이터베이스보다는 NOSQL인 MongoDB가 더 적합할 것 같다고 생각했기 때문이다. Django와 MongoDB를 연동하는 방법에는 여러가지가 있었지만 Djongo를 사용해 가장 간단하게 연동해보았다. 개발환경 : python 3.10.3 1. Djongo를 설치한다. pip install djongo 에러 발생 : Not Implemented Error: Database objects do not implement truth value testing or bool(). 발생 이유 = 최신 버전의 pymongo가..
이 프로젝트가 자연어처리 등 파이썬을 사용하여 데이터를 다루는 일이 많기 때문에 웹 프레임워크도 파이썬기반의 장고를 선택했다. 장고에 대해 아는 것이 없었기 때문에 무작정 장고의 공식 문서 튜토리얼을 따라해보았고 기본적인 구조와 개념을 익혔다. (1) Django 설치, 가상환경 셋팅 파이썬 프로젝트 실행을 위해 가상환경 내에 개발환경을 구성 virtualenv로 가상환경 셋팅 후 가상환경 안에서 Django설치 (2)Django app * 프로젝트 생성 django-admin startproject mysite mysite라는 프로젝트 디렉토리를 생성한다. * 앱 생성 앱은 특정한 기능( 블로그나 공공 기록물을 위한 데이터베이스나 간단한 설문조사 앱)을 수행하는 웹 어플리케이션이다. 프로젝트는 다수의 ..
기본 개념 용어 Data Center 수많은 서버들을 모아 네트워크로 연결해놓은 시설 Region 데이터센터가 위치한 지역으로 일반적으로 도시를 지칭 Availability Zone 고가용성을 위해 Region 내 분산된 Data Center 하나의 Region은 두 개 이상의 AZ으로 구성 Virtualization 소프트웨어로 가상의 하드웨어를 생성하는 기수 가상화된 서버를 제공받음 AWS - EC2 EC2 인스턴스 하나의 서버이다. 인스턴스 유형에 따라 성능이 다르기 때문에 목적에 맞게 잘 선택하도록 한다. AMI(Amazon Machine Image) 가상머신은 Image를 활용하여 생성 이미지 = OS, 설치된 프로그램, 설정 등이 포함된 파일 이미지를 가상 서버에 적용하여 동일 Key Pair..
※ conf 설정하는 법 1. Volume mount 시키는 방법 1) conf 파일 만들기 2) Dockerfile 만들어서 Nginx image 만들기 컨테이너 내 conf 위치 : etc/nginx/conf.d/default.conf 로컬에서 conf 위치 : 다들 알아서.. 3) docker-compose로 컨테이너 실행 2. 직접 컨테이너 내 conf 파일 변경하는 방법 1) 컨테이너 shell로 들어가 nginx.conf 파일의 위치를 찾는다. # 컨테이너 내부 shell 연결 명령어 docker exec -it [컨테이너 id] /bin/bash nginx.conf 위치 : /etc/nginx/nginx.conf 2. nginx.conf 파일을 변경한다. vim nginx.conf 3. 설정..
Nginx란? 동시접속 처리에 특화된 웹서버 소프트웨어다. Nginx의 기능1. HTTP서버(웹서버) 웹서버 개념의 이해를 위해 웹서버와 WAS(Web Application Server)을 구분해보자. 웹서버 : 클라이언트가 서버에 페이지 요청을 하면 요청을 받아 정적 콘텐츠(. html,. png,. css 등)를 제공하는 서버 웹서버는 "클라이언트로부터 HTTP 요청을 받아 요청에 해당하는 파일을 HTTP를 통해 보내주는 프로그램"이라고 할 수 있다. API서버나 사이트와는 달리 동적으로 컨텐츠를 바꿀 수 없다. /index.html 이라는 주소로 HTTP 요청을 보내면, 실제 웹 서버가 돌아가는 환경의 파일 시스템에 있는 index.html이라는 파일을 전송할 뿐, 파라미터에 따라 데이터를 다르게 ..
도커 컴포즈란? 도커 컴포즈는 여러 개의 컨테이너를 짓고 조립(함께 사용)하는 데 유용하다. 도커 컴포즈를 사용하기 위해서는 1. Dockfile로 애플리케이션 환경을 정의한다. 2. 앱을 구성하는 services를 docker-compose.yml에 정의해서 한꺼번에 실행 가능하도록 한다. (services에는 실행하려는 컨테이너들을 정의한다) 3. docker-compose up 명령어로 컴포즈를 실행해 앱을 시작한다. 도커 컴포즈로 ELK스택 시작하기 https://rangerang.tistory.com/65 [elk]beats, elk stack 데이터 쌓고 시각화해보기 오늘은 elk스택를 구성해보자. 구성은 아래와 같다. elk를 시작하는 가장 빠른 방법은 docker-compose를 이용하는 ..
그래프 데이터베이스는 JSON과 같은 형태기 때문에 데이터 베이스 시스템을 갖고 있지 않는 자바 스크립트에서 쉽게 사용할 수 있다. 그래프 DB구조 만들기 - 검색에 대한 속도 최적화를 위해 해시맵 구조를 도입한다 - 해시맵은 데이터의 순서를 따지지 않기 때문에 그래프에 저장되는 데이터 순서를 따로 배열로 저장한다. //SET_COLLECTION 액션 임포트 import { SET_COLLECTION } from '../actions/collectionActions01'; //빈 그래프 DB 구성 const initState = { ids: [], entities: {}, }; export default (state = initState, action) => { const { type, payload }..
액션 { type: .... , payload: ... } 구조의 객체이다. type - 액션이 어떤 작업인지 쉽게 이해할 수 있는 고유한 값을 구분한 문자열 payload - 스토어에 사용할 값으로 스토어의 데이터를 초기화하는 경우에는 생략 가능 { type: 'SET_LOADING', payload: true, } 리듀서 //기본 함수 구조 function reducer(state, action) { return state;} //사용 예시 , 이전 데이터(state)를 받아 새로운 데이터(sate.payload)로 변경 const reducer = (state, action) => state + action.payload; 스토어의 이전 데이터, 액션을 받아 새로운 스토어의 데이터를 반환한다. 반환..
리덕스란? 리덕스는 데이터를 관리하는 기술이다. 리덕스는 데이터를 스토어(store)라는 곳에서 관리한다. 스토어를 통해 데이터가 전파되고 컴포넌트는 스토어에 데이터 변경을 요청한다. 리덕스와 컨텍스트 차이 리덕스는 컨텍스트와 비슷하다. 단, 여러 개의 공급자를 관리하던 컨텍스트와 달리 리덕스는 스토어에서 모든 데이터를 관리한다. 컨텍스트 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 리덕스 서버에서 받은 데이터를 앱 전체에 전달하거나 관리 '서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우 -> 리덕스 '컴포넌트의 통합 데이터를 관리하는 경우' -> 컨텍스트 리덕스 동작 리덕스의 동작을 이해하기 위해서는 스토어의 데이터의 변화과정의 이해가 필요하다. 아래의 그림은 스토어의..
컨텍스트 API를 활용하면 기존 공급자와 소비자를 컴포넌트로 구현하여 컨텍스트를 구성하는 과정을 대체할 수 있다. createContext() 함수 : 공급자와 소비자를 반환하는 컨텍스트를 생성하는 함수 const MyContext = React.createContext(defaultValue); 공급자는 MyContext.Provider , 소비자는 MyContext.Consumer로 접근해서 사용하거나 const{ Provider, Consumer } = React.createContext(defaultValue);와 같이 분할 할당하여 사용한다. 컨텍스트 API 사용해보기 (로딩상태를 표시하는 공급자 컴포넌트 예시) 1. createContext()함수로 공급자 만들기 import React fro..
중복 공급자란? 하나의 소비자가 두 개 이상의 공급자 데이터를 구독하는 것이다. 이때 , 전달하는 데이터의 이름이 같다면 소비 자는 더 가까운 공급자의 데이터를 수신한다. 예) 두개의 상태(state1, state2)를 필요로 하는 소비자는 다음과 같이 배치된다. //state1을 위한 공급자 //state2를 위한 공급자 이와 같은 경우 state라는 키 이름이 중복되기 때문에 소비자는 가까운 state2에만 접근하게 된다. 중복 공급자 문제 해결법 : 커링함수 사용 키 이름을 인자로 받아 원하는 하나의 소비자가 동시에 두 개의 컨텍스트 데이터에 접근할 때
컨텍스트란? 컴포넌트는 프로퍼티와 state 그리고 컨텍스트로 이루어져 있다. 프로퍼티와 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유하는 데이터인 반면, 컨텍스트는 부모와 자식 컴포넌트가 연결되어 있지 않아도 데이터를 공유한다. '데이터 공유 저장소' 와 '데이터 전파'의 역할을 한다고 알아두면 좋을 것 같다. 관찰자 패턴 데이터를 갖고 있는 프로퍼티를 원하는 컴포넌트에 바로 전달하기 위해서는 관찰자 패턴이라는 개념의 이해가 필요하다 관찰자 패턴은 데이터는 공급자가 관리하고 관찰자는 공급자를 구독하여 데이터를 얻는 방식이다. 이러한 관찰자 패턴을 사용하게 되면 공급자와 소비자(관찰자)가 역할을 분리하여 데이터를 관리하게 된다. 예를 들어 최상위 컴포넌트를 1컴포넌트라 하고, 최하위 컴포넌트를..
