0에서 Wow까지: 초보자에게 친숙한 Angular GPT 기반 앱 구축

섹션 1: 소개 ?️

이 기사의 내용

첫 번째 Angular 애플리케이션을 구축하는 흥미진진한 여정에 오신 것을 환영합니다! 이 글은 웹 개발의 세계에 뛰어들고 싶은 초보자를 위해 특별히 작성되었습니다. 우리는 함께 OpenAI의 GPT API를 기반으로 하는 간단하면서도 강력한 채팅 애플리케이션을 구축할 것입니다. 그 과정에서 개발자가 인기 있는 프런트엔드 프레임워크인 Angular를 사용하여 확장 가능한 최신 웹 애플리케이션을 만드는 방법을 알게 될 것입니다.

코딩을 처음 접하는 사람이든 이제 막 Angular를 시작하는 사람이든 이 기사는 사전 경험이 필요하지 않도록 모든 단계를 안내할 것입니다.

왜 각도인가?

Angular는 대화형 및 동적 웹 애플리케이션을 구축하기 위한 가장 다양한 프레임워크 중 하나입니다. 이 프로젝트에 이 제품을 선택한 이유는 다음과 같습니다.

• 초보자 친화적: Angular는 구조화되고 일관된 개발 경험을 제공하므로 이제 막 시작하는 사람들에게 탁월한 선택입니다.
• TypeScript 통합: 강력한 형식의 JavaScript 상위 집합인 TypeScript를 활용하여 생산성을 높이고 개발 중에 오류를 포착합니다.
• 강력한 생태계: 내장된 종속성 주입, 재사용 가능한 구성 요소, 활발한 커뮤니티와 같은 기능을 갖춘 Angular는 전문가 수준의 애플리케이션을 구축할 수 있도록 지원합니다.

당신이 달성할 것

이 기사를 마치면 다음을 얻게 됩니다.

1. 모든 기능을 갖춘 GPT 기반 앱: 사용자가 OpenAI의 GPT 모델에서 질문하고 응답을 받을 수 있는 간단한 대화형 채팅 애플리케이션입니다.
2. Angular 지식: Angular 구성 요소, 서비스 및 구성이 함께 결합되어 웹 애플리케이션을 만드는 방법에 대한 기본적인 이해
3. API 통합 경험: HTTP 요청을 통해 Angular 애플리케이션을 OpenAI의 GPT와 같은 외부 API에 연결하는 방법을 알아보세요.

이 기사를 특별하게 만드는 것

많은 튜토리얼과 달리 이 가이드는 앱을 만드는 과정을 안내할 뿐만 아니라 모든 단계에 대한 명확한 설명을 제공하여 Angular의 기본 개념을 이해하는 데 도움을 줍니다. 결국에는 작동하는 앱을 갖게 될 뿐만 아니라 자신만의 프로젝트를 구축할 수 있는 자신감도 갖게 될 것입니다.

? 코딩을 시작할 준비가 되셨나요? 다음 섹션에서는 이 앱을 구축하는 데 필요한 기본 도구와 설정을 살펴보겠습니다.

? 전체 코드 저장소: 여기에서 이 튜토리얼의 전체 소스 코드를 찾을 수 있습니다.

섹션 2: Angular를 배울 준비하기: Angular 개발자가 되기

Angular GPT 기반 앱 구축을 시작하기 전에 환경을 준비하고 사용할 도구와 개념을 숙지하는 것이 중요합니다. 이 섹션에서는 원활한 설정 및 학습 경험을 보장하기 위해 단계별로 안내합니다.

먼저 배워야 할 것

Angular 앱을 구축하려면 다음과 같은 몇 가지 기본 기술을 습득해야 합니다.

1. HTML과 CSS

• 정의:
  • HTML(HyperText Markup Language)은 웹페이지의 구조를 정의합니다.
  • CSS(Cascading Style Sheets)는 콘텐츠 스타일을 지정하는 데 사용됩니다.
• 중요한 이유: Angular 구성 요소는 HTML 템플릿과 CSS 스타일을 사용하여 구조와 모양을 정의합니다.
• 리소스:
  • 초보자를 위한 HTML 및 CSS: 기사
  • HTML 집중 강좌: 동영상

2. 타입스크립트

• 정의: TypeScript는 코드 품질과 유지 관리성을 향상시키기 위해 Angular에서 사용되는 강력한 형식의 JavaScript 상위 집합입니다.
• 중요한 이유: Angular는 유형 검사, 인터페이스, 데코레이터와 같은 기능을 위해 TypeScript를 사용합니다.
• 자원:
  • TypeScript 공식 문서
  • Typescript 집중 강좌: 동영상

3. Node.js

• 정의:
  Node.js는 Angular가 종속성을 관리하고 개발 도구를 실행하는 데 사용하는 JavaScript 런타임입니다.

• 설치 방법:

1. Node.js 공식 웹사이트에서 해당 OS용 설치 프로그램을 다운로드하세요.
2. 지침에 따라 설치를 완료하세요.
3. 설치 확인:

   node -v
   npm -v

4. 힘내 기초

