분류 전체보기

커스텀 훅 적용하기 - 팝업(모달)

커스텀 훅으로 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다. - 공식 문서 예를 들어 상태 변수중에 컴포넌트가 마운트되고 data를 fetch해서 useEffect에서 상태값을 변경해줘야 하는 경우에 사용할 수 있다. 적용 현재 진행하고 있는 프로젝트에서, 많은 페이지에서 검색 필터 팝업을 공통적으로 활용하고 있다. 현재 검색 필터 팝업은 외부를 클릭했을 때 팝업창이 닫히지 않는 문제가 있어서, PM님이 이 부분을 해결해달라고 했다. 기존의 로직은 컴포넌트에서 열림 상태를 관리한다. isOpen && , 이런 식으로 버튼 눌렀을때 isOpen을 true로 만들고 팝업이 뜨게 하는 로직이다. 이 팝업창의 외부를 클릭시 닫히게 하기 위해서 2가지 방법을 고려했다. 1) 외부에 투명배경의 viewport..

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축 위치를 조정 뒤로가기, 앞으로 가기 기능 이미..

HOC

컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 여러 컴포넌트에서 같이 쓰이는 로직이 있는 경우(로그를 찍는다거나, 팝업의 위치를 계산하는 경우) 중복해서 컴포넌트마다 코드를 작성하지 않고, HOC를 활용해서 중복을 줄이고 재사용성을 높일 수 있다. 형태 function HOCexample(Component) { return class extends React.Component { componentDidUpdate(...) render() { return } } } 이런식으로 해서 lifecycle method 안에 내용을 추가하거나, Component에 prop을 계산해서 넣어주는 등의 동작을 할 수 있다. compose(A,B)(C) 요런식으로 여러개를 합쳐서 쓰거나 할 수 도 있는데 이런 식으로는 아..

useCallback 과 useMemo

useCallback 얘는 인자로 전달된(콜백 함수) 애의 메모이제이션된 애를 반환한다. 걔는 콜백의 의존성이 변경되었을 때만 변화된다. 형태 const memoizedCallback = useCallback(() => {doSomething(a,b)}, [a,b]) 활용 React.memo의 경우 props(혹은 state, context)가 변화될 때만 다시 렌더링하도록 되어있다. 얘한테 함수를 prop으로 전달할 경우 {console.log('hi')}}/> /// jasik은 memoized된 component 매번 부모가 다시 렌더링 되면 함수도 다시 생성하고, 그래서 jasik은 prop이 계속 바뀐 걸로 인식해서 계속 다시 렌더링한다. 이런 불필요한 렌더링을 줄이기 위해서 {console.l..

Memoization

메모이제이션이란, 동일한 계산을 반복할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 해주는 것이다. 리액트에서 메모이제이션은 어떻게 할까? React.memo를 활용해서 할 수 있다. const MyComponent = React.memo(function MyComponent(props){}); React.memo는 HOC이다. 얘에게 컴포넌트를 인자로 전달하면 동일한 props를 전달 받으면 다시 렌더링하지 않고, 기존에 저장해둔 컴포넌트를 바로 뱉는 애를 리턴한다. 보통 부모 컴포넌트에 상태를 많이 끌어올려 놓고 자식에 props로 주는 경우가 많기 때문에 그럴 경우에는 쓰임새가 많다. React.memo의 좋은 점은 또 있다. 얘는 p..