찾다
웹 프론트엔드JS 튜토리얼PubNub, React.js 및 ES6를 사용하여 협업을 촉진하는 웹 애플리케이션 만들기

이전 튜토리얼에서는 PubNub의 데이터 흐름 네트워크를 사용하여 IoT 장치를 프로토타입하고 하드웨어 센서에서 데이터 시각화를 만드는 방법을 시연했습니다. 이 튜토리얼에서는 DOM을 매우 효율적으로 조작할 수 있는 React.js와 차세대 JavaScript인 ES6와 함께 PubNub을 사용하여 실시간 협업 웹 애플리케이션을 구축하는 방법을 보여 드리겠습니다.

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

라이브 데모: 협업 스티커 메모

저는 동일한 Stickie Note 앱의 두 가지 버전을 만들었습니다. 하나는 CDN 호스팅 React 버전을 사용하여 CodePen에서 호스팅한 버전이고 다른 하나는 패키지 관리자를 사용하여 GitHub에서 호스팅한 버전입니다. 이 튜토리얼에서는 후자의 "라이트" 버전을 사용하고 있습니다. npm, webpack, JSX용 Babel, ES6 등 모든 기능을 사용하여 앱을 빌드하는 방법을 안내해 드리겠습니다.

전제조건

계속 진행하려면 다음이 필요합니다.

    <li>React에 대한 기본 이해 <li>종속성 다운로드, 설치 및 관리를 위한 npm 패키지 관리자에 대해 알아보세요

    <li>브라우저용 JavaScript 및 기타 리소스를 번들로 묶기 위한 webpack 모듈 빌더에 대한 실무 지식을 얻으세요(grunt 또는 gulp와 유사하게 작동함)

    <li> 컴퓨터에 Node.js와 npm이 설치되어 있습니다

이 튜토리얼에서는 React 사용을 시작하는 방법을 다루지 않습니다. 그러나 다른 많은 훌륭한 Envato Tuts+ 튜토리얼에서 더 많은 것을 배울 수 있습니다.

무엇을 할 예정인가요

이제 PubNub을 사용하여 간단한 웹 애플리케이션을 구축해 보겠습니다. PubNub은 실시간 애플리케이션과 IoT 장치를 쉽게 구축하고 확장할 수 있는 글로벌 인프라를 제공하는 데이터 스트리밍 네트워크(DSN)입니다. 여기에서는 공유 가능한 "스티커 메모"를 만듭니다. 앱의 사용자 흐름은 다음과 같습니다.

    <li>사용자 로그인. <li>사용자가 이름을 입력하면 앱은 마지막 50개의 메모를 검색합니다(사용 가능한 경우).

    <li>사용자가 노트보드에 내용을 입력한 후 Enter 키를 눌러 제출합니다.

    <li>새 스티커 메모는 브라우저 및 현재 온라인에 있는 다른 모든 브라우저에 다른 스티커 메모와 함께 표시됩니다.

자, 시작해 보세요!

소프트웨어 패키지 설치

앱 디렉터리에서 npm init를 실행하여 package.json 파일을 설정한 다음 모듈을 설치합니다.

프런트엔드용 정적 리소스를 컴파일, 연결, 축소 및 압축하는 webpack 모듈 빌더를 설치하세요.

$ npm install webpack --save-dev

로컬 서버를 실행하려면 웹팩 웹 서버를 설치하세요:

$ npm install webpack-dev-server --save-dev

React, React DOM 및 CSS 애니메이션 추가 기능 설치:

$ npm install React React-dom React-addons-css-transition-group --save

JSX와 ES6을 사용하려면 Babel을 설치하세요. 우리는 컴파일러 Babel의 도움을 받아 차세대 JavaScript인 ES6(ES 2015)으로 작성할 것입니다.

$ sudo npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save

실시간 커뮤니케이션을 위해 PubNub 설치:

$ npm install pubnub --save

애플리케이션 구조 및 웹 서버 구성<code class="inline"><p></p>

다음과 유사한 애플리케이션 구조를 만듭니다.

으아아아 webpack.config.js

구성:

으아아아

이 GitHub 저장소에서 전체 구성 파일을 확인하세요.

watch: true기본적으로 진입점 파일(최상위 파일)과 출력 대상을 설정하고, webpack 명령을 실행하면 모든 js(및 .jsx) 파일이 단일 파일로 빌드됩니다. 또한

