ChatGPT를 사용하여 WordPress 플러그인을 만드는 나의 여정: 120시간의 작업, 사전 경험 없음
게시 됨: 2024-08-28솔직히 말해서 저는 실제로 ChatGPT를 사용하여 단 몇 시간 만에 WordPress 플러그인을 구축할 수 있다고 생각했습니다. 아니면 적어도 모든 YouTube 튜토리얼과 Twitter 스레드가 저를 믿게 만들었습니다.
하지만 그 이야기에는 몇 가지 중요한 세부 사항이 빠졌습니다. 정확히 말하면 약 120시간 분량의 세부 사항입니다. 예, 실제로 플러그인을 처음부터 끝까지 구축하는 데 걸린 시간은 120시간입니다!
맥락상 저는 플러그인이나 WordPress 개발에 대한 사전 경험이 없었지만 어쨌든 뛰어들기로 결정했습니다. 그리고 나는 그 도전을 좋아했지만 예상했던 것보다 훨씬 어려웠습니다. 매 단계마다 나는 장애물에 하나씩 부딪혔고, 그 중 상당수는 존재조차 몰랐습니다. 실망스럽기도 했지만 엄청난 – 엄청난(!) – 학습 경험이기도 했습니다.
당신이 내 발자취를 따를 계획이라면, 사전에 이 기사 전체를 읽어 보시기를 강력히 권합니다. 나는 일종의 자기 홍보를 위해 그런 말을 하는 것이 아닙니다. 제가 이렇게 말하는 이유는 추가 작업에 소요되는 시간, 심지어 며칠을 절약할 수 있기 때문입니다. 이 과정에서 우연히 발견한 것들이 너무 많아서 사후까지 그것이 중요한지 전혀 몰랐습니다. 불행하게도 이로 인해 방지할 수 있었던 수많은 코드 수정(많은 좌절감으로 가득 차 있음)이 발생했습니다. 이 글을 읽어보시면 그런 문제는 없을 것입니다.
이것은 누구를 위한 것이고 누구를 위한 것이 아닌가 🙋♂️
귀하의 배경과 기술에 따라 귀하가 이 일을 할 수 있는 "충분한 자격"이 있는지 궁금할 수도 있습니다. 나는 이것만큼 말할 것입니다 :
필수 코딩 지식이 필요 하지는 않지만 일부 코드와 플러그인 개발의 일반적인 프로세스를 배우는 데 열정이 있어야 합니다 . 거쳐야 할 단계가 많으며, 한 단계를 완료하는 데 필요한 기술(또는 도구) 측면에서 다른 단계와 아무 관련이 없는 경우가 많습니다. 즉, 배울 준비를 많이 하십시오 .
플러그인의 성격과 최종 목표에 따라 최종 제품을 만드는 데 한 달 이상이 걸릴 수도 있습니다.
세부 사항에 대한 강한 안목을 갖고 패턴을 인식하는 것은 PHP, JavaScript 및 CSS가 수행하는 작업을 아는 것과 마찬가지로 상당한 도움이 될 것입니다. 코딩 방법을 알 필요는 없지만 목적과 사용 방법을 이해하는 것이 유리할 것입니다.
위의 사항 중 어느 것도 귀하, 특히 배우려는 의지를 설명하지 못하고 빠르고 쉬운 솔루션을 찾고 있다면 이 솔루션은 귀하에게 적합하지 않습니다. 빠르지도, 쉽지도 않습니다. 하지만 노력하면 가능합니다.
괜찮으시다면 시작해 보겠습니다.
1단계: 플러그인을 자세히 계획하세요 📝
스스로에게 물어보고 대답해야 할 첫 번째 질문은 어떤 유형의 플러그인을 구축하고 싶은지, 그리고 이 플러그인이 무엇을 하길 원하는지입니다.
실제로 구축하고 코딩을 시작할 수 있도록 이 과정을 서둘러 진행하고 싶은 유혹을 느낄 수도 있지만 시간을 투자해 보시기 바랍니다. 여기에서 수행하는 작업은 프롬프트의 기반을 마련하고 즉석에서 항목을 추가하는 대신 체계적인 방식으로 구축할 수 있게 해줍니다. 이 단계를 효과적으로 통과하려면 다음 사항을 고려하세요.
- 플러그인에 어떤 기능을 갖기를 원하시나요?
- wp-admin 측면이 어떻게 보이길 원하시나요?
- 플러그인의 작업 흐름을 시각화하기 위해 와이어프레임이나 순서도를 만듭니다.
- 지도를 작성하고 가장 작은 세부사항까지 설명하세요.
- 개인 용도로 사용할 것인지 아니면 WordPress 저장소에서 공개 액세스를 위해 사용할 수 있도록 할 것인지 결정하세요.
기능
wp-관리자
다음으로 WordPress 관리 영역에서 플러그인이 어떻게 표시되고 작동할지 고려하세요. 여기에는 다음이 포함됩니다.
- 설정 페이지 : 어떤 옵션을 제공하시겠습니까? 어떻게 정리할 것인가?
- 메뉴 : 관리 메뉴에서 플러그인은 어디에 표시되나요? 하위 메뉴가 있나요?
- 메타박스 : 플러그인이 게시물이나 페이지와 상호작용하는 경우 맞춤 메타박스가 필요합니까?
- 테이블 : 데이터를 저장하는 경우 관리자가 검토할 수 있도록 어떻게 표시할 예정인가요?
제 경우에는 각 단축 코드에 대한 탭이 있는 기본 설정 페이지, 문서를 위한 별도의 페이지, 사용자가 저에게 연락하기를 원하는 경우를 위한 문의 양식이 있는 페이지를 결정했습니다. 이것이 내가 생각해낸 것입니다:
불행하게도 나는 - 당신이 이 글을 읽고 있기 때문에 당신에게는 그렇지 않지만 - 계획 단계에서 내 플러그인의 프런트 엔드 기능에 너무 집중하여 wp-admin 측면을 완전히 무시했다는 것입니다.
내가 가지고 있는 것이 불완전하거나 UX가 좋지 않다는 것을 깨달았을 때 계속 코드를 수정해야 했기 때문에 미리 계획을 세웠을 때보다 시간이 더 오래 걸렸습니다. 미리 매핑했거나 와이어프레임을 사용했다면 이 단계가 훨씬 더 원활하게 진행되었을 것입니다. 이는 다음 지점으로의 완벽한 연속입니다.
와이어프레임 또는 순서도
모든 것을 결합하고 자세히 설명하십시오.
WordPress 저장소를 통한 개인 사용 및 공개 액세스
2단계로 넘어가기 전에 결정해야 할 것이 하나 더 있습니다. 그 결정은 이 플러그인을 누구를 위해 만들 것인지와 관련이 있습니다.
본인(또는 고객)만을 위해 만들고 싶나요? 아니면 일반 대중이 사용할 수 있도록 승인을 위해 WordPress 저장소에 제출하시겠습니까?
기술적으로 아직은 이 결정을 절대적으로 내릴 필요는 없습니다. 하지만 돌이켜보면 그 과정을 좀 더 일찍 했으면 좋았을 텐데요. 그러므로 지금 당장 하라고 권유하는 이유입니다.
그 이유는 처음부터 플러그인을 저장소에 제출하는 것이 목표였지만 처음에는 WordPress 코딩 표준을 따르지 않고 플러그인을 빌드했기 때문입니다. 저는 오로지 기능에만 집중하여 버그 없이 작동할 수 있도록 했습니다.
결과적으로, 내 코드를 표준에 맞게 만들기 위해 추가로 많은 코드 조정 작업을 수행해야 했습니다. 말할 필요도 없이 이 작업은 시간이 많이 걸리고 피할 수도 있었습니다.
따라서 개인적인 용도로만 플러그인을 구축할 계획이더라도 코딩 표준을 따르는 것이 좋습니다. 이렇게 하면 이후 WordPress 릴리스에서 플러그인이 오작동할 가능성이 줄어듭니다. 프로세스 측면에서 가장 큰 차이점은 표준의 비기능적 측면에 대해 너무 분석할 필요가 없다는 것입니다.
예를 들어 // Use global default. 끝에 마침표를 찍어야 합니다. 마침표는 기능적 목적이 없지만, 누락된 경우 표준에 따라 "오류"로 표시됩니다. 비공개 빌드의 경우 이러한 유형의 "오류"를 무시할 수 있습니다.
2단계: ChatGPT에 개발 시작을 위한 자세한 메시지 제공 🗣️
여기서 주요 아이디어는 GPT에 명확한 지침과 함께 플러그인 개요를 제공하는 것입니다. 일반적인 제안으로, 집 전체를 한꺼번에 짓는 것은 피하는 것이 좋습니다. 벽돌 단위로 접근하는 것이 더 좋습니다.
예를 들어 내 플러그인을 빌드한다고 가정해 보겠습니다.
8개의 효과가 있더라도 하나의 효과로 시작하고 싶다고 GPT에 알리는 것이 좋습니다. 마치 8개 효과 플러그인 대신 단일 효과 플러그인을 구축하는 것과 거의 같습니다. 그런 다음 백엔드 설정 영역을 포함하여 효과가 작동하는지 확인하십시오. 버그를 수정하고 모든 것이 괜찮아 보이면 다음 효과를 추가하세요. 그럼 이 과정을 하나씩 따라해 보세요.
이 방법을 사용하는 이유는 코드가 복잡해짐에 따라 코드에 발생할 수 있는 버그를 더 쉽게 수정할 수 있기 때문입니다. GPT가 모든 코드를 한 번에 생성하고 많은 항목이 작동하지 않으면 수정하기가 훨씬 더 어려워집니다.
여전히 GPT에 플러그인에 대한 전반적인 비전에 대한 광범위한 개요를 제공하고 싶지만 먼저 특정 사항에 초점을 맞춰 메시지를 마무리합니다.
시간을 절약하기 위해 ChatGPT를 시작하는 데 사용할 수 있는 예제 템플릿을 만들었습니다.
괄호 [X] 안의 섹션을 완료하려면 입력이 필요합니다. 빌드하려는 플러그인의 종류에 따라 추가로 편집해야 할 수도 있고 그렇지 않을 수도 있습니다.
프롬프트의 모든 내용을 이해하지 못하더라도 걱정하지 마세요. 나도 이해하지 못했습니다. 과정을 거치면서 배우게 됩니다.
내 메시지 🤖
I want to build a WordPress plugin called [name] that does the following: [General overview but don't give GPT the specifics yet] I'd like it to work via [Refer back to the section "combine everything and describe it in detail" from phase one; think about how you want your plugin to function - if you're not sure, then you can delete this part] . I would also like to create a settings menu in wp-admin so that users can [Explain what you want your settings menu to look like and do, including any specific UI/UX considerations; if you create any wireframes, upload those as well] I plan on using the following tools for this process: - Docker and/or Local by Flywheel {Choose one or use both} - Terminal (MAC) {if you're using a PC, substitute with Command Prompt} - Sublime Text - Chrome and Chrome inspector tool Also, I want to use GitHub for version control to track changes and collaborate effectively. I will use the default WordPress template provided by GitHub to generate the code for the .gitignore file. However, I will need your help to walk me through how to set up a repository and how to commit my files to it. For the main PHP file, the author name should be [your name] and the author URI should be [your website if you have one] . For any code you generate, please use tabs for indentation and not spaces. {important if you plan on submitting your plugin to the WordPress repository} If you need to enqueue any scripts, please ask me questions to help me figure out whether we should use conditional loading or if we should enqueue globally. In addition, when generating CSS, please follow BEM (Block Element Modifier) methodology. Let's begin with [insert which feature you'd like to build first] Please [Optional: help me setup Local by Flywheel and then] generate the initial PHP file and advise on next steps after that.ChatGPT에 프롬프트를 제공하면 아래에 설명된 나머지 단계를 안내합니다. ChatGPT의 기분이나 제가 설명한 프로세스를 따르려는 여러분 자신의 욕구에 따라 제가 모든 것을 나열하는 방식이 제시된 것만큼 선형적이지 않을 수도 있다는 점은 주목할 가치가 있습니다.
제가 의미하는 바를 이해하기 위해 저는 프롬프트를 세 번 직접 테스트했습니다. Flywheel에서 Local을 설정하고 초기 PHP 파일을 생성하는 데 도움을 준 것 외에도 매번 다른 방식으로 다른 단계를 진행하기로 결정했습니다.
첫 번째 시도
첫 번째 시도에서 ChatGPT는 PHP 파일 생성에 그치지 않고 다음에 어떻게 진행할 것인지에 대한 두 가지 옵션을 제시했습니다. 특히 조건부 로딩으로 스크립트를 대기열에 추가하는 방법에 대한 지침을 따르고 이에 대해서도 언급했습니다.
두 번째 시도
두 번째 시도에서는 가장 단순한 PHP 파일이 만들어졌지만, 단계별 작업 측면에서는 가장 철저한 전체 응답이 탄생했습니다. 터미널을 사용하여 프로젝트 디렉토리를 설정하고 Sublime을 초기화했습니다. 심지어 Git 저장소를 설정하는 방법까지 나에게 지도해 주었습니다.
세 번째 시도
세 번째 시도는 첫 번째 시도와 다소 비슷했다. 하지만 첫 번째 시도와는 달리 ChatGPT는 스크립트에 대한 조건부 로딩을 설정하지도 않았고 이에 대해 묻지도 않았습니다. 기본적으로 전역으로 생성되었습니다.
테이크아웃
제가 이 세 가지 시도를 여러분과 간략하게 공유한 이유는 워크플로가 반드시 표준화될 필요는 없다는 점에 대해 앞서 말씀드린 내용을 강조할 뿐만 아니라 메시지가 GPT와 마찬가지로 여러분에게도 도움이 된다는 점을 지적하기 위해서였습니다.
내 말은 ChatGPT가 하고 있는 것과 하지 않는 것에 주의를 기울이고, 그것이 떨어지면 다시 정상으로 되돌리는 것은 당신에게 달려 있다는 것입니다. 따라서 이 여정을 진행하는 동안 프롬프트를 다시 참조하는 것을 잊지 말고 나중에 디버깅 섹션에서 공유할 지침도 참조하세요. 필요한 만큼 원하는 작업을 수행하도록 ChatGPT를 상기시키고 방향을 바꾸세요.
내 플러그인을 다운로드하고 테스트해 보세요 📥
내 플러그인의 "작업 버전"을 시험해 보려면 아래에 zip 파일이 있습니다. 가까운 시일 내에 WP 저장소 버전을 포함하도록 업데이트할 예정이지만 지금은 이를 사용하여 사용할 수 있습니다.
3단계: 도구, 스크립트, 디렉터리 및 Git 👩💻
이 단계에서는 플러그인 구축을 위한 기반을 설정하게 됩니다. 특히 스크립트를 설치하고 터미널(또는 PC를 사용하는 경우 명령 프롬프트)을 사용하게 되면 학습 곡선이 급격히 증가하는 곳이기도 합니다. 분석은 다음과 같습니다.
- 어떤 로컬 환경 도구를 사용할지 결정하세요(예: Local by Flywheel, Docker).
- 프로젝트 디렉터리를 설정합니다.
- 스크립트(예: npm, Composer)를 설치합니다.
- Git 저장소("repo")를 설정하고 여기에 플러그인 파일을 커밋(업로드)하세요.
로컬 환경 구축
프로젝트 디렉터리 설정
스크립트 설치
Git 저장소("repo")를 만들고 파일을 커밋합니다.
이전 단계를 모두 마쳤으므로 이제 Git 저장소를 만들고 초기 파일을 여기에 커밋할 차례입니다. 이 단계에서는 프로젝트 시작점의 스냅샷을 생성합니다.
나는 개인적으로 GitHub를 사용했습니다. Themeisle에서 사용하는 것이기 때문에 이미 거기에 계정이 있었지만 다른 플랫폼(예: GitLab, Bitbucket)도 있습니다. GitHub가 아닌 다른 플랫폼을 사용하게 되면 3단계에서 프롬프트 템플릿을 조정하는 것을 잊지 마세요 .
간결성을 위해 이 작업을 수행하는 방법을 안내하지는 않겠습니다 . 이 단계에 도달하면 ChatGPT는 터미널/명령 프롬프트에 입력해야 하는 명령을 포함하여 프로세스를 단계별로 안내할 수 있습니다.
초기 파일을 커밋할 때 다음 사항에 유의하세요.
- 커밋하는 내용을 검토하세요. 필요한 파일만 포함하고 있는지 확인하세요.
.gitignore파일을 사용하여 임시 파일이나 생성된 파일을 제외하세요. - 명확한 커밋 메시지를 작성하세요. "초기 커밋: 기본 프로젝트 구조 및 구성"과 같은 메시지가 잘 작동합니다.
- 완벽함에 대해 걱정하지 마십시오. 이것은 단지 시작점일 뿐입니다. 플러그인을 개발하면서 더 많은 커밋을 하게 될 것입니다.
다시 말하지만, ChatGPT는 이 초기 커밋에 사용할 특정 명령에 대한 지침을 제공할 가능성이 높습니다. 그렇지 않다면 그냥 요청하세요. 설정 및 Git 플랫폼을 기반으로 정확한 단계가 필요하다는 점을 작성하세요.
이 단계를 완료하면 버전 제어를 위한 견고한 기반을 갖춘 플러그인 개발 프로젝트가 공식적으로 시작됩니다. 이제부터는 모든 변경 사항을 추적하고, 새로운 기능을 안전하게 실험하고, 원할 경우 다른 사람들과 공동 작업할 수 있습니다.
4단계: 플러그인 플레이 시간 🖱️
모든 단계 중에서 이 단계와 다음 단계가 아마도 가장 재미있을 것입니다. 모든 것이 하나로 합쳐지기 시작하는 단계이기 때문입니다. 시작하려면 로컬 WordPress 설치에 로그인해야 합니다. Local by Flywheel을 사용하게 되면 매우 간단합니다. 오른쪽 상단 근처에 있는 WP Admin 버튼을 클릭하기만 하면 됩니다.
Docker나 다른 로컬 개발 도구를 사용하게 되었는데 사이트에 접속하는 방법을 잘 모르겠으면 ChatGPT에 문의하세요.
로그인한 후 플러그인 → 설치된 플러그인 으로 이동하여 플러그인을 활성화하세요. 그런 다음 목록에서 플러그인을 찾아 활성화를 클릭하세요.
⚠️ 중요 : 여기에 플러그인이 표시되지 않더라도 당황하지 마세요. 디렉터리 불일치일 가능성이 높지만, 그럼에도 불구하고 ChatGPT를 탭하면 문제를 파악하는 데 도움이 됩니다. 반복적인 시도 후에도 여전히 멈춘다면 ChatGPT가 WordPress 디버그 모드 사용을 제안하지 않은 경우 해당 코드 조각을 제공하도록 요청하세요. 그들은 다음과 같이 보일 것입니다:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );플러그인을 활성화한 후 사용을 시작하고 메모를 작성하세요.
- 모든 것이 예상대로 작동하고 있나요? 가능성이 매우 낮습니다 .
- 무엇이 작동하지 않나요? 어떤 방식으로 작동하지 않나요?
- 제대로 작동하지 않는 초기 프롬프트 설명에서 완전히 간과한 사소한 사항은 무엇입니까?
메모를 작성하고 나면 다음 단계인 디버깅 및 Linting으로 이동할 준비가 된 것입니다.
5단계: 디버깅 및 Linting 💻
플러그인 복잡성과 버그는 상관 관계가 있습니다. 즉, 플러그인이 복잡해질수록 버그 가능성이 커집니다 . 그러나 더 간단한 플러그인에도 Linting과 디버깅이 필요합니다.
린팅
이 글에서 “linting”이라는 단어를 처음 봤고 그것이 무엇을 의미하는지 확실하지 않다면, 매우 간단하게 해당 코드 유형에 대한 일련의 규칙 및 표준에 대해 플러그인의 코드를 확인합니다. 그런 다음 오류나 불일치가 발견되었는지, 어떤 줄에 있는지, 해결 방법을 알려줍니다.
Linting은 매우 간단합니다. 작업할 코드/파일 유형에 적합한 린팅 도구를 사용하고 있는지 확인하세요.
- PHP 린팅을 위한 WordPress-Coding-Standards가 포함된 PHP_CodeSniffer.
- JavaScript 린팅을 위한 ESLint.
- CSS 린팅을 위한 StyleLint.
JavaScript의 경우 다음을 추가할 수도 있습니다.
- ESLint Unicorn: 100개 이상의 강력한 ESLint 규칙.
- ESLint Promise: API 호출, 데이터베이스 쿼리, 파일 처리 또는 완료하는 데 시간이 걸리는 모든 작업과 같은 비동기 작업을 관리하는 데 유용합니다.
디버깅
Linting과 달리 디버깅은 이전 단계에서 수행한 작업과 매우 유사합니다. 즉, 플러그인을 직접 사용하고 수정해야 할 문제를 식별한 다음 직접 수정하거나 ChatGPT에 도움을 요청하는 것입니다.
저는 개인적으로 디버깅이 Linting보다 더 복잡하다는 것을 알았습니다. 가장 큰 이유 중 하나는 Lint를 수행할 때 Linting 프로세스의 출력을 통해 문제가 무엇인지, 코드에서 해당 문제가 있는 위치를 정확히 알 수 있다는 것입니다. 디버깅을 사용하면 그런 사치를 누릴 수 없습니다. 그것을 알아내는 것은 귀하와 ChatGPT에 달려 있습니다.
그러나 ChatGPT는 문제가 있는 코드 줄에 초점을 맞추는 데 어려움을 겪습니다. 즉, "실행"하기 전에 "준비, 설정"을 처리해야 합니다.
여러분의 편의를 위해 디버깅 단계를 시작하기 전에 나 자신에게 제공했을 다양한 조언 목록을 모두 정리했습니다.
막연하게 말하지 말고 ChatGPT에 맡기지 마세요.
ChatGPT에 매우 구체적인 지침을 제공하지 않으면 끝없는 코드 줄이 뱉어지기 시작하고 종종 코드가 이미 제공한 것과 전혀 다르지 않은 경우가 많습니다. 그것이 올바른지 "다시 확인"하기를 원하지만 그렇게 하는 것은 시간 낭비뿐입니다. 이보다 더 실망스러운 것은 없습니다:
대신에 해야 할 일은 ChatGPT에 매우 구체적인 지침을 제공하여 단순히 코드를 생성하는 것이 아니라 문제를 일으키는 것으로 생각되는 코드 줄을 구체적으로 격리하여 표시하는 것입니다. 해당 라인을 어떻게 변경할 계획인지, 이러한 변경으로 문제가 해결될 것이라고 생각하는 이유를 설명하도록 지시하십시오. 마지막으로 이러한 변경 사항이 구현된 후 예상되는 결과가 무엇인지 알려달라고 요청하세요.
이러한 지침은 문제에 계속 집중하는 데 도움이 되며 한 가지 문제를 해결하지만 프로세스에서 새로운 문제를 일으킬 수 있는 유출 버그를 최소화합니다.
일반 CSS와 BEM CSS
위와 관련이 있지만 CSS에만 적용되는 경우 모든 CSS 스니펫에 대해 ChatGPT는 표준 CSS, 즉 기본적으로 "교실 CSS"라고 부르는 CSS를 생성한다는 점을 명심해야 합니다.
이는 해당 주제에 대한 초보자 과정을 수강할 때 배우게 되는 기본 CSS입니다. 이해하기 쉽고, 그 자체로는 기술적으로 문제가 없지만, 워드프레스 플러그인을 개발할 때 다른 플러그인이나 테마와 충돌이 발생할 수 있습니다.
대신 GPT에 BEM(Block Element Modifier) 방법을 사용하도록 지시하는 것이 좋습니다. BEM은 명확하고 구조화된 명명 규칙을 제공하여 CSS 충돌 위험을 줄이는 데 도움이 됩니다. 각 블록, 요소 및 수정자에는 의도하지 않은 스타일 영향이 발생할 가능성을 최소화하는 고유하고 설명적인 클래스 이름이 있으므로 스타일을 더욱 예측 가능하고 관리하기 쉽게 만듭니다. 또한 BEM은 다른 스타일에 영향을 주지 않고 특정 스타일을 더 쉽게 찾고 업데이트할 수 있도록 하여 유지 관리성을 향상시킵니다.
이에 대한 언급은 이미 2단계의 예시 프롬프트에 포함되어 있지만 CSS 스니펫을 위해 ChatGPT에 이러한 지침을 제공하는 것을 항상 기억할 수 있도록 여기서 강조표시하고 있습니다.
조건부 로딩과 전역 대기열 추가
ChatGPT의 또 다른 기본 동작은 스크립트를 대기열에 추가하는 것과 관련이 있습니다. 아직 이 문구가 무엇을 의미하는지 모르더라도 걱정하지 마세요. 중요한 것은 코드를 볼 때 코드에서 이를 인식한다는 것입니다. 다음과 같이 보일 것입니다 :
function enqueue_my_scripts() { wp_enqueue_script('my-plugin-script', plugin_dir_url( FILE ) . 'js/my-script.js', array('jquery'), '1.0.0', true); } add_action('admin_enqueue_scripts', 'enqueue_my_scripts');위의 예에서 코드는 모든 관리 페이지에 대한 스크립트를 전역적으로 대기열에 추가하는데, 이는 종종 불필요하고 성능 문제를 일으킬 수 있습니다. 불행하게도, 당신이 말하지 말라고 말하지 않으면 ChatGPT가 당신에게 제공할 것입니다. 분명히 말하면, 어떤 경우에는 이것이 실제로 완전히 적절하지만 많은 경우에는 그렇지 않습니다.
따라서 ChatGPT가 "enqueue"라는 단어가 포함된 코드를 생성하는 것을 발견하자마자 이에 대해 대화를 나누십시오. 스크립트를 전역적으로 대기열에 추가하는 것이 적합한지 아니면 스크립트가 필요한 특정 페이지에만 대기열에 추가하는 것이 적합한지 ChatGPT에 문의하세요. 이를 '조건부 로딩'이라고 합니다.
자주 상기시키고 상기시켜주세요
ChatGPT는 잊어버리는 경향이 있으며 이는 코딩에 사용할 때 더욱 그렇습니다. 따라서 특정 지침을 제공하더라도 프로젝트 기간 동안 해당 지침을 따를 확률은 0 입니다.
때때로 그것은 당신이 요청한 것을 완전히 무시할 수도 있습니다. 이런 일이 발생하면 좀 더 단호하게 행동하고 원하는 대로 작동하지 않는다는 사실을 알려주세요.
게다가, 몇 번의 상호 작용 내에서 디버깅하려는 코드 섹션과 아무 관련이 없는 엄청난 양의 코드에 빠져들게 하는 표준 동작으로 빠르게 기본값으로 되돌아갑니다.
이런 일이 발생하면 GPT 출력의 중지 버튼을 누르고 지침을 따르도록 상기시키면 됩니다. 알림을 제공할 때 채팅 창에 복사하여 붙여넣는 것도 도움이 됩니다.
그리고 긴 코드 줄을 생성하는 것에 대해 말하면…
ChatGPT가 전체 파일을 재생성하지 않도록 방지
코드 작업에 익숙하지 않고 겁이 난다면 각 코드 수정 후 ChatGPT에 전체 파일을 다시 생성하도록 요청하는 것이 처음에는 매력적으로 보일 수 있습니다.
여러분이 해야 할 일은 "복사해서 붙여넣기"만 하면 됩니다. 그렇죠?
유혹적인 것처럼 보일 수도 있지만 실제로는 나쁜 생각입니다 . 장기적으로 보면 더 많은 문제를 야기할 것입니다. 이 작업을 수행하면 많은 시간을 낭비하게 될 뿐만 아니라, 특히 상당히 길어질 수 있는 PHP 파일을 디버깅하는 경우에는 ChatGPT가 프로세스에서 기존 코드에 새로운 실수를 초래할 수도 있습니다. 작업 중인 문제는 해결되지만 실수로 파일의 다른 부분을 조정하여 무언가가 손상될 수 있습니다.
문제를 일으키는 코드의 특정 부분을 격리하고 해당 부분에 대해서만 작업하는 것이 좋습니다.
한 번에 하나의 버그를 가져 가라.
위의 내용에 따라 버그가 여러 개 있더라도(아주 사소하지 않은 한) ChatGPT에 한 번에 하나씩만 알려주세요. 다음 버그로 넘어가기 전에 각 버그를 수정하세요.
코드 조각의 맨 위 줄과 맨 아래 줄을 주의 깊게 살펴보세요.
ChatGPT가 코드 조각을 제공할 때 항상 그런 것은 아니지만 때때로 작업 중인 전체 파일의 맨 위 줄과 맨 아래 줄을 표시하여 코드 조각을 캡슐화합니다. 따라서 항상 전체 코드 조각을 단순히 복사하여 붙여넣지 않도록 주의해야 합니다. 이렇게 하면 코드가 손상될 수 있습니다.
⚠️ 맨 윗줄을 주의 깊게 살펴보세요.
디버깅하려는 특정 코드 조각과 관련이 없으면 무시하십시오.
최종 결과도 마찬가지지만 발견하기가 더 까다로울 수 있습니다. 때로는 }); 아직 닫히지 않은 상위 코드 조각을 닫으므로 코드가 손상됩니다.
시간이 좀 지나면 더 잘 이해하게 되겠지만, 플러그인 개발 여정을 시작할 때 스니펫을 추가한 후 많은 문제가 발생하는 것을 발견했다면 맨 마지막 줄을 삭제하여 "마법처럼" 되었는지 확인해보세요. ” 모든 것을 고쳐줍니다.
콘솔은 당신의 가장 친한 친구입니다
ChatGPT가 성공하지 못한 채 동일한 문제를 디버깅하려고 시도하고 문제가 발생하는 경우 문제를 일으키는 것으로 생각되는 코드 섹션에 console.log 줄을 추가하도록 요청하세요. 그런 다음 버그를 재현하면서 콘솔을 엽니다. 무슨 일이 일어났는지 설명할 것입니다. 그런 다음 이 설명을 스크린샷으로 찍어 ChatGPT에 제공하여 수정 방법을 알아낼 수 있습니다.
Google Chrome에서 콘솔에 액세스하려면 페이지를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택합니다.
콘솔이 답변을 제공하지 않으면 데이터베이스를 확인하십시오.
콘솔은 훌륭하며 종종 필요한 답변을 제공합니다. 그러나 어떤 경우에는 현재 겪고 있는 문제만 확인하고 문제를 해결하는 방법에 대한 지침을 실제로 제공하지 않는 경우도 있습니다.
예를 들어, 플러그인에 타이핑 효과를 추가하려고 할 때 wp-admin에서 효과의 기본 미리보기 속도는 23밀리초로 설정되었습니다. 문제를 해결하기 위해 PHP와 JavaScript 파일을 수정하는 데 엄청난 시간을 보냈지만 아무 소용이 없었습니다.
콘솔에서는 23시에 로드되고 있음을 확인했지만 그 이후에는 다른 중요한 정보를 제공하지 않았습니다.
결국 데이터베이스를 확인한 결과 잘못된 값이 거기에서 나온다는 것을 깨달았습니다.
제가 원했던 23을 60으로 전환했더니 문제가 해결되었습니다.
Local by Flywheel을 사용하게 되면 데이터베이스 탭을 클릭하여 인터페이스를 통해 쉽게 데이터베이스에 액세스할 수 있습니다.
액세스 권한을 얻은 후에는 위의 스크린샷에서 제가 보았던 것과 동일한 곳인 wp_options를 살펴보는 것이 좋습니다. 대부분의 경우 플러그인 설정은 여기에서 찾을 수 있습니다.
⚠️ 그러나 여기서 더 큰 근본적인 문제 는 내 코드에 실제로 활성화 지침이 없다는 점을 지적하는 것도 중요합니다. 플러그인이 처음 활성화되면 데이터베이스에 특정 설정이 존재하는지 확인해야 합니다. 그렇지 않은 경우 플러그인은 의도한 기본값으로 이를 추가해야 합니다. 이렇게 하면 플러그인을 새로 설치할 때마다 올바른 설정으로 시작됩니다. 나는 이것을 어렵게 배웠기 때문에 당신은 그럴 필요가 없습니다.
새로운 스레드가 획기적인 발전을 가져올 수 있습니다.
코드가 늘어나고 ChatGPT를 사용한 스레드가 점점 길어지면 실수를 하거나 내용을 잊어버리기 쉽습니다. 어떤 시점에서는 새로운 스레드를 시작하는 것이 좋습니다. 기본 플러그인 파일을 새 스레드에 업로드하고 ChatGPT에 현재 수행 중인 작업과 중단한 위치를 설명하세요.
다음은 사용할 수 있는 프롬프트 예시입니다.
저는 다른 스레드에서 귀하와 함께 WordPress 플러그인을 디버깅하는 작업을 하고 있었지만 스레드가 너무 길어서 귀하가 혼란스러워지기 시작한 것 같습니다. 새롭게 시작해보자.
여기의 플러그인 파일을 살펴보고 [버그 설명] 문제를 해결해 보겠습니다.
또한 이는 매우 중요합니다. 문제 해결을 위해 새 버전의 코드 조각을 생성할 때 코드 조각을 생성하는 것뿐만 아니라 이미 존재하는 줄에서 변경한 줄에 대한 설명도 제공하십시오. 또한 해당 행을 변경하는 이유와 변경 사항을 통해 무엇을 기대할 수 있는지 설명하십시오.
[CSS를 생성하는 경우 ChatGPT가 BEM(Block Element Modifier) 방법론을 따르도록 상기시키는 것을 잊지 마세요.]
당신의 두뇌를 사용하는 것을 두려워하지 마십시오
플러그인이 복잡할수록 GPT가 코드를 망칠 가능성이 커집니다. 디버깅하는 데 도움이 되지만 때로는 스스로 솔루션을 찾아내는 것이 더 나을 때도 있습니다. 솔직히 말해서, 이런 일이 꽤 많이 일어났습니다. 특히 내 메인 PHP 파일이 500줄 이상(이후 버전에서는 1,000줄을 초과)으로 증가한 빌드 후반 단계에서 더욱 그렇습니다.
코드 읽기에 대한 익숙함과 편안함에 따라 이는 억제력이 될 수 있지만, 패턴 인식과 불일치 발견에 능숙하다면 문제를 해결할 수 있습니다.
나는 확실히 숙련된 프로그래머는 아니지만, 다양한 프로그래밍 언어의 기능을 이해하고 있고 코드에 어느 정도 익숙하여 도움이 되었습니다.
하지만 당신이 전혀 멍청한 사람이더라도 GPT가 문제를 일으킬 수 있다고 생각하는 코드 줄을 볼 수 있습니다. 그런 다음 코드에서 제대로 작동하는 동일한 요소를 찾으십시오. 해당 코드를 손상된 요소의 코드와 비교하고 차이점이 무엇인지 확인해보세요. 종종 이렇게 하면 문제가 해결됩니다.
플러그인 파일의 백업을 유지하세요(Git를 사용하는 경우 선택 사항).
Git을 사용하면 코드 변경 사항을 관리하고 되돌릴 수 있는 강력한 방법이 제공되지만 수동 백업을 유지하는 것도 결코 나쁜 생각이 아닙니다. 코드로 중요한 목표에 도달할 때마다 기본 코드 파일의 복사본을 다른 폴더에 저장하는 것이 좋습니다.
이는 추가 안전망 역할을 할 수 있으므로 계속해서 빌드하는 동안 심각한 버그가 발생하는 경우 이전의 더 나은 버전으로 쉽게 되돌릴 수 있습니다.
쉽게 포기하지 말고 한계를 알라
아무리 노력해도 구현할 수 없는 일부 기능이나 조정이 있을 수 있습니다. 기대치를 조정하고 이를 해결할 준비를 하십시오 . 벽에 부딪혔다고 해서 포기하라는 뜻은 아닙니다. 그러나 이는 100번의 시도를 했지만 성공하지 못한 채 몇 시간(또는 며칠)을 소비했다면 이는 아마도 불가능하거나 귀하와 ChatGPT의 능력을 벗어난 일이라는 것을 의미합니다.
마지막으로 디버깅을 먼저 해야 할지 Lint를 먼저 해야 할지 궁금하신 경우 명확한 답은 없습니다. 린트하기 전에 디버깅했지만 프로세스를 진행하면서 ChatGPT의 기본 설정을 기본값으로 지정하거나 먼저 수행할 작업을 알려줄 수 있습니다.
6단계(선택 사항): 테스트 🔬
비교적 간단한 플러그인을 구축하고 있고 자체 수동 테스트를 기반으로 해당 기능에 확신이 있다면 반드시 이 단계를 수행할 필요는 없습니다. 이러한 테스트를 코딩하려면 여전히 많은 작업이 필요하고 ChatGPT를 사용하여 제대로 작동하는 플러그인을 얻을 수 없는 것과 마찬가지로 버그가 없는 기능 테스트를 얻을 가능성도 거의 없습니다.
간단히 말해서, 여기에는 시간 투자와 실제 가치 사이에 상충 관계가 있습니다 .
내 경험에 따르면, 사용자가 플러그인과 상호 작용할 때 내 플러그인이 주요 기능을 수행할 수 있는지 여부를 확인하는 하나의 테스트를 성공적으로 구축할 수 있었지만 디버깅하는 데 하루 종일 걸렸습니다!
실용적인 관점에서 볼 때 이미 플러그인의 기능을 수동으로 확인했지만 테스트를 통해 모든 것이 작동하고 있음을 확인하는 것이 좋았습니다.
나보다 더 복잡한 플러그인을 구축하려고 하거나 플러그인 기능이 백엔드(작동 여부를 수동으로 확인할 수 없는 백엔드)에 집중할 경우 시간을 들여 다음 작업을 수행하세요. 테스트를 제대로 실행하는 것은 수작업을 할 가치가 있습니다.
테스트 유형
고려해야 할 도구
7단계(선택 사항): 플러그인을 WordPress 저장소에 제출하세요 🥳
여기까지 왔다면, 당신은 속담의 플러그인 산에 성공적으로 오른 것입니다. 남은 유일한 일은 WordPress 저장소에 있는 다른 59,650개의 플러그인과 결합되도록 플래그를 심는 것입니다.
여기에는 플러그인 추가 페이지의 체크리스트와 함께 별도의 프로세스가 있습니다.
- 자주 묻는 질문(FAQ)을 읽어보세요.
- 모든 플러그인 개발자 지침을 준수하십시오.
- 다른 사람이 사용하고 공유할 수 있도록 WordPress.org에 플러그인을 업로드할 수 있는 권한이 있는지 확인하세요.
- 모든 라이브러리를 포함한 귀하의 플러그인과 기타 포함된 자산은 GPL로 라이센스가 부여되거나 GPL과 호환됩니다.
- Plugin Check 플러그인 으로 최종 테스트를 수행하고 표시된 문제를 모두 해결합니다(오탐이라고 생각되는 문제 제외).
플러그인 확인(PCP)현재 버전: 1.1.0
최종 업데이트: 2024년 8월 28일
플러그인-check.1.1.0.zip
여러분이 수행한 모든 디버깅, Linting 및 테스트 후에 그들이 사용하도록 요청한 플러그인이 아무것도 선택하지 않을 것이라고 생각할 수도 있습니다. 그러나 처음 플러그인 개발자로서 해결해야 할 몇 가지 미해결 문제가 남아 있을 수 있습니다. 특히 검사를 실행하기 전에 빌드에서 테스트 파일을 제거하지 않은 경우 더욱 그렇습니다.
계속 진행하려면 도구 → 플러그인 확인 으로 이동하세요.
그런 다음 다섯 가지 카테고리를 모두 선택하고 확인을 실행합니다.
그런 다음 미해결 문제를 ChatGPT에 제공하고 해결할 수 있습니다. 완료되면 검사를 다시 실행하여 깨끗한 결과를 확인하세요. 필요한만큼 여러 번 수행하십시오. 완전히 깨끗한 검사(오탐 제외)를 받으면 플러그인을 WordPress 개발 팀에 제출할 수 있습니다. 그런 다음 그들이 검토할 때까지 참을성 있게 기다리십시오.
최종 생각 🧠
ChatGPT로 플러그인을 구축하는 것은 재미있고 보람 있는 과정이지만 결코 빠른 과정은 아닙니다. 제대로 작동하는 최종 제품을 만들기 위해서는 많은 땀을 흘려야 합니다. 하지만 결국에는 이 프로젝트를 통해 배울 수 있는 모든 새로운 기술에 감사하게 될 것입니다.
다음은 제가 배운 몇 가지 사항입니다. 여러분도 그럴 수도 있습니다.
- 터미널 명령을 사용하여 하드 드라이브를 탐색하는 방법을 배웠고 플러그인 구축 프로세스와 관련된 다른 명령도 배웠습니다.
- 저는 이제 Docker와 Local by Flywheel에 상당히 익숙해졌습니다. 둘 다 이 실험 전에는 한 번도 사용해본 적이 없었습니다.
- 나는 또한 이전에는 존재조차 몰랐던 수많은 개발자 도구와 스크립트에 대해 잘 알고 있습니다.
- 예전에 Free Code Camp와 Codecademy에서 몇 가지 수업을 들었던 적이 있는데 둘 다 훌륭했지만 이 프로젝트를 완료하면서 더 많은 실무 지식을 얻은 것 같습니다.
- 위와 관련하여 이제 비슷한 작업을 다시 수행할 때 유용할 무작위 코딩 정보가 많이 있습니다.
- 0과 작동 중인 플러그인 사이의 간격은 작동 중인 플러그인과 제출 준비가 된 플러그인 사이의 간격보다 훨씬 작습니다. 며칠 내에 플러그인의 작업 버전을 완료했지만 WordPress 저장소에 제출할 수 있을 만큼 모든 조정 작업을 수행하는 데 몇 주가 더 걸렸습니다.
전반적으로 이것은 제가 오랫동안 해왔던 가장 멋진 활동 중 하나였습니다. 시간을 내어 읽어주셔서 감사합니다. 이 정보를 사용하여 첫 번째 플러그인을 구축하게 된 경우 아래에 의견을 남겨주세요. 최종 결과를 확인하고 싶습니다.