ATOM으로 필기를 해보자 #03

ATOM으로 필기를 해보자 #03

• 텍스트에디터의 일종인 ATOM으로 필기하는 법을 알아봅니다
• 참고
  1. markdown-preview-enhanced 패키지 설명서
     https://shd101wyy.github.io/markdown-preview-enhanced
  2. mermaid 설명서
     https://mermaidjs.github.io/
  3. KaTeX 설명서
     https://khan.github.io/KaTeX/function-support.html

---

준비

• 지난 시간에는 필기에 필요한 마크다운 문법과 markdown-preview-enhanced 패키지를 살펴보았습니다
• 이번 시간에는 markdown-preview-enhanced 패키지에 대해 더 자세히 알아보도록 하겠습니다
• 이전 시간과 동일한 환경이 준비되어야 합니다

---

mermaid

본 패키지는 mermaid 라는 그래프 시각화 라이브러리를 지원합니다
플로우차트 위주로 설명하므로 기타 내용은 [참고 2번]을 확인해주세요

• 여러 줄에 적용되는 코드 블럭을 준비합니다

• 코드 서식으로 mermaid 를 작성해줍니다
• 이제부터 해당 코드 블럭 내에서 mermaid 문법으로 그래프를 작성할 수 있습니다

• 블럭 내에서 graph TD 또는 graph LR 등 을 작성하여 그래프의 방향을 명시할 수 있습니다
  • TB 또는 TD 의 경우 위쪽에서 아래쪽 방향으로 이어줍니다
  • BT 의 경우 아래쪽에서 위로 이어줍니다
  • LR 의 경우 왼쪽에서 오른쪽 방향으로 이어줍니다
  • RL 의 경우 오른쪽에서 왼쪽 방향으로 이어줍니다
• 이후의 줄에서 노드들을 작성할 수 있으며 --> 로 노드끼리 이을 수 있습니다

• 사실은, 각 줄의 끝마다 세미콜론 ; 을 붙이지 않아도 됩니다
  • 단, 각 명령어들이 줄바꿈으로 구분되어 있어야합니다
• 한 번 사용한 노드는 이후에도 변수명처럼 재활용할 수 있습니다
  • 이 경우 동일한 문구를 출력하는 또 다른 노드를 만들 수 없습니다
  • 이를 해결하기 위해 노드의 ID값과 출력값을 구분하는 문법을 사용합니다
  • ID값 + 출력값 의 문법으로 노드를 정의하면 이 문제를 해결 할 수 있습니다
• 사실은, 노드 이름만 작성하는 것은 노드이름[노드이름] 의 문법을 사용하는 것과 같습니다
  • 출력값을 감싸는 괄호의 종류에 따라 노드의 모양이 결정됩니다
  • [] → 각진 네모 () → 둥근 네모 {} → 마름모 (()) → 원

• -- [문장] --> 으로 노드를 잇는 간선에 문장을 출력할 수 있습니다
• 노드간을 --- 로 이을 경우 화살표가 없는 간선으로 노드를 이을 수 있습니다
  • 이 경우 -- [문장] --- 으로 간선에 문장을 출력할 수 있습니다

---

KaTeX

본 패키지는 KaTeX 라는 수식 생성 라이브러리를 지원합니다
기능이 매우 많아 모두 다루지는 않으니 기타 내용은 [참고 3번]을 확인해주세요

• KaTeX 문법은 $ 또는 $$ 로 둘러싸인 곳에서 사용할 수 있습니다
  • 영문 및 숫자만 인식하므로 한글은 사용할 수 없습니다

※ $ 은 Dollar Sign 을 말합니다

• $ 로 둘러싸인 경우 일반적인 문장으로 처리됩니다
• $$ 로 둘러싸인 경우 가운데 정렬과 함께 혼자서 줄을 통째로 차지합니다

• 단어간 공백을 넣고 싶다면 단순히 스페이스바로 띄우는 것은 도움이 되지않습니다
  • , 로 구분하거나 \space 또는 \quad 를 사용해 띄우는 것이 좋습니다
• \[명령어] 의 형식으로 KaTeX 에서 지원하는 여러 출력 방식을 사용합니다
  • \[그리스문자] 로 그리스문자들을 사용할 수 있습니다

