일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 웹스크래핑
- 자바스크립트
- 코딩규칙
- google style guide
- CSS애니메이션
- 투두리스트
- Vue.js
- 스타일가이드
- html제거
- 자기개발
- python
- javascript
- to do list
- CSS로딩
- 구글CSS
- 뉴스수집
- MariaDB
- 구글스타일가이드
- 코딩가이드
- vuejs입문
- 파이썬
- @keyframes
- 로딩UI
- 프레임워크
- vueJS
- 개발회고
- css규칙
- 코딩컨밴션
- css rule
- vue-cli
- Today
- Total
코드공부방
VSCode(비주얼스튜디오코드)에서 SFTP에 직접 붙어 작업하기(부제 : 안녕, Editplus) 본문
VSCode(비주얼스튜디오코드)에서 SFTP에 직접 붙어 작업하기 (부제 : 안녕, Editplus)
아마 웹개발자라면 누구나 Editplus를 써보았을 것이다. 아니, 지금도 사용하고 있는 웹개발자도 많을 거라 생각된다. FTP에 직접 붙어서 서버에 있는 파일을 직접 열어 작업하고 저장하는데는 Editplus만한 툴이 없다고 생각된다. 허나 나는 FTP에 직접 붙어서 작업할 일도 없어지기도 하고 서버에 직접 붙어서 작업하다보면 다수의 개발자가 존재할 경우 충돌이슈나 버전관리도 안되기때문에 사용한지는 꽤 됐다. 아예 Editplus는 설치도 안되어있다. 최근에는 주로 VSCode나 Eclipse를 주로 사용하는 편인데 얼마전 회사 업무 중 직접 FTP에 붙어서 작업해야하는 이슈가 생겨 VSCode에서 직접 서버에 붙어 작업할 수 있나 검색해보니 역시 누군가 개발해두었다. (짱짱)
먼저 SFTP사용을 위해 Extensions (확장툴)을 다운받아야 한다. 좌측의 Extensions 탭을 클릭하거나 단축키 "Ctrl+Shift+X" 키를 눌러 검색창에 "sftp"라고 검색하여 많은 검색 결과 중 "SFTP"를 설치한다.
설치가 완료되면 키보드 "F1"를 눌러 뜨는 상단 검색창에 "sftp"라고 검색 후 뜨는 결과 중 "SFTP : config" 를 선택한다.
"SFTP : Config"를 선택하면 아래와 같이 "sftp.json"파일이 열린다. 해당 프로젝트의 서버정보를 입력해준다.
서버정보 입력이 완료되면 저장 후 다시 "F1"키를 눌러 "sftp"라고 검색 후 뜨는 결과 중 "SFTP : Download Project" 를 선택한다.
"SFTP : Download Project" 를 선택한 후 프로젝트를 다운받을 폴더를 선택하면 프로젝트 다운로드가 시작되고 프로젝트 다운로드가 완료되면 좌측 WORKSPACE에 프로젝트가 뜨게된다.
코드 수정 후 서버 적용은 마우스 우클릭 하여 "SFTP : Upload"메뉴를 선택 하면 된다.
솔직한 후기는 서버에 붙어서 작업하는 행위 자체는 에디트플러스만큼 편하진 않다. (그만큼 안전하진 않겠지만..) 그래도 완전히 에디트플러스에 의존하진 않아도 되는게 어딘가.
2020/01/29 - [업무 도움되는] - 무료 온라인 이미지 최적화 서비스 - Optimizilla
무료 온라인 이미지 최적화 서비스 - Optimizilla
무료 온라인 이미지 최적화 서비스 Optimizilla 웹 프로젝트를 진행할때 큰 리소스를 차지하는 것중 하나가 바로 이미지 파일들이다. 때문에 사용자에게 원활한 서비스 제공을 위해서는 많은 이미지 사용을 지양해..
code-study.tistory.com
2019/09/02 - [CSS] - CSS 구글 스타일가이드 자세히보기 #3 CSS 메타 규칙
CSS 구글 스타일가이드 자세히보기 #3 CSS 메타 규칙
CSS 구글 스타일가이드 자세히보기 #3 CSS 메타 규칙 3. CSS 메타(meta) 규칙 3.1 섹션 주석 섹션 주석을 작성하여 섹션을 그룹화 한다. 섹션 간 주석과 줄 바꿈으로 구분한다. /* Header */ #adw-header {...} /..
code-study.tistory.com
2019/08/28 - [업무 도움되는] - 작업 샘플(임시) 이미지 자동 생성 placeholder.com / picsum.photos
작업 샘플(임시) 이미지 자동 생성 placeholder.com / picsum.photos
웹사이트 작업을 하다보면 임시 이미지를 삽입해야하는 경우가 많이 생긴다. 간혹 디자이너가 만들어주기도 하지만 그렇지 않은 경우도 많다. 그럴땐 구글 검색 해서 적당한 이미지 URL을 따와서 사용했었는데, 더..
code-study.tistory.com
'웹퍼블리셔 > 업무 도움되는' 카테고리의 다른 글
지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator) (1) | 2020.02.12 |
---|---|
무료 온라인 이미지 최적화 서비스 - Optimizilla (0) | 2020.01.29 |
변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style (0) | 2019.08.30 |
작업 샘플(임시) 이미지 자동 생성 placeholder.com / picsum.photos (1) | 2019.08.28 |