장난감

오랜만에 쓰는 게시글이다.

이번에는 React를 공부하면서 'Front에서 모든 데이터를 다 처리해야하나? 다른 Back-end 없이?' 라는 생각이 들어서 검색을 열심히 해본결과, Express랑 연동을 하면 된다는 정보를 찾아서 간단한 예제부터 만들어보기로 했다.

먼저 Directory Struct부터 보면 간단하게 구성을 했다.

React_Express

|--Server

|--Client

다음으로는 Express 설치와 React 설치를 진행한다.

여기까지 진행을 하였으면 일단 React가 Express에 접근을 할 수 있게 설정을 한 것이다.

Servlet을 공부하다가 나중에 까먹을까봐 적어놓는다.

준비물

1. Tomcat 설치

2. IntelliJ

3. JDK 최신버전

자바 환경설정은 필수이며, 이 과정은 패스하겠다.

또한 Tomcat 설치 경로는 필히 기억하면 좋을 것 같다.

...귀찮아서 사진 안넣을거다..

IntelliJ에서 Project를 생성한다.

- Java를 클릭하면 Java EE -> Web Application이 보인다. 클릭하자.

- Create web.xml가 체크되있을텐데 냅두면 된다.

- 프로젝트 이름은 걍 알아서 만든다.

Project가 생성되면 오른쪽 클릭 -> Project Settings에 들어간다.

- HttpServlet 라이브러리를 추가해주는 작업을 진행해야한다.

- 왼쪽 메뉴에 Libraries가 보이는데 오른쪽 클릭인가.. 하튼 누르면 From Maven이 나온다.

- 'tomcat:servlet'을 치면 여러개가 나오는데 첫 번째꺼 클릭하면된다. (검색시간이 좀 걸린다.)

Project 폴더에 src에서 이제 servlet-class를 만든다.

- src 오른쪽 클릭 - > Servlet(혹은 Servlet 어쩌구가 있다.)

- doGet, doPost 간단하게 작성해본다. ( 인터넷에 많이 널려있다 찾아보자. )

web.xml로 들어가서 servlet, servlet-mapping을 설정하자.

- 이 부분도 인터넷에 널려있다.

- servlet 태그에는 servlet-name, servlet-class가 있는데 name은 별칭, class는 src에 있는 class이다. (package가 있다면 붙여주자. ex. ex.Servlet)

tomcat 연동을 해보자.

- 오른쪽 상단에 Edit Configuration을 누른다.

- Templates -> tomcat server 찾는다.(TomEE server 아니다.)

- 누르면 Local과 remote가 보이는데 local 작업이니 local 누른다.

- Application Servers가 비어있을텐데, 클릭해서 Tomcat Home에 설치한 경로를 넣어준다. ( 자동으로 libraries가 들어갈거다. )

- 다른거 건들지말고 JRE 경로를 Java jdk 설치한 경로로 잡아준다.

- 아래 HTTP port는 기본으로 8080이다. 

이제 실행하면 된다.

*만약 out of range라는 오류가 나오면 Tomcat 폴더에 들어가서 server.xml을 찾아봐야한다.

Ctrl + F를 눌러서 '-1'을 검색하면 <Server port="-1" shutdown="SHUTDOWN"> 이부분이 나오는데

-1부분을 8090으로 바꾸자. 만약 8080으로 하면 충돌일어나서 실행안될거다. 

최소, 최대힙에 대해 설명하기 전에

이진힙에 대해 설명을 하자면 

트리로 만든 Heap 인데 완전이진트리여야한다는 조건이 붙는다.

이진 힙을 List로 생성해보자

1번 째 줄은 Index, 두번 째 줄은 원소 값이다.

여기서 부모, 자식간의 관계를 수식으로 나타낼 수 있는데

위와 같은 공식이 나오게 된다.

최소힙

최소힙은 부모가 자식보다 더 작은 값을 지니는 힙을 말한다.

최대힙

최대힙은 부모가 자식보다 더 큰 값을 지니는 힙을 말한다.

위에 있는 사진이 최대힙이다.

힙정렬

힙정렬의 알고리즘을 보자면

1. 정렬되지 않은 n개의 데이터를 입력 받는다.

2. 해당 데이터를 최대힙으로 구성한다.

3. root를 다른 list의 맨 끝으로 뺀다.

2,3번 반복

시간 복잡도는 O(n log n)이다.

트리의 순회

트리의 순회에는 3가지 방법이 존재한다.

1. 전위 순회

F->B->A->D->C->E->G->I->H

살펴보자면 Root 노드부터 왼쪽->오른쪽으로 탐색을 시작한다.