를 설정하면 webpack이 파일 변경 사항을 감시하고 출력 파일을 자동으로 다시 빌드하도록 할 수 있습니다.

index.html 파일 만들기

index.html 파일에 bundle.js

스크립트를 포함하세요.

으아아아 id=”container”또한 본문에

가 포함된 요소를 참고해주세요. 여기에 React 애플리케이션이 삽입됩니다.

Webpack 개발 서버 실행

다음 명령을 사용하여 개발 서버를 실행할 수 있습니다:

$ ./node_modules/.bin/webpack-dev-server

또는 다음 줄을 추가하여 package.json에 설정할 수도 있습니다.

으아아아 npm start이 방법으로

명령을 사용하여 서버를 실행할 수 있습니다.

브라우저에서 http://localhost:8080/webpack-dev-server/로 이동하면 애플리케이션(지금까지는 빈 HTML 페이지)이 실행되는 것을 볼 수 있습니다.

p>

ES6을 사용하여 React 구성 요소 만들기

webpack.config.js에서 구성한 진입점을 기반으로 애플리케이션 디렉터리에서 새 app.jsx

파일을 엽니다. 파일 확장자에서 알 수 있듯이 JSX JavaScript 구문 확장을 사용합니다. 🎜

首先,导入 app.jsx 所需的模块和文件: 

import React from 'react';
import ReactDOM from 'react-dom';
import StickieList from './stickieList';
import 'pubnub';

ES6 中新引入的 import 语句用于导入从外部模块或脚本导出的函数、对象或基元。

然后使用此 ES6 类声明定义一个类 CollabStickies,它扩展了 React.Component 类。这相当于 ES5 中的 React.createClass 方法:

class CollabStickies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stickieList: []
    }
  }

  componentWillMount() {
    … // will explain later
  }
...
  render() {
    return (
      <div>
        <StickieWritable username={this.props.username} color={this.props.color} />
        <StickieList stickieList={this.state.stickieList} />
      </div>
    );
  }
}

在构造函数中,您将设置此可变数据(stickieList 数组)的初始状态。每次收到新的便笺时,我们都会使用 this.setState() 更新数组。

在渲染函数中,使用 JSX 定义类似 HTML 模板的虚拟 DOM 元素。在本例中,包含自定义组件 StickieWritableStickieList。您可以将可变的 props 和 states 传递给要使用的组件。我们稍后将定义它们。

当你构建应用程序时,Babel 会将所有这些 ES6 和 JSX 语法转换为浏览器可以正常渲染的 ES5。

使用数据绑定渲染 DOM 节点

使用 ReactDOM.render()react-dom 包自带的),在 DOM 节点上渲染 CollabStickies 组件您的 HTML。

ReactDOM.render(
  <CollabStickies username={username} color={color} />,
  document.getElementById('container')
);

在这里,您会注意到用户名和颜色 props。此数据用于 CollabStickies 组件并传递给其子组件。

这些值应该从用户登录中获取;但是,为了简化本练习的应用程序,我们只需使用一个简单的 window.prompt() 来获取用户名,然后在加载应用程序时提供随机颜色的便笺。

var username = window.prompt('Your name');

const colors = ['yellow', 'pink', 'green', 'blue', 'purple'];
var color = colors[~~(Math.random() * colors.length)];

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

虽然我在这里使用的是浏览器原生的提示对话框,但实际上,我建议您创建另一个具有登录功能的 UI 组件,或者使用第三方对话框组件。您可以找到许多可重用的组件,例如 Elemental UI 的 Modal 和 Material UI 的 Dialog。

使用 PubNub 进行协作

现在,您将使用 PubNub 使应用程序具有协作性。

PubNub 是一个全球分布式数据流网络,可让您轻松构建实时应用程序。其核心功能是发布/订阅,可同时在多个用户之间发送和接收数据。

在此应用程序中,任何“登录”的人都可以在便签上发布消息并与其他用户共享。

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

要在您的应用中使用 PubNub,请确保 pubnub 模块已安装并导入到您的文件顶部。

正在初始化 PubNub

首先,您需要对其进行初始化以创建 Pubnub 对象的实例。您在实例化过程中需要 API 密钥,因此请注册 PubNub 以获取您自己的密钥。

const publish_key =  'pub-c-1d17120...'; // your pub key
const subscribe_key  = 'sub-c-85bdc...'; // your sub key

const pubnub = require('pubnub').init({                         
  publish_key   : publish_key,
  subscribe_key : subscribe_key,
  ssl: true,
  uuid: username
});

