You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[VSCode] 💽 Thunder Client (포스트맨 대신 이거 쓰자)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1IOEW%2FbtrqNzC2r6K%2FOb5tuwuTNl3rIdTnB60Wi1%2Fimg.png)
[VSCode] 💽 Thunder Client (포스트맨 대신 이거 쓰자)
보통 웹개발할 때 API 요청에 대한 결과를 체계적으로 확인하기 위해 포스트맨(Postman) 을 많이 들 사용한다. Postman은 API 개발, 테스팅, 문서화 및 모니터링을 위한 인기있는 플랫폼이다. 개발자들이 API 요청을 생성하고, 응답을 테스트하며, 협업을 통해 API를 관리할 수 있게 도와준다. 크롤링, RESTful 서비스, GraphQL 등 다양한 유형의 API와 커뮤니케이션할 때 유용한 도구로 사용된다. 하지만 단순히 API를 테스트 하는 목적으로서 포스트맨을 사용한다면 너무 기능이 과하고 무겁다. 따라서 VSCode 에디터 내에서 간단한 조작만으로 API 테스트를 빠르고 수월하게 할 수 있는 익스텐션을 소개해본다. Thunder Client Thunder Client 는 Postman..
![[VSCode] 💽 Colorful Comments - 주석을 컬러풀하게](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcxPivm%2FbtrqNe7aRbA%2FdKhQ1oWnyunFGZDNKHsBV0%2Fimg.png)
[VSCode] 💽 Colorful Comments - 주석을 컬러풀하게
Colorful Comments Colorful Comments - Visual Studio Marketplace Extension for Visual Studio Code - Improve and Enhance your code and make it attractive by adding Colorful Comments marketplace.visualstudio.com 기존 Better Comments 익스텐션보다 더 다양한 색을 지원한다. 거기다 간단하게 색깔을 바꿀수도 있으니 주석 주제에 따라서 색깔을 적절히 쓰면 코드 가독에 매우 도움이 될 것이다. Red (!) Blue (?) Green (*) Yellow (^) Pink (&) Purple (~) Mustard (todo) Grey (//) ..
![[VSCode] 💽 Colonize 익스텐션 - 세미콜론 자동화](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1NLFS%2FbtrqRUs33A6%2F9c3KyvNPfTUAt6LTBvFawK%2Fimg.png)
[VSCode] 💽 Colonize 익스텐션 - 세미콜론 자동화
Colonize 괄호안의 코드를 작성하고 다음줄로 넘어갈때, 세미콜론을 찍기 위해 마우스나 방향키를 꾹 누르거나 end키를 누르는가? 앞으로 그럴 필요가 없다. 이 익스텐션을 이용하면, 자동으로 세미콜론을 찍어주고, 커서가 중간 줄에 있더라도 바로 다음줄로 점프해 주기 때문이다. Colonize - Visual Studio Marketplace Extension for Visual Studio Code - Adds semicolon at the end of the line and optionally newline after marketplace.visualstudio.com 무슨 말이냐 하면 아래 gif를 보면 이해할수 있을 것이다. shift + enter 해당 줄 끝에 세미콜론을 자동으로 추가해주고,..
![[VS Code] 💽 Bracket pair colorization 10,000x faster](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fmuojb%2FbtrzUh0GYhy%2FtzJAEyEaU3v4UyKiTPAhkK%2Fimg.webp)
[VS Code] 💽 Bracket pair colorization 10,000x faster
Bracket Pair Colorizer 익스텐션 Bracket Pair Colorizer는 여는 괄호와 닫는 괄호를 같은 색으로 꾸며줘, 코드 블록 시작과 끝이 어딘지를 쉽게 파악할 수 있도록 도와주는 VSCode의 서드파티 익스텐션이다. Bracket Pair Colorizer 2 - Visual Studio Marketplace Extension for Visual Studio Code - A customizable extension for colorizing matching brackets marketplace.visualstudio.com 아주 유용한 플러그인이긴 하나, 퍼포먼스(성능) 이슈 및 자잘한 버그가 존재한다. 예를들어, 주석처리를 한 괄호에 색깔이 입혀지고, 초기 로딩이 느리다는 점등..
![[VSCode] 💽 코딩 폰트를 바꿔보자 (D2coding / Fira)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmKD7Y%2FbtrmvewgD2b%2F3IHNa1bPfLBeP4pHKDeS1k%2Fimg.png)
[VSCode] 💽 코딩 폰트를 바꿔보자 (D2coding / Fira)
D2coding 네이버에서 오로지 개발을 위해서 만든 폰트이기 때문에 당연히 개발할 때 폰트 가독성이 상당히 뛰어나다. d2codingfong 깃헙(github)에 들어가서, 최신 릴리즈(현재자 Ver 1.3.2)를 선택 후, D2Coding으로 시작하는 zip 파일을 선택하여 다운로드 한다. Releases · naver/d2codingfont D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 위 폰트 설치 화면에서 설치를 클릭하여 D2Coding 폰트를 설치한다. vscode - preferences - settings에서 'font'를 검색해준 후 'Edit in ..
![[VScode] 💽 터미널에 cmder 사용하는법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLHa1X%2FbtrmjbNDVat%2F1rOhsPs1DziKajmlQ8tiX0%2Fimg.png)
[VScode] 💽 터미널에 cmder 사용하는법
VS Code에서 cmder 사용 vs code의 터미널을 칙칙한 bash나 cmd가 아닌 알록달록한 다 기능의 cmder을 설정하는 법을 포스팅 해본다. 1. Cmder 다운 [CMDER] 💽 cmder 설치 & 설정 (+문자깨짐 해결법) Cmder Cmder는 윈도우가 기본으로 제공하는 CMD 환경을 git을 사용하는데 최적화한 프로그램이다. git은 Command 를 이용하여 사용하는 것이 모든 기능을 충분히 사용할 수 있는 방법이기 때문이다. 다 inpa.tistory.com Cmder | Console Emulator Total portability Carry it with you on a USB stick or in the Cloud, so your settings, aliases and hi..
![[VSCode] 💽 Project Manager 익스텐션 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvDzVT%2FbtrqVvffmq5%2FREyjW8SYKkCKD3RpKTPDyk%2Fimg.png)
[VSCode] 💽 Project Manager 익스텐션 사용법
프로젝트 매니저 사용이유 이클립스나 비주얼스튜디오 같은 경우 보면, 프로젝트를 생성할 때마다 프로젝트명으로 알아서 폴더를 생성해주고 관리를 해준다. 그런데 비주얼스튜디오코드는 사실 개발환경이라기보단 편집기에 가까워서, 내가 다른 프로젝트로 변환하려면 폴더로 직접 이동해 드래그 해서 워크스페이스에 가져오는 방법밖에 없다. 폴더별로 project 들이고 폴더별로 배포를 진행하니 점점 더 많아질 수 밖에 없다. 수동으로 폴더 전환을 Open Folder 로 하면 번거롭고 해당 폴더별로 열려있던 파일도 다 닫아야 하고 아주 귀찮다 위처럼 자주 사용하는 프로젝트들을 저장해 편집기 내에서 목록으로 쉽게 관리하고 간편하게 스위칭 해주는 기능을 제공하는게 Project Manger 익스텐션 이다. 한마디로 요약하자면 ..
![[VSCode] 💽 BookMarks 익스텐션 사용법 - 코드에 북마크를 걸자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrlNwF%2FbtrqNL4JB5S%2FmPrPbPD0PkXyM5qEh5rfb0%2Fimg.png)
[VSCode] 💽 BookMarks 익스텐션 사용법 - 코드에 북마크를 걸자
bookMarks 확장팩 브라우저에서 사이트를 북마크하면, 나중에 메뉴에서 찾아 클릭만 하면 바로 그 사이트로 이동한다. 이것 역시 특정 코드 줄에 북마크를 지정해, 메뉴에서 바로 찾아들어가는 기능을 제공해준다. 북마크 추가하기 해당 라인을 클릭하고, 마우스 우 클릭 후, Bookmarks -> Toggle을 클릭하면 왼쪽에 북마크 표시가 뜰 것이다. 이제 메뉴에서 원하는 북마크를 참고할 수 있다. 북마크 단축키 변경 File>>Preferences>>keyboard shortcuts를 선택하거나 Ctrl-K Ctrl-S를 차례로 누른 후 Bookmark로 검색하고 적당한 단축키로 변경해 줍니다.
![[VScode] 💽 새파일 / 새폴더 단축키 설정하는 법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvtJd0%2FbtrkAiUyA62%2FE8RTIUYcTqRCs4ZSgPNp81%2Fimg.png)
[VScode] 💽 새파일 / 새폴더 단축키 설정하는 법
Visual Studio Code를 사용하면서 새파일, 새폴더를 만드는 방법이 너무 까다롭다는 생각이 들었다. 일일이 new File, new Folder등을 마우스로 클릭하는 작업말이다. 그에반해 IntelliJ에서 개발을 진행할 떄는 ctrl+n, ctrl+shift+n등을 통해 새파일 새폴더등을 만들수 있었는데 말이다. 이번 시간에는 새폴더/새파일 에 대한 단축키 추가 설정을 포스팅 해본다. 1. ctrl + shift + p를 누르고 Open keyboard Shortcuts (JSON) 으로 들어가 설정한다. Default가 아니다. 유의하자 2. 그리고 다음 처럼 작성해주면 된다. [ { "key": "ctrl+n", "command": "explorer.newFile", "when": "!e..
![[VSCode] 💽 터미널 알록달록하게 꾸미기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fci80Al%2Fbtrjudmo0ex%2FzkUMOpVpSLcO13EDSbycM0%2Fimg.png)
[VSCode] 💽 터미널 알록달록하게 꾸미기
VSCode 내장 터미널 하이라이팅 이번 시간에는 vscode 터미널을 알록달록하게 꾸며보는 법을 살펴볼 것이다. 1. 터미널 색깔 템플릿 고르기 해당 사이트에서 여러 터미널 색깔 템플릿을 고를 수 있다. 좌측 nav메뉴에서 원하는 템플릿을 고르고, Copy to clipboard를 클릭하자. Base16 Terminal Colors for Visual Studio Code glitchbone.github.io 2. setting.json 파일을 열기 3. 데이터를 setting.json에 추가하기 "workbench.colorCustomizations": { "terminal.background":"#1D2021", "terminal.foreground":"#A89984", "terminalCursor..
![[VSCode] 💽 터미널 ↔ 에디터 포커스 전환 단축키 설정하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRBxP0%2Fbtrjisq0nFI%2FkOajmz9vS8LaEZpKE44HPK%2Fimg.png)
[VSCode] 💽 터미널 ↔ 에디터 포커스 전환 단축키 설정하기
터미널 ↔ 에디터 간편 전환하기 개발을 할때, 터미널과 코드 에디터 사이를 포커스 전환을 할 경우가 많이 생긴다. vscode에는 따로 이 기능에 대한 단축키를 지원하지 않아 우리가 직접 구현해주어야 한다. 1. ctrl + shift + p를 누르고 Open keyboard Shortcuts (JSON) 으로 들어가 설정한다. Default가 아니다. 유의하자 2. 그리고 다음 처럼 작성해주면 된다. 필자는 ctrl + ; 로 두 창을 손쉽게 전환하도록 설정하였다. // 키 바인딩을 이 파일에 넣어서 기본값 재정의 [ // Place your key bindings in this file to override the defaultsauto[] { "key": "ctrl+;", "command": "te..
![[VSCode] 💽 설정 동기화 하기 👪 - 다른 컴퓨터에서도 같은 코딩환경을 구축](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSudoW%2FbtrgdGLVmWK%2Ffk6i44XoI9dckKJ5gCjTT0%2Fimg.png)
[VSCode] 💽 설정 동기화 하기 👪 - 다른 컴퓨터에서도 같은 코딩환경을 구축
설정 동기화 기능 설정 동기화를 사용하면 설정, 키 바인딩 및 설치된 확장과 같은 Visual Studio Code 구성에 대해서 변경이 있을 때 마다 백그라운드로 Microsoft 계정이나 github계정에 저장해 놨다가 필요할 때(다른 컴퓨터나 아니면 컴퓨터를 포맷 후 다시 VScode를 사용할 때) 다시 복구해서 동일한 환경을 한번에 구현해 주는 기능입니다. 설정이 변경되든지, 키 바인딩을 변경하던지 확장프로그램을 설치 또는 삭제 하면 자동으로 업데이트를 해 줍니다. 설정 동기화 실행하기 설정 동기화는 파일 > 기본 설정 > 설정 동기화 를 실행하면 됩니다. 아래와 같이 동기화 할 항목을 선택하는 창이 뜹니다. 5가지 종류를 동기화 해줍니다. 1번 GitHub 계정을 선택하면 신규 또는 로그인을하여..
