node.js를 사용한 서버 측 JavaScript 프로그래밍

高洛峰
풀어 주다: 2016-11-26 13:16:35
원래의
1084명이 탐색했습니다.

간단히 말하면 node.js는 개발자가 JavaScript 언어를 사용하여 서버측 코드를 작성할 수 있게 해주는 프레임워크입니다. 즉, 작성된 JavaScript 코드는 브라우저뿐만 아니라 로컬 시스템에서 직접 실행될 수 있습니다. 구현 관점에서 Jaxer와 node.js는 모두 기존 JavaScript 실행 엔진을 사용합니다. Jaxer는 Mozilla Firefox에서 사용되는 JavaScript 엔진을 사용하고 node.js는 Google Chrome에서 사용되는 V8 엔진을 사용합니다.

node.js 시작하기

node.js는 Linux, Windows, Macintosh와 같은 주요 운영 체제에서 실행될 수 있습니다. Windows 플랫폼에서 node.js를 실행하는 경우 Cygwin 또는 MinGW의 지원이 필요합니다. 다음에서는 일반적으로 사용되는 Windows 플랫폼을 예로 들어 설명합니다. 먼저 Cygwin을 설치해야 합니다. 설치 시 gcc-g++, make, openssl 및 python 패키지를 선택해야 합니다. gcc 버전은 최신 버전이어야 합니다. 그런 다음 리소스에 제공된 주소에서 node.js 버전 0.4.0의 소스 코드를 다운로드하세요. 다운로드하고 압축을 푼 후 Cygwin에서 ./configure, make, make install 등의 명령을 실행하여 컴파일하고 설치합니다. 설치가 완료된 후 node 명령을 직접 실행하여 node.js에서 제공하는 명령줄을 시작하세요. JavaScript 코드를 명령줄에 직접 입력하고 실행할 수 있습니다. node server.js를 통해 JavaScript 파일 server.js를 실행할 수도 있습니다.

간단한 "Hello World" 프로그램의 예가 코드 목록 1에 나와 있습니다. node helloworld.js를 통해 JavaScript 파일을 실행하면 "Hello World"가 콘솔에 출력됩니다.


목록 1. node.js를 사용하는 "Hello World" 프로그램
process.stdout.write("Hello World");

코드 목록 1의 프로세스 표현은 현재 실행 중인 node.js 프로세스와 해당 속성 stdout은 프로세스의 표준 출력 스트림을 나타냅니다. write() 메서드를 사용하여 스트림에 문자열을 씁니다. 코드 목록 1에서 볼 수 있듯이 JavaScript를 사용하여 표준 출력 스트림과 같은 로컬 시스템의 리소스에 액세스할 수 있습니다. 이는 한쪽에서 node.js의 힘을 반영합니다.

node.js에서 실행할 수 있는 JavaScript 코드에서는 코드 목록 1에 사용된 프로세스, 아래 소개된 모듈을 로드하는 데 사용된 require() 메서드, 현재 __filename 등 일부 전역 개체를 사용할 수 있습니다. 실행 중인 JavaScript 파일 이름, 현재 실행 중인 JavaScript 파일의 디렉터리를 나타내는 __dirname, 예약된 작업을 실행하기 위해 브라우저에서 사용되는 것과 유사한 setTimeout() 및 setInterval() 메서드.

node.js의 기본 지식을 소개한 후 node.js의 모듈식 구조를 소개합니다.

맨 위로

모듈형 구조

node.js는 CommonJS에서 정의한 모듈 시스템을 사용합니다. 다양한 기능 구성 요소는 다양한 모듈로 나뉩니다. 애플리케이션은 자신의 필요에 따라 적절한 모듈을 사용하도록 선택할 수 있습니다. 각 모듈은 일부 공용 메서드나 속성을 노출합니다. 모듈 사용자는 모듈 내부의 구현 세부 사항에 대해 걱정할 필요 없이 이러한 메서드나 속성을 직접 사용할 수 있습니다. 시스템에 의해 사전 설정된 여러 모듈 외에도 애플리케이션 개발 팀은 이 메커니즘을 사용하여 애플리케이션을 여러 모듈로 분할하여 코드 재사용성을 향상시킬 수도 있습니다.

모듈 사용

node.js에서 모듈을 사용하는 것은 매우 간단합니다. 모듈을 사용하기 전에 모듈에 대한 종속성을 선언해야 합니다. JavaScript 코드에서 전역 함수 require()를 직접 사용하여 모듈을 로드할 수 있습니다. 예를 들어, require("http")는 시스템의 미리 설정된 http 모듈을 로드할 수 있습니다. 그리고 require("./myModule.js")는 현재 JavaScript 파일과 동일한 디렉터리에 myModule.js 모듈을 로드하는 데 사용됩니다. require()를 사용하는 경로가 "/"로 시작하는 경우 운영 체제에서 모듈 JavaScript 파일의 절대 경로로 간주됩니다. 둘 중 어느 것도 해당되지 않으면 node.js는 현재 JavaScript 파일의 상위 디렉터리와 해당 상위 디렉터리 아래에 있는 node_modules 디렉터리를 찾으려고 시도합니다. 예를 들어 /usr/home/my.js 디렉터리에서 require("other.js")가 호출되면 node.js는 /usr/home/node_modules/other.js 파일을 순서대로 찾으려고 시도합니다. /usr/node_modules/other.js 및 /node_modules/other.js.

