안녕하세요. 이번에는 코드를 직접 수정할 에디터와 나중에 서버에 작업한 파일을 업로드하거나 내려 받을 때 사용할 FTP 소프트웨어인 파일질라를 설치하는 방법을 알아볼게요. 당장 코드를 만지진 않을 예정이라서, 설치만 해두시면 됩니다 🙂

VS Code 다운로드 :
파일질라 다운로드 :

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

VS Code 소개

비주얼 스튜디오 코드(VS Code)는 마이크로소프트에서 만든 무료 코드 편집기로, 수많은 개발자들이 사용하는 인기 있는 도구입니다. 다양한 기능과 확장 프로그램을 통해 개발 효율성을 높일 수 있습니다.

VS Code 설치

1. VS Code 다운로드 페이지로 이동합니다.
2. 운영체제에 맞는 설치 파일을 다운로드하고 설치를 진행합니다.
3. 설치가 완료되면 VS Code를 실행합니다.

이미 다른 코드 편집기(아톰, 브라켓, 서브라임 텍스트 등)를 사용 중이라면, 이 단계를 건너뛰셔도 좋습니다.

VS Code Extensions 설치

다양한 확장 프로그램을 설치하여 VS Code의 기능을 확장할 수 있습니다. 아래는 추천하는 확장 프로그램 목록입니다. 참고로 해당 익스텐션은 업데이트 및 사용 중지가 되는 경우가 있습니다. 참고 부탁드립니다.

1. Auto Close Tag
   • 자동으로 HTML/XML 태그를 닫아주는 확장 프로그램입니다.
2. Auto Rename Tag
   • HTML/XML 태그를 수정할 때, 시작 태그와 종료 태그를 동시에 수정해주는 확장 프로그램입니다.
3. ESLint
   • 자바스크립트 문법 오류를 표시해주는 도구입니다.
   • ES는 Ecma Script로, Ecma라는 기구에서 만든 표준 자바스크립트를 의미합니다.
   • Lint는 오류가 있는 코드에 표시를 달아놓는 것을 의미합니다.
4. JS & CSS Minifier
   • 자바스크립트와 CSS 파일을 압축해주는 도구입니다. 반대 기능으로 Beautify가 있습니다.
5. Live Sass Compiler
   • 실시간으로 Sass 파일을 CSS로 컴파일해주는 도구입니다.
6. PHP Intelephense
   • PHP 코드 작성 시 코드 완성, 오류 검사, 인텔리센스 기능을 제공하는 확장 프로그램입니다.
7. Korean Language Pack for Visual Studio Code
   • VS Code의 인터페이스를 한글로 사용할 수 있게 해주는 확장 프로그램입니다.
8. Material Icon Theme
   • 파일 및 폴더 아이콘을 세련된 디자인으로 변경해주는 확장 프로그램입니다.

위 확장 프로그램들은 VS Code의 ‘Extensions’ 탭에서 검색하여 설치할 수 있습니다.

FileZilla FTP 설치

FTP란?

파일 전송 프로토콜(File Transfer Protocol, FTP)은 TCP/IP 프로토콜을 사용하여 서버와 클라이언트 사이에 파일을 전송하는 프로토콜입니다. 쉽게 말해, 로컬에서 웹 서버로 파일을 업로드하거나 다운로드할 수 있게 도와주는 기술입니다.

FileZilla란?

FileZilla는 FTP의 대표적인 소프트웨어로, 사용자 친화적인 인터페이스와 강력한 기능을 제공합니다.

파일질라 FTP 설치방법

1. FileZilla 다운로드 페이지로 이동합니다.
2. 운영체제에 맞는 설치 파일을 다운로드하고 설치를 진행합니다.
3. 설치가 완료되면 FileZilla를 실행합니다.

FileZilla를 사용하면 로컬에서 웹 서버로 코드와 파일을 쉽게 업로드할 수 있습니다. 이는 특히 워드프레스와 같은 웹 애플리케이션을 설치하거나 업데이트할 때 유용합니다.