• 정의: Git은 변경 사항을 추적하고 효과적으로 협업할 수 있는 버전 관리 시스템입니다.
• 주요 단계:
  1. Git 설치: Git 설치 가이드
  2. 저장소 초기화:

   git init

• 자원:
  • Git 기본 가이드

Angular CLI 설정

Angular CLI(명령줄 인터페이스)는 Angular 프로젝트를 쉽게 스캐폴딩하고 관리하는 데 도움이 되는 강력한 도구입니다.

1. npm을 사용하여 전역적으로 Angular CLI를 설치합니다.

   npm install -g @angular/cli

1. 설치 확인:

   ng version

1. 자원:
   • Angular CLI 문서

OpenAI API 키 받기

Angular 앱을 OpenAI의 GPT API에 연결하려면 API 키가 필요합니다.

1. OpenAI 계정 만들기:
   • OpenAI에 가입하세요.
2. API 키 생성:
   • API 키 섹션으로 이동하세요.
   • 새 키 만들기를 클릭하고 생성된 키를 복사합니다.

⚠️ 중요: 무단 액세스를 방지하려면 API 키를 비공개로 유지하세요.

Angular에 익숙해지기

Angular의 구조와 생태계를 이해하는 시간을 가져보세요. 다음은 유용한 리소스입니다.

1. 공식 튜토리얼:
   • Angular 팀은 시작하는 데 도움이 되는 초보자 친화적인 가이드를 제공합니다.
   • Angular 튜토리얼
2. Angular 문서:
   • 여행 전반에 걸쳐 공식 문서를 참고 자료로 사용하세요.
   • Angular 문서
3. 참여할 커뮤니티:
   • Angular Reddit
   • 스택 오버플로 - 각도 질문
   • Angular Discord 커뮤니티: 개발자와 소통하여 질문하고 지식을 공유하세요.

? 준비 완료!

환경이 설정되고 기본 지식이 갖춰졌으면 GPT 기반 앱 계획을 시작할 준비가 된 것입니다.

다음: 섹션 3: GPT 기반 채팅 앱 계획.

섹션 3: GPT 기반 채팅 앱 계획하기

코딩을 시작하기 전에 명확한 계획을 세우는 것이 중요합니다. 이 섹션에서는 앱의 목적, 관련 기술, 앱의 작동 방식을 이해하게 됩니다.

앱 개요

목표는 사용자가 OpenAI의 GPT API에서 메시지를 보내고 응답을 받을 수 있는 GPT 기반 채팅 인터페이스를 구축하는 것입니다. 이 앱은 핵심 Angular 개념을 소개하면서 단순성과 유용성에 중점을 둘 것입니다.

주요 특징:

• 사용자 친화적인 채팅 인터페이스.
• OpenAI의 GPT API와 통합하여 프롬프트를 처리하고 응답을 생성합니다.
• 더 나은 사용성을 위한 반응형 디자인

귀하가 사용할 기술

이 앱에 생명을 불어넣기 위해 다음 기술을 사용하게 됩니다.

1. 각도:

   • Angular는 동적이고 확장 가능한 사용자 인터페이스를 구축하기 위한 프런트엔드 프레임워크 역할을 합니다.
   • 구성 요소, 서비스, 종속성 주입과 같은 Angular 기능을 활용하게 됩니다.

2. OpenAI의 GPT API:

   • GPT API는 챗봇의 응답을 강화합니다.
   • Chat Completions API를 사용하여 사용자 메시지를 보내고 받습니다.

앱 작동 방식

다음은 앱의 작동 방식에 대한 단계별 분석입니다.

1. 사용자 입력:
   • 사용자가 채팅 입력 필드에 프롬프트를 입력합니다.
2. API 요청:
   • 입력은 Angular의 HTTP 클라이언트 서비스를 사용하여 OpenAI의 GPT API로 전송됩니다.
3. 응답 처리:
   • GPT API는 프롬프트에 따라 응답을 생성하여 다시 보냅니다.
4. 표시 응답:
   • 응답은 사용자가 볼 수 있도록 채팅 인터페이스에 표시됩니다.

개발 준비

API 키 알림:

계속하기 전에 다음 사항을 확인하세요.

1. OpenAI 계정에 등록했습니다.
2. API 키가 생성되어 안전하게 저장되었습니다. 앱에서 GPT 서비스를 구성하려면 이 정보가 필요합니다.

? 다음 단계: 이제 계획을 세웠으므로 섹션 4: Angular 프로젝트 설정에서 Angular 프로젝트를 설정할 차례입니다.

환상적이에요! 섹션 4: Angular 프로젝트 설정을 진행할 준비가 되었습니다. 끝내자! ??️

섹션 4: Angular 프로젝트 설정

환경이 준비되고 명확한 계획이 수립되었으면 이제 GPT 기반 Angular 앱의 기반을 마련할 때입니다. 이 섹션에서는 Angular 프로젝트를 설정하고 해당 구조를 탐색하며 모든 것이 올바르게 실행되는지 확인합니다.

각도 CLI 설치

