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 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 2018. 11. 5.
Visual Studio Code(비주얼 스튜디오 코드)로 파일 내용 비교하는 방법
VSCode를 사용하다가 서로 비슷한 파일이나 버전을 잘못 관리하여 2개의 파일을 서로 비교해 봐야하는 경우가 있습니다. 전문적으로 파일을 비교해 주는 프로그램이 있긴하지만 VS Code로도 그에 못지 않은 전문가 스러운 기능을 활용할 수 있습니다. 파일 비교 하는 방법 오른쪽에 있는 탐색기에서 비교하고자 하는 첫번째 파일을 선택하고 오른클릭을 합니다. 나오는 메뉴 중 비교를 위해 선택을 선택합니다. 이번에는 비교할 파일을 선택하고 오른클릭을 합니다. 나오는 메뉴 중 선택한 항목과 비교를 선택합니다. 파일 비교 하는 화면 ▲ 그러면 위와 같은 결과화면을 볼 수 있습니다. 현재 샘플화면은 서로 많이 다른 파일이라 빨강색이 많긴한데.. 빨간 부분은 비교파일에 대해서 없는 부분이고 초록색 부분은 더 추가된 부..
