모두의 지식 저장고

자주사용하는 도커 명령어에 대해 정리해 보았습니다. 

Docker Volume 명령어

docker volume create test-volume 

docker volume ls

docker volume inspect test-volume

docker volume rm test-volume

docker volume 생성 

docker volume list 확인 

docker volume 정보 확인 

docker volume 삭제

Docker 컨테이너 모두 중지 및 삭제

 docker stop $(docker ps -a -q)
 docker rm $(docker ps -a -q)

Docker Image 모두 삭제

docker rmi $(docker images -q)

Docker Image 리스트 확인

우분투 크롬 (Chrom) 설치

우분투 다운로드 (Ubuntu)

단축키(Ctrl+Alt+T) 또는 응용프로그램에서 터미널을  wget 명령을 이용해서 구글 크롬의 최신 .deb package 파일을다운로드 해야합니다.

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

Chrome Install (크롬 설치)

sudo apt install ./google-chrome-stable_current_amd64.deb

우분투 (Chrome) 크롬 실행

정상적으로 크롬이 설치 되었다면 우분투 프로그램 선택 하면 크롬 부라우저가 추가된것으로 확인 할수 있습니다.

이제부터 크롬 브라우져를 통해 웹 서칭을 할수 있겠네요 ^^

우분투에서는 기본적으로 윈도우 처럼 그림판 프로그램이 없어 캡쳐된 이미지를 편집 할 수 없습니다.

캡쳐된 이미지를 편집하기 위한 방법에 대해 이번 포스팅에서는 알아 보겠습니다.

우분투 이미지 캡쳐 방법

Ctrl +Shift + Print  단축 키로 그림을 캡쳐  할수 있고 Ctrl +v 로 캡쳐된 이미지를 붙여 넣기 할수 있습니다.

그림판 설치 (kolourpaint4)

sudo apt-get install kolourpaint4

그림판 실행 (kolourpaint4)

정상적으로 설치 되었다면 우분투 프로그램 매뉴 화면을 클릭해서 kolourpaint4 실행시켜서 캡쳐된 이미지를 편집 할수 있습니다.

실행화면

티스토리 글을 광고 글 없이 저장하는 방법

1.네이버 웨일 에서 PDF 저장 

네이버 웨일이나 구글 크롬 브라우저 에서  우측 상단에 인쇄버튼을 눌러서 PDF 로 글을 저장 할수 있습니다. 

하지만 이 방법을 사용하게 되면 블로그에 원치 않은 머릿글이나 광고글 댓글들이 포함되어 파일로 저장 되게 됩니다. 

확장 프로그램을 통한 PDF 문서 저장 (클린 모드)

웨일 스토어에서 클린모드 앱을 설치 합니다. 

웨일 스토어에서 클린 모드 검색후 확장앱 설치 후 PDF 인쇄 

2.크롬 웹스토어  Print Friendly & PDF 확장 프로 그램 설치 

마우스 우클릭 후 Print Friendly & PDF 를 클릭 후  문서 저장 

문서 중 삭제하고자 하는 문구가 있다면 마우스 오버시 휴지통 버튼을 클릭하면 내용을 삭제 할수 있습니다. 

하지만 원본 블로그 양식과 차이가 있습니다. 

블로그에서 스킨을 별도로 꾸몄다면 내가 작상한 스킨이 원본 글과 다르게 적용되어 출력 되게됩니다. 

조금 아쉽네요.. 

블로그 글	Print Friendly & PDF 적용

3.크롬 웹스토어 Print Edit WE 확장 프로 그램 설치 (추천) 