require() 메서드의 반환 값은 사용 가능한 메서드와 속성을 포함하는 모듈에 의해 노출되는 공개 JavaScript 객체입니다. 코드 목록 2는 모듈의 기본 사용법을 보여줍니다.


목록 2. 모듈의 기본 사용법
var Greetings = require("./greetings.js");
var msg = Greetings.sayHello("Alex", "zh_CN ");
process.stdout.write(msg);

코드 목록 2에서 볼 수 있듯이 require() 메서드의 반환 값은 일반적으로 변수에 할당되어 JavaScript 코드에서 직접 사용됩니다. 변수가 할 것입니다. Greetings.js 모듈은 현재 JavaScript 코드에서 직접 사용되는 sayHello() 메서드를 노출합니다.

나만의 모듈 개발

자체 모듈 개발의 기본 작업은 모듈에 해당하는 자바스크립트 파일에 모듈 관련 코드를 작성하는 것입니다. 이는 모듈의 내부 처리 논리를 캡슐화합니다. 일반적으로 모듈은 일반적으로 일부 공용 메서드나 속성을 사용자에게 노출합니다. 모듈의 내부 코드는 이러한 메서드나 속성을 노출해야 합니다. 목록 3은 목록 2에 사용된 Greetings.js 파일의 내용을 보여줍니다.


목록 3. Greetings.js 모듈의 내용
var 언어 ​​= {
"zh_CN" : "Hello,",
"en" : "Hello, "
};
exports.sayHello = function(이름, 언어) {
반환 언어[언어] || 언어["en"] + 이름;
};

코드로 Listing 3에 표시된 것처럼 내보내기 개체의 콘텐츠는 require() 메서드를 호출하는 모듈 사용자의 반환 값에 포함된 콘텐츠입니다. 이는 모듈이 노출하는 공용 메서드와 속성을 선언하는 방법입니다. 언어와 같이 모듈에 정의된 변수는 모듈 내부의 코드에만 표시됩니다.

모듈에 콘텐츠가 많으면 폴더로 정리할 수도 있습니다. 폴더의 루트 디렉터리 아래에 package.json 파일을 생성할 수 있습니다. 해당 콘텐츠에는 모듈 이름과 항목 JavaScript 파일 경로가 포함되어 있습니다. 이 package.json 파일이 제공되지 않으면 node.js는 기본적으로 폴더에서 index.js 파일을 모듈의 시작 JavaScript 파일로 찾습니다.

node.js의 모듈식 구조를 소개한 후 이벤트 중심 메커니즘을 소개하겠습니다.

맨 위로

이벤트 중심

웹 애플리케이션을 개발해 본 사람이라면 누구나 브라우저의 이벤트 처리 메커니즘에 익숙할 것입니다. 특정 DOM 요소의 특정 유형의 이벤트에 관심이 있는 경우 DOM 요소에 이벤트 리스너만 등록하면 됩니다. 예를 들어 ele.addEventListener("click", function() {})는 클릭 이벤트에 대한 리스너를 추가합니다. 이벤트가 발생하면 이벤트 리스너의 JavaScript 메소드가 호출됩니다. 이벤트 처리 메서드는 비동기적으로 실행됩니다. 이 비동기 실행 방법은 고성능 동시 네트워크 애플리케이션을 개발하는 데 매우 적합합니다. 실제로 고성능 동시 애플리케이션 개발에는 일반적으로 두 가지 접근 방식이 있습니다. 첫 번째는 멀티스레딩 메커니즘을 사용하는 것이고, 다른 하나는 이벤트 중심 접근 방식을 사용하는 것입니다. 멀티스레딩의 문제점은 애플리케이션 개발이 어렵고 스레드 고갈이나 교착 상태 등의 문제가 발생하기 쉬워 개발자의 요구 사항이 더 높아진다는 것입니다. 이벤트 중심 접근 방식은 웹 개발자가 더 유연하고 이해하기 쉽고 사용하기 쉬우며 스레드 교착 상태와 같은 문제가 없습니다. 강력한 Google V8 엔진과 고급 이벤트 I/O 아키텍처를 기반으로 하는 node.js는 고성능 서버 측 애플리케이션을 만들기 위한 좋은 기반이 될 수 있습니다.

