Posts

Showing posts from February, 2022

MacOS의 현재 프로세스 보기와 강제종료하기

Image
맥북을 사용하다 보면 가끔씩 사용하는 프로그램이 죽어버리는 경우가 있어요. 이게 맥OS에서만 발생하는 것은 아니고 윈도 OS에서도 발생하는데, 윈도를 주로 사용하는 저로서는 쉽게 해결할 수 있으나 MacOS에서는 어디를 어떻게 손봐야 할지 난감한 경우가 생기더라고요. 그래서 MacOS에서 현재 진행되고 있는 프로세스가 무엇이 있으면 자원은 얼마나 잡아먹고 있는지 보는 방법과 그 프로세스를 강제로 종료시키는 방법을 말해 보려고 해요. 증상 저는 이전에 Docker를 맥북에 설치를 했는데, 어느 순간부터 컴퓨터를 켜면 이 Docker가 실행은 되는데 정상적으로 실행이 되지 않고 에러를 뱉어 내고 있었어요. exit 버튼을 아무리 눌러대도 종료가 안돼요. 그래서 찾아봤습니다. 해결 방법 윈도에서는 작업관리자 라고 하는데, 맥에서는 활성 상태 보기 라는 명칭으로 사용하더라고요. 이제 이 활성 상태 보기를 열어야 하는데, 몇 가지 방법이 있습니다. 응용프로그램에서 찾기 첫 번째는 파인더 탐색기의 왼쪽 메뉴에 있는 응용프로그램 에서 찾을 수 있어요. 응용프로그램 > 유틸리티 > 활성 상태 보기 아이콘이 떡~하니 보입니다. 이것을 실행시키면 돼요. 스포트라이트를 이용해서 찾기 맥OS의 강력한 기능 중 하나인 스포트라이트 기능을 이용해서 찾는 방법이에요. 언제 어디서나 command + 스페이스바 를 누르면 원하는 것을 찾을 수 있는 스포트라이트 창이 뜨거든요. 이 창에 활성 상태 보기 라는 단어를 작성하고 선택하면 그 화면을 볼 수가 있어요. 활성 상태 보기 이렇게 현재 맥북에서 사용되고 있는 모든 프로세스들이 보여요. 그중에 (응답없음) 또는 죽어있는 것 같은 프로세스를 선택해고 더블클릭을 하세요. 그러면 해당 프로세스의 상세정보를 볼 수 있는데, 하단에 종료 버튼이 보이죠? 종료 버튼을 누르면 해당 프로세스가 종료가 되고 문제가 해결이 됩니다.

[VScode 익스텐션] Visual Studio Code에서 클립보드에 저장된 Image 붙혀넣기 - Paste Image

Image
마크다운(Markdown)으로 글쓰기를 할 때 이미지 붙여넣기에 대해 매우 유용한 익스텐션이 있어서 소개해 드릴게요. 캡처 프로그램으로 캡처를 하고 바로 마크다운 문서에 붙여넣기 하면 바로 이미지가 반영이 되고 이미지는 별도의 폴더에 저장이 되도록 구성되어 있어요. [Extension] Paste Image 이미지를 클립보드에서 마크다운/asciidoc(또는 다른 파일)로 붙여넣기를 할 수 있어요. Paste Image 설정하기 Paste Image를 몇 가지 설정하면 나에게 맞게 커스터 마이징 할 수 있어요. 모든 부분을 설명하기는 어렵고, 간단하게 몇 가지 설정하는 방법입니다. Base Path : 기본이 되는 폴더의 경로입니다. 입력값은 ${currentFileDir} 및 ${projectRoot} 입니다. ${currentFileDir} : 현재 편집 파일이 있는 디렉터리의 경로 ${projectRoot} : vscode에서 열린 프로젝트의 경로 Default Name : 기본 이미지 파일 이름입니다. 입력값은 moment library 의 날짜 형식을 따라 지정할 수 있습니다. 자세한 내용은 아래 경로를 참고하세요. Paste Image 익스텐션 바로 가기 Paste Image 사용하기 설정이 되었다면 사용하는 방법은 간단해요. 일단 클립보드에 이미지가 복사되어 있다는 가정입니다. 그 상태에서..... Ctrl + Alt + v 버튼을 동시에 클릭하면 설정된 위치에 클립보드에 있던 실제 이미지가 저장이 되고, 문서(markdown)에는 이미지 삽입 코드가 작성이 됩니다. 힌트!! : Ctrl + Alt + v 버튼을 누를 때 글자를 선택하고 버튼을 누르게 되면 해당 글자가 파일명으로 지정이 됩니다. Paste Image 익스텐션 바로 가기