const channel = 'stickie-notes';

在这里,您将从“登录”过程中获得的用户名分配为 uuid,唯一标识符。 (在本练习中,我们将用户输入的任何字符串作为 uuid,但实际上,您需要一个真正的登录系统,以便每个 uuid 实际上是唯一的,没有重复!)

另外,请注意,对于这些全局常量值,我使用 ES6 const 声明,而不是 var 。在 ES6 中, const 充当只读变量,表示对值的常量引用。在后面的示例中,您还将看到新引入的 let,它是一个块作用域局部变量。

订阅消息

要创建可共享笔记应用程序,您将使用 PubNub 的 publish() 方法将您的笔记发送给每个人,而 subscribe() 让其他用户接收所有笔记。每次有人发布新笔记时,都会自动调用 subscribe() 方法。

在您的 React 应用程序中,让我们在 componentWillMount() 中调用 subscribe(),该函数在应用程序生命周期中发生初始渲染之前立即调用。

componentWillMount() {
  pubnub.subscribe({
    channel: channel,
    restore: true,
    connect: () => this.connect(),
    message: (m) => this.success(m)
  });
}

订阅方法是异步的,当每个操作成功完成时,会调用 message 回调。在回调中,我们通过设置 stickieList 数组的状态来更新便签列表,该数组在开头的构造函数中定义。

在 React 中,使用 setState 修改数据会自动更新视图。

success(m) { 
  let newList = [m].concat(this.state.stickieList);
  this.setState({stickieList: newList});
}

我们稍后将创建视图(UI 组件)。

在订阅回调中,您可能已经注意到带有箭头的有趣语法,=>。这称为箭头函数,其语法比 ES5 函数表达式更短。此外,此表达式按词法绑定 this 值。再次强调,通过 Babel,我们可以利用所有 ES6 的强大功能!

此外,我们还使用可选的 connect 回调到订阅方法来检索“历史记录”。当第一次建立与 PubNub 的连接时,这将获取过去的数据。

connect() { 
  pubnub.history({
    channel: channel,
    count: 50,
    callback: (m) => {
      m[0].reverse();
      for (var v of m[0]) {
        let newList = this.state.stickieList.concat(v);
        this.setState({stickieList: newList});
      }
    }
  });
}

history() 是 PubNub 存储和回放功能的一部分,在本例中,它从 PubNub 获取最后 50 条消息。在 success 回调中,也通过在此处设置 stickieList 数组的状态来更新视图。

发布消息

让我们创建一个类,StickieWritable。它是一个需要用户输入的便签组件。

它的渲染效果如下:

render() {
  return (
    <div className={'stickie-note writable ' + this.props.color}>
      <textarea type='text' placeholder='Your new note...' onKeyUp={this.handleTextChange.bind(this)} />
    </div>  
  );
}

textarea中,监听onKeyUp事件,每次触发该事件时,调用handleTextChange函数检查是否键是返回/输入键。请注意,我在调用函数时绑定了 this 。与 React.createClass()(React 的 ES5 方法创建类)不同,ES6 类不会自动将方法绑定到对象的实例,因此您需要自己绑定它。 (有几种不同的方法可以实现同一目标。)

handleTextChange函数中,将文本和用户数据发布到PubNub:

var data = {
  username: this.props.username,
  color: this.props.color,
  text: e.target.value,
  timestamp: Date.now()
};

pubnub.publish({
  channel: channel, 
  message: data, 
  callback: e.target.value = '' // resetting the text field
});

现在,当用户在记事本中键入一些文本并按回车键时,该消息将发送到 PubNub,并且所有其他用户同时接收该消息(在 1/4 秒内!)。

创建 UI 组件

应用程序 UI 由一些 UI 组件组成,如下所示:

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

1. CollabStickies

2. StickieWritable

3.贴纸

4。粘性列表

组件 1 和 2 已经处理完毕,所以让我们创建组件 3,一个单独的便签组件。

创建一个新文件stickie.jsx以使用 JSX 呈现 UI。与 StickieWritable 组件不同,这是一个只读 UI 组件,没有 UX 功能。它只有一个 render() 函数,可以使用 prop 数据绘制带有文本的便签。

基本上,每次用户从另一个用户收到新消息时,该消息都会在新的粘性组件中呈现。

import React from 'react';
import ReactDOM from 'react-dom';

