Merge pull request #44 from min050410/develop

add: postitem 스타일 수정, 블로그 업로드

src/components/header.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 import { Link } from 'gatsby';
 
 //search, filter 기능을 위한 data
-import recent from '../docs/recent'
+import recent from '../docs/data/recent'
 
 //style
 import '../styles/header.sass';

src/components/popular.tsx

@@ -3,7 +3,7 @@ import { Link } from 'gatsby';
 import { useState } from 'react';
 
 //components
-import popular from '../docs/popular'
+import popular from '../docs/data/popular'
 
 //styles
 import '../styles/card.sass';

src/components/recent.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react"
 import { Link } from 'gatsby';
 
 //components
-import recent from '../docs/recent'
+import recent from '../docs/data/recent'
 
 //styles
 import '../styles/recent.sass'
@@ -22,7 +22,7 @@ const Recent_components: React.FC<{ location: { search: string | null } }> = ({
     }, [params])
 
     //filter 함수를 통한 filtering 후 map
-    const recent_list = recent.filter(word => word.filter == filterKey || filterKey === null).map((post) =>
+    const recent_list = recent.filter(word => word.filter == filterKey || filterKey === null).reverse().map((post) =>
     (
       <div className="recent_content">
         <Link to={`postitem/?name=${post.filename}`}>
@@ -32,9 +32,15 @@ const Recent_components: React.FC<{ location: { search: string | null } }> = ({
                 {/* <Link to="postitem/" state={{ myProp: post.filename }}> */}
                 <div className="imgbox">
                   <img
-                    src={require(`../assets/images/${post.img}.png`).default}
-                    alt={post.img}
+                    src={require(`../assets/gradients/${post.id}.png`).default}
+                    alt={post.imgLineTwo}
                   />
+                  <div className="img-text-one">
+                    <p>{post.imgLineOne}</p>
+                  </div>
+                  <div className="img-text-two">
+                    <p>{post.imgLineTwo}</p>
+                  </div>
                 </div>
                 <div id="text_group">
                   <h3>{post.title}</h3>

src/docs/Algorithm.mdx

@@ -1,85 +1,50 @@
 # Big-O 표기법과 수행
 **Big O** **sort** **dp**
 
-## 알고리즘 전체 목차
-- 알고리즘의 개념
-- Big-O 표기법과 수행
-- 재귀
-- 정렬 알고리즘
-    - 선택
-    - 버블
-    - 삽입
-    - 퀵
-    - 합병
-- 정렬 코드의 수행 시간
-- 탐색 알고리즘
-    - 순차
-    - 이진
-- 분할정복법
-- 동적계획법
-- 해싱
-    - 선형조사법
-    - 이차조사법
-    - 이중해싱법
-    - 체인법
-
-> 추후에 업데이트
-    
-### 알고리즘의 개념
-
-알고리즘의 조건
-1. `유한성`
-2. `명확성`
-3. `입력`
-4. `출력`
-5. `효과성`
-
 ### 알고리즘의 수행시간
 
 O(Big-o)표기법 : 자료에 따라 알고리즘이 수행되는 최악의 경우의 성능을 표시하는 방법
 
 > 알고리즘 수행 세는 방법
 
 ```c
-int n=0; --> 1번
-  for(int i=1; i<=n; i++) --> n+1번
-  {​​​​​
-    print("dlsfjak");  --> n번
-  }​​​​​​​​​​​
+int n=0;                 -> 1번
+for (int i=1; i<=n; i++) -> n+1번
+{​​​​​
+  print("dlsfjak");      -> n번
+}​​​​​​​​​​​
 ```
 
 코드 한 줄에 수행 한 번을 기본으로 한다.  
 `for`문의 경우에는 `i`가 `n`번까지 돌고 조건을 검사하면서 한번 더 돌게 되므로 `n+1`번 `for`문 안에는 `n`번이다.
+> 주의해야 할 점  
+> 함수의 선언부나, 매크로, 라이브러리 불러오는 코드는 수행에 포함되지 않는다
 
 감이 안잡힌다면 예제를 더 살펴보자
 
 ```c
 #include <stdio.h>
 int main() {
-​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​int n=0; -->  1
-int a=1; -->  1
-scanf("%d",&n); -->  1
-for(int i=1; i<=n; i++)  {​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​    -->  n+1
-    for(int j=1; j<=n; j++) {​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​        --> (n+1)*n 
-        for(int k=1; k<=n; k++) {​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​        -->  (n+1)*n*n
-            printf("%d ",k); --> n*n*n
+int n=0;                                -> 1
+int a=1;                                -> 1
+scanf("%d",&n);                         -> 1
+for (int i=1; i<=n; i++){               -> n+1        ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
+    for (int j=1; j<=n; j++){           -> (n+1)*n ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
+        for (int k=1; k<=n; k++)        -> (n+1)*n*n{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
+            printf("%d ",k);            -> n*n*n
         }​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
-    printf("%d ",j); --> n*n
+    printf("%d ",j);                    -> n*n
     }​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
-printf("%d ",i); -->  n
-}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
-return 0; -->  1
-}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
+printf("%d ",i);                        -> n
+}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
+return 0;                               -> 1
+}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 ```
-~~for문안에 for문안에 for문~~  
- `for`문은 앞에서 `n+1`의 수행을 갖는다고 설명하였다. 
+
+`for`문은 앞에서 `n+1`의 수행을 갖는다고 설명하였다. 
 따라서 첫번째로 감싸는 `for`문이 `n+1`인 것을 확인할 수 있다. 
 2번째로 감싸는 `for`문은 1번째로 감싸는 `for`문의 안의 값이므로 `n`번의 수행을 갖는다. 
 그리고 `for`문은 `n+1`의 수행을 가지므로 결과적으로 `n*(n+1)`번 실행된다.  
   
 나머지 수행 시간도 같은 접근 방식으로 유추할 수 있다.
 
-> 주의해야 할 점
-
-함수의 선언부나, 매크로, 라이브러리 불러오는 코드는 수행에 포함되지 않는다
-

src/docs/Blog.mdx

@@ -0,0 +1,50 @@
+# 개인 블로그를 개발한 이유 - Devlog
+
+> `markdown` 으로 빠르게 편집 가능하고  
+> `TIL`에 쓴 내용을 블로그에 빠르게 적용이 가능하고  
+> 정적인 블로그 제작을 원했다.
+
+그렇게 찾다 보니 `Gatsby` 라는 `react` 기반의 프레임워크를 찾았다.  
+`react`기반이라 경험을 살려 `typescript`로 개발을 시작하고 블로그는 1주일 후에 모습을 드러내게 되었다.  
+
+직접 개발한 블로그의 장점을 소개하겠다
+
+### url query 형식으로 유동적인 블로그 관리가 가능하다
+
+```text
+https://devlog.kro.kr/postitem?name=ohmyposh
+```
+
+위 링크에서 볼 수 있듯이,  
+`?name=ohmyposh`를 이용해서 블로그를 추가하면 자동으로    
+`ohmyposh.md`라는 파일을 랜더링하도록 제작했다.
+
+### 블로그의 모든 정보들을 배열에 저장해 빠른 참조가 가능하다
+
+```ts
+{
+    id: 1,
+    title: 'Big-O 표기법과 수행',
+    filename: 'Algorithm',
+    img: 'algorithm',
+    date: '2021-12-20',
+    tag: 'Big O',
+    tag2: 'sort',
+    tag3: 'DP',
+    filter: 'c'
+},
+```
+이렇게 정보들이 배열로 저장되어 있어 참조하기도 쉽고 정보를 수정하기도 용이하다.
+
+### 마크다운으로 작성하면 알아서 블로그의 테마에 맞게 알아서 변환해준다.
+
+`gatsby-plugin-mdx` 을 적용하고 `css`에 손을 봐서 가능해졌다.  
+`react-prism-renderer`를 이용해 `markdown`의 `syntax highlighting`을 적용했다.
+
+### 자체 클라우드가 무료이다
+
+`gatsby`의 자체 클라우드로 `gatsby cloud` 서비스를 사용했다.  
+첫 배포는 무료였고, 사용해보니 웹사이트도 편리하고 클라우드를 사용하기 편했다.   
+혹시 관심있으면 아래 링크로 가보길 바란다.
+
+[gatsby cloud](https://www.gatsbyjs.com/products/cloud/)

src/docs/Camera.mdx

@@ -1,4 +1,4 @@
-## react-native 카메라 적용 방법
+# react-native 카메라 적용 방법
 
 **react-native** **module** **camera**
 

src/docs/Cors.mdx

@@ -10,70 +10,84 @@
 - [Access-Control-Allow-Origin 헤더는 뭘까?](#whatacao)
 - [cors를 사용하는 이유](#why)  
 
-<h3 id="what">👉 Cors란?</h3>
+<h3 id="what">Cors란?</h3>
+
 `교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)`는 추가 `HTTP` 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
 
 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 `HTTP` 요청을 실행한다.
 
 보안 상의 이유로, 브라우저는 교차 출처 HTTP 요청을 제한 한다. 그래서 `Cors`오류가 났던 것이다.
 
 <h2 id="solve">Cors를 해결하는 방법들</h2>
-<h3 id="proxy">✔️ 프록시 서버 호스팅 or 구축</h3>
+
+<h3 id="proxy">프록시 서버 호스팅 or 구축</h3>
+
 프록시 서버는 클라이언트가 프록시 서버 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해준다.  
 쉽게 말해 브라우저와 서버 간의 통신을 도와주는 중계서버이다.  
 
 ```text
-https://cors-anywhere.herokuapp.com
+https://cors-anywhere.herokuapp.com 
 ```
+
 대표적으로 `heroku` `Proxy` 서버가 있다.  
 이 서버를 사용하면 중간에 요청을 가로채서 `Access-Control-Allow-Origin : *` 를 설정해서 응답해준다.  
 
 ```js
 axios({
     method: "GET"
-    url: `https://cors-
-anywhere.herokuapp.com/https://api.dropper.tech/covid19/status/korea?
-locale=${city}`,
+    url: `https://cors-anywhere.herokuapp.com/https://api.dropper.tech/covid19/status/korea?
+    locale=${city}`,
     headers: {
     'APIKey': COVID_APIKEY,
 },
+})
 ```
 
 요청해야 하는 `URL`앞에 프록시 서버 `URL`을 붙여서 요청하게 되면,  
 클라이언트에서 서버로 리소스를 요청할 때 발생하는 `Cors` 문제를 아주 간단하게 해결할 수 있다.
 
-<h3 id="acao">✔️ Access-Control-Allow-Origin</h3>
+<h3 id="acao">Access-Control-Allow-Origin</h3>
 
 자신이 서버를 가지고 있다면 가장 쉽게 해결 하는 방법이다.
 응답 헤더에 `Access-Control-Allow-Origin : *` 만 넣으면 해결 된다.  
-만약 보안이 걱정된다면 특정 URL만
+만약 보안이 걱정된다면 특정 URL만 이렇게 설정하는 것도 가능하다.
 ```text
-Access-Control-Allow-Origin : https://devlog.kro.kr
+Access-Control-Allow-Origin : https://devlog.kro.kr 
 ```
-이렇게 설정하는 것도 가능하다
 
-또, 만약 `node.js` 서버라면 `pip install cors`와 설정을 통해 `Cors`해결이 가능하다.
+> node.js 서버라면 cors 라이브러리를 설치하고 설정을 통해 Cors 해결이 가능하다.
+
+<h3 id="in">구글 플러그인 사용</h3>
 
-<h3 id="in">✔️ 구글 플러그인 사용</h3>
 [여기](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ko)
-서 하면 된다던데 안해봐서 잘 모르겠다.
+서 플러그인을 설치할 수 있다.
+
+<h3 id="chrome">크롬에서 –disable-web-security 옵션을 추가</h3>
 
-<h3 id="chrome">✔️ 크롬에서 –disable-web-security 옵션을 추가</h3>
 `-disable-web-security` 위와 같은 옵션을 `chrome` 실행시 붙여 사용하면 된다
 `Chrome` 속성에 들어가 대상 url 뒤에 붙여 넣으면 쉽게 문제를 해결할 수 있다.
 하지만 임시 방편의 방법이다.
 
-<h3 id="whatacao">✏️ Access-Control-Allow-Origin 헤더는 뭘까?</h3>
+<h3 id="whatacao">✏️ Access-Control-Allow-Origin 헤더는 뭔데 우리를 힘들게 할까?</h3>
 
 `Access-Control-Allow-Origin` 헤더란 이 응답이 주어진 `origin`으로부터의 요청 코드와 공유될 수 있는지를 나타내는 헤더이다.
 
-서버의 위치를 의미하는 https://google.com 과 같은 URL들은 마치 하나의 문자열 같아 보여도, 사실은 여러 개의 구성 요소로 이루어져 있다
+서버의 위치를 의미하는 https://google.com 과 같은 URL들은 마치 하나의 문자열 같아 보여도, 사실은 여러 개의 구성 요소로 이루어져 있다.
+
 ![image](https://user-images.githubusercontent.com/45661217/147995359-52b52ffc-2443-4071-8364-d782819f730b.png)
-이때 `Origin`은 `Protocol`과 `Host`, 그리고 위 그림에는 나와있지 않지만 `:80`, `:443`과 같은 포트 번호까지 모두 합친 것을 의미한다.
 
-<h3 id="why">cors를 사용하는 이유</h3>
+이때 `origin`은 `Protocol`과 `Host`, 그리고 위 그림에는 나와있지 않지만 `:80`, `:443`과 같은 포트 번호까지 모두 합친 것을 의미한다.
+
+`CORS`는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 `origin`과 다를 때 교차 출처 HTTP 요청을 실행한다.  
+
+하지만 보안상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.  
+따라서, 오류가 뜬 이유는 자신의 출처와 동일한 리소스만 불러올 수 있기 때문이다.  
+그래서 우리는 `Access-Control-Allow-Origin` 헤더를 붙여서 cors 문제를 해결할 수 있었다.
+
+<h3 id="why">CORS를 사용하는 이유</h3>
+
 프론트엔드 개발자 들이 싫어하는 `cors`가 왜 세상에 나왔을까? 
 
-악의를 가진 사용자가 소스 코드를 쓱 구경한 후 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting)와 같은 방법을 사용하여 애플리케이션에서 코드가 실행된 것처럼 꾸며서 사용자의 정보를 탈취하는 것을 방지하기 위해서 이다.
+악의를 가진 사용자가 소스 코드를 쓱 구경한 후 `CSRF(Cross-Site Request Forgery)`나 `XSS(Cross-Site Scripting)`와 같은 방법을 사용하여 애플리케이션에서 코드가 실행된 것처럼 꾸며서 사용자의 정보를 탈취하는 것을 방지하기 위해서이다.
 
-즉, 보안을 위해 적용한 것이다.
+결론은 보안을 위해 적용한 것이다.

src/docs/Flask.mdx

@@ -1,7 +1,7 @@
 # FLASK 튜토리얼
 
-> 개발 테스트용 포스트입니다. 1월달 즈음 업데이트 될 예정입니다.
-> flask 튜토리얼이 아니며 github에 간략하게 썼던 내용을 가져왔습니다.
+> 개발 테스트용 포스트입니다.  
+> flask 튜토리얼이 아니며 github에 간략하게 썼던 내용을 가져왔습니다.  
 
 > <a href="https://github.com/min050410/Flask-take-notes/tree/master">View my code</a>    
 
@@ -31,7 +31,7 @@ flask run --host=0.0.0.0 --port=8000
 ```
 > #4  
 
-__*"역시 믿고보는 stackoverflow"*__  
+**"역시 믿고보는 stackoverflow"**  
 ```ubuntu
 flask db stamp head
 ```

src/docs/Heapsort.mdx

@@ -0,0 +1,50 @@
+# heap sort 개념
+
+자료구조 힙
+
+c++에서 priority_queue 자료형으로 구현 가능한 자료구조이다.
+
+기본적으로 트리 자료 구조를 가지고 있으며,  
+`max heap`과 `min heap`이 존재하는데 우선순위 큐를 위해 만들어진 자료구조이다. 
+
+우선순위 큐를 이용하면 최댓값 or 최솟값을 `log n` 의 복잡도로 뽑아낼 수가 있다. 
+
+대표적인 사용처는 `min heap`을 이용한 다익스트라 알고리즘이다. 
+
+### 힙 정렬이란
+
+최대 힙 트리나 최소 힙 트리를 구성해 정렬을 하는 방법이다.
+
+> 과정
+
+i. 정렬해야 할 n개의 요소들로 최대 힙을 만든다.  
+-> 오름차순 기준이라면 최소 힙을 사용한다.
+
+ii. 그 다음으로 한번에 하나씩 요소를 힙에서 꺼내서 배열의 뒤부터 저장한다.
+
+iii. 삭제되는 요소들은 값이 감소되는 순서로 정렬되게 한다.
+
+> 코드
+
+```cpp
+void heap_sort(element a[], int n){
+    int i;
+    HeapType h;
+
+    init(&h);
+
+    for (i=0; i<n; i++){
+        insert_max_heap(&h, a[i]);
+    }
+    for (i=(n-1); i>=0; i--){
+        a[i] = delete_max_heap(&h);
+    }
+}
+```
+### 시간 복잡도
+
+거의 완전 이진트리여서 삽입 or 삭제시 `log2n`
+
+요소의 개수가 n 개이므로 최종적으로
+`O(nlog2n)`의 시간이 걸린다.
+