WEB개발이야기/VScode 2023. 2. 7.
VScode의 package.json에서 AWS의 S3로 배포하는 방법
React.js나 Vue.js 등의 Package 프로젝트로 개발을 할 때 쉽게 AWS의 S3로 배포하는 방법에 대해서 공유합니다. 먼저 AWS의 S3의 버킷은 이미 생성되어 있다는 가정입니다. S3 버킷 생성 아래와 같이 버킷이 생성되어 있습니다. 목차는 S3의 버킷입니다. 버킷의 이름이며 잘 기억해 놔야 합니다. 리전, 그러니까 실제로 물리적으로 파일이 저장되는 위치라고 보시면 됩니다. 기억해놔야 합니다. 액세스는 퍼블릭으로 되어 있어야 외부에서 접근이 가능합니다. IAM 권한 부여하기 이제 외부에서 접근하기 위해서 IAM에서 권한을 부여해야 합니다. 좌측 메뉴에서 사용자를 선택합니다. 보안 자격 증명 탭을 선택합니다. 중간쯤에 위치한 액세스 키를 발행합니다. 발행을 하면 Access key ID와 ..
WEB개발이야기/VScode 2022. 2. 21.
[VScode 익스텐션] Visual Studio Code에서 클립보드에 저장된 Image 붙혀넣기 - Paste Image
마크다운(Markdown)으로 글쓰기를 할 때 이미지 붙여넣기에 대해 매우 유용한 익스텐션이 있어서 소개해 드릴게요. 캡처 프로그램으로 캡처를 하고 바로 마크다운 문서에 붙여넣기 하면 바로 이미지가 반영이 되고 이미지는 별도의 폴더에 저장이 되도록 구성되어 있어요.[Extension] Paste Image이미지를 클립보드에서 마크다운/asciidoc(또는 다른 파일)로 붙여넣기를 할 수 있어요.Paste Image 설정하기Paste Image를 몇 가지 설정하면 나에게 맞게 커스터 마이징 할 수 있어요. 모든 부분을 설명하기는 어렵고, 간단하게 몇 가지 설정하는 방법입니다. Base Path : 기본이 되는 폴더의 경로입니다. 입력값은 ${currentFileDir} 및 ${projectRoot} 입니다..
WEB개발이야기/VScode 2022. 2. 18.
Visual Studio Code에서 코드조각(Snippets)을 슬기롭게 사용하는 방법
Visual Studio Code (이하 VS code) 자체만으로도 매우 훌륭한 툴이지만 코드 조각(Snippets)을 잘 활용한다면 더 쉽고 빠르게 코딩을 할 수 있어요. 코드 조각(Snippets)이라고 하면 핸드폰의 단축키처럼 특정 문자를 입력하면 그에 해당하는 코드가 자동으로 작성이 되는 것을 말해요.저는 주로 Markdown으로 티스토리나 구글 블로거로 포스팅할 때 주로 사용해요. 기본 구성을 자동으로 해주기 때문에 상당히 편하죠.내장 코드 조각 (Built-in snippets)먼저 VS code를 설치하면 기본으로 설치되어 있거나 스니펫 익스텐션을 설치하면 사용할 수 있는 코드 조각들이 있어요. 이것만으로도 상당히 편리한 코드 생활이 가능하죠.예를 들면 위의 애니메이션 이미지처럼 html ..
WEB개발이야기/VScode 2022. 2. 17.
VScode(Visual Studio Code)소개와 설치하기
코딩을 하기 위한 편집기라면 TextEditor과 IDE로 나뉠 수 있을 거예요. 그중에 IDE는 특수한 환경이나 언어에 특화된 에디터라 매우 편리한 점은 있지만 범용적으로 사용할 수는 없는 거예요. 하지만 텍스트 에디터는 html, css, javascript, typescript, python, Markdown, C 등등.. 다양한 환경이나 언어에서 범용적으로 사용할 수 있기 때문에 나름 인기가 높습니다.라떼~ 개발자라면 울트라 에디터, 에디트 플러스, 노트패드 등등.. 을 아실 텐데요. 이 텍스트 에디터의 현재 버전이 Visual Studio Code라고 할 수 있어요.윈도의 메모장, 위드 패드 등이 1세대, 울트라 에디터, 에디트 플러스 등이 2세대라면 서브라임텍스트(Sublime Text), 비..
WEB개발이야기/VScode 2020. 9. 7.
[익스텐션] Vscode 에서 태그명 변경 시 자동으로 닫힘 태그명까지 변경 (Auto Rename Tag)
Visual studio code의 확장 프로그램인 Extensions에는 정말 재미있고 유용한 기능들이 너무 많습니다. 그중에서 태그를 수정할 때 자동으로 닫힘 태그까지 수정해 주는 익스텐션이 있습니다. Auto Rename Tag HTML, XML, php 등 태그의 이름을 바꾸면 쌍을 이루는 닫힘 태그의 이름이 자동으로 바뀝니다. 설치하기 아래의 링크를 클릭하거나 익스텐션 메뉴에서 Auto Rename Tag를 검색 후 설치를 하면 됩니다. Auto Rename Tag 바로가기 설정하기 ▲ 먼저 파일 > 기본설정 > 설정 으로 설정창을 열어야 합니다. ▲ 좌측메뉴 중 확장 탭을 선택합니다. Auto Rename Tag configuration을 선택합니다. 이 익스텐션의 설정은 settings.js..
WEB개발이야기/VScode 2020. 9. 4.
세상 편리한 VScode 설정 동기화 하는 방법
제 메인 코딩 에디터는 VScode입니다. 서브라임텍스트, 아톰, 브라켓 등을 써봤는데 저에게는 VSCode가 잘 맞는 것 같습니다. 요즘 재택근무다 뭐다 해서 근무하는 장소나 컴퓨터가 여러 대 일 때가 있고 윈도우 쓰다 맥 쓰다 하는 저에게 코딩 환경의 일관성은 매우 중요한 요소입니다. 그런데 글쎄 VScode에서는 환경설정을 동기화 해주는 기능이 있다고합니다. 예전에는 'Shan Khan'이라는 분이 익스텐션으로 개발한 Settings Sync 를 주로 사용했었는데 언제부터인지 이 기능이 VScode에 기본으로 포함이 되어버렸습니다. VisualStudio Code 에디터의 설치와 유용한 확장프로그램(플러그인) 바로가기 여러곳에서 코딩하는 사람에게는 필수 기능이지 않을까 합니다. 설정 동기화 기능설정..
WEB개발이야기/VScode 2020. 4. 1.
[Extensions] VScode에서 이미지 캡쳐를 슬기롭게 사용하는 방법(feat. Paste Image)
저는 블로그 글을 VScode에서 마크다운(Markdown)을 이용하여 작성을 합니다. 그때 자주 사용하는 것이 스크린캡쳐 받은 이미지를 저장하고 링크를 거는 것입니다. 크게 어려운 작업은 아니지만 이미지가 많을 경우 여간 성가신 것이 아닙니다. 이런 불편함이 나뿐만이 아닌지 누군가 익스텐션으로 개발을 해 놓은 것이 있어 소개합니다. 이름에서도 알수 있듯이 클립보드에 저장되어 있는 이미지를 붙혀넣기 하는 것이 주요 기능입니다. 현재 46,438건의 다운로드가있었고 24명이 5점의 평점을 주었습니다. 익스텐션이 훌륭하다는 뜻입니다. ^^ Paste Image 기본 사용법 설치하는 방법은 간단하기 때문에 생략합니다. 1. 내PC에서 이미지 복사하기 먼저 내PC의 이미지나 웹브라우저의 이미지를 Ctrl+C나 ..
WEB개발이야기/VScode 2020. 3. 17.
[Extensions] VScode에서 코멘트를 슬기롭게 사용하는 방법 (feat. Better Comments)
VScode를 사용할 때 유용한 익스텐션(Extensions)을 소개해 드리겠습니다. 이번에 소개할 익스텐션은 Better Comments입니다. 현재 72명에게 별5개 추천을 받고 있으니 어느정도 입증이 됬다고 볼 수 있겠네요. Better Comments 소개 코딩을 하다보면 반드시 주석을 달게 되는데요. Better Comments는 코드의 주석(코멘트)를 좀더 직관적으로 볼 수 있게 특정 특수문자에 대해 색상으로 설명을 볼 수 있게 해주는 기능을 합니다. 위의 이미지에서 주석 부분만 참고하면 됩니다. 주석표시 뒤에 특수문자에 따라 그 줄의 색상이 구분되어 집니다. * 문자 : 초록색으로 표시 - 일반 정보 ! 문자 : 빨간색으로 표시 - 중요한 주의사항 ? 문자 : 파란색으로 표시 - 궁금한 사항..
WEB개발이야기/VScode 2019. 9. 16.
VScode 최고의 익스텐션 project Manager
VScode의 유용한 익스텐션인 프로젝트매니져-Project Manager를 소개합니다. 이 익스텐션은 개발 소스를 프로젝트 단위로 쉽게 관리하게 해주는 익스텐션입니다. 장점 제목에서도 알 수 있듯이 프로젝트를 매우 쉽게 전환 시켜주는 익스텐션입니다. 프로젝트의 구분은 보통 폴더단위로 구성되는데, 프로젝트를 변경하거나 생성하려면 폴더열기를 통해서 다른 프로젝트의 경로를 찾아서 열거나 해야하는데 프로젝트 매니저는 쉽게 버튼하나 누르면 변경을 할 수 있습니다. 또한 쉽게 사용할 수 있게 VScode의 좌측에 아이콘 버튼을 달아 놨습니다. Git, Mercurial, SVN repositiories는 자동으로 감지를 합니다. 사용법 간단하게는 좌측의 버튼을 사용하여 활용할 수도 있고 F1을 눌러서 명령실행줄을..
WEB개발이야기/VScode 2019. 9. 16.
VScode 최고의 익스텐션 Path Intellisense를 소개합니다.
안녕하세요. 반갑습니다. 이번에는 VScode의 익스텐션 중에 제가 사용해 본 것 중 괜찮다 싶은 것을 시리즈로 소개해 볼까 합니다. 첫번째로 소개할 것은 Path Intellisense입니다. Path Intellisense Path Intellisense는 VScode를 사용중에 파일이나 이미지 등의 경로를 지정할때 자동으로 경로를 선택해서 지정할 수 있게 해주는 아주 편리한 익스텐션입니다. 설치하는 방법은 따로 설명할 필요는 없겠지요? 저는 이미 설치한 상태입니다. Path Intellisense를 설치하고 몇가지 옵션이 있기는 하지만 설치하는 것으로 기본적인 작동을 합니다. 기준은 프로젝트 기준으로 작동을 합니다. 프로젝트는 해당 파일들이 모여있는 폴더라고 보시면 되고 그 폴더를 기준으로 상대경로..
WEB개발이야기/VScode 2019. 9. 14.
VScode Code Formater 인 Prettier 완벽 적용하기
VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다. VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다. Prettier가 코드를 강제적으로 변경을 시킨다면 Beautify는 좀더 자유롭게 놔두는 편입니다. 자신만의 코드작성 규칙을 가지고 있다면 Prettier가 짜증 날 수도 있습니다. 내 코드를 막 바꿔버리닌까요. 하지만 그런면이 코드를 항상 일정하게 정렬을 시켜 주기도하닌까 심리적인 타격만 없다면 이보다 좋을 수 는 없을 겁니다. 또한 여러 사람이 한 프로젝트를 같이 코딩을 해야 한다면 꼭 필요한 익스텐션이라고 할 수 있습니다. VScode에 prettier 적용하기 VScode에 ..
WEB개발이야기/VScode 2019. 1. 9.
VScode의 Extention의 폴더 위치는 어디일까요?
기존에는 텍스트에디터로 울트라에디터나 에디트플러스, Notepad++ 등등을 많이 사용 했었지만 이제는 좀 더 진보된 신세대 텍스트에디터라고 할 수 있는 VScode, 서브라임텍스트 등으로 넘어가는 추세입니다. 저도 그렇고 요즘의 가볍게 코드를 개발하는 개발자 분들이 많이 사용하고 있습니다. 약간 사용법이 상이 하지만 익숙해 지면 너무나 편리한 에디터라고 할 수 있습니다. VScode를 설치해서 사용하다 보면 가끔씩 설치 경로를 직접 엑세스 해야하는 경우가 종종 있습니다. 나중에 저도 참고하기 위해 그 경로를 포스팅해 놓을까 합니다. VScode 설정정보가 있는 폴더 위치 Mac에서 보통의 방법으로 VScode를 삭제하고 새로 설치할 경우 이상하게 모두 삭제가 되는 것이 아니라 이전의 기록들을 다시 가지..
WEB개발이야기/VScode 2018. 11. 5.
Visual Studio Code(비주얼 스튜디오 코드)로 파일 내용 비교하는 방법
VSCode를 사용하다가 서로 비슷한 파일이나 버전을 잘못 관리하여 2개의 파일을 서로 비교해 봐야하는 경우가 있습니다. 전문적으로 파일을 비교해 주는 프로그램이 있긴하지만 VS Code로도 그에 못지 않은 전문가 스러운 기능을 활용할 수 있습니다. 파일 비교 하는 방법 오른쪽에 있는 탐색기에서 비교하고자 하는 첫번째 파일을 선택하고 오른클릭을 합니다. 나오는 메뉴 중 비교를 위해 선택을 선택합니다. 이번에는 비교할 파일을 선택하고 오른클릭을 합니다. 나오는 메뉴 중 선택한 항목과 비교를 선택합니다. 파일 비교 하는 화면 ▲ 그러면 위와 같은 결과화면을 볼 수 있습니다. 현재 샘플화면은 서로 많이 다른 파일이라 빨강색이 많긴한데.. 빨간 부분은 비교파일에 대해서 없는 부분이고 초록색 부분은 더 추가된 부..
WEB개발이야기/VScode 2018. 9. 11.
VSCode를 터미널(CMD)창에서 바로열기
컴퓨터를 켜고 VSCode창을 열때는 여러가지 방법이 있습니다. 그 중에 제가 가장 선호하는 방법은 터미널창에서 열기 입니다. 터미널에서 VScode 열기 Finder에서 원하는 폴더로 이동하여 폴더를 선택하고 마우스 오른클릭 후 서비스 항목에서 터미널을 선택합니다. 맥과 달리 윈도우에서는 탐색기에서 열기를 원하는 폴더로 이동하여 shift + 마우스 오른클릭 후 명령 창 열기를 선택하여 명령창을 엽니다. 터미널창의 명령어 입력에서 code . 을 실행 시킵니다. 이 명령은 해당 위치에서 VScode를 열겠다는 명령어 입니다. 오류상황 하지만 위 이미지 처럼 command not found 라는 오류가 나는 경우가 있습니다. 원인은 code .의 명령어 위치를 찾지 못하기 때문에 발생하는 오류 입니다. ..