아직 Angular CLI를 설치하지 않은 경우 간단히 요약하자면 다음과 같습니다.

1. 터미널을 열고 다음 명령을 실행하여 CLI를 전역적으로 설치합니다.

   node -v
   npm -v

1. 설치 확인:

   git init

프로젝트 생성 및 탐색

1. 새 프로젝트 생성:
   • Angular CLI를 사용하여 새 프로젝트를 스캐폴드합니다.

   npm install -g @angular/cli

1. 프로젝트 디렉토리로 이동:
   • 프로젝트가 생성되면 프로젝트 폴더로 이동합니다.

   ng version

프로젝트 구조 개요

Angular는 기본 프로젝트 구조를 생성합니다. 주요 폴더와 파일은 다음과 같습니다.

• 소스/앱:
  • 앱 코드가 있는 기본 폴더입니다.
  • 여기에서 구성요소, 서비스, 모듈을 생성하게 됩니다.
• angular.json:
  • Angular 앱의 구성 파일
• package.json:
  • 프로젝트의 모든 종속성과 스크립트를 나열합니다.
• 노드_모듈:
  • 앱에 설치된 모든 종속성을 포함합니다.

이 구조를 이해하면 프로젝트를 개발하면서 탐색하는 데 도움이 됩니다.

첫 번째 실행: 설정 테스트

1. Angular 개발 서버를 시작합니다.

   node -v
   npm -v

1. 브라우저를 열고 다음으로 이동하세요.

   git init

1. 기본 Angular 앱이 실행되는 것을 볼 수 있습니다. 페이지가 성공적으로 로드되면 설정이 완료된 것입니다!

? 다음 단계: 기반이 마련되었으면 이제 섹션 5: 채팅 앱 구축에서 GPT 기반 채팅 앱의 핵심 기능 구축을 시작할 차례입니다.

섹션 5: GPT 기반 Angular Chat 앱 구축

이제 Angular 프로젝트가 설정되었으므로 핵심 기능인 GPT 기반 채팅 앱을 구축할 차례입니다. 이 섹션에서는 채팅 구성 요소를 만들고, GPT 서비스를 구현하고, 완전한 기능을 갖춘 경험을 위해 함께 연결합니다.

채팅 구성 요소 생성

Angular 구성 요소는 애플리케이션의 구성 요소입니다. 독립형 채팅 구성 요소를 만들려면 다음 단계를 따르세요.

1. 구성요소 생성:
   • Angular CLI를 사용하여 독립형 채팅 구성 요소를 생성합니다.

   npm install -g @angular/cli

1. 무슨 일이 일어나는지:
   • 이 명령은 src/app/comComponents/chat/에 다음 파일을 생성합니다.
     • chat.comComponent.ts(논리 및 구조)
     • chat.comComponent.html(HTML 템플릿)
     • chat.comComponent.css(스타일)

채팅 구성 요소 템플릿 업데이트

채팅 인터페이스를 만들려면 chat.comComponent.html을 업데이트하세요.

   ng version

설명:

