코딩 공부 기록, 옵시디언에 깔끔하게 정리하기 - 29

 

옵시디언에서 코딩 공부 기록을 깔끔하게 정리하는 방법은?

옵시디언에서 코딩 공부 기록을 깔끔하게 정리하려면 'Execute Code' 플러그인으로 코드 실행 환경을 구축하고, 'Code Styler' 플러그인으로 코드 블록의 가독성을 높이며, 'VS Code Editor' 플러그인으로 옵시디언 내에서 코드 파일을 편집 할 수 있습니다

각 플러그인의 주요 기능은 무엇인가요?

• Execute Code: 옵시디언 내에서 코드 블록에 작성된 코드를 직접 실행할 수 있습니다.
• Code Styler: 코드 블록에 라인 번호 표시, 하이라이트, 타이틀, 노트 링크, 아이콘 추가 등 스타일을 변경하여 가독성을 높입니다.
• VS Code Editor: 옵시디언 내에서 코드 파일을 직접 실행하고 편집할 수 있습니다.

코딩 학습과 코드 관리에 최적화된 옵시디언 활용법을 제시하는 실용적인 가이드입니다. 단순히 코드를 기록하는 것을 넘어, 옵시디언 내에서 코드를 직접 실행하고, Code Styler 플러그인을 통해 코드 블록에 라인 번호, 하이라이트, 제목, 노트 링크, 아이콘 등을 추가하여 가독성과 활용도를 극대화하는 방법을 상세히 알려줍니다. 또한, VS Code Editor 플러그인으로 옵시디언 안에서 코드 파일을 직접 편집하고 관리하는 노하우까지 제공하여, 개발 학습 효율을 혁신적으로 높이고 싶은 분들에게 필수적인 통찰을 선사합니다.

1. 옵시디언 코딩 학습 활용법 개요

1. 영상 주제 소개: 옵시디언을 코딩 공부 기록 및 코드 수집에 활용하는 방법에 대한 내용이다.
   1. 코딩 공부를 하지 않는 사람도 코드 블록 스타일 꾸미기 방법을 통해 도움을 받을 수 있다.

1. 다룰 내용 요약:
   1. 코드 블록에 작성된 코드를 옵시디언에서 직접 실행하는 방법
   2. 코드 블록에 라인 번호, 하이라이트, 타이틀, 노트 링크, 아이콘 등을 추가하여 스타일을 변경하는 플러그인 소개
   3. VS Code처럼 옵시디언에서 직접 코드 파일을 실행하고 편집하는 플러그인 소개

2. 옵시디언 코드 블록 기본 사용법 및 'Execute Code' 플러그인 활용

2.1. 코드 블록 기본 작성 및 언어 식별

1. 코드 블록 작성 방법: 코드 앞뒤에 백틱(````) 3개를 작성한다.
2. 언어 식별: 백틱 3개 뒤에 javascript 또는 js와 같이 언어 이름을 작성하면 해당 언어의 코드로 인식되어 문자의 색상이 변한다.
   1. 우측 상단에서 어떤 언어의 코드인지 식별할 수 있다.
3. 기본 코드 블록의 한계: 단순히 참고용으로만 사용할 수 있다.

2.2. 'Execute Code' 플러그인 설치 및 JavaScript 코드 실행

1. 플러그인 설치:
   1. 좌측 하단 설정 → 커뮤니티 플러그인 → 커뮤니티 플러그인 탐색으로 이동한다.
   2. 'execute code'를 검색하여 설치하고 활성화한다.
2. 초기 실행 시 에러 발생: 설치 후 읽기 모드에서 코드 블록에 마우스를 가져다 대면 'Run' 버튼이 생기지만, 누르면 에러가 발생한다.
   1. 이는 옵션에서 설정을 해야 하기 때문이다.
3. JavaScript 실행 환경 설정:
   1. 설정 → Execute Code로 이동하여 코딩 언어 선택 부분에서 JavaScript를 선택한다.
   2. Node.js 경로 지정:
      1. Mac의 경우 Cmd + Space로 Spotlight를 열고 '터미널'을 실행한다.
      2. 터미널에 which node 또는 where node를 입력하여 Node.js 경로를 얻는다.
      3. Node.js가 설치되어 있지 않은 경우 '찾을 수 없다'는 메시지가 나오므로, 별도로 설치해야 한다. (설치 방법은 영상 더보기란 링크 참조)
      4. 얻은 경로를 복사하여 옵시디언의 Execute Code 설정에 붙여넣는다.
