[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 이력서 생성기 만들기

21 Nov 2023

javascript

이력서 만들기는 많은 사람들이 처음 구인 과정에 참여할 때 마주하는 일입니다. 이러한 이력서 생성을 쉽고 편리하게 만들기 위해 Beautiful Dnd(드래그 앤 드롭 라이브러리)를 사용하여 드래그 앤 드롭으로 이력서 생성기를 만들어보겠습니다.

Beautiful Dnd란?

Beautiful Dnd는 React에서 제공하는 드래그 앤 드롭 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 요소를 드래그해서 다른 위치로 이동시킬 수 있습니다. Beautiful Dnd는 사용자 인터페이스를 구성하는 데 매우 유용하며, 이력서 생성기에서도 드래그 앤 드롭 기능을 구현하는 데 활용할 수 있습니다.

프로젝트 설정

먼저, 프로젝트를 설정합니다. 다음 명령을 사용하여 Create React App을 통해 React 프로젝트를 생성합니다.

npx create-react-app resume-generator

프로젝트가 생성된 후, 프로젝트 폴더로 이동하고 필요한 종속성을 설치합니다.

cd resume-generator
npm install react-beautiful-dnd

드래그 앤 드롭 구현하기

이제 Beautiful Dnd를 사용하여 드래그 앤 드롭을 구현해보겠습니다. 먼저, 이력서 생성기의 주요 컴포넌트를 만들어야 합니다.

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const ResumeGenerator = () => {
  const [items, setItems] = useState([
    { id: '1', content: 'Education' },
    { id: '2', content: 'Experience' },
    { id: '3', content: 'Skills' },
  ]);

  const onDragEnd = (result) => {
    if (!result.destination) return;

    const newItems = Array.from(items);
    const [reorderedItem] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, reorderedItem);

    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="resume">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default ResumeGenerator;

위 코드에서는 useState를 사용하여 현재 항목의 배열(items)을 관리합니다. DragDropContext는 드래그 앤 드롭 이벤트를 처리하고, Droppable은 드롭 가능한 영역을 생성합니다. Draggable은 드래그 가능한 항목을 생성합니다.

컴포넌트 사용하기

이제 위에서 작성한 ResumeGenerator 컴포넌트를 사용하여 이력서 생성기를 만들 수 있습니다. 예를 들어, App.js에서 이력서 생성기를 렌더링하는 코드를 작성해봅시다.

import React from 'react';
import ResumeGenerator from './ResumeGenerator';

const App = () => {
  return (
    <div>
      <h1>이력서 생성기</h1>
      <ResumeGenerator />
    </div>
  );
};

export default App;

결론

Beautiful Dnd를 사용하여 드래그 앤 드롭으로 이력서 생성기를 구현하는 방법을 알아보았습니다. 이 라이브러리를 사용하면 사용자에게 직관적인 인터페이스를 제공할 수 있으며, 이력서 생성을 보다 편리하게 할 수 있습니다. Beautiful Dnd에 대한 자세한 내용은 공식 문서를 참조하시기 바랍니다.

Happy coding!