Visual Studio Code에서 코드조각(Snippets)을 슬기롭게 사용하는 방법

Image
Visual Studio Code (이하 VS code) 자체만으로도 매우 훌륭한 툴이지만 코드 조각(Snippets)을 잘 활용한다면 더 쉽고 빠르게 코딩을 할 수 있어요. 코드 조각(Snippets)이라고 하면 핸드폰의 단축키처럼 특정 문자를 입력하면 그에 해당하는 코드가 자동으로 작성이 되는 것을 말해요. 저는 주로 Markdown으로 티스토리나 구글 블로거로 포스팅할 때 주로 사용해요 . 기본 구성을 자동으로 해주기 때문에 상당히 편하죠. 내장 코드 조각 (Built-in snippets) 먼저 VS code를 설치하면 기본으로 설치되어 있거나 스니펫 익스텐션을 설치하면 사용할 수 있는 코드 조각들이 있어요. 이것만으로도 상당히 편리한 코드 생활이 가능하죠. 예를 들면 위의 애니메이션 이미지처럼 html 파일 에서 ! 를 작성하면 자동으로 html5의 기본 구성이 작성되는 것이죠. 이것은 일부분일 뿐 javascript, css 등등.. 각 언어에서 내장 코드 조각을 사용할 수 있어요. 이것만 잘 알고 있어서도 상당히 빠른 코딩이 가능해요. 사용자 코드 조각 (Create your own snippets) 하지만 제가 하고 싶은 이야기는 사용자 코드 조각이에요. 왜냐하면 저는 마크다운으로 블로깅을 하고 있기 때문이죠 ㅎㅎ 사용자 코드 조각은 ***.json 형태의 파일로 생성돼요. 만약 javascript의 코드 조각을 만들면 javascript.json 파일에 저장이 되고 마크다운 문서의 코드 조각을 만들면 markdown.json 파일에 저장이 돼요. 사용자 코드 조각 만들기 ▲ 사용자 코드 조각을 만들기 위해서는 위의 메뉴로 들어가면 됩니다. 새 전역 코드 조작 파일 : 프로그램 언어에 상관없이 어디에서나 작동되는 코드 조각을 만들 때 사용 2022년도에 대한 새 코드 조각 파일 : 현재 폴더의 파일들에게만 작동되는 코드 조각을 만들 때 사용(해당 파일이 있는 폴더가 2022년도 입니다. ^^) 각 프로그램 언어...

VScode(Visual Studio Code)소개와 설치하기

Image
코딩을 하기 위한 편집기라면 TextEditor과 IDE로 나뉠 수 있을 거예요. 그중에 IDE는 특수한 환경이나 언어에 특화된 에디터라 매우 편리한 점은 있지만 범용적으로 사용할 수는 없는 거예요. 하지만 텍스트 에디터는 html, css, javascript, typescript, python, Markdown, C 등등.. 다양한 환경이나 언어에서 범용적으로 사용할 수 있기 때문에 나름 인기가 높습니다. 라떼~ 개발자라면 울트라 에디터, 에디트 플러스, 노트패드 등등.. 을 아실 텐데요. 이 텍스트 에디터의 현재 버전이 Visual Studio Code 라고 할 수 있어요. 윈도의 메모장, 위드 패드 등이 1세대, 울트라 에디터, 에디트 플러스 등이 2세대라면 서브라임텍스트(Sublime Text), 비주얼스튜디오코드(Visual Studio Code), 아톰(Atom), 브라켓(Brackets)은 3세대라고 말할 수 있을 것 같아요. 이 3세대의 시작은 서브라임텍스트(Sublime Text)라고 할 수 있어요. 처음 설치하고 실행시키면 "이게 뭐야??"라고 생각할 정도로 매우 심플하게 생긴 에디터 창을 만나게 되지만 다양한 설정과 플러그인, UX 등은 개발자를 매료시킬 정도로 훌륭했던 기억이 납니다. 그 이후 이 서브라임텍스트와 UX 결을 같이 하는 다양한 텍스트 에디터들이 출몰하기 시작했어요. 이 3세대 텍스트 에디터는 대부분 크로스 플랫폼을 지향하고 있어서 맥과 윈도, 리눅스 등에서 동일하게 사용할 수 있어요. 서브라임텍스트(Sublime Text)가 먼저 치고 나가면서 Github에서는 Atom, 포토샵으로 유명한 어도비는 Brackets을 출시하며 3세대 텍스트 에디터의 전성기를 맞게 되었어요. 그중에 마이크로소프트가 혜성같이 나타나 Visual Studio Code 줄여서 VScode 를 떡하니 내놓은 거이에요. 처음에는 별 볼일 없을 줄 알았는데, 매우 빠른 업데이트와 안정성을 무기로 차츰차츰 영역을 넓히더니 이...