export default class Stickie extends React.Component {
  render() {
    return (
      <div className={'stickie-note ' + this.props.color} >
        <p className='note'>{this.props.text}</p>
        <p className='username'>{this.props.username}</p>
      </div>  
    );
  }
}

接下来,我们将创建另一个 UI 组件 stickieList.jsx,它是该组件的容器,并包含一堆便签纸。

p>

动画组件

Stickie.jsx 和所有其他依赖项导入到 StickieList.jsx 中。在这里,我使用 ReactCSSTransitionGroup 插件和自定义 Web 字体。

import React from 'react';
import ReactDOM from 'react-dom';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
import Stickie from './stickie';
import webfontloader from 'webfontloader'

您可以使用 npm 安装 Web 字体加载器:

$ npm install webfontloader

然后您可以加载您选择的任何自定义字体。您可以查看源代码,了解如何导入自定义 Google 字体。

render() 中,使用 ES6 箭头函数和 map() 迭代数组,并使用 stickieList 进行渲染您刚刚创建的每个 Stickie 组件:

export default class StickieList extends React.Component {
  render() {
    let items = (this.props.stickieList || []).map((item) => 
      <li key={item.username + '-' + item.timestamp} >
        <div className="stickieWrapper">
          <Stickie text={item.text} color={item.color} username={item.username}/>
        </div>
      </li>);

    return (
      <ReactCSSTransitionGroup transitionName='animation' transitionEnterTimeout={500} transitionLeaveTimeout={500} component='ul' id="stickiesList">
        {items}
      </ReactCSSTransitionGroup>  
    )
  }
}

定义的组件可以使用 <reactcsstransitiongroup></reactcsstransitiongroup> 进行动画处理。设置 transitionName,您需要在 CSS 中使用它来定义动画样式。另外,请注意 <li> 中的关键属性。当您使用 <reactcsstransitiongroup></reactcsstransitiongroup> 时,您需要为每个列表使用唯一的键来为每个组件设置动画。

React 添加了额外的类名。例如,当你的 transitionName 是 'animation' 时,你还会有 'animation-enter', ' Animation-enter-active'、'animation-leave' 和 'animation-leave-active'。

以下是 /css/style.css 中的代码:

.animation-enter {
  opacity: 0.1;
  transform: scale(1.3);
  transition: all 1s ease-out;
 }
.animation-enter.animation-enter-active {
  opacity: 1;
  transform: scale(1);
 }
...

现在,您刚刚使用 React 和 PubNub 构建了一个实时协作应用程序!我希望您喜欢本教程!

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

이 GitHub 저장소에서 CSS를 포함한 전체 코드를 볼 수 있습니다. 이 튜토리얼에서는 "라이트" 버전인 app-lite.jsx를 사용하고 있지만 app.jsx에서 더 많은 기능을 확인할 수 있습니다. p>

채팅 애플리케이션, 멀티플레이어 게임, 거래 애플리케이션 등과 같은 더 많은 실시간 애플리케이션을 구축하는 데 관심이 있다면 PubNub으로 가서 더 많은 리소스를 찾아보세요!

더 많은 반응을 원하시나요?

React 기술을 극대화하는 것을 특별히 목표로 하는 과정이 있습니다. 이 과정에서는 React 및 Redux를 사용하여 최신 웹 애플리케이션 구축을 시작합니다. 처음부터 시작하여 이 두 라이브러리를 사용하여 완전한 웹 애플리케이션을 구축하게 됩니다.

가장 간단한 아키텍처부터 시작하여 기능별로 애플리케이션 기능을 천천히 구축해 보세요. 도구, 감속기, 라우팅과 같은 기본 개념에 대해 배우게 됩니다. 또한 스마트 및 단순 구성 요소, 순수 구성 요소, 비동기 작업과 같은 몇 가지 고급 기술에 대해서도 알아봅니다. 마지막으로 간격을 두고 반복하여 학습할 수 있는 완전한 플래시카드 앱을 만듭니다.

관심이 있으신가요? 보자!

참고자료

    <li> PubNub: IoT, 모바일 및 웹 애플리케이션을 위한 글로벌 실시간 데이터 스트리밍 네트워크 <li> PubNub JavaScript SDK 튜토리얼

    <li> React: 사용자 인터페이스 생성을 위한 JavaScript 라이브러리

    <li> ES6: ECMAScript 2015 언어 사양

    <li> 웹팩: 모듈 생성기

위 내용은 PubNub, React.js 및 ES6를 사용하여 협업을 촉진하는 웹 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 엔진 : 구현 비교JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.