You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
💽 개발하는데 유용한 VSCode 확장팩 - 유료 IDE 못지않게 ❗
편리하게 개발할 수 있는 확장팩 VSCode는 전세계에서 가장 많이 사용하는 코딩 에디터이다. 그 자체로 가벼워서 많은 사람들이 이용하지만, 이 또한 가벼운 에디터이기 때문에 같은 회사 제품인 Visual Studio에 비해 코딩하는데 있어 편리한 부가 기능들이 기본적으로 빠져 있다. 그럼에도 불구하고 부동의 1위를 지키고 있는 이유는 정말 많은 유저들이 부족한 부분을 매꾸기 위해 확장팩(Extenstion)을 개발하고 무료로 배포함으로서, 개발자들은 이 익스텐션은 입맛대로 설치해 나만의 개발환경을 구성할 수 있다는 점이다. 이번 포스팅에서는 VSCode에서 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결..
💽 Node / JavaScript 코딩하는데 유용한 VSCode 확장팩
자바스크립트 확장팩 모음 이번 포스팅에서는 VSCode에서 자바스크립트 / 노드 프로젝트를 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 또한 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. JavaScript (ES6) code snippets 짧은 문장으로 자주 사용하는 메소드 구성 코드를 사용할수있다. JavaScript (ES6) code snippets - Visual Studio Marketplace Extension for Visual Studio Code - Code snippets..
💽 PHP 코딩하는데 유용한 VSCode 확장팩
PHP 코딩에 도움되는 확장팩 이번 포스팅은, php를 코딩하는데 있어 편리하게 사용할수 있는 vscode 익스텐션을 추천 해보려고 한다. 다음 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워 여러분께도 소개하는 것이다. 만일, 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. PHP Formatter - PHP코드 정렬 Format HTML in PHP - PHP에서 HTML코드 정렬 PHP Intelephense - 문서, 작업 영역, 기본 제공 생성자, 메서드 및 함수에 대한 자세한 서명 도움 - 오류 허용 구문 분석기를 통해 열린 파일에 대한 여러 구문 분석 오류 진단 PHP IntelliSense php 코딩하는데 있어 코드 자동 완..
💽 HTML / CSS 코딩하는데 유용한 VSCode 확장팩
이번 포스팅에서는 VSCode에서 HTML과 CSS를 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 또한 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. 도움되는 HTML 코딩 확장팩 HTML CSS Support html 요소의 class에서 css 선택자 요소를 쓸때 자동 완성 기능을 지원해주는 익스텐션이다. 부트스트랩 같은 거대한 css 프레임워크를 사용할때 매우매우 유용하다. 아주 빠르게 클래스 속성 코딩이 가능하다. HTML CSS Support - Visual Studio Marketp..
💽 console.log 개선 VSCode 확장팩 모음
Dot Log console.log 스니펫이다. 단순히 console.log 문장을 자동시키는게 아니라, 변수 + .log를 통해 console.log에 변수 매핑까지 해주는 강력한 도구이다. Dot Log - Visual Studio Marketplace Extension for Visual Studio Code - Make it easy to console.log info marketplace.visualstudio.com xxx.log => console.log('xxx', xxx) xxx.clg => console.log('xxx', xxx ) xxx.cwa => console.warn('xxx', xxx) xxx.cer => console.error('xxx', xxx) 'xxxx'.log =>..
💽 GIT 관리하는데 유용한 VSCode 확장팩
GIT 익스텐션 이번 포스팅은, VSCode에서 GIT을 사용하는데 있어 편리하고 더 강력하게 사용할수 있는 vscode 익스텐션을 추천 해보려고 한다. 다음 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워 여러분께도 소개하는 것이다. 만일, 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. GitLens 레포지토리 내부 파일을 수정할 때 왠만한 내용은 다 오버레이로 보여주게 해주는 익스텐션이다. 코드 작성자를 시각화하고 Git 저장소를 완벽하게 탐색하고 강력한 비교 명령을 지원한다. 사실상 VSCode 내에서 GIT 버젼 관리와 코딩을 동시에 수행하는데 가능하게 하는 최강의 익스텐션이다. GitLens — Git supercharged - ..
![[VS Code] 💽 project tree - 파일 트리 구조 자동 생성](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FO2jHY%2FbtrrB5WiU8P%2FanhHbmSQqRQ1GvHqItO6K1%2Fimg.png)
[VS Code] 💽 project tree - 파일 트리 구조 자동 생성
project-tree 프로젝트를 진행하다보면, 즐비한 디렉토리의 파일과 폴더들을 정리하고 싶을 때가 있다. 보통 readme.md에 마크다운으로 파일트리를 타이핑하지만, vscode에 자동완성 익스텐션이 있어 소개해 본다. project-tree - Visual Studio Marketplace Extension for Visual Studio Code - A vscode plugin that generates a tree directory in README.md. marketplace.visualstudio.com 위의 링크의 익스텐션을 설치하고 ctrl + shift + p 를 눌러 커맨드 창을 띄운다. 그리고 project Tree 를 검색하여 실행한다. 그럼 Reade.md파일이 자동으로 생성되..
![[VScode] 💽 터미널 clear 안되는 현상 해결](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FueZdm%2FbtrrbTVIlkQ%2FpSXBULSGYX6AoCKxMzjUH1%2Fimg.png)
[VScode] 💽 터미널 clear 안되는 현상 해결
윈도우 cmd에서는 cls 명령어를 치거나, ctrl + l 을 하면 자동으로 터미널이 초기화 된다. 하지만 vscode의 cmd에서는 clear을 해도 커서가 위쪽으로 올라가있지, 스크롤을 올려보면 그 전의 내용들이 그대로 남아있음을 알 수 있다. 따라서, 스크롤을 위로 올려도 보여지는 데이터가 없도록 터미널 화면 모든 내용을 깨끗하게 초기화하는 법을 알아보자. 전역 명령 사용 F1 이나 ctrl + shift + p 를 눌러 명령줄을 띄우고 terminal clear을 쳐서 명령을 실행하면 된다. 단축키 지정 옆 사이드바의 톱니바퀴 아이콘을 누르고 바로 가기 키를 누른다. 그러면, 단축키 지정 메뉴가 나오는데, 검색창에 workbench.action.terminal.clear 를 검색한다. termi..
![[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 아주 유용한 플러그인이긴 하나, 퍼포먼스(성능) 이슈 및 자잘한 버그가 존재한다. 예를들어, 주석처리를 한 괄호에 색깔이 입혀지고, 초기 로딩이 느리다는 점등..