[nJo2] markdown blogPosting for vsce의 구매정보 등록 방법

Image
[nJo2] markdown blogPosting tistory-blogger for vsce 소개 바로가기 Visual Studio Code 의 익스텐션인 [nJo2] markdown blogPosting for vsce 로 블로그에 글을 쓰기 위해서는 제품을 구매하고 획득한 Product ID와 CODE를 제품에 등록/설정을 해야 합니다. 그 설정하는 방법은 아래와 같습니다. 1. 구매하기 [구매자] 판매 사이트에 접속을 합니다. https://shop.njo2.com 접속하기 ▲ 상품 중 VScode Markdown으로 Blogger 글쓰기 또는 VScode Markdown으로 Tistory 글쓰기 를 선택하고 구매 합니다. [구매자] 입금을 합니다. 구매를 하면 MY > 구매리스트 에 구매 목록과 입금 요청 화면이 표시됩니다. 무통장입금 또는 QR코드로 카카오페이나 토스 를 통해 해당 금액을 입금합니다. [판매자] 입금확인 완료 판매자가 입금을 확인하고 입금확인 완료 처리를 합니다. 입금확인은 자동으로 이루어지지 않고 수동으로 확인 후 확인완료를 하기 때문에 시간이 다소 소요될 수 있습니다. 판매자가 입금확인을 하면 구매확정 이 됩니다. 구매 리스트에서 상품 구매 ID를 확인 할 수 있습니다. 구매 리스트에서 상품 구매 CODE를 확인 할 수 있습니다. 이 정보는 아래에 등록을 해야 하므로 잘 확인하셔야 합니다. 2. 다운로드 받기 판매자가 입금 확인을 하면 이제 해당 소프트웨어를 다운로드 받을 수 있습니다. MY > 다운로드 메뉴에 들어가서 구매한 패키지를 선택하면 하단에 다운로드 버튼 이 있습니다. 버전별로 다운로드 할 수 있으며 가능한 최신버전을 다운로드를 받습니다. 3. 설치하기 다운로드 받은 파일은 njo2-vsce-md-blogposting-xxxxx-xxxx.vsix 식으로 확장자가 .vsix 로 되어 있습니다. 이파일 포맷은 Visual studio code 의 익스텐션 설...

Tistory API 생성하는 방법

Image
[nJo2] markdown blogPosting tistory-blogger for vsce 소개 바로가기 티스토리에 원격으로 글을 쓰기 위해서는 API를 사용해야 하는데 그냥 API를 사용하는것이 아니라 티스토리 측에 API를 사용하겠다고 승인을 받아야만 사용이 가능합니다. 여기서는 티스토리 API를 승인받는 방법에 대해서 작성을 하려고 합니다. 일단 티스토리에 가입이 되었다는 가정입니다. 티스토리 API 신청하기 로그인을 먼저 합니다. 티스토리 화면의 하단 Footer영역에 보면 오픈API라는 메뉴가 있는데 이 메뉴를 클릭합니다. 오픈API URL : https://www.tistory.com/guide/api/manage/register 앱등록 먼저 오픈 API를 사용하겠다는 요청을 아래와 같이 해야 합니다. 약관동의를 합니다. 서비스명은 임의로 작성하면 됩니다. 설명도 임의로 작성하면 됩니다. 서비스형태는 PC에서 사용할 것이므로 PC애플리케이션 을 선택합니다. 글을 작성할 것이므로 읽기.쓰기 를 선택합니다. CallBack는 승인이 이루어진 정보를 받을 위치를 작성하면 되는데 여기서는 http://localhost:5000/callback 로 적으시면 됩니다. 등록 을 하면 신청이 완료 됩니다. 그러면 아래와 같이 App ID와 Secret Key를 발급받게 됩니다. 그러면 이 ID와 Key를 설치한 프로그램에 등록을 하면 됩니다. 컨텐츠가 있는 폴더에서 1. Init 를 실행시켜 생긴 config-tistory.js 파일에 등록을 합니다. 한번 등록을 하면 이정보로 티스토리에서 토큰을 받아 올 수 있습니다. ※ 한번에 많은양의 글을 API를 통해 등록할 경우 티스토리 시스템이 자동으로 블로그의 API 사용을 차단하니 올바르게 사용해야 합니다.