node.js 기반 애플리케이션 개발은 웹 애플리케이션 개발과 유사한 프로그래밍 모델을 갖습니다. 많은 모듈은 일부 이벤트를 노출하며 이러한 모듈을 사용하는 코드는 이벤트 리스너를 등록하여 해당 처리 로직을 추가할 수 있습니다. 목록 4는 간단한 HTTP 프록시 서버의 구현 코드를 보여줍니다.


목록 4. HTTP 프록시 서버
var http = require("http");
var url = require("url");

http.createServer(function (req, res) {
var urlObj = url.parse(req.url, true); // 프록시된 URL 가져오기
var urlToProxy = urlObj.query.url;
if (!urlToProxy) {
res.statusCode = 400;
res.end("URL이 필요합니다.");
}
else {
console.log( "처리 프록시 요청:" + urlToProxy);
varparsedUrl = url.parse(urlToProxy);
var opt = {
호스트:parsedUrl.hostname,
포트:parsedUrl.port || 80 . Opt , 함수(Pres) {// 프록시 URL의 내용 요청
Res.Statuscode = Pres.statuscode;
var healthrs = Pres.headers
for (VAR Key in Headers) {
res.setHeader(key, headers[key]);
}
}
pres.on("data", function(chunk) {
res.write(chunk); // 다시 쓰기 data
}); PRES.ON ("End", Function () {
Res.end ();
})
}
}) (8088, "127.0.0.1");

console.log("프록시 서버가 포트 8088에서 시작되었습니다. ");

전체 프록시 서버의 구현은 비교적 간단합니다. 먼저 http 모듈의 createServer() 메소드를 통해 HTTP 서버를 생성한 다음, Listen() 메소드를 사용하여 HTTP 서버가 createServer() 메소드에 전달된 매개변수는 실제로 HTTP 요청의 응답 메소드입니다. 코드 목록 4의 HTTP 서버 생성 부분은 다음과 같습니다. 실제로는 코드 목록 5에 제공된 구현 방법과 동일합니다.

목록 5. 이벤트 메커니즘을 사용한 HTTP 서버 생성 방법

var server = http.createServer();

server.on( " request", function(req, res) {

});


요청 처리 방법에서는 http.get() 메서드를 통해 프록시 URL의 내용을 가져옵니다. 이벤트 처리 방법: pres .on("data", function(chunk) {})는 pres의 데이터 이벤트에 처리 방법을 추가합니다. 이 방법의 기능은 프록시 URL의 내용을 얻는 것입니다. 얻은 내용은 다음의 응답에 다시 기록됩니다. node.js로 개발할 때 이벤트 처리 방법과 콜백 방법을 사용하는 시나리오를 자주 접하게 됩니다. node.js의 구동 메커니즘은 다음과 같습니다.

맨 위로

공통 모듈

node.js와 관련된 여러 모듈. 이러한 모듈은 서버측 애플리케이션을 구축하기 위한 기초입니다. 다음은 몇 가지 일반적인 모듈입니다.

이벤트 모듈

앞에서 언급한 것처럼 node.js는 이벤트 중심 모듈을 채택합니다. 이벤트를 생성할 수 있는 모든 객체는 EventEmitter 클래스의 인스턴스에 있습니다. 클래스는 다음과 같이 이벤트 생성 및 처리와 관련됩니다.

addListener(event,listener) 및 on(event,listener): 이 두 가지 메소드는 특정 이벤트 이벤트에 이벤트 처리 메소드 리스너를 추가하는 데 사용됩니다.
once(이벤트, 리스너): 이 메소드는 이벤트 이벤트에 대해 한 번만 실행되는 처리 메소드 리스너를 추가합니다. 처리 방법은 한 번 실행된 후 삭제됩니다.
removeListener(event,listener): 이 메소드는 이벤트 이벤트에서 핸들러 리스너를 삭제하는 데 사용됩니다.
emit(event, [arg1], [arg2], [...]): 이 메서드는 이벤트 이벤트를 생성하는 데 사용됩니다. 이벤트 이름 event 뒤의 매개변수는 해당 이벤트 처리 메서드에 전달됩니다.
코드 목록 6은 이벤트 모듈을 사용하는 예를 보여줍니다.


목록 6. 이벤트 모듈 사용 예
var events = require("events");
var Emitter = new events.EventEmitter();
Emitter.on( "myEvent", function(msg) {
console.log(msg);
});
Emitter.emit("myEvent", "Hello World.");

at 이벤트 모듈에 특수 이벤트 오류가 있습니다. EventEmitter는 오류가 발생할 때 이 이벤트를 생성합니다. 이 이벤트에 해당하는 처리 방법이 없는 경우 기본 동작은 오류 메시지를 출력한 후 프로그램을 자동으로 종료하는 것입니다. 따라서 항상 오류 이벤트에 대한 처리기를 추가하도록 주의하세요.

스트림

node.js에는 파일 시스템, HTTP 요청 및 응답, TCP/UDP 연결 등 다양한 데이터 흐름이 있습니다. 이러한 스트림은 모두 EventEmitter의 인스턴스이므로 다양한 이벤트를 생성할 수 있습니다. 스트림은 읽기 전용, 쓰기 전용, 읽기-쓰기 스트림의 세 가지 유형으로 나눌 수 있습니다.

읽기 가능한 스트림은 주로 4가지 이벤트를 생성합니다.

data: 이 이벤트는 스트림의 데이터를 읽을 때 생성됩니다.
end: 스트림에 읽을 데이터가 없을 때 발생하는 이벤트입니다.
error: 데이터를 읽는 중 오류가 발생하면 발생하는 이벤트입니다.
close: 이 이벤트는 스트림이 닫힐 때 생성됩니다.
위 이벤트 외에도 현재 읽기 가능한 스트림을 쓰기 가능한 다른 스트림에 연결하는 데 사용할 수 있는 Pipe() 메서드도 있습니다. 읽기 가능한 스트림의 데이터는 쓰기 가능한 스트림에 자동으로 기록됩니다.

쓰기 가능한 스트림에서 가장 일반적으로 사용되는 메서드는 write() 및 end()입니다. write() 메소드는 스트림에 데이터를 쓰는 데 사용되며 end()는 쓰기 작업을 종료하는 데 사용됩니다.

바이너리 데이터를 표현하기 위해 node.js는 Buffer 클래스를 사용하여 바이너리 데이터를 처리할 데이터 버퍼를 표현합니다. Buffer 클래스는 배열 형태로 내부적으로 데이터를 저장합니다. 일단 생성된 버퍼의 크기는 수정할 수 없습니다. Buffer 클래스의 인스턴스는 JavaScript의 문자열 유형 간에 변환 가능합니다. 변환 시 인코딩 형식을 지정해야 합니다. Buffer의 처음부터 끝까지의 내용은 Buffer 클래스의 toString(encoding, start, end) 메소드를 통해 인코딩하여 인코딩된 문자열로 변환할 수 있습니다. 지원되는 인코딩 형식은 ascii, utf8 및 base64입니다. 버퍼는 new Buffer(str, 인코딩)을 통해 문자열 str로 초기화될 수 있습니다. write(string, offset, 인코딩)은 버퍼의 오프셋에서 시작하는 위치에 인코딩 형식으로 문자열을 쓰는 데 사용됩니다.

네트워크 운영

node.js는 네트워크 서버와 클라이언트를 구현할 수 있는 TCP, UDP, HTTP 등 네트워크 운영과 관련된 일부 모듈을 제공합니다.

TCP 프로토콜과 관련된 구현은 net 모듈에 있습니다. 이 모듈의 createServer(connectionListener) 메소드를 통해 TCP 서버를 생성할 수 있습니다. 커넥션리스너(connectionListener) 파라미터는 클라이언트가 서버에 접속할 때 처리하는 방식으로, 커넥트 이벤트 처리와 동일하다. TCP 서버는 Server 클래스의 인스턴스입니다. Listen 메소드를 사용하면 서버가 지정된 포트에서 수신 대기할 수 있습니다.

기존 TCP 서버에 연결하려는 경우 createConnection(port,host) 메소드를 사용하여 지정된 호스트 호스트의 포트 포트에 연결하면 됩니다. 이 메서드의 반환 값은 소켓 연결을 나타내는 Socket 클래스의 인스턴스입니다. Socket 클래스의 인스턴스를 얻은 후 write() 메서드를 통해 연결에 데이터를 쓸 수 있습니다. 이 연결에서 데이터를 가져오려면 데이터 이벤트 처리 방법을 추가하면 됩니다.

코드 목록 7에는 표현식 계산을 위한 간단한 TCP 서버가 나와 있습니다. 테스트를 위해 telnet 명령을 통해 이 서버에 연결할 수 있습니다.


목록 7. 단순 표현식 평가 서버
var net = require("net");
var server = net.createServer(function(socket) {
소켓.setEncoding( "utf8 ");
var buffer = [], len = 0;
소켓.on("data", function(data) { // 클라이언트 데이터 수신
if (data.charCodeAt( 0) == 13) {
var expr = buffer.join("");
try {
var result = eval(expr); // 계산
socket.write(result.toString()) ; // 결과 다시 쓰기
                         catch (e) {                                             버퍼 = [];                                     });
});
server.listen (8180, "127.0.0.1");
console.log("서버가 포트 8180에서 시작되었습니다.");

TCP 서버 외에도 http 및 https 모듈을 사용할 수 있습니다. HTTP 및 HTTPS 서버를 별도로 구현하면 dgram 모듈은 UDP/데이터그램 소켓 연결을 구현할 수 있고, tls 모듈은 SSL(보안 소켓 연결)을 구현할 수 있습니다. 이 모듈은 모두 tcp 모듈과 유사하게 사용됩니다.

파일 시스템

node.js의 fs 모듈은 로컬 파일 시스템을 운영하는 데 사용됩니다. fs 모듈에서 제공되는 메서드를 사용하여 읽기, 쓰기, 이름 바꾸기, 디렉터리 생성 및 삭제, 파일 메타데이터 가져오기 등 기본 파일 작업을 수행할 수 있습니다. 파일을 작동하는 각 방법에는 동기 버전과 비동기 버전이 있습니다. 작업의 비동기 버전은 항상 콜백 메서드를 마지막 매개변수로 사용합니다. 작업이 완료되면 콜백 메서드가 호출됩니다. 콜백 메소드의 첫 번째 매개변수는 작업 중 발생할 수 있는 예외를 위해 항상 예약되어 있습니다. 작업이 올바르게 성공하면 첫 번째 매개변수의 값은 null 또는 정의되지 않습니다. 동기 작업 버전의 메서드 이름은 해당 비동기 메서드 뒤에 접미사로 Sync가 추가됩니다. 예를 들어, 비동기 rename() 메서드의 동기 버전은 renameSync()입니다. fs 모듈의 몇 가지 일반적인 메서드가 아래에 나열되어 있으며 비동기 작업 버전만 소개됩니다.

rename(path1, path2): path1이 나타내는 디렉터리 또는 파일의 이름을 path2로 변경합니다.
truncate(fd, len): 파일 설명자 fd에 해당하는 파일의 길이를 len으로 자릅니다.
chmod(path, mode): 경로가 나타내는 디렉터리나 파일의 권한을 모드로 변경합니다.

stat(path): path로 표시되는 디렉터리 또는 파일의 메타데이터를 가져옵니다. 메타데이터는 Stats 클래스를 사용하여 표현됩니다.

open(path, flags, mode): path로 표시되는 파일을 엽니다. 파일 설명자는 콜백 메서드에서 얻을 수 있습니다.

read(fd, buffer, offset, length, position): 주어진 파일 디스크립터 fd가 나타내는 파일 내 위치 position부터 length 바이트의 데이터를 읽어 시작 위치의 버퍼 버퍼에 저장합니다. 위치. 실제 읽은 바이트 수는 콜백 메서드에서 얻을 수 있습니다.

write(fd, buffer, offset, length, position): 파일 디스크립터 fd가 나타내는 파일에 버퍼 버퍼의 데이터를 씁니다. 매개변수의 의미는 read() 메서드와 동일합니다. 작성된 실제 바이트 수는 콜백 메서드에서 얻을 수 있습니다.

readFile(filename, 인코딩): 인코딩 형식 인코딩으로 파일 이름의 내용을 읽습니다. 파일의 내용은 콜백 메소드에서 얻을 수 있습니다.

writeFile(filename, data, 인코딩): 인코딩 형식 인코딩으로 파일 filename에 데이터 데이터를 씁니다.

위에 나열된 파일 자체를 직접 조작하는 방법 외에도 파일을 스트림으로 변환할 수도 있습니다. createReadStream(path, options) 및 createWriteStream(path, options)은 각각 파일에서 읽기 가능하고 쓰기 가능한 스트림을 생성하는 데 사용됩니다. 매개변수 path는 파일의 경로를 나타내며, options는 파일을 읽거나 쓸 때 옵션을 나타내는 JavaScript 객체입니다.


간단한 HTTP 정적 파일 서버의 구현은 코드 목록 8에 나와 있습니다.


목록 8. HTTP 정적 파일 서버
var http = require("http"),
fs = require("fs"),
path = require("path"),
url = require("url");

var server = http.createServer(function(req, res) {
var pathname = url.parse(req.url).pathname;
var filepath = path.join("/tmp", "wwwroot", 경로 이름);
var stream = fs.createReadStream(filepath, {flags : "r", 인코딩 : null});
stream .on("error", function() {
res.writeHead(404);
res.end();
});
stream.pipe(res);
} );
server.on("error", function(error) {
console.log(error);
});
server.listen(8088, "127.0.0.1");

코드 목록 8과 같이 먼저 HTTP 요청 경로를 서버의 파일 경로로 변환한 다음 파일에서 읽을 수 있는 스트림을 생성하고 마지막으로 파일 데이터 스트림을 다음을 통해 HTTP 요청에 전달합니다. 이에 대한 응답으로 Pipe() 메서드를 사용합니다.

보조 모듈

위에 소개된 일반 모듈 외에도 node.js는 몇 가지 보조 모듈도 제공합니다.

모듈 경로는 파일 시스템의 경로를 처리하는 데 사용됩니다. 이 모듈의 Join()은 여러 경로를 연결하여 완전한 경로를 형성하는 데 사용됩니다. 예를 들어, Join("/usr", "home", "test/index.html")의 결과는 /usr/home/test/index.html 경로입니다. Normalize()는 경로를 정규화하고, 중복된 "/"를 제거하고, ".." 및 "."을 처리하는 데 사용됩니다. Resolve([from ...], to) 메소드는 주어진 경로의 절대 경로를 얻는 데 사용됩니다. to가 절대 경로가 아닌 경우 절대 경로를 얻을 때까지 오른쪽에서 왼쪽으로 이전 매개변수를 추가합니다. 결국 절대 경로를 얻을 수 없으면 현재 작업 디렉터리를 추가합니다. 현재 작업 디렉터리가 /usr/home이라고 가정하면, 해결("test", "index.html")의 반환 결과는 /usr/home/test/index.html입니다. dirname() 메서드는 경로의 디렉터리 부분을 가져오는 데 사용됩니다. 예를 들어, dirname("/usr/home/index.html")의 반환 결과는 /usr/home입니다. basename()은 경로의 마지막 부분을 가져오는 데 사용됩니다. 예를 들어, basename("/usr/home/index.html")의 반환 결과는 index.html입니다. extname()은 경로의 파일 확장자 부분을 가져오는 데 사용됩니다. 예를 들어, extname("/usr/home/index.html")의 반환 결과는 .html입니다.

모듈 URL은 URL을 구문 분석하는 데 사용됩니다. 구문 분석(urlStr, 구문 분석 문자열) 메소드는 URL 문자열 urlStr을 호스트 이름, 포트 및 경로와 같은 여러 부분으로 구문 분석하는 데 사용됩니다. 이 메소드의 반환 값은 프로토콜, 호스트 이름, 포트, 경로 이름 및 쿼리와 같은 속성을 포함하는 JavaScript 개체입니다. parsQueryString 매개변수의 값이 true이면 URL에 포함된 쿼리 문자열 부분도 구문 분석됩니다. format(urlObj) 메서드는parse() 메서드와 반대이며 JavaScript 개체에서 URL 문자열을 구성하는 데 사용됩니다.

querystring 모듈은 URL의 쿼리 문자열을 처리하는 데 사용됩니다. stringify(obj) 메서드는 JavaScript 개체 obj를 쿼리 문자열 형식으로 변환하는 데 사용됩니다. 예를 들어 stringify({a : 1, b : "good"})는 a=1&b=good을 반환합니다. 구문 분석(str)은 쿼리 문자열을 JavaScript 개체로 구문 분석하는 데 사용됩니다.

vm 모듈은 JavaScript 코드를 실행하는 데 사용할 수 있습니다. runInThisContext(code) 메소드는 JavaScript 코드 코드를 실행하고 그 결과를 반환하는 데 사용됩니다. 이 메서드를 통해 실행되는 JavaScript 코드는 현재 코드의 범위에 액세스할 수 없습니다. runInNewContext(code, [sandbox]) 메서드는 JavaScript 코드를 실행하는 데에도 사용됩니다. runInThisContext()와 달리 이 메서드를 통해 실행되는 JavaScript 코드는 샌드박스 개체를 전역 개체로 사용합니다. 예를 들어, runInNewContext("a + 3", {a : 4})의 반환 결과는 7입니다. createScript(code) 메소드는 JavaScript 코드를 사전 컴파일하는 데 사용되지만 즉시 실행되지는 않습니다. 이 메서드의 반환 값은 Script 개체입니다. 이 객체에는 runInThisContext() 및 runInNewContext([sandbox])라는 두 가지 메서드도 있는데, 이는 위에서 언급한 두 가지 메서드와 비슷한 의미를 갖습니다.

모듈 os는 기본 운영 체제와 관련된 일부 정보를 제공합니다. 포함된 호스트 이름()은 운영 체제의 호스트 이름을 얻는 데 사용되며, type()은 운영 체제의 릴리스 버전 번호를 얻는 데 사용됩니다. 시스템 실행 시간을 초 단위로 얻는 데 사용됩니다. ;cpus()는 CPU 관련 정보를 얻는 데 사용됩니다. freemem() 및 totalmem()은 각각 시스템의 총 메모리와 사용 가능한 메모리를 얻는 데 사용됩니다.

util 모듈은 일반적으로 사용되는 몇 가지 보조 방법을 제공합니다. debug(string) 메소드는 표준 오류 스트림에 정보를 출력하는 데 사용됩니다. log(string) 메소드는 타임스탬프가 포함된 정보를 표준 출력 스트림으로 출력하는 데 사용됩니다. Inspection(object, showHidden, 깊이) 메소드는 객체의 내부 구조를 출력하는 데 사용됩니다. 매개변수 object는 검사할 객체입니다. showHidden은 객체의 숨겨진 속성을 표시할지 여부를 나타냅니다. 계층 구조를 보고 있습니다. 기본값은 2입니다. 상속(constructor, superConstructor) 메소드는 JavaScript에서 프로토타입 기반 상속 메커니즘을 구현하는 데 사용됩니다.

node.js에서 제공하는 공통 모듈을 소개한 후 node.js의 사용법을 설명하는 완전한 예는 다음과 같습니다.

Back to top

인스턴스 분석

이 예제에서 구현한 기능은 서버의 메모리 사용 현황, 즉 메모리 점유율을 동적으로 모니터링하는 것입니다. 서버에서 메모리 사용량을 얻는 것은 상대적으로 간단합니다. os 모듈에서 제공하는 메서드, 즉 freemem()/totalmem()만 사용하면 됩니다. 메모리 점유율을 실시간으로 모니터링하기 위해서는 서버가 실시간으로 브라우저에 데이터를 전송해야 합니다. 여기서 가장 좋은 구현은 HTML 5에 도입된 WebSocket 사양입니다. 이 사양은 Firefox 4 및 Google Chrome과 같은 새로운 브라우저에서 지원됩니다. 동시에 서버 측에서도 이 사양을 지원해야 합니다. Socket.IO는 서버측 및 브라우저측 코드를 포함하여 node.js의 WebSocket 사양을 지원합니다. 코드 목록 9는 Socket.IO를 사용하는 서버측 코드를 보여줍니다.


목록 9. 메모리 사용량 모니터링을 위한 서버 측 코드
var io = require('./socket.io');
var io = io.listen(server);
io.on("연결", function(client){
setInterval(function() {
client.send(os.freemem() / os.totalmem());
}, 500);
});

코드 목록 9에서 server는 일반 HTTP 요청에 응답하는 데 사용되는 node.js의 HTTP 서버 개체입니다. Socket.IO는 node.js HTTP 서버의 요청을 가로채고 처리를 위해 일부 요청을 Socket.IO에 전달할 수 있습니다. 여기서 처리 논리는 클라이언트가 연결될 때 서버의 메모리 사용량이 500밀리초마다 클라이언트로 전송된다는 것입니다. 코드 목록 10은 브라우저 측 HTML 및 JavaScript 코드를 보여줍니다.


목록 10. 메모리 사용량을 모니터링하기 위한 브라우저측 코드



;/title><br> <script src="/socket.io/socket.io.js"></script><br> <style><br> #usage {border: 1px 점선 녹색; > ~ ~                                                ctx = canvas.getContext("2d ");<br> ctx.clearRect(0, 0, 너비, 높이);<br> for (var i = 1, n = buffer.length ; i < n; i++) {<br/> ctx.StrokeStyle = "red";<br/> ctx.beginPath();<br/> ctx.moveTo(i - 1, buffer[i - 1] * height); <br/> ctx.lineTo(i, buffer[i] * height) ;<br/> ctx.closePath();<br/> ctx.Stroke();<br/> }<br/> }<br/> <br/> 함수 onLoad() {<br/> canvas = document.getElementById("usage" );<br/> var 소켓 = new io.Socket(null, {port: 8088});<br/> 소켓.connect(); 서버로<br/> 소켓.on("message", function(obj ){ // 메시지 수신 시 처리 방법<br/>                            updateChart(obj); body onload="onLoad();"><br>  < h1> 메모리 사용량</h1> <br>  <canvas id="usage" width="200" height="200">< ;/canvas><br> </body><br> </ html><br><br><br><br></p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>관련 라벨:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ko/search?word=javascript" target="_blank">javascript</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">원천:php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/ko/faq/341228.html" title="JavaScript 로그 작업 개체 인스턴스"> <span>이전 기사:JavaScript 로그 작업 개체 인스턴스</span> </a> <a href="http://www.php.cn/ko/faq/341232.html" title="JavaScript 정규식 사용 방법을 가르쳐주세요."> <span>다음 기사:JavaScript 정규식 사용 방법을 가르쳐주세요.</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">저자별 최신 기사</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354750.html">HTML에서 굵게, 기울임꼴, 밑줄, 취소선 등 글꼴 효과를 설정하는 예를 소개합니다.</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/338018.html">Java 버전의 Redis 구현</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/353509.html">가장 간단한 WeChat 애플릿 데모</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/356272.html">Python에서 pandas.DataFrame(생성, 색인, 추가 및 삭제)의 간단한 작업 방법 소개</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354839.html">위챗 미니 프로그램: 탭 효과 구현 방법 예시</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354423.html">Python은 사전 구조 출력을 아름답게 하기 위해 사용자 정의 메소드를 구성합니다.</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/350853.html">HTML5: Canvas를 사용하여 실시간으로 비디오 처리</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/346502.html">Asp.net은 SignalR을 사용하여 사진을 보냅니다.</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354842.html">WeChat Mini 프로그램 개발 튜토리얼-App() 및 Page() 기능 개요</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/356574.html">Python Redis 사용법에 대한 자세한 설명</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">최신 이슈</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176376.html" target="_blank" title="JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법" class="wdcdcTitle">JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법</a> <a href="http://www.php.cn/ko/wenda/176376.html" class="wdcdcCons">img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 19:25:49</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>505</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176368.html" target="_blank" title="d3.js를 확대할 때 산점도 값이 유지되지 않습니다." class="wdcdcTitle">d3.js를 확대할 때 산점도 값이 유지되지 않습니다.</a> <a href="http://www.php.cn/ko/wenda/176368.html" class="wdcdcCons">d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 18:16:26</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>403</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176347.html" target="_blank" title="공급업체별 의사 요소에 대한 JavaScript 호버 이벤트" class="wdcdcTitle">공급업체별 의사 요소에 대한 JavaScript 호버 이벤트</a> <a href="http://www.php.cn/ko/wenda/176347.html" class="wdcdcCons">나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 15:35:24</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>274</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176343.html" target="_blank" title="Javascript/Jquery를 사용하여 버튼 없이 양식 제출" class="wdcdcTitle">Javascript/Jquery를 사용하여 버튼 없이 양식 제출</a> <a href="http://www.php.cn/ko/wenda/176343.html" class="wdcdcCons">JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 14:54:03</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>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>421</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176324.html" target="_blank" title="CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요." class="wdcdcTitle">CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요.</a> <a href="http://www.php.cn/ko/wenda/176324.html" class="wdcdcCons">클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 12:53:11</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>376</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>관련 주제</div> <a href="http://www.php.cn/ko/faq/zt" target="_blank">더> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jsszcd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214415543594.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js에서 배열의 길이를 얻는 방법" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jsszcd" class="title-a-spanl" title="js에서 배열의 길이를 얻는 방법"><span>js에서 배열의 길이를 얻는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jssxym"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363232433.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js 현재 페이지 새로 고침" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jssxym" class="title-a-spanl" title="js 현재 페이지 새로 고침"><span>js 현재 페이지 새로 고침</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jssswr"><img src="https://img.php.cn/upload/subject/202407/22/2024072214362363697.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JS 반올림" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jssswr" class="title-a-spanl" title="JS 반올림"><span>JS 반올림</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jsscjddff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214115932190.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="노드를 삭제하는 Node.js 메소드" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jsscjddff" class="title-a-spanl" title="노드를 삭제하는 Node.js 메소드"><span>노드를 삭제하는 Node.js 메소드</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/javascriptzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214114396768.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="자바스크립트 이스케이프 문자" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/javascriptzy" class="title-a-spanl" title="자바스크립트 이스케이프 문자"><span>자바스크립트 이스케이프 문자</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jsscsjsdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214113439427.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js에서 난수를 생성하는 방법" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jsscsjsdff" class="title-a-spanl" title="js에서 난수를 생성하는 방법"><span>js에서 난수를 생성하는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/rhqyjavascrip"><img src="https://img.php.cn/upload/subject/202407/22/2024072214085281458.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JavaScript를 활성화하는 방법" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/rhqyjavascrip" class="title-a-spanl" title="JavaScript를 활성화하는 방법"><span>JavaScript를 활성화하는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jssymbol"><img src="https://img.php.cn/upload/subject/202407/22/2024072214060282401.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JS의 Symbol 클래스에 대한 자세한 설명" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jssymbol" class="title-a-spanl" title="JS의 Symbol 클래스에 대한 자세한 설명"><span>JS의 Symbol 클래스에 대한 자세한 설명</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div>1418716 <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="http://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="http://www.php.cn/ko/course/74.html">PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기</a> <div class="wzrthreerb"> <div>4260268 <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="http://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="http://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>2497050 <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="http://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="http://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>504769 <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="http://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="http://www.php.cn/ko/course/2.html">PHP 제로 기반 입문 튜토리얼</a> <div class="wzrthreerb"> <div>859756 <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="http://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="http://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div >1418716 학습 시간</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >2497050 학습 시간</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >504769 학습 시간</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a> <div class="wzrthreerb"> <div >215474 학습 시간</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a> <div class="wzrthreerb"> <div >881976 학습 시간</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="http://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="http://www.php.cn/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a> <div class="wzrthreerb"> <div >6738 학습 시간</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a> <div class="wzrthreerb"> <div >5252 학습 시간</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/1646.html">Go 언어 실습 GraphQL</a> <div class="wzrthreerb"> <div >4400 학습 시간</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a> <div class="wzrthreerb"> <div >646 학습 시간</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://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="http://www.php.cn/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a> <div class="wzrthreerb"> <div >22365 학습 시간</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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://www.php.cn/ko/about/us.html">회사 소개</a> <a href="http://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="http://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?1732112988"></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> </body> </html>