Merge branch 'main' of https://github.com/NicoDora/nicodora.github.io …

…into docs/#13/nestjs_post_3

_config.yml

@@ -105,6 +105,8 @@ menu:
     url:                /
   - title:              NestJS
     url:                /nestjs/
+  - title:              Docker
+    url:                /docker/
 
 collections:
   featured_categories:

_featured_categories/docker.md

@@ -0,0 +1,8 @@
+---
+layout: blog
+title: "Docker"
+slug: docker
+menu: true
+order: 8
+description: "Docker에 대해 공부하고 지식을 정리하는 공간입니다."
+---

_featured_categories/nestjs.md

@@ -4,5 +4,5 @@ title: "NestJS"
 slug: nestjs
 menu: true
 order: 8
-description: "NestJS 관련 포스트입니다."
+description: "NestJS에 대해 공부하고 지식을 정리하는 공간입니다."
 ---

_layouts/home.html

@@ -27,28 +27,6 @@ <h1 class="page-title">{{ page.title | default:strings.home | default:"" }}</h1>
 
   {{ content }}
 
-  <!-- <hr class="dingbat related"/> -->
-
-  <!-- {% assign plugins = site.plugins | default:site.gems %}
-
-  {% if plugins contains 'jekyll-paginate' %}
-    {% assign posts = paginator.posts %}
-  {% else %}
-    {% assign posts = site.categories[page.slug] | default:site.tags[page.slug] | default:site.posts %}
-  {% endif %}
-    
-  {% for post in posts %}
-    {% unless post.categories contains 'incomplete' %}
-      {% include_cached components/post.html post=post no_link_title=page.no_link_title no_excerpt=page.no_excerpt hide_image=page.hide_image %}
-    {% endunless %}
-  {% endfor %}
-
-  {% if plugins contains 'jekyll-paginate' %}
-    {% include components/pagination.html %}
-  {% endif %} -->
-
-  <!-- <hr class="dingbat related"/> -->
-
   {% if site.posts.size > 0 %}
     <h2 class="hr-bottom">{{ strings.posts | default:"All Posts" }}</h2>
     <ul class="related-posts">
@@ -68,20 +46,15 @@ <h2 class="hr-bottom">{{ strings.nestjs | default:"NestJS" }}</h2>
     </ul>
   {% endif %}
 
-  <!-- {% assign pages = site.html_pages | where:"layout","page" | where_exp:"page","page.sitemap != false" %}
-  {% if pages.size > 0 %}
-    <h2 class="hr-bottom">{{ strings.pages | default:"Pages" }}</h2>
+  {% assign nestjs_posts = site.posts | where:"categories", "docker" %}
+  {% if nestjs_posts.size > 0 %}
+    <h2 class="hr-bottom">{{ strings.nestjs | default:"Docker" }}</h2>
     <ul class="related-posts">
-      {% for page in pages limit:5 %}
-        {% if page.layout == 'page' %}
-          <li class="h4">
-            <a href="{{ page.url | relative_url }}" class="flip-title">
-              <span>{{ page.title }}</span>
-            </a>
-          </li>
-        {% endif %}
+      {% for post in nestjs_posts limit:5 %}
+        {% include_cached components/post-list-item.html post=post %}
       {% endfor %}
     </ul>
-  {% endif %} -->
+  {% endif %}
+
 </article>
 

_posts/docker/2024-04-03-Docker-설치하기-for-macOS.md

