[카페24] Cafe24에디터에서 탈출하기 :: vscode로 cafe코드 원격 수정하기

카페 24에서 제공하는 Cafe24 editor는 정말 화난다.

아주 화가 많이. 잔뜩. 🤦‍♂️

전체 파일 검색이 믿음이 안감, css하나 찾으려면 모든 파일 열어서 찾아야 함
파일 내 검색이 정상적으로 작동 안 함 (find in file not working)
파일 형식 제대로 검사 안해줌 (not eslint)
코드 재정렬 그런거 없다. (beautify not working)

위에 있는게 모두 가능한, 개발툴로 cafe원격 수정하는 방법을 공유한다.

사람은 도구(IDE)를 써야 한다.

⚠️ 주의할 점
카페24 에디터와 달리 코드 변경에 대한 history를 따로 저장하지 않는다. 형상관리를 원한다면 git을 공부하자.
아니면 신중하게 수정하자. 오타 하나로 고장날수도 있으니까.. (사실 이건 카페24에디터도 마찬가지)

💡 IDE에서 카페 24 코드 라이브로 수정하기

1. IDE설치 - VSC설치

(글쓴이는 webstorm을 사용하지만, 유료인지라 해당글에서는 vsc로 설명하고 이후에 webstorm을 다룬 글을 적겠다. 하지만 webstorm을 쓴다는 건 진즉 개발자인데.. 이미 알지 않을까..?)

아래 주소에서 운영체제에 맞는 걸 다운로드하여 설치하자.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

설치 관련해서는 자세히 설명하지 않겠다.

프로그램을 실행시켜 준다.

2. FTP 플러그인 설치

우측 바 메뉴 중 블록같이 생긴 아이콘을 눌러 확장프로그램을 깔아주자.

sftp라고 검색했을 때, SFTP을 install 해주자. 다운로드수가 높은 것!

3. 폴더 생성

서버의 파일을 받아올 폴더를 만들어줄 거다.

좌측 메뉴 중 첫 번째 걸 누르고 open folder 버튼을 누른다.

원하는 위치에 폴더를 만들고 만들 폴더를 선택하자.

폴더가 열렸다.

4. SFTP setting

검색을 켜준다.

윈도우: F1 / 맥: 쉬프트 + command + P

> 뒤에 sftp를 치면 나오는 config 선택.

파일이 하나 열리는 데, 모두 지우자.

아래 코드를 붙여 넣고 쇼핑몰 아이디/비밀번호를 알맞게 작성해 주자.

{
    "name": "My Server",
    "host": "쇼핑몰 아이디.ftp.cafe24.com",
    "protocol": "ftp",
    "port": 21,
    "username": "쇼핑몰 아이디",
    "password": "고객이 설정한 비밀번호",
    "remotePath": "/",
    "uploadOnSave": true
}

쇼핑몰 아이디

카페24관리자 > 쇼핑몰 설정 > 기본설정 > 내 쇼핑몰 정보 > 기본정보 설정 > 상점아이디

고객이 설정한 비밀번호

카페24관리자 > 쇼핑몰 설정 > 기본설정 > 비밀번호 변경 > 본인 인증 후 > 비밀번호 설정

(만약 비밀번호 재설정이 어려운 상황이라면, 변경을 하지 말고 admin을 로그인한 비밀번호로 다음 단계를 시도해 볼 것)

참고 : 카페 24 관련 안내글

작성 완료했다면, 컨트롤 s로 파일을 저장해 준다.