• 그리스문자 중 대소문자 구분이 있는 경우 \theta 와 \Theta 처럼 구분합니다
• 단어 상단 수식은 ^[문자] 또는 ^{[문장]} 으로 작성할 수 있습니다
• 단어 하단 수식은 _[문자] 또는 _{[문장]} 으로 작성할 수 있습니다
• ≠ 처럼 빗금을 표현하려면 대상 단어 앞에 \not 을 작성해줍니다
• 곱하기의 의미로 Dot 을 사용하려면 \cdot 을 작성합니다

• 단어 상단 수식과 하단 수식은 겹쳐쓸 수 있습니다
• 제곱근 출력은 \sqrt[[제곱횟수]]{[제곱수]} 로 사용합니다
  • \sqrt{} 로만 사용할 경우 Square Root 로 표현됩니다
• 중앙 정렬된 일련의 점을 사용하려면 \cdots 를 작성합니다
• 분수 형태로 출력하려면 \frac{[분자]}{[분모]} 로 작성합니다

• 합을 표현하려면 \sum 을 사용합니다
  • 단어 상단 수식 및 하단 수식으로 합의 시작과 끝을 표현할 수 있습니다
• 적분을 표현하려면 \int 를 사용합니다
  • 단어 상단 수식 및 하단 수식으로 적분의 시작과 끝을 표현할 수 있습니다
• 어떤 블럭 내에서 \displaystyle 이후에 합 또는 적분 등을 사용하면 해당 기호들이 더 커집니다
  • 특히 합의 경우 시작과 끝이 더 보기 좋게 변형됩니다
  • 만약 이전 스타일로 돌아가려면 \textstyle 을 작성하면 됩니다

---

PDF

작성한 마크다운 파일을 PDF로 변환하는 방법을 배웁니다

• preview 창을 우클릭합니다
• HTML 탭에서 HTML (offline) 을 선택합니다

• test.markdown 파일과 동일한 위치에 test.html 이란 파일이 생성됩니다
• test.html 파일을 인터넷 브라우저로 엽니다
  ※ 크롬을 추천합니다

• 우클릭 후 인쇄 를 선택합니다

• 출력 대상으로 PDF로 저장 을 선택합니다
• 저장 을 누르고 원하는 위치에 저장합니다

• test.pdf 가 생성된 것을 볼 수 있습니다

---

TIPs

알아두면 유용한 정보를 정리했습니다

폴더 단위 관리

• 아톰 에디터 윈도우의 왼쪽 끝으로 마우스를 이동시키면 위와 같은 버튼이 등장합니다
  • 등장하지않는다면 현재 추가된 폴더가 없는 것입니다
• 이 버튼을 클릭하면 현재 추가해둔 플더들을 확인할 수 있습니다

• 이미 등록되어 있는 폴더를 우클릭하고 Remove Project Folder 를 선택해 지울 수 있습니다

• File 탭의 Add Project Folder 를 선택해 새로운 폴더를 추가할 수도 있습니다

• 임의의 폴더를 추가하면 위와 같이 기존 폴더뿐만 아니라 추가된 폴더들에도 쉽게 접근할 수 있게 됩니다

※ 프로젝트 폴더 설정은 마지막으로 닫힌 아톰 에디터의 것으로 유지됩니다
※ 따라서 아톰 에디터는 하나만 켜고 끄면서 사용하는 것이 편리합니다

다중 커서

• 일반적으로 커서는 한 곳만 가리킬 수밖에 없습니다
• 하지만 아톰 에디터에서는 Ctrl 키를 누른 상태에서 임의의 위치를 선택할 수 있습니다

• Ctrl 키를 누른 상태에서 각 단어의 끝을 클릭한 결과입니다
• 이 상태에서 키보드를 조작하면 모든 커서에 동일한 결과가 적용됩니다

• 스페이스바로 한 번 띄운 뒤에 숫자 1234 를 작성한 결과입니다
• 이처럼 다중 커서 기능을 활용해 동일하게 수정하는 것이 가능합니다

영/한 변환 오류

• 간혹 한글과 영문간 변환이 되지않는 경우가 있습니다
• 이 때 스페이스바를 누른 뒤 영/한 변환을 시도하면 대체로 해결됩니다

---

예시

• 위의 기능들을 모두 활용하지는 않았습니다
• 예시를 참고해 이렇게 사용하는구나 하고 느낌만 가져가세요

---

마치며

• 이상으로 ATOM으로 필기를 해보자 연재를 마칩니다
• 글쓴이는 아톰 에디터를 비롯한 본 패키지의 기능들을 모두 활용하고 있는 것은 아닙니다
• 따라서 좀 더 좋은 방법이나 기능을 발견할 수 있을 테니 직접 찾아보는 것도 추천합니다