에디터/비주얼 스튜디오 코드(Visual Studio Code)2020. 11. 2. 14:38

최근에 어떤 뜻이 있는 문자가 아닌 말그대로 숫자와 문자가 섞여있는 랜덤 문자가 필요해서 확장 프로그램을 설치해서 사용중 입니다. 확장 패키지 이름은 Insert Random Text 입니다 1. 설치 insert random text 검색 후 설치 합니다. 2. 랜덤 텍스트가 필요한 페이지 에서- 컨트롤 + 쉬프트 + p- 검색창에 hash 검색- 본인이 사용하기에 적당한 길이의 랜덤 텍스트 선택 3. 바로 생성된 문자는 양쪽 끝에 싱글쿼티 문자가 있고 줄바꿈이 되어 나옵니다.이런 설정이 필요치 않으면 [4.] 를 보시면 됩니다. 4. 설정을 여는 단축키는 컨트롤 + 콤마(,) 입니다. 5. 상단에 random 입력 후 insert Radom... 을 선택 후 - With Quote 체크 해제 (랜덤 ..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2020. 10. 21. 17:53

euc-kr 로 되어있는 파일의 내용이 깨져 보인다는 코멘트를 보고 게시글 남깁니다.https://recoveryman.tistory.com/416#comment12491690 1. euc-kr 로 작성된 문서는 vscode 에선 깨져 보입니다. 이를 바로 잡기 위해 2. 하단의 UTF-8 을 클릭하여 나오는 메뉴중 '인코딩하여 다시 열기' 부분을 클릭합니다. 3. 상단에 korean (EUC-KR) 이 있는데 이 부분을 클릭하면 4. euc-kr 로 작성된 문서를 읽을 수 있게 됩니다.

에디터/비주얼 스튜디오 코드(Visual Studio Code)2020. 8. 6. 02:54

이 글은 버추얼돔 같은 그런건 아니고 그냥 마크업 형태가 있는 JS를 사용하고 싶어서 작성하게 되었습니다. 전 직장에서 제 사수분이 이런 설정을 사용하여 작업을 했었는데 저는 굉장히 신선한 느낌을 받았었기에 포스팅 작성합니다. 우선 원하는 형태는 대략 이런 느낌입니다. 파일명: markup.html.js 1234567const markup = ` `; 이걸 vscode 에서 작성 한다면 html 태그 emmet 기능을 사용 못하기 때문에 일일히 손으로 타이핑을 해야하는 상황이 오게 됩니다. JS 에서 마크업 표현이 가능했으면 좋을꺼 같았습니다. 다만, '특정 이름'을 가지고 있는 파일에 대해서만 JS 에서 마크업 표현이 되었으면 합니다. 위에 굳이 파일명을 적어논 이유가 있습니다.바로 그 '특정 이름' ..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2019. 1. 2. 23:54

아래 공식 사이트에서 비주얼 스튜디오 코드(vs code)에디터를 다운 받으면 에디터 자체가 영어로 출력이 됩니다.https://code.visualstudio.com/ 예전엔 이 공식 사이트 에서 다운 받으면 한글 에디터로 깔렸던 거로 기억하고 있어요. 그래서 별도로 언어 설정을 하지 않아도 되었습니다.지금은 위 공식사이트에서 다운 받으면 에디터의 언어가 영어로 표기되어 나옵니다.제 블로그를 보시고 에디터를 셋팅하셨다면 분명 메뉴선택이나 그런부분에 있어서 뭔가 많이 다른 점이 있을꺼예요. 우선 그 첫번째로 에디터가 한글로 나오게 바꿔보려 합니다. 공식 사이트에서 에디터를 다운받고 에디터를 열어보시면 스타트 페이지 가 나오는데 그건 그냥 끄시고 아래 사진과 같이1. 좌측 사이드 메뉴의 네모 아이콘 클릭2..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2018. 11. 14. 10:43

비주얼 스튜디오 2017 또는 비주얼 스튜디오 코드 로 실시간 라이브 코딩을 할 수 있게 되었습니다!이 확장 기능은 여러 작업자가 하나의 프로젝트에 참여해 개발할 수 있다는 큰 장점이 있습니다.꼭 업무적인게 아니더라도 온라인 형식의 스터디 에선 좋은 이점으로 작용할듯 합니다. 예전에 온라인 스터디 그룹을 만들었을때 cloud9 이라는걸 사용해서 온라인으로 코드를 공유 했었어요. 그 c9의 큰 단점이 있었는데 오래전 만든 프로젝트를 여는데 걸리는 시간이 너무나도 길었습니다. 해서 어쩔 수 없이 개인의 노트북을 사용하고 그걸 형상관리해서 스터디를 했었는데요. 새로 나온 이 비주얼 스튜디오 코드의 확장 기능이 이런 부분을 많이 해소시켜줄듯 합니다. ^^ 제 설명 보다는 한글 번역된 페이지가 존재해서 링크 걸어..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2018. 9. 17. 15:25

vscode 의 자동저장 방법 입니다. 오토세이브, 백업파일 생성 이라고 많이 부르시는거 같아요. 이 기능은 에디트 플러스에는 기본적으로 내장되어 있던거로 기억합니다. 자동 백업 파일을 생성하는 이유는 보통 버전관리툴(Git, SVN)의 사용이 여의치 않으신 분들이 사용 하시는것 같습니다. 자동 백업은 이전에 작성했던 소스를 알고 싶다거나 되돌려야 할 때 사용하죠. (사실 이런건 백업 파일들이 쌓이는 이런 방식보다는 거의 무조건 스냅샷으로 관리되는 Git 이나 SVN 이 좋습니다.) 일단 필요하신 분들이 몇분 계시는것 같아서 작성합니다. 우선 좌측의 확장 버튼을 눌러줍니다. 그리고 나오는 창에서 saveBackup 이라고 검색하면 단 하나 나옵니다. 설치버튼 눌러줍니다. 다시 로드 클릭 현재 제 D드라이..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2018. 8. 31. 09:31

vscode 정말 좋은 에디터인데 저도 이 에디터를 주력으로 사용하고 있습니다.한글로도 되어있고 확장기능 설치및 사용 방법이 서브라임과 비교했을때 쉬운편 입니다. 한글이라서 그런가 싶기도 하네요 ^^바요엔님이 친절하게 어떤 질문에 대해 장문의 글을 남겨 주셨는데요. 너무 정리가 잘 되어 있고 처음 이 에디터를 접하셨다면 바요엔님이 남기신 답글을 꼭 읽어보시면 아주 좋을꺼 같습니다.https://cafe.naver.com/hacosa/235648

에디터/웹스톰(WebStorm)2018. 6. 12. 20:48

웹스톰 2018.1.4 버전을 이번에 새로 구매하게 되었습니다. 그래서 혹시 테마 변경을 한 후 폰트 변경에 어려움이 있으신 분들이 계시면 이 게시물이 도움이 되었으면 합니다. 이 게시물은 윈도우OS 기준으로 작성했습니다. 우선 테마를 설치합니다. 테마설치 : http://recoveryman.tistory.com/348 그리고 왼쪽 상단의 File -> Settings 를 눌러줍니다. 단축키는 컨트롤 + 알트 + S 입니다. 그리고 아래 사진에 나와있는 순서대로 좌측 메뉴의 Editor -> Font -> Current editor font: [적용중인폰트이름], [폰트사이즈] 를 눌러줍니다. 사진이 잘 안보이면 클릭해서 보시면 크게 나옵니다. Font 부분을 선택해서 원하는 폰트로 바꿔주시면 됩니다...

에디터/비주얼 스튜디오 코드(Visual Studio Code)2018. 2. 12. 09:31

이 패키지는 이전에 소개해 드린 live server 와 매우 유사합니다. 다만 이걸 쓰는 이유는 live server 보다 좀 더 빠르고 안정적 입니다. 웹서버를 열어서 웹페이지를 서버가 동작하는 환경에서 보여주는 건데요. 장단점이 있습니다. 장점은 별도의 웹서버(IIS, Apache)를 설치할 필요없습니다. 또한 앞서 말씀해 드린 live server 보다 좀 더 빠른거 같습니다. 제가 테스트를 해봤는데 열리는 시간 새로고침 속도 모든 면에서 빠르다는걸 느꼈습니다. 단점은 이 에디터를 이용해서 웹서버를 열 경우 장시간 미 사용시 웹서버가 저절로 닫힙니다. 다시 에디터로 돌아가서 단축키를 눌러줘야 합니다. 또 프로젝트의 루트 폴더가 필요하다면 반드시 최상위 폴더를 넣어줘야만 합니다. 작업하고자 하는 폴..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2018. 2. 7. 10:24

서브라임텍스트 는 태그 또는 내용을 감싸는 태그를 생성할 수 있었습니다.아마 다른 에디터도 감싸는 태그를 만들 수 있던거로 기억하는데요.이게 정말 실무에서 엄청나게 유용합니다. 거의 반드시 쓰게되어 있어요. 동일한 기능을 하는 다른 에디터의 패키지아톰: http://recoveryman.tistory.com/310 먼저 이 GIF 를 보시면 이게 어떤 기능을 하는건지 바로 확인하실 수 있습니다. 이거 반드시 쓰게되어 있습니다.꼭 필요한 기능이기에 꼭 소개해드리고 싶었습니다. 먼저 에디터를 키시면 좌측에 저런 네모난 아이콘이 있습니다.저 아이콘을 클릭하면 확장 기능을 설치할 수 있습니다. 다음과 같은 화면이 나왔을꺼예요. 좌상단에 검색영역이 있는데 다음과 같이 검색합니다.htmltagwrap검색하시면 이 ..