분류 전체보기

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..

useContext

정의, 형태 const value = useContext(context) cocontext 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환한다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 의 value prop에 의해 결정된다. - 공식문서 컴포넌트에서 가장 가까운 가 갱신되면 이 Hook은 그 provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거한다. 상위 컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서부터 다시 렌더링된다. useContext를 호출한 컴포넌트는 con..

useReducer

정의 useState의 대체 함수이다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환 - 공식 문서 const [state, dispatch] = useReducer(reducer, initialArg, init) 특징 redux의 reducer와 비슷하게 동작한다. 또한 init에 state 생성 함수를 전달함으로써 초기화 지연이 가능하다. dispatch의 회피 - Reducer Hook에서 현재 state와 같은 값을 반환하는 경우 자식을 리렌더링, effect 발생시키지 않고 이것들을 회피 활용 브라우저 상에서 이미지를 편집하는 서비스를 개발하고 있다. 배경 이미지를 설정하고, 다른 이미지나 텍스트를 삽..

Vanila Js로 사진첩 사이트 만들기

링크: https://programmers.co.kr/skill_check_assignments/100 개요 사진첩 사이트를 구현했다. 앱 기동시 root 디렉토리의 폴더,파일들이 렌더링되고 breadcrumb에 경로가 표시된다. 폴더를 클릭해서 해당 폴더를 볼 수 있고, 파일을 클릭시 이미지를 볼 수 있다. 이미지창은 ESC 혹은 이미지 밖 클릭 시 닫을 수 있다. breadcrumb의 경로를 클릭 시 해당 경로로 이동한다. 데이터 로딩 시에 로딩 UI가 보여지고 로딩이 끝나면 없어진다. 추가 요구사항 UI 요소는 컴포넌트화, 각 컴포넌트가 의존성을 지니지 말 것 API 호출 중 에러가 발생했을 때의 처리 , 사용자에게 인지시킬 것 ES6 모듈 형태로 작성 API 호출은 fetch로 , async aw..

Vanila Js로 SPA 만들기 - 리팩토링

링크 : https://hyunwoo12.tistory.com/3 기존 코드는 위에서 볼 수 있다. 위 링크의 리뷰한 사항을 바탕으로 리팩토링을 진행했다. 1,2) 라우팅 담당하는 부분을 기존 index.js 에서 router.js로 분리하기 router.js function Router() { this.route = () => { // 기존과 동일 } this.setUrl = (url) => { history.pushState(null, null, url); this.route(); } window.addEventListener('popstate', this.route) } const router = new Router(); export { router }; Router 함수를 따로 만들어서 분리했다...