Merge pull request #3 from frorong/feature/data

Add blog datas

src/components/blogCard.svelte

@@ -3,21 +3,21 @@
   export let blog: BlogType
 </script>
 
-<div
-  class="mb-8 rounded-md bg-white p-6 shadow-md"
+<a
+  href="{`/blog/${blog.slug}`}"
+  class="mb-8 max-w-2xl transform rounded-md bg-white p-6 shadow-md transition-transform duration-300 ease-in-out hover:scale-105"
 >
-  <a
-    href="{`/blog/${blog.slug}`}"
+  <span
     class="mb-2 block text-lg font-semibold text-blue-700 hover:underline"
-    >{blog.title}</a
+    >{blog.title}</span
   >
   <p class="text-gray-700">
     {blog.description}
   </p>
   <p class="mt-2 text-sm text-gray-500">
     On: {blog.date}
   </p>
-</div>
+</a>
 
 <style>
   .bg-white {

src/components/header.svelte

@@ -23,16 +23,16 @@
   >
     <b>Home</b>
   </a>
-  <a
-    href="{PATHS.ABOUT}"
-    class="{`${path === PATHS.ABOUT && 'font-bold text-blue-700'} text-xl`}"
-    >About</a
-  >
   <a
     href="{PATHS.BLOG}"
     class="{`${path === PATHS.BLOG && 'font-bold text-blue-700'} text-xl`}"
     >Blog</a
   >
+  <a
+    href="{PATHS.ABOUT}"
+    class="{`${path === PATHS.ABOUT && 'font-bold text-blue-700'} text-xl`}"
+    >About</a
+  >
 </nav>
 
 <style>

src/constant/blogs/blog0.md

@@ -16,70 +16,82 @@ tcp/ip 연결 이후에 클라이언트에서 서버로 어떠한 요청을 한
 
 먼저 TCP에 대해 간략히 알아보고 들어가자.
 
+<br/>
+
 TCP는 소프트웨어에서 데이터를 교환할 수 있는 네트워크 프로토콜이다. UDP라는 다른 프로토콜도 존재하지만, TCP는 UDP에 비해 신뢰성 있는 연결이 가능하다.
 
+<br/>
+
 우리가 데이터를 주고 받을 때에는 패킷이라는 조각으로 쪼개어 주고받는다. 전체의 큰 데이터를 한 번에 보낸다고 가정하자. 가는 도중에 어떠한 문제가 생겼을 때에 보완하기 어렵고, 다시 전송할 때에도 큰 리소스가 소모된다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FP4Kif%2FbtsE0G3eabr%2FNbmvGVqCPMTXluA27nrEd0%2Fimg.png'/>
 
 100kg의 돌덩이를 목적지로 옮긴다고 생각해보자. 단순하게 옮기기도 어려울뿐더러 중간에 돌덩이를 유실한다면, 다시 가져오는 데에도 무지 힘들 것이다. 10kg씩 나눠서 옮긴다면 좀 더 수월하게 옮길 수 있다. 다양한 경로로 돌덩이를 옮길 수 있고, 돌덩이 하나가 유실되어도 다른 90kg 분량의 돌덩이들은 무사히 옮겨질 수 있을 것이다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcllzV8%2FbtsE1BU2zBq%2FVTVz9dnCAYjY4DjNCE8vdk%2Fimg.png'/>
 
 그런데 우리가 필요한 것은 작은 돌덩이가 아니라 큰 100kg의 돌덩이다. 결국 작은 단위로 나눠서 옮기더라도 다시 큰 돌덩이로 조립하려면 작은 돌덩이의 순서나 상태가 매우 중요하다. 여기서 바로 TCP가 돌덩이들이 정확하게 들어올 수 있도록 해준다. 따라서 TCP는 돌덩이를 보내는 쪽과 받는 쪽의 상황을 모두 알고 있어야 한다. 때문에 TCP를 연결형 프로토콜이라 부른다.
 
 ## hand shake
 
 과정을 알아보기 전에 어떻게 서버와 클라이언트가 연결되는지부터 간단하게 알아보자.
 
+<br/>
+
 1\. 클라이언트가 서버에게 요청 (SYN)
 
 클라이언트는 서버에게 연결을 요청하기 위해 패킷을 보낸다.
 
+<br/>
+
 2\. 서버의 응답 (SYN-ACK)
 
 서버는 요청 수락과 함께 클리이언트에게 패킷을 보낸다.
 
+<br/>
+
 3\. 클라이언트의 응답 (ACK)
 
 마지막으로 클라이언트에서 서버에게 응답 패킷을 보낸다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZOgEx%2FbtsE6TtBwv5%2FJpggxmkpD6i4k7fy7hW6A1%2Fimg.png'/>
 
 ## **과정**
 
 자, 이제 세세히 과정을 알아보자.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbwKRo4%2FbtsE9JRJlcy%2FYGcKiKaza25ka0A3dK1nR0%2Fimg.png'/>
 
 1\. 어떠한 웹 서버가 존재한다고 가정하자. 웹 서버에는 통신을 위한 소켓이 하나 열려있다. 이 소켓은 파일이고 서버는 프로세스이며, 서버는 소켓에게 읽거나 쓰기의 명령을 내릴 수 있다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4vQXj%2FbtsE7n9uQA4%2FfudlHrBgnfKWtDXkoiAy0K%2Fimg.png'/>
 
 2\. 동시에 하드디스크 속의 파일은 파일 시스템과 드라이버를 거쳐 관리되고 있다. 이 파일을 메모리에 할당해야 하는데, 메모리의 사이즈는 파일의 전체 용량만큼 크지 않다. 따라서 파일을 메모리의 사이즈만큼 분해해서 read 해야 한다. 여기서 사용되는 서버 프로세스 측의 가상 메모리는 주 기억 장치의 일부를 가상의 공간으로 나누고 필요할 때만 로드하는 방식으로 동작한다. 이때의 메모리를 m1이라 하자.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBTDAb%2FbtsE8BsTK7p%2FcttKK5al8gIWIxIBZ0IH60%2Fimg.png'/>
 
 3\. 소켓은 TCP/IP를 추상화한 개념이고, 소켓의 TCP 지점에 또다른 메모리가 존재한다. 이때의 메모리를 m2라고 하자. m1에 있던 분해된 파일을 TCP의 m2로 카피를 하여 옮긴다. 이때의 입출력을 Buffered I/O라고 부른다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbyxoFX%2FbtsE6DLJYfb%2FLsJmdDFDWBluk3jKDTMQaK%2Fimg.png'/>
 
 4\. TCP의 m2로 옮겨진 데이터를 IP로 내려보내기 전에 내려보낼 데이터를 세그먼트라는 더 작은 개념으로 분할한다. 이 세그먼트는 헤더와 페이로드로 구성되는데, 안정적인 전송을 위해 시퀀스 번호와 같은 정보가 포함된다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlrpHg%2FbtsE6IzvCSG%2FTVJXqYttvkwBCHAhzbxAlk%2Fimg.png'/>
 
 5\. IP에 도달한 세그먼트는 캡슐화를 위해 패킷으로 감싸져 네트워크를 통해 전송된다. 패킷에는 세그먼트와 함께 IP 헤더가 포함된다. 이 패킷은 돌덩이를 나르는 수레와 같은 프레임이라는 개념에 실어져 보내진다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpvsMe%2FbtsE2BuakI5%2FE8m0O6zLoM0ptTDsvpAaB0%2Fimg.png'/>
 
 6\. 프레임이 도착할 클라이언트에도 네트워크 인터페이스 카드와, 드라이버, TCP/IP, 소켓이 존재할 것이다. 물론 여기도 클라이언트 프로세스 측의 메모리와, TCP 측의 메모리가 존재한다. 패킷을 열어 세그먼트를 꺼내고, 세그먼트의 시퀀스 번호를 보고 세그먼트를 조립한다.
 
-<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYJ7pt%2FbtsE9JX36zT%2Fhb4ymhSFzzitfRO1ACtT91%2Fimg.png'/>
+<img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLf7WT%2FbtsE8zWadHF%2FzyQcKs1H1mIjXGmD4gBtU0%2Fimg.png'/>
 
 7\. 여기서 1,2번 정도의 세그먼트를 조립한 후에 도착 여부를 서버에 전달하는데, 이게 ACK이다.
 
 서버에서 ACK를 받으면 이후 세그먼트들을 보낸다. TCP가 UDP보다 느린 이유가 이 것 때문이다. ACK에는 클라이언트 측에서 세그먼트를 조립할 수 있는 공간의 사이즈가 포함된다. 이 사이즈를 window size라고 부르고, 서버에서는 이 사이즈를 보고 다음으로 보낼 세그먼트의 사이즈를 판단하여 전송 여부를 결정한다.
 
+<br/>
+
 세그먼트의 사이즈가 클라측 공간의 사이즈보다 크다면 클라측에서 소켓의 I/O로 공간을 비울 때까지 wait 한다. 클라측의 read 속도가 네트워크 수신 속도보다 빨라야 어플리케이션이 빠르게 돌아가는 것이다. read가 늦어지면 처리지연에 대한 문제가 발생한다.
 
 ## 마치며

src/constant/blogs/blog1.md

@@ -12,40 +12,64 @@ category: CS
 
 개발자가 아닌 일반인들도 많이 들어봤을 용어이다. 그런데 IP가 무엇일까? IP가 무엇인지 설명해볼 수 있나?
 
+<br/>
+
 나는 IP 주소에 대해서는 설명할 수 있었지만, 정확히 IP가 무엇인가, 왜 사용하는 것이고 다른 것들과는 무엇이 다른가 등의 질문에는 명확하게 답할 수 없었다.
 
+<br/>
+
 그래서 오늘은 IP에 대해 알아보는 시간을 갖도록 하겠다.
 
+<br/>
+
 IP에 대해 알기 전에 먼저 인터넷에 대해 알아보자.
 
 ## Internet
 
 인터넷을 간단하게 설명하자면 전 세계적인 컴퓨터 네트워크 시스템이다. 우리는 인터넷 통신 상품에 가입을 하고 비용을 지불함으로써 인터넷을 사용할 수 있다. U+, KT, SK와 같은 사업자가 네트워크 통신망을 만들어두고, 우리가 사용하는 것이다. 이런 인프라 내부에서 데이터를 디지털 신호로 변환하고, 다시 디지털 신호를 데이터로 변환하며 인터넷 통신이 이루어진다.
 
+<br/>
+
 인터넷은 굉장히 광범위하다. 이런 광범위한 환경에서 아무런 규약 없이 통신이 이루어진다면 굉장히 혼란스럽고 예측 불능의 사건이 생길 수 있다. 그래서 사람들은 네트워크 통신을 위한 매뉴얼을 만든다. 그 것이 프로토콜이다.
 
 ## IP
 
 IP(Internet Protocol)는 인터넷 상에서 사용되는 통신 프로토콜이다. 즉, 사람들이 이렇게 사용하자라고 정해놓은 인터넷 상의 약속이다.
 
+<br/>
+
 IP는 데이터를 패킷이라는 단위로 나눠서 전송한다. 그리고, 이 프로토콜에서 각 컴퓨터의 주소를 나타내는 것이 IP 주소이다.
 
+<br/>
+
 IP에 대해 알아보면 IP 주소에 대해 먼저 알게 되는데, 그 이유는 IP는 데이터의 주소를 지정하고, 라우팅하는 역할을 담당하기 때문이다.
 
 ## TCP/IP
 
 앞에서 IP는 데이터의 주소를 지정하고, 라우팅하는 역할을 담당한다고 설명했다. 그럼 다른 역할을 하는 녀석도 있다는 것인데.. 그것이 바로 TCP다.
 
+<br/>
+
 TCP는 데이터의 신뢰성있는 전송을 담당한다. TCP와 IP는 서로 붙어 상호 보완적인 역할을 하는 실과 바늘같은 존재이다.
 
+<br/>
+
 그럼 이 TCP와 IP는 어떻게 연결될까? 간단하게 설명해보겠다.
 
+<br/>
+
 1\. 우리가 사용하는 서버나 클라이언트는 프로세스이다. 그리고, 통신을 위한 소켓이란 것이 열려있다. 소켓은 TCP/IP를 추상화한 개념이다. 2. 서버나 프로세스에서 소켓에게 명령을 내리면, 하드디스크의 파일이 파일 시스템과 드라이브를 거쳐 서버의 가상 메모리에 할당된다.
 
+<br/>
+
 3\. 이 메모리에 있던 데이터가 복사되어 TCP의 가상메로리로 이동하고, 세그먼트라는 개념으로 분할되어 IP로 이동된다.
 
+<br/>
+
 4\. IP에서는 세그먼트를 패킷으로 감싸 네트워크 인터페이스 카드를 거쳐 전송한다.
 
+<br/>
+
 더 자세한 과정은 아래 글에서 확인하자.
 
 [frorong.tistory.com](https://frorong.tistory.com/entry/CS-TCP-%EC%9B%90%EB%A6%AC-%EC%99%9C-TCP%EB%8A%94-UDP%EB%B3%B4%EB%8B%A4-%EB%8A%90%EB%A6%B4%EA%B9%8C)
@@ -54,44 +78,76 @@ TCP는 데이터의 신뢰성있는 전송을 담당한다. TCP와 IP는 서로
 
 IP와, TCP/IP 등에 대해 알게 되었는데, 결국 데이터 전송에 대해 제대로 알기 위해서는 주소에 대한 정리가 필요하다.
 
+<br/>
+
 OSI 7계층과 주소를 그림으로 나타내면 아래 처럼 될 것이다.
 
+<br/>
+
 물리, 데이터링크 계층에 MAC 주소, 네트워크 계층에 IP주소, 전송 계층에 Port 번호.
 
 <img src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKNpnj%2FbtsFQUrPnjz%2FHG72wVOzkKx7RWIwB6W090%2Fimg.png'/>
 
 먼저 MAC 주소는 NIC, 네트워크 인터페이스 카드에 대한 식별자이다. 쉽게 이야기하면 LAN 카드이다.
 
+<br/>
+
 IP 주소는 host에 대한 식별자다. 이 host는 인터넷에 연결된 컴퓨터를 말한다.
 
+<br/>
+
 한 컴퓨터에 NIC이 한 개라면, 당연히 MAC 주소도 한 개일 것이다. 하지만 IP 주소는 아니다. NIC이 한 개더라도 IP 주소는 n개일 수 있다.
 
+<br/>
+
 MAC 주소는 하드웨어 상의 컴퓨터의 주소이다. 그렇다면 하드웨어가 바뀌지 않는 이상 MAC 주소도 바뀌지 않을 것 같은데.. 과연 그럴까?
 
+<br/>
+
 MAC 주소가 NIC를 공장에서 만들어낼 때 부터 정해지기 때문에 바뀔 수 없다고 아는 사람들이 있는데 이는 틀렸다. 제조사별로 MAC 주소를 바꿀 수 있는 방법이 다르다고 하는데 레지스트리 편집기나 네트워크 관리자 도구를 사용하여 바꿀 수 있다.
 
+<br/>
+
 자 이제 Port 번호에 대해 알아보자. Port 번호는 여러가지의 의미로 해석될 여지가 있다.
 
+<br/>
+
 SW 직군에서 Port 번호는 프로세스의 식별자를 의미한다. 네트워크 직군에서 Port 번호는 서비스의 식별자를 의미한다. 하드웨어 직군에서 Port 번호는 공유기의 단자 번호를 의미한다.
 
+<br/>
+
 왜 이럴까?
 
+<br/>
+
 TCP는 보통 80번 port나 8080번 port를 사용한다. 실무에서는 n번 port를 열어달라고 요청하기 보다는, http 서비스 열어달라고 하기 때문에 네트워크 직군에서는 port 번호가 서비스를 의미하게 되는 것이다.
 
+<br/>
+
 서버나 클라이언트는 프로세스이다. 때문에 SW 직군에서는 서버나 클라이언트의 식별자가 되는 것이다.
 
+<br/>
+
 이렇게 MAC, IP address는 한 가지로 고정되지만, port 번호는 다양한 해석의 여지가 있다.
 
 ## IPv4, IPv6
 
 또 IP 하면 언급되는 것이 IPv4, IPv6이다.
 
+<br/>
+
 먼저 IPv4는 8비트 단위의 식별자가 4개 합쳐진 모양으로 총 32비트의 식별자 구성이 가능하다.
 
+<br/>
+
 0.0.0.0 ~ 255.255.255.255 의 조합이 가능하며 43억개의 주소 형성이 가능하다. 그런데 이 43억이라는 수가 많은 수일까?
 
+<br/>
+
 전세계 인터넷 사용자 수가 급증하면서 IPv4 주소가 고갈될 위기에 처한다. 마치 한국 주차공간. 이 문제를 해결하기 위해 IPv6가 등장한다.
 
+<br/>
+
 IPv6는 주소의 구성이 16비트씩 8개로 확장되어 43억 4제곱의 주소를 할당할 수 있다.
 
 ## 마치며