F를 방문 한 뒤, 왼쪽 자식인 B를 방문한다.

B의 왼쪽 자식인 A를 방문한 뒤, A는 자식이 없으므로 B의 오른쪽 자식 D를 방문한다.

D의 왼쪽 자식인 C를 방문 한 뒤, C는 자식이 없으므로 E로 넘어간다. E도 자식이 없으므로 

Root의 왼쪽 자식을 탐색한다.

2. 중위 순회

A->B->C->D->E->F->G->H->I

왼쪽 -> Root -> 오른쪽으로 탐색을 진행한다.

Root인 F의 왼쪽 자식인 B에는 또 왼쪽 자식이 존재하므로 A를 방문한다. 

A는 자식이 없으므로 A의 부모인 B를 방문. B의 오른쪽 자식인 D에는 왼쪽 자식 C가 존재한다.

C는 자식이 없으므로 C를 방문한 뒤, 부모인 D를 방문, 다음 E를 방문한다.

-반복

3. 후위 순회

A->C->E->D->B->H->I->G->F

왼쪽 -> 오른쪽 -> Root로 탐색을 진행한다.

귀찮다. 안적을래.

CNN ( Convolution Neural Network )

합성곱을 사용한 신경망이다.

처리과정을 이미지로 확인해보자.

복잡해 보인다.

간략하게 설명을 하자면

Input으로 특정 이미지가 들어와서 Convolution Layer를 거쳐 Pooling Layer를 지난다. 

Convolution Layer, Pooling Layer를 Feature Map Cycle이라 생각 했다.

그 이유는 해당 Layer를 지나면 Feature를 탐색하기 때문인데.. 해당 과정에 대한 이해를 해보자.

Convolution Layer

Convolution = 합성 곱

뭐랑 뭐를 합성 곱 시키는가?

합성 곱을 하면 뭐가 되는가?

위의 질문에 대한 대답을 아래에 적을 건데.. 사실 다 이해를 못해서 나중에 추가적인 설명을 붙일 거다.

합성 곱은 Input Image 혹은 Pooling Layer를 거친 Data에 Filter(Weight)를 합성 곱을 시켜준다.

출처 : http://deeplearning.stanford.edu/wiki/index.php/Feature_extraction_using_convolution

하나의 Filter를 가지고 Image를 합성 곱 시켜주므로써 Feature를 찾아내는데 보통 Filter는 3*3, 4*4로 이루어진다.

( 물론 개발하는 사람의 마음대로 filter를 조절할 수 있지만 효과적인 filter는 3*3, 4*4라 알려져 있다. )

또한 하나의 Filter로는 하나의 Feature map밖에 나오지 않기에, Filter는 여러 개를 사용하여 여러 개의 Feature map을 만든다.

Stride라는 Hyper-Paramter가 존재하는데 Stride는 filter가 몇칸을 이동할지 결정해주는 paramter이다.

위의 이미지에서는 Stride가 1인 경우이고, Stride가 2라면 (0,0)을 시작으로 다음 칸은 (0,1)이 아닌 (0,2)에서 합성 곱을 진행하는 것이다.

Stride는 작을 수록 Feature map을 잘 만들 수 있을까 하는 의문이 든다. 한번 테스트 해봐야 할 것 같다.

Feature Map은 원본 이미지보다 크기가 작아지기 때문에 연산을 위해 원본 이미지의 크기에 맞춰 줘야한다.

원본 이미지 크기만큼 빈 공간을 0으로 채워주는데 이 과정을 Padding이라고 한다.

출처 : https://www.analyticsvidhya.com/blog/2016/04/deep-learning-computer-vision-introduction-convolution-neural-networks/

Pooling Layer

이 과정은 Feature를 강조하기 위해 만들어진 층인데 N*N 크기의 영역을 1*1 크기로 확 줄여버린다.

Pooling은 3가지 방법이 있는데 Max, Avg, Min 이 있다.

N*N 크기의 영역에서 가장 큰 값, 혹은 해당 영역의 평균 값, 가장 작은 값을 골라서 1*1 크기로 압축 시킨다.

출처 : https://stackoverflow.com/questions/44287965/trying-to-confirm-average-pooling-is-equal-to-dropping-high-frequency-fourier-co

위의 Layer가 Feature Map을 생성하는 과정이다.

Filter가 여러 개이므로 Feature Map도 여러 개가 나온다.

이제 여기서 Classification을 해야되는데, FC Layer를 이용한다.

( FC Layer(fully Connection Layer)는 Dense Layer라고 불리기도 한다. )

