티스토리

bskyvision.com
검색하기

블로그 홈

bskyvision.com

라이프 분야 크리에이터
bskyvision.com/m

ASIS: bskyvision.com -> TOBE: vault.dev-sim.com 새 글은 새 블로그에..

구독자
75
방명록 방문하기
공지 bskyvision.com 소개 및 ⋯ 모두보기

주요 글 목록

  • [vscode] prettier - format on save 적용 안 될 때 대처 방법 vscode에서 설치해서 사용 가능한 확장 프로그램 중에 prettier라는 코드 포맷터가 있습니다. 파일을 저장할 때 prettier를 통해서 코드를 아름답게 만들어주고 싶을 때 format on save를 적용해주곤 합니다.   그런데 이와 같이 설정해줬는데 format on save가 적용이 안 된다면 설정에서 default formatter가 무엇으로 설정되어 있는지 확인해볼 필요가 있습니다.  이렇게 default formatter에 prettier를 설정해줘야 format on save가 잘 적용될 수 있습니다. 끝. 공감수 1 댓글수 0 2024. 8. 29.
  • [vscode] ssh 접속시 "원격 호스트 키가 변경되었으며 포트 전달이 비활성화되었습니다" 에러 나는 경우 vscode에서 ec2 서버 등에 ssh 접속을 시도할 때 다음과 같은 에러가 발생하는 경우가 있습니다. "원격 호스트 키가 변경되었으며 포트 전달이 비활성화되었습니다"  만약 EC2에서 Elastic IP(EIP)를 만들어놓고 어떤 서버에 그 EIP를 할당하여 사용하다가 다른 EC2에 그 EIP를 할당하였다면 이 에러가 발생합니다. 이런 경우에는 ~/.ssh/known_hosts에서 해당 서버에 대한 예전 기록을 삭제해줘야 합니다. 현재 접속을 시도하는 서버의 IP에 해당하는 행들을 모두 삭제한 후 다시 SSH 접속을 시도하면 더 이상 위 에러가 발생하지 않습니다.  끝. 참고자료[1] https://developer-itspjc.tistory.com/38 공감수 0 댓글수 0 2024. 7. 17.
  • [vscode] html 문서를 브라우저 열어주는 open in browser 익스텐션 vscode를 쓰는 또 하나의 이유는 다양한 익스텐션들을 제공해준다는 점일 것입니다. 오늘은 html 문서를 바로 브라우저에서 열고 싶을 때 유용하게 사용할 수 있는 open in browser 익스텐션에 대해 소개해드리도록 하겠습니다. open in browser 사용법 우선 마켓플레이스에서 open in browser를 검색한 후 TechER이 만든 것을 선택하여 설치합니다. 딱 두 가지 단축키만 외우시면 됩니다. Alt + B: 기본 브라우저에서 해당 HTML 문서 열기 Shift + Alt + B: 브라우저 선택한 후 HTML 문서 열기 공감수 0 댓글수 0 2024. 2. 1.
  • [vscode] 구문 하이라이트 없이 텍스트만 복사하는 방법 vscode에서 코드 또는 텍스트를 복사해서 다른 곳에 붙여넣으면 구문 하이라이트도 함께 반영되곤 합니다. 만약 스타일 없이 텍스트만 딱 복사하고 싶다면 설정에서 Copy With Syntax Highlighting 옵션을 끄면 됩니다. 맥북에서 설정 화면에서 cmd + , 로 진입할 수 있습니다. 윈도우 PC에서는 ctrl + , 입니다. 검색창에 copy with syntax highlighting를 쳐보세요. 체크박스의 체크를 해제하시면 됩니다. 이제는 더이상 스타일이 함께 복사되지 않고 텍스트만 복사됩니다. 관련 글 - [vscode] 설정(Settings) 페이지 단축키, ctrl + 콤마 참고자료 [1] https://vine-nam.github.io/2022-08/vscode-copy-tex.. 공감수 1 댓글수 0 2024. 1. 13.
  • [vscode] 마크다운 문서에 이모지(emoji) 추가하는 방법 visual studio code에서 마크다운(markdown) 문서 미리보기에서 이모지가 제대로 작동하게 하려면 아래 익스텐션을 설치해야 합니다. 확장 프로그램명: Markdown Emoji 이제 마크다운 문서 내에 :이모지명: 과 같이 이모지를 추가하면 미리보기에 이모지가 잘 보일 것입니다. :star: :white_check_mark: :smile: 공감수 0 댓글수 0 2023. 11. 6.
  • [vscode] 마크다운에서 체크박스 문법이 안 먹힐 때 해결 방법 마크다운(markdown) 문법 중에는 체크박스를 만들어주는 문법도 있습니다. - [ ] 징비록 - [x] 개발자의글쓰기 그런데 vscode에서 미리보기 화면을 보면, 체크박스 문법은 잘 적용되지 않는 것처럼 보입니다. 이런 경우에는 확장 프로그램을 하나 설치해주셔야 합니다. 확장 프로그램명: Markdown All in One 위 익스텐션을 설치한 후 다시 미리보기 화면을 보시면 체크 박스가 잘 적용된 것을 확인하실 수 있을 것입니다. 참고자료 [1] https://stackoverflow.com/questions/67535557/how-to-enable-checkboxes-in-markdown-preview-for-vscode 공감수 0 댓글수 0 2023. 11. 2.
  • [VSCODE] PDF 파일 보기, vscode-pdf 비주얼 스튜디오 코드(visual studio code, VSCODE)에서 PDF 파일을 보려면 익스텐션을 설치해줘야 합니다. 여러 익스텐션이 있겠지만 저는 tomoki1207이 개발한 "vscode-pdf"라는 익스텐션을 설치해서 사용하고 있습니다. 위 확장 프로그램을 설치한 후 PDF 파일을 VSCODE에서 열어보면 다음과 같이 보입니다. 별도의 PDF 뷰어로 PDF 파일을 확인하지 않아도 되서 굉장히 편리합니다. 공감수 2 댓글수 0 2023. 9. 18.
  • [vscode] 탐색기 트리 들여쓰기 간격 조절 vscode에서 탐색기 트리를 보면 조금 들여쓰기가 약하게 되어 있어서 트리 구조가 한 눈에 잘 안 보이게 느껴질 때가 있습니다. 이것 역시 조금 더 넓게 설정해줄 수 있습니다. 1. 먼저 설정에 들어갑니다. 윈도우즈 ctrl + , 맥북 cmd + , 2. workbench.tree.indent를 설정 검색창에 입력합니다. 원하는 트리 들여쓰기 값을 넣어줍니다. 저는 24로 넣어줬습니다. 이렇게 설정해주고 나니 훨씬 가독성이 좋아진 느낌입니다.^^ 공감수 2 댓글수 2 2023. 7. 6.
  • [vscode] 마크다운(.md) 문서 pdf로 export하는 방법 개발을 하다보면 보통 프로젝트 루트에 README.md를 작성합니다. 이러한 마크다운 문서를 vscode 상에서 바로 pdf 파일로 export 할 수 있는 방법이 있습니다. 바로 Markdown PDF라는 확장 프로그램을 사용하시면 됩니다. Markdown PDF 사용방법 1. 맥북 cmd + shift + x, 윈도우즈 ctrl + shift + x를 눌러서 확장 탭으로 이동한 후에 Markdown PDF를 검색한 후 설치합니다. 2. 맥북 cmd + shift + p, 윈도우즈 ctrl + shift + p를 눌러서 명령 팔레트를 연 후에 markdown을 입력한 후에 Markdown PDF: Export (pdf)를 선택하면 해당 경로에 pdf 파일이 떨어집니다. pdf 문서를 열어보면 꽤 예쁘게.. 공감수 3 댓글수 0 2023. 6. 22.
  • [vscode] Remote-SSH 확장 프로그램 활용하여 서버 ssh 접속하기 vscode에서 ssh 접속을 할 때 많이 사용하는 확장 프로그램이 있습니다. 바로, Remote-SSH입니다. 먼저, Remote - SSH 확장 프로그램을 설치합니다. 그 다음에는 F1 키를 누른 다음 검색창에 ssh를 입력하면 나오는 Remote-SSH: Open SSH Configuration File...을 클릭합니다. 그 다음에 접속하고자 하는 원격 서버 정보를 입력합니다. Host [alias] HostName [ip 주소] User [유저명] Port [포트번호] IdentityFile [pem키 위치] 그 다음에 Remote Explorer를 클릭한 후 원격 서버 호스트에 마우스 커서를 올리면 나오는 화살표 버튼 또는 새창 버튼을 클릭하면 해당 서버에 SSH 연결이 됩니다. 공감수 1 댓글수 2 2023. 6. 19.
  • [vscode] 설정(Settings) 페이지 단축키, ctrl + 콤마 vscode의 설정 페이지에서는 편집기 설정, 테마 설정, 확장 기능 설정 등의 다양한 작업을 수행할 수 있습니다. vscode에서 설정 페이지로 가는 단축키는 ctrl + 콤마(,) 입니다. 윈도우즈 및 리눅스에서는 그렇습니다. 맥북이라면 cmd + ,를 누르시면 됩니다. 저도 단축키 잘 못/안 외우는 사람 중 한 명이지만, 이 정도 단축키는 외워두면 좋습니다. 공감수 3 댓글수 0 2023. 5. 29.
  • [vscode] 코드 복사할 때 행 번호도 같이 복사하는 방법 코드를 작성하고 누군가에게 그 코드를 설명해야할 때는 코드 행 번호가 함께 제공되는 것이 좋습니다. "3번 행은 이런 뜻이고, 4~10 행은 저런 뜻이야"라고 지정해서 설명할 수 있기 때문입니다. vscode를 사용하시는 분들은 코드와 코드 행 번호를 함께 제공하고 싶은 경우에 Copy With Line Numbers 확장 플러그인을 사용하실 수 있습니다. 코드 복사할 때 행 번호도 함께 복사하는 방법 Ctrl + Shift + X로 확장 마켓플레이스를 연 후에 검색창에 copy with line numbers를 입력하셔서 찾으신 후에 설치합니다. 테스트를 위해 간단한 코드를 작성했습니다. 위 코드 전체를 선택한 후 F1 키를 누른 다음에 copy with line numbers를 입력합니다. 그러면 아.. 공감수 3 댓글수 2 2022. 7. 2.
  • [vscode] 한 줄 삭제 단축키 안녕하세요. 비스카이비전입니다. 프로그래밍을 하다 보면 어떤 코드를 썼다가 지웠다가 하는 일이 빈번하게 있습니다. 빈번하게 하는 일은 단축키를 활용하면 조금 더 생산성을 높일 수 있습니다. 마우스를 최대한 안 쓰도록 훈련하는 것이 좋습니다. vscode 한 줄 삭제 단축키 vscode에서 한 줄을 삭제하는 단축키는 다음과 같습니다. Windows: Ctrl + Shift + k MacOS: Cmd + Shift + k 공감수 3 댓글수 2 2022. 6. 30.
  • [vscode] 어떤 행을 복사해서 다른 곳에 붙여 넣고 싶을 때 빠르게 하는 방법 우리가 일반적으로 어떤 내용을 복사해서 붙여넣을 때는 복사하고자 하는 부분을 드래그해서 ctrl + c 한 다음에 원하는 위치에 커서를 놓고 ctrl + v를 합니다. vscode에서는 이 과정을 좀 더 간단하게 할 수 있습니다. 복사하고자 하는 행에 가서 드래그할 필요없이 ctrl + c 한 다음에 원하는 위치에 가서 ctrl + v를 해주면 붙여넣기가 됩니다. 행 전체를 드래그 하지 않고 그냥 커서만 갖다 놓고 ctrl + c만 했는데도 그 행 전체가 복사된 것입니다. 이 기능만 잘 활용해도 코딩 시간을 좀 더 단축시킬 수 있습니다. 공감수 5 댓글수 0 2022. 5. 14.
  • [vscode] html 문서에서 아이디 또는 클래스 부여한 div 요소 빠르게 생성하는 방법 웹 개발을 하다보면 아래와 같이 id 또는 class가 부여되어 있는 div 요소를 만드는 경우가 매우 잦을 것입니다. vscode에서는 위와 같은 코드를 아주 쉽고 빠르게 생성할 수 있습니다. #main만 입력한 후에 탭을 누르면 자동으로 아래와 같이 됩니다. #아이디 + 탭 또한 .name만 입력한 후에 탭을 누르면 자동으로 아래와 같이 코드가 완성됩니다. .클래스 + 탭 이 기능만 활용해도 코드 작성 시간을 상당히 줄일 수 있습니다. 공감수 1 댓글수 2 2022. 4. 9.
  • [vscode] 전체 프로젝트에서 어떤 단어를 검색하려면? 프로젝트 내에 어떤 단어를 썼는지 안 썼는지 헷갈리는 경우가 있습니다. 만약 어떤 단어를 썼다면 어떤 파일, 어떤 위치에서 사용했는지 알고 싶을 때가 있습니다. visual studio code에는 이를 위한 좋은 단축키가 있습니다. 한 파일 내에서 어떤 단어를 검색할 때는 ctrl + f면 되지만, 이렇게 여러 파일들로 구성되어 있는 프로젝트 단위에서 어떤 단어를 검색할 때는 ctrl + shift + f를 타이핑하면 됩니다. ctrl + shift + f 위 단축키를 입력하면 vscode UI 좌측 상단에 아래와 같은 검색창이 생성됩니다. 검색창에 내가 찾고 싶은 단어를 입력하면, 프로젝트 내에서 어떤 파일에 이 단어가 사용되었는지 내역을 알 수 있습니다. 그리고 나온 결과를 클릭하면 그 파일에서 그.. 공감수 9 댓글수 4 2022. 4. 4.
  • [vscode] html에서 여는 태그와 닫는 태그를 한 번에 수정하려면?, auto rename tag 확장 플러그인 안녕하세요. 비스카이비전입니다. 저는 코드 편집기 중에 visual studio code를 주로 사용하고 있습니다. 전세계 수많은 개발자들이 사용하고 있는 대표적인 코드 편집기죠. 보통 줄여서 vscode라고 부릅니다. vscode에는 개발을 좀 더 편하게 해주는 다양한 확장 플러그인들이 있습니다. 오늘은 그 중에서 웹 개발에 유용한 확장 플러그인을 하나 소개해드리려고 합니다. 바로 Auto Rename Tag 입니다. html에서 여는 태그와 닫는 태그를 한 번에 수정할 수 있게 도와주는 아주 유용한 놈입니다. vscode의 유저인터페이스를 보면 좌측에 툴바가 있습니다. 거기서 네모 네 개로 이뤄진 아이콘을 클릭하시면 vscode의 확장 플러그인을 검색할 수 있습니다. 검색창에 Auto Rename T.. 공감수 0 댓글수 0 2022. 4. 3.
  • [vscode] 반복되는 단어 한번에 수정하는 방법 아래 코드에서 testNum은 총 5번 출현합니다. 만약 testNum을 num으로 바꿔주고 싶다면 그 행들을 찾아가서 각각 수정해줘야겠죠? 개수가 몇개 안되면 큰 문제가 없지만 약 10번 정도만 반복 출현해도 굉장히 고치기 짜증스러워집니다. 다행히도 vscode에서는 이러한 반복되는 변수명을 단번에 쉽게 수정할 수 있습니다. testNum = 5 result1 = testNum + 2 result2 = testNum * 3 result3 = testNum ** 2 result4 = testNum / 2 print(result1) print(result2) print(result3) print(result4) Ctrl + F2 / Ctrl + Shift + L 단축키 활용 수정하고자 하는 단어에 커서를 .. 공감수 5 댓글수 12 2021. 6. 2.
  • [vscode] 비주얼 스튜디오 코드에서 Lorem ipsum 사용하려면 코딩을 하다보면 아무 의미 없는 긴 텍스트, 즉 더미 텍스트가 필요한 경우들이 있습니다. vscode에서는 html 문서에서 lorem을 입력하고 tab 키를 누르면 저절로 더미 텍스트가 생성됩니다. 하지만 다른 확장자의 파일에서는 이 방법으로 더미 텍스트가 생성되지 않습니다. 다른 확장자의 파일에서 이 기능을 사용하려면 Lorem ipsum이라는 플러그인을 설치해줘야 합니다. ctrl + shift + X로 마켓플레이스를 연 후에 Lorem ipsum을 검색해주세요. 그 다음에 파란색 설치 버튼을 눌러주세요. 설치가 완료되었다면, 더미 텍스트가 잘 생성되는지 테스트 해보겠습니다. 사용법은 먼저 f1 키를 누릅니다. 그리고 lorem ipsum이라고 타이핑 해주면, 선택할 수 있는 세가지 항목이 나타납니.. 공감수 3 댓글수 4 2021. 3. 27.
  • [vscode] Beauty 플러그인으로 웹 언어 코드 자동 정렬하기 이런 저런 코드를 갖다붙여 놓다보면 들여쓰기가 뒤죽박죽으로 되곤 합니다. 이것을 모두 찾아서 일일이 들여쓰기 해주려면, 꽤 많은 시간과 노력을 들여야하겠지요. vscode에는 웹 기반 언어들(html, css, javascript 등)의 코드를 자동으로 정렬해주는 플러그인이 여럿 있습니다. 저는 그 중 Beauty라는 플러그인을 사용하고 있습니다. Beauty를 사용하시려면, 마켓플레이스(Ctrl + Shift + X)에서 Beauty를 검색해서 찾은 후에 설치해주시면 됩니다. Beauty의 코드 자동 정렬 단축키는 Ctrl + Shift + B입니다. 전체 코드를 Ctrl + A로 선택하신 후에 Ctrl + Shift + B를 입력해주면 전체 코드가 보기 좋게 정렬됩니다. 다만, 파이썬과 같이 들여쓰기.. 공감수 2 댓글수 4 2021. 1. 11.
  • [vscode] vscode 내에서 html 파일 웹 브라우저에 열리게 하는 단축키 오늘은 vscode 편집기에서 html 문서를 작성하다가, 바로 웹브라우저를 실행시킬 수 있는 방법에 대해 다루겠습니다. open in browser 확장 플러그인 ctrl + shift + x로 마켓플레이스를 연 후 open in browser를 검색해서 TechER에서 만든 확장프로그램을 설치해줍니다. 저는 이미 설치해서 설치 버튼이 없는데, 아직 설치를 안하신 분은 녹색의 설치 버튼이 있을 것입니다. 설치하셨다면, 이제 alt + b의 단축키를 사용하면, html 문서에서 바로 디폴트 설정되어 있는 웹브라우저를 열 수가 있습니다. 저의 경우에는 크롬이 열리는데요, 만약 디폴트 설정되어 있는 웹브라우저 말고 다른 웹브라우저를 열고 싶다면, alt + shift + b를 이용하면 여러 종류의 브라우저 .. 공감수 1 댓글수 4 2020. 10. 15.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.