프로젝트 회고/이미지편집기 개발

7. 정리 - 끝

1) 얻은 점들 ㄱ. 리액트에 좀 더 능숙해졌다. HOC, useReducer, context, useMemo, useCallback, 커스텀 훅, 컴포넌트 합성, 상태 관리 등등 ㄴ. Konva 라이브러리의 사용법을 익혔다. 추후 canvas 태그를 다뤄야할 때 유용하게 사용할 수 있을 것이다. ㄷ. 편집기, 저작도구 제작 경험을 쌓았다. 보편적인 웹사이트 개발과는 다른 경험이었다. 사용자의 행동들을 먼저 정의하고 그에 따라 개발하면서 많이 어려웠지만 추후 다른 편집기, 저작도구를 개발할 때 큰 도움이 될 것 같다. ㄹ. 프로젝트 회고를 처음으로 작성해보면서 내가 개발한 핵심 로직들을 리뷰하고 아쉬운 점들, 보완해야할 점들을 알 수 있었다. 앞으로도 프로젝트 회고는 꼭 작성해야겠다. ㅁ. 가독성 좋고 ..

6. 개발 - 뒤로가기(작업 취소), 앞으로 가기(복구) Z-index 조정 기능

1) 뒤로 가기(작업 취소), 앞으로 가기(복구) 뒤로 가기, 앞으로 가기 기능을 구현하기 위해서 back, front 2개의 스택을 만들었다. back 스택은 작업 실행 전 상태들을 담아놓고, front 스택은 앞으로 가기를 실행했을 때 현재 상태, 즉 복구되기전 상태들을 담아 놓았다. 각 스택에는 편집기의 배경, 이미지, 텍스트 정보가 들어간다. (nodes, background) 매 작업(ex: 배경색 변경, 노드 속성 변경 등)을 실행할 때마다 현재 상태와 이전 상태를 저장했다. (saveHistory, saveNow 메소드 실행) 즉 작업전 상태가 back 스택에 쌓이고 현재 상태는 nowState라는 변수에 담았다. 또, front 스택을 비워서 뒤로 가기 후 다른 작업을 실행할 시 앞으로 가..

5. 개발 - 상태 관리 리팩토링 - useReducer

1) 기존 상태 관리 - useState 기존에는 노드들(텍스트, 이미지)의 상태를 useState를 활용해서 상태 관리했다. const [nodes, setNodes] = useState([]) 이미지 편집기에서 특정 노드의 속성을 변경하는 경우가 많은데, 이런 경우에 특정 노드를 id를 통해서 찾고 걔의 속성을 변경하는 식의 코드가 들어가야 한다. immer을 사용해서 객체, 배열의 상태 변경을 쉽게 해도 중복되는 코드의 양이 너무 많았다. setNodes(state, draft => { const target = draft.find(node => node.id === targetId) target[property] = newProperty }) 이런 코드들이 많은 곳에 중복으로 들어갔다. 2) 변경..

4. 개발 - 편집기 주 화면 구현, 배경, 노드(이미지, 텍스트) 추가, 편집 기능

1) 화면 // 2) 배경 {nodes & nodes.map(node => } // 3) 노드 Konva의 Stage와 Layer를 활용해서 편집기 화면을 구성했다. 회고 2.의 레이아웃의 주 화면이다. 2) 배경 배경은 주 화면과 똑같은 크기의 Img 오브젝트를 배치해서 해당 오브젝트의 색을 변경하거나, 이미지를 삽입해 배경으로 쓸 수 있게 했다. Konva는 오브젝트들을 순서대로 그린다. 즉, 가 맨 앞에 위치해 있기 때문에 다른 노드들보다 뒤에 있어서 배경처럼 딱 보이게 된다. 회고 3.의 background 속성을 배경에 {...background}로 뿌려줘서 속성들을 반영하게 했다. 3) 노드 노드들은 속성을 에 뿌려준다. 이 노드는 Konva에서 제공해주는 것이 아니고 내가 만들었다. node..

3. 개발 - 기본 구조

1) 상태 관리 최상위 컴포넌트에서 배경화면과 텍스트, 이미지의 상태를 관리했다. 그리고 최상위 컴포넌트의 상태를 React Context를 활용해서 하위 컴포넌트에서 useContext로 활용할 수 있게 했다. const [background, setBackground] = useState(null) const [nodes, setNodes] = useState([]) return ( /// ...생략 ) 2) 컴포넌트 나누기 기능, 레이아웃을 기반으로 컴포넌트를 나눴다. 3) 보완할 점 ImageEditorContext 하나에 모든 상태들을 다 담아서 하위 컴포넌트로 전달하는데, 이러면 문제점이 하위 컴포넌트에서 useContext()를 사용하면 imageEditorContext에 들어간 value중..

2. 액션 정의하기, 앱 구조와 화면 레이아웃 잡기

편집기를 개발할 때 onDragEnd 이런 액션들을 미리 정리하고, 앱의 구조를 잡고가면 좋을 것 같다는 PM님의 의견에 따라서 해당 작업을 진행했다. 1. 액션 정의 사용자가 편집기를 사용할 때 어떤 행동들을 하는지 (ex: onClickBackground, onDragNode) 를 미리 표 형태로 정리하고 프로젝트의 문서들을 올리는 Confluence에 올리고 백엔드 개발자분과 함께 보면서 리뷰했다. 액션 정의 형태는 다음과 같다. 액션 onClickBackground 편집기 배경 클릭 노드(이미지, 텍스트) 선택 해제 onDragNode 노드 드래그 노드 이동 2. 앱 구조 편집한 이미지를 저장하고, 추후에 다시 편집할 수 있도록 해달라는 요구사항이 있었다. 그래서 딱 이미지 1개만 통으로 저장하는..

1. 요구사항 정리와 라이브러리 선정하기

1. 개발 시작 회사에서 진행하는 프로젝트에서 챗봇 메시지에 들어가는 이미지를 편집, 저장, 관리할 수 있는 기능을 만들게 되었다. 총 기한은 3주(스프린트 1개) 이고 React와 Javascript를 기반으로 개발을 진행했다. 2. 요구사항 정리 받은 요구사항은 다음과 같다. 1) 배경화면 배경화면에 이미지를 삽입, 크롭, 각종 속성(명암, 대조도) 등을 조정할 수 있어야 한다. 2) 이미지 여러 이미지들을 삽입하고, 각 이미지의 크기, 투명도, 명암, 회전, 크롭 을 수정할 수 있어야 한다. 3) 텍스트 여러 텍스트들을 삽입하고, 각 텍스트의 크기, 글꼴, 글씨 크기, 색깔 등의 속성을 수정할 수 있어야 한다. 4) 공통 각 이미지, 텍스트들 간의 Z축 위치를 조정 뒤로가기, 앞으로 가기 기능 이미..