|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
이 가이드에서는 Cursor AI를 사용하여 웹 애플리케이션, 특히 암호화폐 가격 변환기를 구축하는 방법을 안내합니다. 추가적으로 CoinGecko API를 활용하여 암호화폐 가격 데이터를 가져올 것입니다.
In this tutorial, we'll be building a cryptocurrency price converter web application using React and fetching crypto prices from the CoinGecko API. We'll also be utilizing Cursor AI, an AI-powered code editor, to streamline our development process.
이 튜토리얼에서는 React를 사용하여 암호화폐 가격 변환기 웹 애플리케이션을 구축하고 CoinGecko API에서 암호화폐 가격을 가져옵니다. 또한 AI 기반 코드 편집기인 Cursor AI를 활용하여 개발 프로세스를 간소화할 예정입니다.
Prerequisites:
전제 조건:
Basic knowledge of JavaScript and React (ES6+ features, React components, hooks, state management)
JavaScript 및 React에 대한 기본 지식(ES6+ 기능, React 구성 요소, 후크, 상태 관리)
Familiarity with web scraping concepts
웹 스크래핑 개념에 대한 지식
A text editor or IDE (we'll be using Visual Studio Code)
텍스트 편집기 또는 IDE(Visual Studio Code를 사용합니다)
Node.js and npm (for our development environment)
Node.js 및 npm(개발 환경용)
CoinGecko API for crypto price and market data (Demo plan is sufficient)
암호화폐 가격 및 시장 데이터를 위한 CoinGecko API(데모 계획이면 충분함)
Step 1: Setting Up Cursor AI
1단계: 커서 AI 설정
Head over to www.cursor.com and download the latest version of the Cursor AI desktop application. Once installed, open the app.
www.cursor.com으로 이동하여 최신 버전의 Cursor AI 데스크톱 애플리케이션을 다운로드하세요. 설치가 완료되면 앱을 엽니다.
Next, open a folder in Cursor AI where you want the source code to be saved. In the Terminal within the Cursor AI app, let's set up a basic React app using create-react-app.
다음으로 소스 코드를 저장할 폴더를 Cursor AI에서 엽니다. Cursor AI 앱 내의 터미널에서 create-react-app을 사용하여 기본 React 앱을 설정해 보겠습니다.
Run the following command:
다음 명령을 실행하십시오.
This command will create a React boilerplate project in your designated folder.
이 명령은 지정된 폴더에 React 상용구 프로젝트를 생성합니다.
Step 2: Using Cursor AI to Build the App
2단계: Cursor AI를 사용하여 앱 구축
Now that we have our development environment set up, let's start using Cursor AI to build our crypto price converter web app:
이제 개발 환경이 설정되었으므로 Cursor AI를 사용하여 암호화폐 가격 변환기 웹 앱을 구축해 보겠습니다.
Open the App.js file in the Cursor AI editor.
커서 AI 편집기에서 App.js 파일을 엽니다.
Select the existing UI code in App.js.
App.js에서 기존 UI 코드를 선택합니다.
Press CTRL + K to edit the selected code.
선택한 코드를 편집하려면 CTRL + K를 누르세요.
In the Cursor AI code editor, provide instructions for how you want the code to be modified. For our crypto price converter, you might use a prompt like: “Create a React component for a cryptocurrency price converter. Include input fields for the amount, 'from' currency, and 'to' currency. Add a button to trigger the conversion and display the result.”
Cursor AI 코드 편집기에서 코드 수정 방법에 대한 지침을 제공합니다. 암호화폐 가격 변환기의 경우 다음과 같은 프롬프트를 사용할 수 있습니다. “암호화폐 가격 변환기를 위한 React 구성 요소를 생성하세요. 금액, '시작' 통화 및 '끝' 통화에 대한 입력 필드를 포함합니다. 전환을 실행하고 결과를 표시하는 버튼을 추가하세요.”
Cursor AI will generate code based on your instructions. Review the generated code and decide whether to accept or reject it.
Cursor AI는 사용자의 지시에 따라 코드를 생성합니다. 생성된 코드를 검토하고 이를 수락할지 거부할지 결정합니다.
If needed, provide follow-up instructions to refine the generated code further.
필요한 경우 생성된 코드를 더욱 구체화하기 위한 후속 지침을 제공합니다.
Step 3: Enhancing Styling and Functionality
3단계: 스타일과 기능성 강화
After accepting the initial code changes from Cursor AI, we'll iterate on our application's styling and functionality:
Cursor AI의 초기 코드 변경 사항을 수락한 후 애플리케이션의 스타일과 기능을 반복합니다.
Use the same method as before to instruct Cursor AI to improve the styling of your component. For example: "Add CSS styles to make the converter visually appealing. Use a modern color scheme and ensure the layout is responsive."
이전과 동일한 방법을 사용하여 Cursor AI에 구성 요소의 스타일을 개선하도록 지시합니다. 예: "변환기를 시각적으로 매력적으로 만들려면 CSS 스타일을 추가하세요. 현대적인 색상 구성표를 사용하고 레이아웃이 반응하는지 확인하세요."
To add functionality for handling currency changes, provide instructions like: "Implement functions to handle changes in the input fields. Update the state when the user selects different currencies or enters an amount."
통화 변경 처리 기능을 추가하려면 "입력 필드의 변경 사항을 처리하는 기능을 구현하세요. 사용자가 다른 통화를 선택하거나 금액을 입력하면 상태를 업데이트하세요."와 같은 지침을 제공하세요.
Cursor AI will provide inline suggestions as you edit the code. You can incorporate these suggestions by pressing the 'Tab' key.
Cursor AI는 코드를 편집할 때 인라인 제안을 제공합니다. 'Tab' 키를 눌러 이러한 제안 사항을 통합할 수 있습니다.
To interact with the CoinGecko API, instruct Cursor AI to add the necessary API calls: "Add a function to fetch real-time exchange rates from the CoinGecko API when the user clicks the convert button."
CoinGecko API와 상호 작용하려면 Cursor AI에 필요한 API 호출을 추가하도록 지시하십시오. "사용자가 변환 버튼을 클릭할 때 CoinGecko API에서 실시간 환율을 가져오는 함수를 추가하십시오."
Continue this iterative process, providing instructions and refining the code until you're satisfied with the result.
결과에 만족할 때까지 지침을 제공하고 코드를 수정하면서 이 반복 프로세스를 계속하세요.
Step 4: Testing and Debugging
4단계: 테스트 및 디버깅
Once you've implemented the core functionality of your crypto price converter, it's time to test and debug:
암호화폐 가격 변환기의 핵심 기능을 구현한 후에는 테스트하고 디버깅할 차례입니다.
Save your changes and run the development server by entering the following command in the terminal:
변경 사항을 저장하고 터미널에 다음 명령을 입력하여 개발 서버를 실행합니다.
Open your browser and navigate to http://localhost:3000 to see your application in action.
브라우저를 열고 http://localhost:3000으로 이동하여 애플리케이션이 작동하는 모습을 확인하세요.
Test various scenarios, such as converting different cryptocurrencies and entering various amounts.
다양한 암호화폐 변환, 다양한 금액 입력 등 다양한 시나리오를 테스트해 보세요.
If you encounter any issues, use Cursor AI's chat feature (accessible by pressing CTRL + L) to ask for help. For example: "The conversion result isn't displaying correctly. Can you help me debug this issue?"
문제가 발생하면 Cursor AI의 채팅 기능(CTRL + L을 눌러 액세스 가능)을 사용하여 도움을 요청하세요. 예: "변환 결과가 올바르게 표시되지 않습니다. 이 문제를 디버깅하는 데 도움을 주실 수 있나요?"
Implement any necessary fixes or improvements suggested by Cursor AI.
Cursor AI가 제안한 필요한 수정 사항이나 개선 사항을 구현합니다.
Essential Keyboard Shortcuts for Cursor AI
Cursor AI의 필수 키보드 단축키
Keyboard shortcuts are essential for maximizing productivity in any development environment, and Cursor AI is no exception. By mastering these shortcuts, you can significantly speed up your workflow and make the most of Cursor AI's powerful features.
모든 개발 환경에서 생산성을 극대화하려면 키보드 단축키가 필수적이며 Cursor AI도 예외는 아닙니다. 이러한 단축키를 익히면 작업 흐름 속도를 크게 높이고 Cursor AI의 강력한 기능을 최대한 활용할 수 있습니다.
Essential Cursor AI Shortcuts
필수 커서 AI 단축키
Advanced Shortcuts and Techniques
고급 단축키 및 기술
Customizing Shortcuts
바로가기 사용자 정의
To avoid conflicts with existing VS Code shortcuts, you can additionally customize Cursor AI's keyboard bindings:
기존 VS Code 단축키와의 충돌을 방지하려면 Cursor AI의 키보드 바인딩을 추가로 사용자 정의할 수 있습니다.
For example, you could remap the AI features to use CMD + U instead of CMD + K:
예를 들어 CMD + K 대신 CMD + U를 사용하도록 AI 기능을 다시 매핑할 수 있습니다.
Another example of how you could remap Cursor AI shortcuts, this time focusing on remapping the AI Pane shortcuts to use CMD + P instead of CMD + L:
Cursor AI 단축키를 다시 매핑하는 방법에 대한 또 다른 예입니다. 이번에는 CMD + L 대신 CMD + P를 사용하도록 AI 창 단축키를 다시 매핑하는 데 중점을 둡니다.
In this configuration:
이 구성에서는 다음을 수행합니다.
We've retained the remapping of CMD + K to CMD + U from the previous example.
이전 예에서 CMD + K를 CMD + U로 다시 매핑하는 방식을 유지했습니다.
We've added new mappings for the AI Pane:
AI 창에 새로운 매핑을 추가했습니다.
CMD + P now opens the AI Pane (replacing CMD + L)
CMD + P는 이제 AI 창을 엽니다(CMD + L 대체).
SHIFT + CMD + P opens the AI Pane with the selected text (replacing SHIFT + CMD + L)
SHIFT + CMD + P는 선택한 텍스트로 AI 창을 엽니다(SHIFT + CMD + L 대체).
ALT + CMD + P toggles the AI Pane visibility
ALT + CMD + P는 AI 창 가시성을 전환합니다.
This configuration allows you to use CMD + P for AI Pane operations, which might be more intuitive if you'
이 구성을 사용하면 AI 창 작업에 CMD + P를 사용할 수 있습니다.
부인 성명:info@kdj.com
제공된 정보는 거래 조언이 아닙니다. kdj.com은 이 기사에 제공된 정보를 기반으로 이루어진 투자에 대해 어떠한 책임도 지지 않습니다. 암호화폐는 변동성이 매우 높으므로 철저한 조사 후 신중하게 투자하는 것이 좋습니다!
본 웹사이트에 사용된 내용이 귀하의 저작권을 침해한다고 판단되는 경우, 즉시 당사(info@kdj.com)로 연락주시면 즉시 삭제하도록 하겠습니다.