[유데미X스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) - 28일차 프로젝트 준비 및 그림판 만들기

이율곡·2023년 7월 12일
0

부트캠프

목록 보기
28/37
post-thumbnail

28일차

28일차는 프로젝트 준비를 위한 서류 작업과 담당할 태스크를 정했다. 우리 팀은 클래스룸을 맡게 되었다. 그래서 앞으로 준비해야 할 것들을 기록해야겠다. 그리고 스나이퍼팩토리에서 연습 문제를 주었는데 그거를 가볍게 정리해보도록 해야겠다.


LMS 클래스룸

이번에 프로젝트에서 맡게 된 부분은 클래스룸이다. 팀 전체가 원했던 부분인데 할 수 있어서 다행이었다. 클래스룸은, 콘텐츠를 올리고 내릴 수 있는 형태의 웹페이지 제작이 결과물이다.

클래스룸페이지
ᄂ콘텐츠올리기
ᄂ콘텐츠삭제
ᄂ콘텐츠순서변경
ᄂ콘텐츠수정
ᄂ콘텐츠확인(시청)
ᄂ커뮤니티연동

위와 같은 기능이 존재한다.

기술스택

기술스택으로는

Typescript, Next.js (13v), tailwindCSS

가 일단은 확정이 되었다. 그렇기 때문에 다음 주전까지는 최대한 공부를 해두어야겠다.

그림판

스나이퍼팩토리에서 준 문제는 redux-toolkit을 사용해서 그림판을 만드는 문제였다. 점과 선 mode가 있고, 색상도 변경을 하면 된다. 나는 팀에서 line을 만드는 담당을 했다.

결과

내가 만든 그림판이다. 딱 line만 만들 수 있게 했다. 이걸 다른 팀원분들(점, 색상)과 합쳤을 때 그림판이 완성된다.

코드

import React, { useState, useRef, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { lines } from '../redux_toolkit/drawingSlice';

const drawLine = (context, line) => {
  context.beginPath();
  context.moveTo(line.start.x, line.start.y);
  context.lineTo(line.end.x, line.end.y);
  context.strokeStyle = line.color;
  context.stroke();
}

const DrawingBoard = () => {
  const dispatch = useDispatch();
  const currentColor = useSelector((state) => state.drawing.currentColor);
  const [drawing, setDrawing] = useState(false);
  const [linesDrawn, setLinesDrawn] = useState([]);
  const canvasRef = useRef();

  const handleMouseEvents = (event) => {
    const rect = canvasRef.current.getBoundingClientRect();
    const point = {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top
    };

    if (event.type === 'mousedown') {
      setDrawing(true);
      setLinesDrawn([...linesDrawn, { start: point, end: point, color: currentColor }]);
    } else if (event.type === 'mouseup' && drawing) {
      setDrawing(false);
      dispatch(lines(linesDrawn[linesDrawn.length - 1]));
    } else if (event.type === 'mousemove' && drawing) {
      setLinesDrawn(linesDrawn.slice(0, -1).concat({ ...linesDrawn[linesDrawn.length - 1], end: point }));
    }
  };

  useEffect(() => {
    const context = canvasRef.current.getContext('2d');
    context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);

    linesDrawn.forEach(line => drawLine(context, line));
  }, [linesDrawn]);

  return (
    <canvas
      ref={canvasRef}
      width="500"
      height="500"
      onMouseDown={handleMouseEvents}
      onMouseUp={handleMouseEvents}
      onMouseMove={handleMouseEvents}
      style={{ cursor: 'crosshair', border: '1px solid black' }}
    />
  );
};

export default DrawingBoard;

코드는 제시한 문제대로 만들었다. 우선 drawingSlice라는 리듀서를 만들어서 사용했다.

그리고 drawLine이라는 함수를 만들어서 HTML5 Canvas API를 사용해 선을 그릴 수 있도록 했다.

DrawingBoard 컴포넌트에서는 마우스에 반응해서 선을 그린다. handleMouseEvents 함수는 사용자가 마우스를 누르거나 떼거나 움직일 때 호출되는 이벤트 핸들러다.

  1. 마우스를 누르면 (mousedown 이벤트) 그리기를 시작
  • 새로운 선을 linesDrawn 배열에 추가.
  1. 마우스를 떼면 (mouseup 이벤트) 그리기를 중단.
  • 그림의 현재 상태를 Redux store에 dispatch.
  1. 마우스를 움직이면 (mousemove 이벤트) 그리는 도중이라면 마지막 선의 끝점을 업데이트

useEffect는 linesDrawn 배열이 변경될 때마다 호출되어 모든 선을 그린다.


정리하기

이번에는 가볍게 했던 것과 정해진 것을 정리했다. 정말 기본적인 것만 배우고 가장 어려운 단계에 뛰어들었다. 그렇기 때문에 최대한 나를 혹사시켜서 다른 사람들에게 피해주지 않도록 열심히 해야겠다.


본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프

profile
음악을 좋아하는 사람이 음악을 만들 듯, 개발을 좋아하게 될 사람이 쓰는 개발이야기

0개의 댓글