FC Layer(Dense Layer)를 거치면 최종 Output이 나오는데 이를 softmax 를 이용해 Classification 하면 된다.

트리. Tree

자료구조에서 트리는 나무를 거꾸로 표현한 것 처럼 생겼다고 해서 트리라고 이름이 지어졌다.

트리는 뿌리(root)인 노드를 Level 1로 지칭하며 시작하며 뿌리 노드를 기준으로

자식 노드를 연결시켜 가지처럼 뻗어나가는 구조이다.

트리는 여러가지 종류가 있는데 대표적으로 Binary Tree, Normal Tree가 있다.

여기서 Binary Tree는 탐색, 힙 등 광범위하게 사용된다.

배우기 전에 용어를 정리해보자.

Root, 뿌리.

뿌리(Root)는 트리의 최상위에 존재하는 노드이며 Level은 1로 고정이다.

위 Tree에서 시초가 되는 '2'노드가 Root, 뿌리 노드이다.

(위 그림에서 '2'노드가 두번 나오는데, 가장 상위에 있는게 뿌리 노드이다.)

Child, 자식

Child, 자식노드는 어떠한 노드에 종속되어 있는 노드로

뿌리 노드를 기준으로 자식노드는 '7', '5'노드이다.

Parant, 부모

Parant, 부모노드는 자기 자신 노드 아래에 자식 노드가 있다면

해당 노드는 부모 노드가 된다.

예를 들어 '9' 노드의 부모는 '5'이다.

* 같은 부모를 가진 노드의 집합을 형제 노드라고도 칭한다.

Degree, 차수

Degree, 차수는 해당 노드에 연결된 자식 노드의 개수를 뜻한다.

트리에서 가장 큰 차수가 트리의 차수가 된다.

Level(Depth), 깊이, 레벨

Level, 혹은 Depth은 트리의 깊이 혹은 레벨을 뜻 한다.

위 그림에서는 최대 4 Level 혹은 4 Depth을 가지고 있다. 

트리의 최상 지점부터 1Level, 1 Depth으로 시작한다.

Height, 높이

트리에서 최대 Level 혹은 Depth을 의미한다.

해당 트리는 4의 높이를 가진다.

Stack과 Queue는 자료구조를 공부 했다면 100% 이해를 하고 넘어가야한다.

스케줄링, 알고리즘 등 많은 곳에서 쓰이는데 일단 개념부터 살펴보자.

Stack과 Queue는 뭘까?

두 자료구조 모두 데이터가 쌓이는 방식, 혹은 구조를 뜻한다.

역시나 글로는 이해가 잘 안될 것 같아 아래에 각각에 대한 설명과 사진을 첨부 했다.

1. Stack, 스택

Stack. 채우다. 쌓다 라는 뜻을 가진 단어이다.

자료구조에서도 마찬가지로 데이터를 순차적으로 쌓아준다.

또한 데이터를 빼낼 때는 마지막에 들어온 데이터부터 내보낸다.

즉, 후입선출( 혹은 선입후출 )의 구조를 지니게 된다.

쌓는 과정을 push, 빼내는 과정을 pop이라고 한다.

단점을 살펴보자면 Low level(먼저 들어온 데이터)의 데이터를 가져가려고 하면 

위에 존재하는 High level(나중에 들어온 데이터)의 데이터를 다 빼야지 가져갈 수 있다.

또한 스택의 크기를 동적으로 변경하지 않는 한 Overflow( 데이터가 들어갈 공간이 모자른 현상 )이 일어날 수 있다.

2. Queue, 큐

앞에서 봤던 Stack은 출구와 입구가 같다면, Queue는 출구와 입구가 별도이다.

따라서 들어왔던 것은 입구로 나가지 못하므로 늦게 들어오면 늦게 들어올 수록 나가는 속도는 늦어진다.

즉, 선입선출( 혹은 후입후출 )의 구조를 가지게 된다.

데이터를 넣는 것을 Enqueue, 데이터를 제거하는 것을 Dequeue라고 한다. ( 책마다 다를 수 있다. )

단점을 찾아보자면

Queue는 Dequeue를 실행하면 데이터를 당겨와야한다.

1->2->3->4 순으로 데이터가 들어왔다고 하면 Queue의 상태는 아래와 같다.

rear [4]-[3]-[2]-[1] front

이 때 Dequeue를 실행한다면 아래와 같이 변경 된다.

rear [4]-[3]-[2]-[null] front

만약 재배치를 해주지 않는다면 Dequeue를 충분히 많이 실행 했을 시

Enqueue를 하면 Overflow가 나타나게 된다.