크롬 웹스토어에서 (https://chrome.google.com/webstore) Print Edit WE 검색후 확장 플러그인을 설치 합니다. 

Print Edit WE 플러그인이 정상 설치 되었다면 PDF 로 저장하고 싶은 블로그 글을 플러그인 창에서 클릭해서 실행 하면 됩니다.

해당 플로그인을 통해 PDF 로 저장 하고 싶은 글을 수정하고나 삭제 할수 있습니다. 

선택창 누른후 Delete 버튼 클릭하면 광고글을 삭제 할수 있고 , Undo 버튼을 누른면 이전 상태로 되될릴수 있습니다. 

위에서 설명 했던 다른 방법(웨일, 클린모드) 보다 Print Edit WE를 사용해서 PDF 문서를 편집해서 저장 하니 깔끔하네요 ... 강력 추천합니다. 

사용방법 

1.Docker Image 다운로드 

우선 Docker 환경에서 오라클을 설치 하려면 오라클 이미지가 준비 되어있어야 겠죠? 

아래 GitHub 에서 Oracle19c 이미지를 다운로드 받습니다. 

https://github.com/oracle/

git clone https://github.com/oracle/docker-images.git

2.Oracle19c 바이너리 다운로드 

Docker 이미지를 다운로드를 받았다면 이제 실제로 설치할 오라클 바이너리를 준비해야 겠습니다. 

아래 경로에서 오라클 19c 바이너리(LINUX.ZSERIES64_193000_db_home.zip)를 다운로드 받습니다. 

https://www.oracle.com/kr/database/technologies/oracle19c-linux-downloads.html

3. 설치 

설치를 위한 바이너리가 모두 준비되었습니다. 

-rw-r--r--  1 oracle-docker oracle-docker 3059705302  2월 22 19:36 LINUX.X64_193000_db_home.zip
drwxr-xr-x 32 oracle-docker oracle-docker       4096  2월 22 15:40 docker-images

이제 본격적인 설치 작업을 진행하도록 하겠습니다. 

Oracle 19c 바이너리 Docker 디렉토리 복사 

 cp LINUX.X64_193000_db_home.zip docker-images/OracleDatabase/SingleInstance/dockerfiles/19.3.0

Docker Image build

cd docker-images/OracleDatabase/SingleInstance/dockerfiles
./buildContainerImage.sh -e -v 19.3.0

Docker 실행 

$ docker run --name oracle -p 1521:1521 -p 5500:5500 -e ORACLE_PWD=oracle -v oracle19c:/opt/oracle/
oradata oracle/database:19.3.0-ee

Oracle 접속 및 테스트 

$ docker exec -it oracle sqlplus sys/oracle@//localhost:1521/ORCLCDB as sysdba

일반 계정에서 Docker 실행시 에러 발생 하는 문제 

사용자 계정에서 DOCKER 명령을 수행시에 권한 에러 발생을 합니다. 

일반 사용자 계정에서 Docker 명령을 수행할수 있도록 권한을 변경하는 방법에 대해 알아 보겠습니다. 

해결 방법 

1.sudoers 파일 사용자 계정 추가

visudo -f /etc/sudoers

## Allow root to run any commands anywhere
root    ALL=(ALL)       ALL
docker_test ALL=(ALL) ALL

2.사용자 계정에 docker 그룹 추가

sudo usermod -aG docker $USER 

로컬 시스템 관리자에게 일반적인 지침을 받았으리라 믿습니다.
보통 세가지로 요약합니다:

    #1) 타인의 사생활을 존중하십시오.
    #2) 입력하기 전에 한 번 더 생각하십시오.
    #3) 막강한 힘에는 상당한 책임이 뒤따릅니다.

[sudo] docker_test의 암호:

3.일반 사용자 계정 재 접속 후 Docker(Docker-Compose) 명령 실행 

[docker_test@minsvr:/data1/docker_test]$ exit
logout
[root@minsvr:/root]$ su - docker_test
마지막 로그인: 토  9월 18 16:15:02 KST 2021 일시 pts/20
[docker_test@minsvr:/data1/docker_test]$ cd compose/
[docker_test@minsvr:/data1/docker_test/compose]$ ll
합계 16
drwxr-xr-x. 3 docker_test docker_test 4096  9월 18 15:59 .
drwx------. 6 docker_test docker_test 4096  9월 18 15:59 ..
drwxr-xr-x. 2 docker_test docker_test 4096  9월 18 15:58 app
-rw-r--r--. 1 docker_test docker_test   95  9월 18 15:59 docker-compose.test.yml
[docker_test@minsvr:/data1/docker_test/compose]$ docker-compose -f docker-compose.test.yml up --build

Building db
Sending build context to Docker daemon   2.56kB
Step 1/11 : FROM openjdk:8
 ---> 08121337b7a4
Step 2/11 : MAINTAINER mjk <jungki_min@tmax.co.kr>
 ---> Using cache
 ---> a85abd8125dd
Step 3/11 : RUN apt-get update &&     apt-get install -y     libstdc++6 libaio1 libncurses5 vim expect nmap netcat     && apt-get clean
 ---> Using cache
 ---> cd3f5538bdfd
Step 4/11 : ENV APP_HOME=/home/app
 ---> Running in 71fc6363b5f2
Removing intermediate container 71fc6363b5f2
 ---> 41a120bc13f2

웹페이지 제작이나 블로그 글 작성시에 아이콘 설정은 사용자에 보다 직관적이고 글을 이해하기 쉽게 하는데 도움을 줍니다. 예를 들어 주의 표시라는 글을 아이콘으로 대체함으로서 페이지를 보다 깔끔하게 예쁘게 작성 할수 있습니다. 

웹 아이콘 폰트는 여러 종류가 있으나 제일 많이 사용하는 fontawesome 을 사용 하는 방법에 대해 알아보겠습니다. 

Font Awesome 라이브러리 추가  

• CDN 웹폰트 라이브러리 버전 확인 및 링크 복사 
• 2022년 4월 기준 최신 버전을 사용 하겠습니다. 
• https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css

https://cdnjs.com/libraries/font-awesome

티스토리 스킨 편집 (HTML - 라이브러리 링크 추가 )

티스트로리 스킨 편집을 통해 복사한 font-awesome 라이버리 경로를 html 태그의 <head> ~</head> 사이에 추가해줍니다. 

<!-- web Font -->	
<!--link rel="stylesheet" href="복사한 cdn 라이브러리 웹 경로" /-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

서식  추가 및  Font Awesome 적용  

이제부터 Font Awesome 적용 해서 티스토리에 적용 하는 방법에 대해 알아보겠습니다. 

티스토리 관리자 페이지 에서 서식 관리 -> 서식쓰기를 버튼을 클릭후 자주 사용하는 서식을 만들어보겠습니다. 

아이콘 종류 확인 

https://fontawesome.com/icons

에는 2022년 4월 기준으로 2009 개의 무료로 사용할수 있는 아이콘이 존재 합니다. 

저는 경고 표시 아이콘을 가지고 테스트를 해보겠습니다. 

아이콘 서식 적용 확인 하기 

서식 -> 서식 글쓰기 버튼을 눌러서 테스트할 서식을 만드세요 

• 글쓰기 모드는 기본 모드 -> HTML 모드로 꼭 바꾸서 확인해주세요 
• 적용해볼 아이콘 이미지는 복사한 후 미리보리를 통해 추가된 아이콘을 확인해보세요 

아이콘 이미지를 이용한 서식 적용 

아래 링크에는 아이콘에 대한 다양한 스타일 변경에 대한 예시가 있습니다. 

꾸미고 싶은 데로 내용 참고 하셔서 적용하시면 좋을것 같습니다. 

저는 간단하게 우선 주의 표시를 위한 서식을 만들어 보았습니다. 

<div class="fa-1g">
   <i class="fa-solid fa-triangle-exclamation fa-fade" style="color:#FBB6BD" > 주의 </i>
</div>
<p class="alert alert_warning" style="border-top: 1px solid #f67280; background-color: #fff5f7;" >※ 주의</p>

아이콘 Styling 

아래 링크에 가시면 아이콘에 대한 다양한 이미지 변경 방법에 대해 소개가 되고 있습니다. 

천천히 보면서 나만에 아이콘을 만들어서 블로그에 적용해 보세요 

https://fontawesome.com/docs/web/style/styling

색상변경 

<span style="font-size: 3em; color: Tomato;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 48px; color: Dodgerblue;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 3rem;">
    <span style="color: Mediumslateblue;">
    <i class="fas fa-camera"></i>
    </span>
</span>

Relative Sizing 

<!-- Relative Sizing -->
<p> Relative Sizing </p>
  <p><i class="fa-solid fa-coffee fa-2xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-sm"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-lg"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-2xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>

Literal Sizing 

<!--Literal Sizing -->
<p> Literal Sizing  </p>
  <i class="fa-solid fa-camera fa-1x"></i>
  <i class="fa-solid fa-camera fa-2x"></i>
  <i class="fa-solid fa-camera fa-3x"></i>
  <i class="fa-solid fa-camera fa-8x"></i>
  <i class="fa-solid fa-camera fa-9x"></i>
  <i class="fa-solid fa-camera fa-10x"></i>

vertically aligning icons 

<!-- vertically aligning icons -->
<p>vertically aligning icons</p>
<div style="font-size: 2rem;">
  <div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fa-solid fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

Fade

<!--Fade -->
<p>Fade</p>
<div class="fa-3x">
  <i class="fa-solid fa-triangle-exclamation fa-fade"></i>
  <i class="fa-solid fa-skull-crossbones fa-fade"></i>
  <i class="fa-solid fa-desktop-arrow-down fa-fade"></i>
  <i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;" ></i>
</div>

Beat

<!-- Beat -->
<p> Beat</p>
<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

Beat-Fade

<!--Beat-Fade-->
<p> Beat-Fade</p>
<div class="fa-3x">
  <i class="fa-solid fa-triangle-person-digging fa-beat-fade"></i>
  <i class="fa-solid fa-square-exclamation fa-beat-fade"></i>
  <i class="fa-solid fa-poo-bolt fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;" ></i>
  <i class="fa-solid fa-circle-info fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;" ></i>
</div>

 Bounce

<!-- Bounce --> 
<p>Bounce</p>
<div class="fa-3x">
  <i class="fa-solid fa-basketball fa-bounce"></i>
  <i class="fa-solid fa-volleyball fa-bounce"></i>

  <!-- bounce animation with no "squish" -->
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; " ></i>

  <!-- bounce animation with no "squish" or "rebound" -->
  <i class="fa-solid fa-envelope fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound: 0;" ></i>
</div>

티스토리 코드 블럭 line number 표시(highlightjs-line-numbers.min.js)

https://growupcoding.tistory.com/1 장에서 코드 블럭 테마 변경 방법을 알아보았습니다. 

하지만 조금 아쉽습니다. 코드 라인을 표시하면 사용자는 보다 코드를 참고 하기 쉬울 것입니다. 

이번 장에서는 코드 블럭에 라인넘버를 추가하는 방법에 대해 알아 보겠습니다. 

코드 블럭 highlightjs-line-numbers.min.js 다운로드 

코드 블럭에 라인넘버를 추가하기 위해서는 우선 highlightjs-line-numbers.min.js 라이브러리가 필요 합니다.

아래 GitHub 링크로 들어가서 highlightjs-line-numbers.min.js 를 다운로드 받습니다. 

https://github.com/wcoder/highlightjs-line-numbers.js

티스토리 스킨 편집

소스가  다운로드되었다면 이제 티스토리 코드블럭에 line number 를 적용해 보겠습니다. 

관리자 모드에서 스킨 편집을 통해 다운로드 받은 highlightjs-line-numbers.min.js 파일을 업로드 해주세요  (꾸미기 -> 스킨편집-> html 편집-> 파일 업로드)

업로드 파일 이름 

• dist/highlightjs-line-numbers.min.js

업로드가 완료 되었다면 이제 HTML 소스 코드를 편집해서 highlightjs-line-numbers.min.js 스크립트를 적용 해주면 됩니다. 

highlight 소스 삽입 위치는 <head> 와 </head>  사이에 넣습니다. 

<!--  코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.min.css" rel="stylesheet">	
<script>hljs.initHighlightingOnLoad();</script>
<!--  코드 블럭 highlight 추가 End-->

<!-- 코드 블럭 line number 추가 -->
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
<!-- 코드 블럭 line number 추가 End-->

코드 블럭 Line Number 적용 결과 확인 

글쓰기 버튼을 누른후 코드 블럭에 코드를 작성합니다. 

테스트 코드 블럭

#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}

티스토리 코드 블럭 테마 적용(highlight.js)

블러그에 글을 쓸때 코드를 작성하는 경우가 있습니다. 

티스토리에서 기본 제공하는 코드블럭을 사용하면 코드를 보기가 다소 부족한 면이 있습니다. 

조금더 소스를 보기쉽고 참고하기 쉽도록  코드블럭을 업그레이드 해보겠습니다. 

코드 블럭 hightlight 추가

highlight 변경하기 위해서는 우선 highlight.js 라이브러리가 필요 합니다.

아래 링크로 들어가서 highlight.js 를 다운로드 받습니다. 

https://highlightjs.org/download/

적용테마 선정

스킨이 다운로드 완료 되었다면 이제 적용할 코드 블럭 테마를 살펴 보겠습니다. 

https://highlightjs.org/static/demo/ 에서 내가 적용할 코드 블럭을 테마를 먼저 살표 보겠습니다. 

저는 Atom One Dark 테마를 적용하도록 하겠습니다. 

티스토리 스킨 편집

highlight 가 다운로드되었다면 이제 티스토리 코드블럭에 highlight 를 적용하겠습니다. 

관리자 모드에서 스킨 편집을 통해 다운로드 받은 highlight.js 파일을 업로드 해주세요  (꾸미기 -> 스킨편집-> html 편집-> 파일 업로드)

업로드 파일 이름 

1.highlight.js , highlight.min.js

2.styles\테마( styles\atom-one-dark.min.css)

* 데모 환경에서 Atom One Dark 를 선택 하셨다면 적용할 스크립트는 atom-one-dark.min.css 가됩니다. 

만약 Base16/Apathy 를 선택 하셨다면 styles\base16\apathy.min.css 스크립트를 업로드 하셔서 사용하시면됩니다. 

업로드가 완료 되었다면 이제 HTML 소스 코드를 편집해서 highlight 스크립트를 적용 해주면 됩니다. 

highlight 소스 삽입 위치는 <head> 와 </head>  사이에 넣습니다. 

<!--  코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.min.css" rel="stylesheet">	
<script>hljs.initHighlightingOnLoad();</script>
<!--  코드 블럭 highlight 추가 End-->

atom-one-dark.min 테마 코드 블럭 적용 

글쓰기 버튼을 누른후 코드 블럭에 코드를 작성합니다. 

헉! 이건 내가 원했던 코드 블럭 테마가 아닙니다. 

이런 이유는 티스토리에서 기본 제공하는 Synctax Highlight 가 적용 되었기 때문입니다. 

플러그인에서 Synctax Highlight 기능 사용을 해제후 확인해주세요 

atom-one-dark 테마 적용 결과 

해제가 되었다면? 

아래 처럼 예쁘게 코드블럭이 적용되어 화면에 코드가 예쁘게 표시될 겁니다.