1. 종속성 주입: GptService는 생성자를 통해 구성 요소에 주입됩니다.
2. 양방향 바인딩: userInput 변수는 원활한 입력 처리를 위해.</li> <li> <strong>API 통합</strong>: sendPrompt() 함수는 GPT 서비스를 호출하고 응답을 처리하며 응답 변수를 업데이트합니다.</li> </ol> <h2> GPT 서비스 만들기 </h2> <p>Angular의 서비스는 구성 요소 전체에서 재사용할 수 있는 데이터와 로직을 관리합니다. GPT 서비스를 생성하고 구성하려면 다음 단계를 따르세요.</p> <ol> <li> <strong>서비스 생성</strong>: <ul> <li>다음 명령을 실행하세요: </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ol> <li> <strong>GPT 서비스 로직 업데이트</strong>: <ul> <li>src/app/services/gpt.service.ts를 열고 다음과 같이 업데이트하세요. </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> ng version </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p><strong>설명</strong>:</p> <ol> <li> <strong>HttpClient</strong>: OpenAI의 GPT API에 HTTP 요청을 보내는 데 사용됩니다.</li> <li> <strong>generateResponse()</strong>: 사용자 프롬프트를 API로 보내고 응답과 함께 관찰 가능 항목을 반환합니다.</li> <li> <strong>API 키</strong>: 'your-api-key-here'를 실제 OpenAI API 키로 바꿉니다.</li> </ol> <h2> 채팅 구성요소 스타일 지정 </h2> <p>chat.comComponent.css에 기본 스타일 추가:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p><strong>설명</strong>:</p> <ul> <li>채팅 컨테이너는 채팅 인터페이스의 중심입니다.</li> <li>텍스트 영역과 버튼 스타일은 유용성과 미적 아름다움을 보장합니다.</li> </ul> <h2> 환경 변수로 API 키 보호 </h2> <p>API 키와 같은 민감한 데이터를 서비스 파일에 하드코딩하는 것은 위험합니다. 더 나은 접근 방식은 <strong>환경 변수</strong>를 사용하여 키를 안전하게 유지하는 것입니다. 이 섹션에서는 Angular 프로젝트에서 환경 파일을 설정하고 사용하는 방법을 안내합니다.</p> <h3> 1단계: 환경 파일 생성 </h3> <ol> <li>프로젝트의 src/ 디렉터리로 이동하세요.</li> <li>environments라는 폴더가 아직 없으면 새 폴더를 생성하세요.</li> <li>environment/ 폴더 안에 두 개의 파일을 만듭니다. <ul> <li> Environment.ts: 개발 설정용.</li> <li> Environment.prod.ts: 프로덕션 설정용.</li> </ul> </li> </ol> <h3> 2단계: API 키 추가 </h3> <ol> <li>environment.ts 파일을 열고 API 키를 정의합니다. </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ol> <li>environment.prod.ts 파일을 열고 프로덕션에 동일한 키를 추가합니다. </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <hr> <h3> 3단계: GPT 서비스 업데이트 </h3> <p>하드코딩된 API 키 대신 환경 변수를 사용하도록 gpt.service.ts 파일을 수정하세요.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> ng version </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <hr> <h3> 4단계: 민감한 데이터가 커밋되는 것을 방지 </h3> <ol> <li>프로젝트 루트 디렉터리에서 .gitignore 파일을 엽니다.</li> <li>환경 파일을 무시하려면 다음 줄을 추가하세요. </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>이렇게 하면 API 키와 민감한 데이터가 버전 관리에 포함되지 않습니다.</p> <hr> <h3> 5단계: 공유 환경 설정 지침 </h3> <p>팀으로 작업하거나 프로젝트를 공유할 때 환경 파일을 생성하고 구성하는 방법에 대한 명확한 지침(예: 이 섹션)을 제공하세요. 실제 API 키를 공유하지 마세요.</p> <hr> <p>? <strong>환경변수를 사용하는 이유는 무엇인가요?</strong><br><br> 이 접근 방식은 개발 및 프로덕션 환경에 대해 다양한 구성을 허용하면서 중요한 정보를 안전하게 유지합니다. 이는 최신 웹 개발을 위한 모범 사례입니다.</p> <p>? <strong>다음 단계</strong>: 이제 채팅 구성 요소와 GPT 서비스가 준비되었으므로 <strong>섹션 6: 애플리케이션 테스트</strong>에서 구성 요소를 앱에 통합합니다.</p> <h2> 섹션 6 : 응용 프로그램 테스트 </h2> <g> 이제 GPT 기반 채팅 앱이 구축되었으므로 이제 테스트하고 모든 것이 예상대로 작동하는지 확인해야합니다. 이 섹션에서는 로컬로 앱 실행, 기능 테스트 및 일반적인 문제 해결을 안내합니다. <p> 로컬로 앱을 실행하십시오 </p> <h2> <server> 개발 서버 시작 : </server> </h2> <ol> <li> </li> <ows> 브라우저를 열고 다음으로 탐색하십시오. </ows> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ol> <li> </li> <see> 당신이 볼 것 </see> </ol> : <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ol> <li> <strong> <ang> 기본 각도 앱은 중앙에 사용자 정의 GPT 구동 채팅 구성 요소를로드해야합니다. <inter> 채팅 인터페이스와 상호 작용하고 API로부터 응답을 얻을 수 있다면 축하합니다! 앱이 작동합니다. <working working> </working></inter></ang></strong> </li> 채팅 인터페이스와 상호 작용하십시오 </ol> <p> <or> 채팅 입력 필드에 메시지 나 질문을 입력하십시오. <img src="https://img.php.cn/upload/article/000/000/000/173791657235976.png" alt="Image description" loading="lazy" style="max-width:90%" style="max-width:90%"> </or></p> <ul> 보내기 버튼을 클릭하십시오 <g> GPT API가 응답 할 때까지 기다립니다. 응답은 입력 아래의 응답 영역에 표시되어야합니다. <li> </li> <li> </li> </g> </ul> 문제 해결 팁 <h2> <n> 예상대로 작동하지 않으면 다음 점검 목록을 사용하여 앱을 디버깅하십시오. </n> </h2> 일반적인 문제와 솔루션 <ol> <li> </li> <load> 페이지가로드되지 않음 <li> : <strong> <inal> NG 서브를 실행할 때 오류가 발생하는 터미널 출력을 점검하십시오. </inal></strong> <enc> 모든 종속성이 설치되었는지 확인하십시오. </enc> </li> <li> </li> </load> </ol> <p> <img src="https://img.php.cn/upload/article/000/000/000/173791657346022.png" alt="Image description" loading="lazy" style="max-width:90%" style="max-width:90%"> </p> <h2> gpt api 의 응답 없음 : </h2> <p> <ap> 환경에서 API 키를 확인하십시오 .ts 파일. <os> GPT 서비스 URL (https://api.openai.com/v1/chat/completions)에서 오타를 확인하십시오 <included> 필요한 헤더 (승인 및 컨텐츠 유형)를 포함했는지 확인하십시오 </included></os></ap></p> <h3> </h3> <ol> cors 문제 <li> : <strong> <ows> 크로스 오리핀 리소스 공유 (CORS)로 인해 브라우저가 API 요청을 차단하지 않도록합니다. <use> 필요한 경우 브라우저 확장자를 사용하거나 백엔드를 구성하여 CORS를 허용합니다. </use></ows></strong> <ul> <li> 콘솔의 오류 </li> : <li> <messages> 브라우저 개발자 콘솔에서 오류 메시지를 찾으십시오 <rel> 오류가 API와 관련된 경우 서비스 구성을 두 번 확인하십시오. </rel></messages> </li> </ul> </li> 스타일링 문제 </ol> : <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <y> chat.component.cs의 스타일이 올바르게 적용되는지 확인하십시오 <er> 브라우저 개발자 도구를 사용하여 DOM 및 Debug CSS를 검사하십시오. <ol> <li> <p> <strong>? pro tip : 경고 나 오류에 대해서는 터미널 및 브라우저 콘솔을 정기적으로 확인하십시오. 이것들은 종종 문제 해결에 유용한 힌트를 제공합니다<p>? 다음 단계 : 앱이 테스트되고 기능이 나면 섹션 7 : 다음 단계 . <strong> 섹션 7 : 다음 단계를 수행합니다 </strong> 축하합니다! Angular를 사용하여 GPT 기반 채팅 앱을 성공적으로 구축하고 테스트했습니다. 이제 앱을 높이고 스킬 셋을 확장하기위한 Angular 특정 향상 및 기술을 탐색합시다. <strong>. </strong> 앱 향상 </p> <h2> </h2> 로딩 표시기 <p> : </p> <by> 응답을 기다리는 동안 로딩 스피너 또는 메시지를 추가하여 사용자 경험을 향상시킵니다. HTTP 호출 중에 스피너를 조건부로 표시하려면 Angular의 *NGIF 지시문을 사용하십시오. <h2> </h2> <ol> <li> 각도 재료를 가진 스타일 <p> : <strong> <app> 각도 재료 구성 요소로 앱의 외관을 향상시킵니다 <material> angular 재료 설치 : </material></app></strong> </p> <ul> <li> </li> <li> <u> 광택이있는 외관을 위해 버튼, 입력 필드 및 대화 상자와 같은 사전 제작 된 구성 요소를 추가하십시오. ? ️ </u> </li> 리소스 : 각도 자료 문서. </ul> </li> <li> <p> 양식 검증 <strong> : </strong> <for> 프롬프트가 기준을 충족하도록하기 위해 사용자 입력에 대한 유효성 검사 구현 (예 : 비어 없음, 문자 제한). Angular 's Formbuilder 및 Reactive Forms를 사용하여 상태 및 검증 논리를 관리하십시오. </for></p> <ul> <li> </li> <li> </li> </ul> 공유 구성 요소와의 재사용 성 : </li> </ol> <able> 버튼 또는 입력 필드와 같은 재사용 가능한 UI 요소를 공유 구성 요소로 추출합니다. <on> 앱의 여러 부분 에서이 구성 요소를 사용하여 일관성을 유지하십시오. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ul> <li> </li> 라우팅 <li> : <strong> <to> 사용자 정의를위한 설정 페이지 또는 사용자 지침을위한 도움말 페이지와 같이 여러 페이지를 앱에 추가하십시오. <r> 각도 라우터를 사용 하여이 페이지들 사이를 설정하고 탐색합니다. </r></to></strong> ? ️ </li> 자원 : 각도 라우팅 안내서. </ul> <ol> <li> <strong> </strong> 주 관리 <ul> : <li> <ide> NGRX와 같은 각도 서비스 또는 상태 관리 라이브러리 사용, 채팅 기록 또는 사용자 선호도와 같은 앱 전체 상태 관리. ? kel </ide> </li> 리소스 : ngrx 소개 </ul> </li> </ol></on></able></by></strong></p> </li> </ol> 다른 엔드 포인트에 연결 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <work> API를 사용하는 방법을 배우는 것은 각도 개발에서 중요한 기술입니다. 추가 엔드 포인트를 앱에 통합하여 연습하십시오 : <ol> <li> REST API 통합 <p> : <strong> <connect> 날씨 또는 뉴스 API와 같은 공개 API에 연결하는 실험. angular의 httpclient를 사용하여 데이터를 가져오고 앱에 동적으로 표시합니다. ? ️ </connect></strong> 리소스 : angular httpclient 안내서 </p> <ul> <li> </li> Crud 작업 <li> : <ul> <feature> RESTFUL API를 사용하여 데이터를 작성, 읽기, 업데이트 및 삭제할 수있는 간단한 기능을 구축하십시오. <s> 입력을위한 빌드 양식 연습, 데이터 표시 목록 및 기능 편집/삭제. <li> </li> <li> 오류 처리 </li> : </s></feature> </ul> <ap> rxjs에서 Angular의 Catcherror 연산자를 사용하여 API 오류를 우아하게 처리하는 법을 배우십시오. <r> 더 나은 유용성을 위해 사용자 친화적 인 오류 메시지를 표시하십시오 </r></ap> </li> <li> <p> <strong> 작업을 공유하십시오 </strong> </p> <ul> 앱을 배포하십시오 <li> : </li> <using> FireBase, Vercel 또는 NetLify와 같은 플랫폼을 사용하여 앱을 호스팅하십시오. ? ️ <li> 리소스 </li> : 각도 배치 안내서. </using> </ul> </li> </ul> </li> </ol> <h2> 다른 사람들과 협력 : <ol> <on> github에서 코드를 공유하고 Angular 커뮤니티의 피드백 또는 기여를 초대하십시오. <m> 설정 지침과 프로젝트 개요가있는 readme 파일을 포함합니다. <li> <p> <strong> </strong>? 다음 단계 </p> : 앱을 계속 수정하고, Angular의 기능을 실험하고, 더 많은 프로젝트를 구축하여 이해를 심화시킵니다. Angular는 역동적이고 확장 가능한 웹 애플리케이션을 구축 할 수있는 강력한 도구를 제공합니다. 마스터는 다음 이정표입니다! <ul> 섹션 8 : 결론 <li> <a> 당신은 먼 길을 왔습니다! 개발 환경 설정부터 GPT 기반 채팅 앱 구축 및 테스트에 이르기까지 첫 단계를 성공적으로 각도 개발로 가져 왔습니다. 그 과정에서 구성 요소 만들기, 서비스 관리 및 API 통합과 같은 중요한 기술을 배웠습니다. </a> </li> 당신이 성취 한 것 <li> <strong> </strong> <al>는 기능적 각도 앱을 구축했습니다. </al> </li> <fund> 배운 Angular Fundamentals </fund> </ul> : 구성 요소에서 의존성 주입에 이르기까지 Angular의 핵심 특징을 탐색했습니다. </li> 외부 API에 연결된 <al> : 타사 API를 통합하고 HTTP 요청과 응답을 효과적으로 처리했습니다. <li> <ices> 이후 모범 사례에 따른 <p> : 환경 변수와 보안 개발 기술을 사용하여 전문 코딩 표준을 채택했습니다. <strong> </strong> 행동 유도 문안 </p> <ang> 각도 발달로의 여행은 막 시작되었습니다. 계속 진행할 수있는 방법은 다음과 같습니다 <ul> <li> </li> 정기적으로 연습 <li> : </li> <to> 각도 개념에 대한 이해를 굳히기 위해 더 많은 프로젝트를 구축하십시오. </to> </ul> <features> 라우팅, 상태 관리 및 애니메이션과 같은 기능을 실험하십시오 </features></ang></ices> </li> </al></m></on> </ol> </h2> <p> <strong> 고급 각 주제 </strong> : 를 탐색하십시오 <br> <azy> 게으른 하중, 성능 최적화 및 각도 응용 테스트에 대해 배우십시오. ? ️ </azy></p> 자원 : <p> 각도 고급 주제. </p> <a> angular & ai <h2> </h2> <ul> <li> <strong> </strong> </li> 커뮤니티에 가입하십시오 <li> : <ul> <ang> 영감과 지원을 위해 다른 각도 개발자와 참여하십시오 <open>는 기술을 연마하기 위해 오픈 소스 각도 프로젝트에 기여합니다 <li> </li> <li> 업데이트 된 상태 </li> : </open></ang> </ul> <a> Angular는 끊임없이 진화하는 프레임 워크입니다. 공식 각도 블로그 및 커뮤니티 채널을 따라 새로운 기능과 모범 사례에 대한 정보를 유지하십시오. </a> </li> <li> <p> <strong> 격려 </strong> <can> 새로운 것을 시작하는 것은 어려울 수 있지만 기억하십시오 : </can></p> 모든 전문가는 한때 초보자였습니다. <ul> 앵글 러에 넣은 노력은 계속 구축하고 성장함에 따라 돈을 지불 할 것입니다. 현재 가지고있는 자원과 지식으로, 당신은 더 야심 찬 프로젝트를 다루기가 잘 갖추어져 있습니다. <li>. </li>? </ul> 계속 구축하십시오 </li> : 웹 개발의 세계는 광대하고 기회가 가득합니다. Angular는 시작에 불과합니다. 더 깊이, 실험을하고, 아이디어가 생겨나게합니다. 어떤 경우에도 질문을하거나 기부금을 주시면 환영합니다! <h2> </h2>? <code> 코드 탐색 :이 프로젝트의 전체 소스 코드는 Github에서 사용할 수 있습니다. 프로젝트를 클론, 수정 또는 기여하십시오! <strong> </strong> <p></p></code> </ul></a></work></er></y></g><p>위 내용은 0에서 Wow까지: 초보자에게 친숙한 Angular GPT 기반 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div style="display: flex;"> <!-- <div style="display: inline-flex;float: right; color:#333333;">원천：dev.to</div> --> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/ko/faq/1796761348.html" title="확인 된 페이팔 계정을 구매하십시오"> <span>이전 기사：확인 된 페이팔 계정을 구매하십시오</span> </a> <a href="https://www.php.cn/ko/faq/1796761352.html" title="검증된 Square 계정 구매"> <span>다음 기사：검증된 Square 계정 구매</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">저자별 최신 기사</div> <ul> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">최신 이슈</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ko/wenda/176411.html" target="_blank" title="function_exists()는 사용자 정의 함수를 결정할 수 없습니다." class="wdcdcTitle">function_exists()는 사용자 정의 함수를 결정할 수 없습니다.</a> <a href="https://www.php.cn/ko/wenda/176411.html" class="wdcdcCons">기능 테스트() {                                                                                ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-29 11:01:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>3</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2675</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ko/wenda/176410.html" target="_blank" title="Chrome 모바일 버전을 표시하는 방법" class="wdcdcTitle">Chrome 모바일 버전을 표시하는 방법</a> <a href="https://www.php.cn/ko/wenda/176410.html" class="wdcdcCons">안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-23 00:22:19</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>11</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2808</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ko/wenda/176407.html" target="_blank" title="자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다." class="wdcdcTitle">자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다.</a> <a href="https://www.php.cn/ko/wenda/176407.html" class="wdcdcCons">처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-19 15:37:47</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2372</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ko/wenda/176406.html" target="_blank" title="상위 창에 출력이 없습니다." class="wdcdcTitle">상위 창에 출력이 없습니다.</a> <a href="https://www.php.cn/ko/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-18 23:52:34</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2231</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ko/wenda/176405.html" target="_blank" title="CSS 마인드맵 코스웨어는 어디에 있나요?" class="wdcdcTitle">CSS 마인드맵 코스웨어는 어디에 있나요?</a> <a href="https://www.php.cn/ko/wenda/176405.html" class="wdcdcCons">코스웨어</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-16 10:10:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2335</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>관련 주제</div> <a href="https://www.php.cn/ko/faq/zt" target="_blank">더> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/wslykgbjl"><img src="https://img.php.cn/upload/subject/202407/22/2024072214303789506.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="win10 블루투스 스위치가 없습니다" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/wslykgbjl" class="title-a-spanl" title="win10 블루투스 스위치가 없습니다"><span>win10 블루투스 스위치가 없습니다</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/szhblhjypt"><img src="https://img.php.cn/upload/subject/202407/22/2024072213243924547.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="디지털 화폐 양적 거래 플랫폼" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/szhblhjypt" class="title-a-spanl" title="디지털 화폐 양적 거래 플랫폼"><span>디지털 화폐 양적 거래 플랫폼</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/esxtxynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214252427301.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="es6의 새로운 기능은 무엇입니까?" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/esxtxynx" class="title-a-spanl" title="es6의 새로운 기능은 무엇입니까?"><span>es6의 새로운 기능은 무엇입니까?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/pycharmhjrhpz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213283332041.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="pycharm 환경을 구성하는 방법" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/pycharmhjrhpz" class="title-a-spanl" title="pycharm 환경을 구성하는 방법"><span>pycharm 환경을 구성하는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/svnhlwjsz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214081773761.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="SVN은 파일 설정을 무시합니다." /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/svnhlwjsz" class="title-a-spanl" title="SVN은 파일 설정을 무시합니다."><span>SVN은 파일 설정을 무시합니다.</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/win11sdrjdbkr"><img src="https://img.php.cn/upload/subject/202407/22/2024072212094359199.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="win11 바이러스 백신 소프트웨어를 열 수 없는 문제를 해결하는 방법" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/win11sdrjdbkr" class="title-a-spanl" title="win11 바이러스 백신 소프트웨어를 열 수 없는 문제를 해결하는 방법"><span>win11 바이러스 백신 소프트웨어를 열 수 없는 문제를 해결하는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/Matlabaxis"><img src="https://img.php.cn/upload/subject/202407/22/2024072213370267925.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Matlab의 축 기능 사용법 소개" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/Matlabaxis" class="title-a-spanl" title="Matlab의 축 기능 사용법 소개"><span>Matlab의 축 기능 사용법 소개</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/faq/phpzsprintfhs"><img src="https://img.php.cn/upload/subject/202407/22/2024072212295658152.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="PHP에서 sprintf 함수 사용" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/phpzsprintfhs" class="title-a-spanl" title="PHP에서 sprintf 함수 사용"><span>PHP에서 sprintf 함수 사용</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">인기 추천</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js는 무슨 뜻인가요?" href="https://www.php.cn/ko/faq/482163.html">js는 무슨 뜻인가요?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js에서 문자열을 배열로 변환하는 방법은 무엇입니까?" href="https://www.php.cn/ko/faq/461802.html">js에서 문자열을 배열로 변환하는 방법은 무엇입니까?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="자바스크립트를 사용하여 페이지를 새로 고치는 방법" href="https://www.php.cn/ko/faq/473330.html">자바스크립트를 사용하여 페이지를 새로 고치는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js 배열에서 항목을 삭제하는 방법" href="https://www.php.cn/ko/faq/475790.html">js 배열에서 항목을 삭제하는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="sqrt 함수를 사용하는 방법" href="https://www.php.cn/ko/faq/415276.html">sqrt 함수를 사용하는 방법</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>인기 튜토리얼</div> <a target="_blank" href="https://www.php.cn/ko/course.html">더> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">관련 튜토리얼 <div></div></div> <div class="tabdiv swiper-slide" data-id="two">인기 추천<div></div></div> <div class="tabdiv swiper-slide" data-id="three">최신 강좌<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div>1431681 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/74.html" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" href="https://www.php.cn/ko/course/74.html">PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기</a> <div class="wzrthreerb"> <div>4286064 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>2613106 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>513226 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/2.html" title="PHP 제로 기반 입문 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 제로 기반 입문 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 제로 기반 입문 튜토리얼" href="https://www.php.cn/ko/course/2.html">PHP 제로 기반 입문 튜토리얼</a> <div class="wzrthreerb"> <div>872046 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div >1431681 학습 시간</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >2613106 학습 시간</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >513226 학습 시간</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/901.html" title="웹 프론트 엔드 개발에 대한 빠른 소개" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="웹 프론트 엔드 개발에 대한 빠른 소개"/> </a> <div class="wzrthree-right"> <a target="_blank" title="웹 프론트 엔드 개발에 대한 빠른 소개" href="https://www.php.cn/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a> <div class="wzrthreerb"> <div >216627 학습 시간</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/234.html" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PS 비디오 튜토리얼을 처음부터 마스터하세요"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" href="https://www.php.cn/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a> <div class="wzrthreerb"> <div >909619 학습 시간</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/ko/course/1648.html" title="[웹 프런트엔드] Node.js 빠른 시작" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[웹 프런트엔드] Node.js 빠른 시작"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[웹 프런트엔드] Node.js 빠른 시작" href="https://www.php.cn/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a> <div class="wzrthreerb"> <div >8832 학습 시간</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1647.html" title="해외 웹 개발 풀스택 강좌 총집합" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="해외 웹 개발 풀스택 강좌 총집합"/> </a> <div class="wzrthree-right"> <a target="_blank" title="해외 웹 개발 풀스택 강좌 총집합" href="https://www.php.cn/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a> <div class="wzrthreerb"> <div >7029 학습 시간</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1646.html" title="Go 언어 실습 GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go 언어 실습 GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go 언어 실습 GraphQL" href="https://www.php.cn/ko/course/1646.html">Go 언어 실습 GraphQL</a> <div class="wzrthreerb"> <div >5989 학습 시간</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1645.html" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" href="https://www.php.cn/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a> <div class="wzrthreerb"> <div >782 학습 시간</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1644.html" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬"/> </a> <div class="wzrthree-right"> <a target="_blank" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" href="https://www.php.cn/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a> <div class="wzrthreerb"> <div >29972 학습 시간</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>최신 다운로드</div> <a href="https://www.php.cn/ko/xiazai">더> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">웹 효과 <div></div></div> <div class="swiper-slide" data-id="twof">웹사이트 소스 코드<div></div></div> <div class="swiper-slide" data-id="threef">웹사이트 자료<div></div></div> <div class="swiper-slide" data-id="fourf">프론트엔드 템플릿<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 기업 메시지 양식 연락처 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8071">[양식 버튼] jQuery 기업 메시지 양식 연락처 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 뮤직 박스 재생 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8070">[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8069">[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 시각적 양식 드래그 앤 드롭 편집 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8068">[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 모방 Kugou 음악 플레이어 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8067">[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="클래식 HTML5 푸시 박스 게임" href="https://www.php.cn/ko/toolset/js-special-effects/8066">[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤" href="https://www.php.cn/ko/toolset/js-special-effects/8065">[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 개인 앨범 커버 호버 확대/축소 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8064">[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8328" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8327" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿" target="_blank">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8326" title="디자이너 크리에이티브 작업 이력서 웹 템플릿" target="_blank">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8325" title="현대 엔지니어링 건설 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8324" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿" target="_blank">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8323" title="온라인 전자책 쇼핑몰 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8322" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다." target="_blank">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8321" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿" target="_blank">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3078" target="_blank" title="귀여운 여름 요소 벡터 자료(EPS+PNG)">[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3077" target="_blank" title="4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)">[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3076" target="_blank" title="노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)">[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3075" target="_blank" title="황금 졸업 모자 벡터 자료(EPS+PNG)">[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3074" target="_blank" title="흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)">[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3073" target="_blank" title="다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)">[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3072" target="_blank" title="플랫 스타일 식목일 배너 벡터 자료(AI+EPS)">[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3071" target="_blank" title="9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)">[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8328" target="_blank" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8327" target="_blank" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8326" target="_blank" title="디자이너 크리에이티브 작업 이력서 웹 템플릿">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8325" target="_blank" title="현대 엔지니어링 건설 회사 웹사이트 템플릿">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8324" target="_blank" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8323" target="_blank" title="온라인 전자책 쇼핑몰 웹사이트 템플릿">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8322" target="_blank" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8321" target="_blank" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ko/about/us.html">회사 소개</a> <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1738893790"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> </body> </html>