4. JavaScript 코드 실행 확인: 설정 완료 후 코드 블록의 'Run' 버튼을 누르면 코드의 결과값을 얻을 수 있다.
   1. 간단한 코드뿐만 아니라, data.txt와 같은 외부 파일을 불러오는 복잡한 코드도 실행 가능하다.

2.3. Python 코드 실행 및 라이브 미리보기 모드 활용

1. Python 코드 언어 식별: 백틱(```) 옆에 python`을 입력하면 파이썬 코드로 인식되어 텍스트 색상이 변경된다.
2. Python 실행 환경 설정:
   1. 읽기 모드에서 'Run' 버튼을 누르면 에러가 발생하므로, JavaScript와 동일하게 경로를 설정해야 한다.
   2. 설정 → Execute Code에서 언어를 python으로 변경하고, 터미널에서 which python을 입력하여 얻은 파이썬 경로를 붙여넣는다.
3. Python 코드 실행 확인: 설정 완료 후 'Run' 버튼을 누르면 파이썬 코드의 결과를 확인할 수 있다.
4. 라이브 미리보기 모드에서 코드 실행:
   1. 기본적으로 라이브 미리보기 모드에서는 실행 버튼이 보이지 않는다.
   2. 코드 블록의 python 앞에 run-python을 추가하면 우측에 'Run' 버튼이 생성된다.
   3. 이 버튼을 눌러 코드를 실행하고 결과값을 얻을 수 있다.
   4. 코드 수정 시에는 'Run' 버튼을 누르는 대신 코드 블록 근처를 누르고 키보드로 이동하여 수정해야 한다.

2.4. 'Execute Code' 플러그인의 한계 및 다음 플러그인 소개

1. 'Execute Code'의 주 목적: 코드를 실행하는 것이 주 목적이다.
2. 학습 및 저장 목적의 코드 블록 활용: 코드를 저장하여 나중에 사용하거나 학습에 활용하는 목적이라면, 다음에 소개할 플러그인이 더 유용하다.

3. 'Code Styler' 플러그인을 활용한 코드 블록 스타일링

3.1. 'Code Styler' 플러그인 설치 및 라인 번호 추가

1. 플러그인 설치:
   1. 설정 → 커뮤니티 플러그인 → 커뮤니티 플러그인 탐색으로 이동한다.
   2. 'code styler'를 검색하여 설치하고 활성화한다.
2. 라인 번호 자동 추가: 플러그인 활성화 후 코드 블록 좌측에 라인 번호가 자동으로 표시된다.
   1. 라인 번호는 코드 블록에 대한 설명이나 참고 글을 작성할 때 유용하다.

3.2. 코드 블록 하이라이팅 기능 활용

1. 기본 하이라이팅:
   1. 코드 블록 언어(예: python) 뒤에 hl:4와 같이 입력하면 네 번째 줄이 하이라이트된다.
   2. hl:2-5와 같이 범위 지정도 가능하며, 쉼표로 구분하여 hl:2-5, print와 같이 특정 텍스트가 포함된 줄도 하이라이트할 수 있다.
   3. 기본적으로 한 가지 색상으로만 하이라이트된다.
2. 다양한 색상으로 하이라이팅 설정:
   1. 설정 → Code Styler → Codeblock highlighting으로 이동한다.
   2. 'error'와 같은 새로운 하이라이트 태그를 추가하고 붉은색으로 설정한 후 투명도를 조절하여 저장한다.
   3. 코드 블록 언어 뒤에 error:2와 같이 입력하면 설정한 붉은색으로 두 번째 줄이 하이라이트된다.
   4. hl:4-7과 같이 여러 하이라이트 태그를 한 코드 블록에서 동시에 사용할 수 있다.

3.3. 코드 블록에 제목, 노트 링크, 언어 아이콘 및 태그 추가

1. 제목 추가:
   1. 코드 블록 언어 뒤에 title:"제목 내용" 또는 title:'제목 내용'과 같이 입력하면 코드 블록 상단에 제목이 표시된다.
2. 참고 노트 링크 추가:
   1. ref:[[노트 파일명]]을 입력하면 제목에 참고할 노트 링크가 표시된다.
   2. ref:[[노트 파일명]] title:"제목 내용"과 같이 사용하면, 제목은 "제목 내용"으로 표시되지만 링크는 지정된 노트로 연결된다.
3. 언어 아이콘 및 태그 추가:
   1. 읽기 모드에서 어떤 언어로 작성되었는지 확인하기 어려울 때 유용하다.
   2. 설정 → Code Styler → Codeblock header로 이동한다.
   3. Language tag와 Language icon을 설정할 수 있다.
   4. 아이콘을 Always로 설정하면 파이썬 아이콘이 표시되고, 아이콘 크기를 조절할 수 있다.
   5. Language tag를 추가하면 아이콘과 함께 python 텍스트도 나타난다.
4. 헤더와 본문 구분:
   1. Codeblock header 설정에서 배경색을 조절하여 헤더와 본문을 명확히 구분할 수 있다.
   2. 제목의 기울임(italic) 효과나 태그 표시 여부도 설정에서 조절할 수 있다.

3.4. 인라인 코드 스타일링 및 테마 문제 해결

1. 인라인 코드 언어 식별:
   1. 일반적으로 백틱(````) 하나로 인라인 코드를 작성하면 언어 식별이 어렵다.
   2. 인라인 코드 앞에 {javascript} 또는 {js}와 같이 중괄호 안에 언어 이름을 넣으면 텍스트 색상이 변경된다.
2. 인라인 코드에 제목 추가:
   1. {js title:"안녕"}과 같이 입력하면 인라인 코드 앞에 제목이 추가된다.
3. 인라인 코드에 아이콘 추가:
   1. {js icon}과 같이 입력하면 아이콘이 표시되지만, 특정 테마(예: Minimal theme)에서는 한 줄에 예쁘게 표시되지 않는 문제가 발생할 수 있다.
   2. 테마 변경으로 확인: 다른 테마(예: Blue Topaz)로 변경하면 아이콘이 제대로 표시되는 것을 확인할 수 있다.
   3. CSS 스니펫으로 문제 해결:
      1. 제작된 CSS 스니펫 파일을 다운로드한다.
      2. 설정 → 테마 → CSS 스니펫에서 폴더를 열어 해당 CSS 파일을 넣고 새로고침 후 활성화한다.
      3. CSS 적용 후에는 Minimal theme에서도 아이콘이 제대로 적용되며, 아이콘 위치도 중앙으로 조절된다.

4. 'VS Code Editor' 플러그인을 활용한 코드 파일 관리 및 편집

4.1. 외부 코드 파일 기본 관리 및 'VS Code Editor' 플러그인 설치

1. 외부 코드 파일 기본 열기: .js, .css, .py 등의 파일을 실행하면 일반적으로 옵시디언 외부의 앱(예: VS Code)을 통해 열린다.
2. 옵시디언에서 외부 파일 보기:
   1. 볼트 내에 CSS, JS 파일이 있어도 기본적으로 탐색기에서 보이지 않는다.
   2. 설정 → 파일 및 링크에서 '모든 파일 확장명 인식'을 활성화하면 좌측 탐색기에서 .js, .css 파일을 볼 수 있다.
3. 'VS Code Editor' 플러그인 설치:
   1. 옵시디언 안에서 직접 파일을 열어 편집하거나 참고하면 불필요한 작업을 줄일 수 있다.
   2. 설정 → 커뮤니티 플러그인 → 탐색에서 'VScode'를 검색하여 'VS Code Editor' 플러그인을 설치하고 활성화한다.

4.2. 'VS Code Editor' 플러그인 기능 활용

1. 옵시디언 내에서 코드 파일 열기: 플러그인 활성화 후 파일을 누르면 VS Code 프로그램이 열리지 않고 옵시디언 내에서 파일이 열린다.
2. 확장명 인식 설정 유지: '모든 파일 확장명 인식' 설정을 비활성화하더라도, 'JS Code Editor' 플러그인에서 지원하는 .js, .css 파일 등은 계속 볼 수 있다.
3. 코드 편집 기능:
   1. 'VS Code' 프로그램과 같이 코드 선택 및 다중 편집이 가능하다.
   2. 단축키 충돌: 옵시디언에 이미 등록된 단축키가 있다면 옵시디언 단축키가 우선 적용된다.
   3. 'VS Code'처럼 단축키를 사용하려면 옵시디언의 충돌 단축키를 미리 변경해야 한다.
4. 미니맵 및 새 파일 생성:
   1. 우측에 미니맵이 있어 코드 이동이 용이하다.
   2. Cmd + P로 명령어 팔레트를 열고 'VSCode'를 입력한 후 'create new code file'을 선택하여 새로운 코드 파일을 생성할 수 있다.

5. 결론 및 학습 활용 제언

1. 요약: 옵시디언을 단순히 기록 용도가 아닌 학습 및 다양한 방법으로 활용하는 방안을 제시하였다.
2. 활용 제언: 옵시디언을 학습 도구로 적극적으로 활용하는 시간을 가져보는 것이 좋다.

어디서나 똑같은 환경 그대로 옵시디언 사용하기 – 30 바로가기

어디서나 똑같은 환경 그대로 옵시디언 사용하기 - 30 - 하나이프 블로그