rear [4]-[null]-[null]-[null] front

위와 같은 Queue가 구성되면 rear쪽이 비어있지 않다고 판단하여 Overflow를 내뱉는다.

실제로는 3 size나 비어있는데도.

따라서 재배치가 필요하다.

위와 같은 queue를 선형 큐라고 하고, 이 단점을 보완한 것이 원형 큐, 환영 큐 라는 것이다.

남는 메모리 공간을 없애기 위해서 rear과 front를 가르키는 변수를 추가해서 활용도를 높이는 방식인데, 

단점이라면 10 size를 가진 원형 Queue는 실제로 11 size을 지녀야되서 1 size가 낭비된다. ( full 과 empty를 구분하기 위한 공간 )

1size는 mod연산을 하면서 남는 공간이라고 생각하면 된다.

큐가 꽉 차있는 것을 판별하려면 

(rear+1) % Queue_Size == front 를 이용하면 된다.

원형 큐에 대한 내용은 따로 포스팅 해야겠다.

여기 가면 설명이 잘 되있으므로 참고해도 좋을 듯 하다.

사진 출처 : 나무위키(큐)

정리를 하기 위해 포스팅을 한다.

Linked List에서는 크게 3가지 유형이 존재한다.

1.  Single

2. Double

3. Circle

첫 번째로 Single Linked List

n번 째 블럭이 n+1번 째 블럭을 찾을 수 있는 Link를 가지고 있는 Node의 집합체이다.

Single인 이유는 n+1번 째 블럭은 n 번 째 블럭을 찾을 수 있는 Link가 없기 때문이다.

네트워크로 따지면 단방향이라고 볼 수 있다.

두 번째로 Double Linked List

Signle과 다른 점은 n 번 째 블럭은 이웃한 블럭을 찾을 수 있는 Link를 지니고 있다.

네트워크로 따지면 양방향이다.

세 번째로 Circle Linked List

앞에서 본 Single, Double은 모두 Head와 Tail이 존재한다.(시작과 끝)

하지만 Circle Linked List는 Head와 Tail이 연결 되어있는 순환구조이다.

사진 출처 : https://ko.wikipedia.org/wiki/연결_리스트

젠킨스(Jenkins) ? 

이번에 동아리 선배랑 같이 프로젝트를 하면서 젠킨스라는 것을 사용하기로 했다.

젠킨스는 자동적으로 배포를 도와주는 툴이라고 설명이 되어있다. ( 젠킨스에 대한 설명이 적힌 링크 )

젠킨스는 Docker와 연관이 많은데 Docker에 대해서는 따로 정리를 할 예정이다. ( docker 모르면 해당 링크 참조 )

설치 OS는  ubuntu 64bit로 아마존 AWS를 사용하였다.

jenkins를 설치하려면 우선 docker가 설치되어야 한다.

따라서 docker를 먼저 설치하면 된다.

root 권한을 요청 할 수도, 요청하지 않을 수도 있다.

다음으로는 root가 아닌 다른 user에게 docker를 실행 할 수 있는 권한을 넘겨줘야 한다.

일단 sqlite3 라이브러리가 필요하다.

없다면 다운받아서 사용하도록.

사용하려면 아래와 같이 import를 시켜줘야한다.

import sqlite3

다음으로 연결을 시켜줘야하는데 db가 생성되있지 않다면 생성을 해주니까 걱정 안해도 된다.

conn_db = sqlite3.connect("~.db")

연결이 되었다면 Cursor을 생성해줘야하는데 

Cursor는 데이터베이스에 SQL문을 작성하도록 해주는 역할이라 생각하믄 된다.

cur = conn_db.cursor()

SQL문을 작성을 해서 보내면 됩니다! 이땐 execute함수를 사용한다.

cur.execute(SQL문)

SQL문을 작성한 결과를 보고 싶다면 fetchall함수로 볼 수 있다.

result = cur.fetchall()

전체적인 코드를 보면 아래와 같다.

import sqlite3

conn_db = sqlite3.connect("~.db")
cur = conn_db.cursor()
cur.execute(SQL문)
result = cur.fetchall()

개발할 때 사실상 저렇게 사용하지 않는다.

리소스를 아끼기 위해서 with문을 사용한다.

db에 connect를 하고 cursor로 접근한 것을 with문이 끝나면 리소스 정리를 통해 disconnect를 시켜주기 때문.

import sqlite3

conn_db = sqlite3.connect("~.db")

with conn_db:
    cur = conn_db.cursor()
    cur.execute(SQL문)
    result = cur.fetchall()