Google Blogger API 생성하는 방법

Image
[nJo2] markdown blogPosting tistory-blogger for vsce 소개 바로가기 Blogger에 원격으로 글을 쓰기 위해서는 API를 사용해야 하는데 그냥 API를 사용하는것이 아니라 Google Blogger 측에 API를 사용하겠다고 승인을 받아야만 사용이 가능합니다. 여기서는 Blogger API를 승인받는 방법에 대해서 작성을 하려고 합니다. Blogger 가입하기 일단 먼저 Blogger에 가입을 해야 합니다. https://blogger.com 에 접속을 하고 가입을 합니다. 아래에 블로그 이름을 작성하고 Blogger을 생성합니다. Blogger API에 대한 설명이므로 Blogger에는 가입했다고 치고 다음 설명으로 넘어가겠습니다. ^^ Blogger API 신청하기 Blogger API를 신청한다고는 했지만 사실 Google API를 이용해서 Blogger를 사용한다고 하는 것이 더 맞는 말일것 같습니다. API를 사용하기 위해서는 Google Cloud Platform 에 접속을 해서 API를 신청해야 합니다. 1. Google Cloud Platform에서 프로젝트 생성 https://console.cloud.google.com 접속하기 Cloud Platform에서 프로젝트를 하나 생성합니다. 좌 상단의 프로젝트 리스트를 클릭합니다. 새로운 창의 우측 상단의 새 프로젝트 를 선택해서 프로젝트를 만듧니다. 새 프로젝트를 등록하는 창이 나옵니다. 저는 test-blogger 라고 만들어 봤습니다. 이름은 마음대로 작성하면 됩니다. OAuth 동의화면 만들기 OAuth를 사용할 예정이기 때문에 먼저 OAuth 동의 화면부터 만드는 것이 좋습니다. 좌측메뉴에서 OAuth 동의 화면 메뉴를 선택합니다. OAuth 동의화면에서 외부 를 선택합니다. 만들기 를 선택합니다. 1. OAuth 동의화면 이것이 무슨 앱인지, 누가 개발자인지 알려주는 정보입니다. OAu...

config-tistory.js 설정파일 작성 방법 - [nJo2] markdown blogPosting tistory-blogger for vsce

Image
[nJo2] markdown blogPosting tistory-blogger for vsce 소개 바로가기 [nJo2] markdown blogPosting xxxxx for vsce 을 설치하게 되면 아래 1개 또는 2개의 파일에 대해 설정을 해줘야 합니다. .vscode > config-tistory.js : 티스토리에 대한 설정을 하는 파일 .vscode > config-blogger.js : 구글 블로거에 대한 설정을 하는 파일 이 중에 이 포스팅에서는 .vscode > config-tistory.js 설정에 대해서 자세히 설명을 하려고 합니다. 먼저 아래의 전체 코드를 보여드리고 하나씩 부분 부분 설명을 하도록 하겠습니다. 전체 코드 // config-tistory.js module.exports = { /************************************************************************************************ * 등록방법은 다음 포스팅을 확인해 주세요. * * https://ux.stories.pe.kr/ ************************************************************************************************ * TISTORY API에서 CLIENT_ID와 CLIENT_SECRET를 찾아서 작성합니다. * * */ TISTORY_CLIENT_ID: "", // 예> "fsd...

config-blogger.js 설정파일 작성 방법 - [nJo2] markdown blogPosting tistory-blogger for vsce

Image
[nJo2] markdown blogPosting tistory-blogger for vsce 소개 바로가기 [nJo2] markdown blogPosting for vsce 을 설치하게 되면 아래 1개 또는 2개의 파일에 대해 설정을 해줘야 합니다. .vscode > config-blogger.js : 구글 블로거에 대한 설정을 하는 파일 .vscode > config-tistory.js : 티스토리에 대한 설정을 하는 파일 이중에 이 포스팅에서는 .vscode > config-blogger.js 설정에 대해서 자세히 설명을 하려고 합니다. 먼저 아래의 전체 코드를 보여드리고 하나씩 부분 부분 설명을 하도록 하겠습니다. 전체 코드 // config-blogger.js module.exports = { /************************************************************************************ * 등록방법은 다음 포스팅을 확인해 주세요. * * https://ux.stories.pe.kr/275 ************************************************************************************ * Blogger API에서 CLIENT_ID와 CLIENT_SECRET를 찾아서 작성합니다. * * */ BLOGGER_CLIENT_ID: "", // 예> "8d43565dghhjgkyioyijhgjgiouuigleusercontent.com", BLOGGER_C...