@@ -0,0 +1,112 @@
+---
+layout: post
+title: "Docker 설치하기 for macOS"
+date: 2024-04-03 15:50:00 +0900
+categories: docker
+description: >
+  Docker 컨테이너와 이미지에 대해 간단히 살펴보고 macOS환경에서 Docker를 설치해봅시다.
+image: https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-logo.png
+---
+
+1. TOC
+{:toc}
+
+## Docker란?
+
+도커(Docker)는 리눅스 컨테이너를 사용하여 애플리케이션을 더 쉽게 만들고 배포할 수 있도록 해주는 플랫폼입니다. 도커는 컨테이너 이미지를 사용하여 애플리케이션을 빌드하고 배포할 수 있습니다.
+<br>
+<br>
+여기서 <b>컨테이너</b>는 격리된 환경에서 애플리케이션을 실행할 수 있도록 하는 기술입니다.\
+컨테이너는 필요한 모든 라이브러리, 종속성 및 설정을 포함하는 격리된 패키지로서, 개발자는 개발 환경과 운영 환경 간의 일관성을 유지할 수 있습니다. 또한, 컨테이너는 빠르게 시작되고 쉽게 이동할 수 있어서 애플리케이션을 더 쉽게 배포하고 확장할 수 있습니다.
+<br>
+<br>
+컨테이너 기술의 주요 장점은 다음과 같습니다.
+  1. <b>경량화</b>\
+   가상화된 운영 체제를 사용하는 가상 머신에 비해 더 적은 자원을 사용합니다.
+
+  2. <b>이식성</b>\
+   컨테이너는 호스트 시스템과 상관없이 동일한 방식으로 동작하므로 이식성이 뛰어납니다.
+
+  3. <b>일관성</b>\
+   컨테이너는 필요한 라이브러리 및 종속성을 포함하므로 환경이 일관되며, 개발 및 배포 과정이 표준화됩니다.
+
+  4. <b>확장성</b>\
+   컨테이너는 쉽게 배포되고 확장될 수 있어서 애플리케이션의 요구 사항에 따라 빠르게 조정할 수 있습니다.
+
+<br>
+<br>
+도커 로고를 보시면 고래가 그려져 있고 그 위에 컨테이너가 올려져 있는 모습을 볼 수 있습니다.\
+<b>"바다 위에 배가 떠다니면서 그 위에 컨테이너를 올려 놓고 필요할 때마다 컨테이너에 접근하여 사용한다."</b>라고 생각하시면 좋을 것 같습니다! 😊
+<br>
+<br>
+<br>
+<b>이미지</b>는 우리가 흔히 알고 있는 사진이나 그림 파일을 의미하는 것이 아니라, 컨테이너 실행에 필요한 파일과 설정 등을 포함하는 템플릿 입니다.
+<br>
+<br>
+이미지는 값이 변하지 않는 정적인 파일이며, 컨테이너는 이미지를 실행한 상태입니다.\
+때문에 컨테이너를 삭제하더라도 이미지는 영향을 받지 않고 그대로 남아있습니다.
+
+또, 이미지에는 컨테이너를 실행하기 위해 필요한 모든 파일을 가지고 있기 때문에 복잡하게 이것저것 설정해주지 않아도 간편하게 컨테이너를 실행할 수 있으며, 하나의 이미지로 여러 개의 컨테이너를 실행할 수도 있습니다.
+
+## macOS에 Docker 설치하기
+
+도커에 대한 설명은 간략하게 이 정도로 마치고, 이제 macOS에 도커를 설치해봅시다!
+
+[Docker 다운로드](https://www.docker.com/products/docker-desktop/) 페이지에 접속하여 본인의 컴퓨터 환경에 맞춰 도커를 다운로드 받습니다.
+
+![Docker 다운로드 페이지](https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-download-page.png)
+<br>
+<br>
+<br>
+다운로드가 완료되었다면 다운로드 받은 `Docker.dmg`파일을 실행하여 설치를 진행합니다.
+
+![Docker 설치 화면](https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-install.png)
+<br>
+<br>
+<br>
+설치가 완료되면 '응용프로그램'에서 도커 앱이 추가된 것을 확인할 수 있습니다.
+
+도커 앱을 실행해봅시다.
+
+![Docker 앱 실행](https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-start.png)
+<br>
+`Accept`를 눌러 도커 약관에 동의하고 넘어갑니다.
+<br>
+<br>
+![Docker 초기 설정](https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-setting.png)
+<br>
+초기 설정은 기본값(추천)으로 설정하고 `Finish`를 눌러 다음 단계로 넘어갑니다.
+<br>
+<br>
+![Docker 로그인](https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-signin.png)
+
+도커 허브 계정이 있다면 로그인을 하고, 없다면 스킵하셔도 됩니다.\
+어짜피 도커는 계속 사용할테니 저는 계정을 새로 만들어서 로그인했습니다.
+<br>
+<br>
+<br>
+![Docker 메인화면](https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-main.png)
+<br>
+이제 도커 설치가 완료되었습니다!
+<br>
+<br>
+<br>
+터미널을 열어 아래 명령어를 입력하여 도커가 정상적으로 설치되었는지 확인해봅시다.
+
+```zsh
+docker --version
+```
+
+![Docker 버전 확인](https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/docker/2024-04-03-Docker-설치하기-for-macOS/docker-version-check.png)
+<br>
+도커 버전이 출력된다면 정상적으로 설치완료 된 것입니다! 👍
+
+## 마치며
+
+오늘은 도커에 대해 알아보고 macOS에 도커를 설치해봤습니다.\
+다음 포스트에서는 도커 이미지를 다운받은 후 컨테이너를 실행하고 관리하는 방법에 대해 알아보겠습니다.
+
+그럼 다음 포스트에서 뵙겠습니다! 뾰로롱~
+<br>
+<br>
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/frieren1.gif" width="300" height="300" alt="프리렌 움짤1">

_posts/2024-03-22-NestJS를-선택한-이유.md → _posts/nestjs/2024-03-22-NestJS를-선택한-이유.md

@@ -5,7 +5,7 @@ date: 2024-03-22 21:20:00 +0900
 categories: nestjs
 description: >
   NestJS가 무엇인지 알아보고 Modern-Agile 6기 메인 프로젝트에서 왜 NestJS를 채택했는지 알아봅시다.
-image: https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-22-NestJS를-선택한-이유/nestjs-logo.png
+image: https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-22-NestJS를-선택한-이유/nestjs-logo.png
 ---
 
 1. TOC

_posts/2024-03-29-NestJS-설치-및-시작하기.md → _posts/nestjs/2024-03-29-NestJS-설치-및-시작하기.md

@@ -5,7 +5,7 @@ date: 2024-03-29 09:57:00 +0900
 categories: nestjs
 description: >
   NestJS를 설치하고 기본 구조를 살펴보며 NestJS를 사용해서 프로젝트를 시작해봅시다.
-image: https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/nestjs-logo.png
+image: https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/nestjs-logo.png
 ---
 
 1. TOC
@@ -19,7 +19,7 @@ NestJS를 설치하기 위해서는 <span style="color:rgb(65, 126, 56)"><b>Node
 <br>
 Node.js 공식 다운로드 페이지에 들어가면 아래와 같은 화면이 보이게 됩니다.
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/nodejs-download-page.png" alt="Node.js 공식 홈페이지">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/nodejs-download-page.png" alt="Node.js 공식 홈페이지">
 
 LTS 버전과 Current 버전이 있는데, LTS 버전은 장기 지원되는 안정적인 버전이고 Current 버전은 최신 기능이 추가된 버전입니다.\
 Current 버전에서는 예상치 못한 에러가 발생할 수 있으므로 보통은 LTS 버전을 권장합니다.
@@ -36,15 +36,15 @@ Current 버전에서는 예상치 못한 에러가 발생할 수 있으므로 
 node -v
 ~~~
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/node-version-check.png" width="500" alt="node 버전 확인">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/node-version-check.png" width="500" alt="node 버전 확인">
 
 <br>
 ~~~zsh
 # file: "terminal"
 npm -v
 ~~~
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/npm-version-check.png" width="500" alt="npm 버전 확인">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/npm-version-check.png" width="500" alt="npm 버전 확인">
 
 <br>
 명령어를 입력했을 때 Node.js와 npm의 버전이 출력된다면 정상적으로 설치가 완료된 것입니다.
@@ -61,7 +61,7 @@ npm -v
 
 저는 간단하게 `nest-project`라는 이름으로 디렉토리를 생성해봤습니다.
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/create-directory.png" width="500" alt="디렉토리 생성">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/create-directory.png" width="500" alt="디렉토리 생성">
 <br>
 <br>
 <br>
@@ -78,37 +78,37 @@ npm i -g @nestjs/cli
 <br>
 NestJS CLI를 설치하고 `nest`명령어를 입력하면 아래와 같이 사용할 수 있는 명령어들이 출력됩니다.
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/nest-command.png" alt="nest 명령어 확인">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/nest-command.png" alt="nest 명령어 확인">
 <br>
 <br>
 <br>
 이제 `nest new {project-name}` 명령어를 통해 새로운 NestJS 프로젝트를 생성해봅시다.
 
 필자는 `blog-nest`라는 이름으로 프로젝트를 생성해보겠습니다.
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/nest-new-project.png" width="700" alt="nest new 명령어로 프로젝트 생성">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/nest-new-project.png" width="700" alt="nest new 명령어로 프로젝트 생성">
 
 패키지 매니저를 선택하라는 메시지가 나오는데 필자는 `npm`을 선택했습니다.\
 (화살표 키를 이용해 선택하고 엔터키를 누르면 됩니다.)
 <br>
 <br>
 <br>
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/new-project-create-loading.png" width="700" alt="프로젝트 생성중">\
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/new-project-create-loading.png" width="700" alt="프로젝트 생성중">\
 프로젝트 생성중인 모습
 {:.figcaption}
 
 <br>
 프로젝트 생성이 완료되면 아래와 같이 성공적으로 프로젝트가 생성되었다고 메세지가 출력되네요!
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/install-success.png" width="700" alt="프로젝트 생성 성공">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/install-success.png" width="700" alt="프로젝트 생성 성공">
 
 <br>
 이제 `code .` 명령어를 통해 해당 프로젝트 디렉토리를 VSCode에서 열어 구조를 살펴보러 가봅시다.
 
 ## NestJS 기본 프로젝트 구조 살펴보기
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/open-vscode.png" width="300" alt="VSCode에서 프로젝트 열기">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/open-vscode.png" width="300" alt="VSCode에서 프로젝트 열기">
 
 VSCode에서 자세히 살펴보면 위 사진처럼 `blog-nest`라는 프로젝트 디렉토리가 생성되었고, 그 안에 노드 모듈과 src/ 디렉토리 안에 NestJS의 핵심 파일이 생성된 것을 확인할 수 있습니다.
 
@@ -157,7 +157,7 @@ NestJS로 프로젝트를 진행하기 위해선 반드시 Controller, Service,
 이제 프로젝트를 실행해 볼텐데, `package.json` 파일을 열어봅시다.
 
 <br>
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/package-json-scripts.png" alt="package.json 파일">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/package-json-scripts.png" alt="package.json 파일">
 
 `scripts` 부분을 보면 다양한 명령어들이 적혀있는데, `npm run`과 함께 해당 명령어를 입력하면 옵션에 따라 다르게 서버를 실행할 수 있습니다.
 
@@ -170,7 +170,7 @@ dev 옵션으로 서버를 실행하면 파일이 변경될 때마다 자동으
 <br>
 혹시나 아래와 같은 에러가 발생한다면 `cd {프로젝트 이름}` 명령어를 통해 프로젝트 디렉토리 안으로 이동 한 후 명령어를 입력해주세요!
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/missing-script-error.png" alt="missing script error">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/missing-script-error.png" alt="missing script error">
 
 ~~~
 npm ERR! Missing script: "start:dev"
@@ -184,13 +184,13 @@ npm ERR! A complete log of this run can be found in: /Users/nicodora/.npm/_logs/
 <br>
 서버를 성공적으로 실행했다면 아래와 같이 서버가 정상적으로 실행되었다는 메세지가 출력됩니다.
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/server-start-success.png" alt="서버 실행 성공">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/server-start-success.png" alt="서버 실행 성공">
 <br>
 <br>
 <br>
 브라우저에서 [`http://localhost:3000`](http://localhost:3000) 혹은 `http://127.0.0.1:3000`으로 접속하면 아래와 같이 `Hello World!`라는 메세지가 출력되는 것을 확인할 수 있습니다.
 
-<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/2024-03-29-NestJS-설치-및-시작하기/localhost.png" width="700" alt="localhost 접속">
+<img src="https://cdn.jsdelivr.net/gh/NicoDora/nicodora.github.io/assets/img/nestjs/2024-03-29-NestJS-설치-및-시작하기/localhost.png" width="700" alt="localhost 접속">
 
 ## 마치며
 

_site/404.html

@@ -96,7 +96,7 @@
   w._search = {
     DATA_URL: '/assets/sitedata.json?no-cache',
     STORAGE_KEY: 'mini-search/',
-    INDEX_KEY: 'index--2024-04-02T17:16:49+09:00',
+    INDEX_KEY: 'index--2024-04-08T13:27:23+09:00',
   };
   w._clapButton = true;
 }(window);</script>
@@ -296,6 +296,18 @@ <h2>404</h2>
         </a>
       </li>
 
+
+      <li>
+        <a
+
+          href="/docker/"
+          class="sidebar-nav-item "
+
+        >
+          Docker
+        </a>
+      </li>
+
 
 </ul>
 

_site/about/index.html

@@ -96,7 +96,7 @@
   w._search = {
     DATA_URL: '/assets/sitedata.json?no-cache',
     STORAGE_KEY: 'mini-search/',
-    INDEX_KEY: 'index--2024-04-02T17:16:49+09:00',
+    INDEX_KEY: 'index--2024-04-08T13:27:23+09:00',
   };
   w._clapButton = true;
 }(window);</script>
@@ -373,6 +373,18 @@ <h1 class="post-title flip-project-title">
         </a>
       </li>
 
+
+      <li>
+        <a
+
+          href="/docker/"
+          class="sidebar-nav-item "
+
+        >
+          Docker
+        </a>
+      </li>
+
 
 </ul>