인생은 효율성

리액트 안티 패턴 1. 프로퍼티를 사용한 상태 초기화 부모에서 받은 프로퍼티를 이용해 상태를 초기화했을 때의 문제점은 두 가지가 있다. 1. 정보 출처가 중복: props에서 받은 값을 state에 저장한 경우 핸들러를 이용해 state의 값을 변경했는데 이때 props에서 받은 값과 state에 저장된 값이 서로 달라지게 된다. 이때 어떤 값을 신뢰해야 하는지 100% 확신하기 어렵다. 2. 컴포넌트로 전달한 props가 변경되어도 상태가 업데이트되지 않음: 애플리케이션의 수명 주기 동안 프로퍼티의 값이 변경되더라도 자식 컴포넌트는 이미 초기화된 후이기 때문에 state는 초기화 시 저장한 값이다. 2. 상태 변경 setState를 사용하지 않고 값을 변경하면 컴포넌트를 다시 렌더링 하지 않는다. 예를..

며칠 전에 프론트 엔드 개발자 면접을 보고 왔는데 면접에서 받았던 질문 중에 몰랐던 부분을 알게 되었다. useEffect를 자주 사용하고 잘 활용하고 있다고 생각했는데 내가 몰랐던 기능이 있었다. 지금까지 컴포넌트가 마운트 될 때에만 useEffect를 사용하고 있었는데 컴포넌트가 언마운트 될 때에도 useEffect를 사용할 수 있었다. 먼저 마운트/언마운트를 어떨 때 주로 사용하는지 알아보자면 마운트 1. props로 받은 값을 컴포넌트의 state로 설정할 때 2. 컴포넌트가 나타나면 외부 API (REST API)를 요청해야 할 때 3. 라이브러리를 사용할 때 (D3, Video.js 등) 4. setInterval이나 setTimeout과 같은 작업 언마운트 1. setInterval, set..

9월 초에 프로젝트를 계획하고 3개월이 지났다. 처음의 계획과는 프로젝트 내용이 아주 많이 달라졌다. 처음에는 개발적으로 무슨 기능을 넣고 싶은지를 생각하지 않고 계획했어서 진행하다 보니 방향이 많이 수정되었다. 현재 프로젝트는 보이는 것보다는 내가 무슨 기능을 써서 개발하고 싶은지를 더 중점적으로 고려해서 진행하고 있다. 내가 이 프로젝트를 통해 얻고 싶은 것은 크게 세 가지였다. 프로젝트를 처음부터 끝까지 혼자 개발해보는 것 라우팅 라이브러리를 사용하지 않고 개발하는 것 mobX만 사용해봐서 비교를 위해 redux를 사용해보는 것 '이 기능이 있으면 재밌겠다' 하는 것을 제외한 '적어도 이 기능은 들어가야 한다'하는 사항만 고려했을 때 65% 정도 완성된 것 같다. 개발 마감 기한을 1월 중순으로 잡..

SPA란? SPA는 Single Page Application의 약자로 단일 페이지로 구성된 웹 애플리케이션을 뜻한다. 다른 방식과의 다른 점, SPA전에는? 기존의 방식인 서버 사이드 렌더링(SSR)은 화면에 나타낼 리소스를 서버로 요청해서 받은 리소스를 렌더링 하였다. 그렇다면 SSR은 무엇일까? 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 해서 서버는 렌더링을 마치고 데이터가 결합된 HTML 파일을 보내준다. 이것이 SSR인데 이 방식은 요청한 페이지를 받기까지 대기하기 때문에 깜박거리는 현상을 마주할 수 있다. 이런 단점 때문에 CSR방식이 관심을 받게 되었다. CSR은 Client Side Rendering의 약자로 HTML, CSS, Javascript 같은 리소스를 최초에 한번..

핸들러와 관리해야 할 상태 값이 많아질수록 반복적인 코드들로 핸들러와 관리해야 할 상태 값이 많아지면 반복되는 코드들이 자리를 차지하게 된다. 컴포넌트를 5개 썼을 뿐인데도 벌써 코드가 저만큼이다. 비효율적인 작업을 하고 있다는 생각이 들어서 공통되는 부분을 하나로 묶기로 했다. 처음엔 useState와 핸들러를 하나만 사용하는 방식을 이용했는데 최적화를 생각하다 보니 이것도 좋은 방법이 아니었다. 그래서 커스텀 훅을 만들었다. useInput.tsx const useInput = (initValue: any) => { const [value, setValue] = React.useState(initValue); const onChange = (e: any) => { setValue(e.target.va..

tost ui grid의 컬럼을 설정하는 팝업을 만들었다. 주요 기능으로는 두 가지가 있다. 체크 박스로 노출/비노출 설정 왼쪽 화살표 아이콘으로 컬럼의 순서를 조정 화살표 아이콘 클릭 시의 알고리즘을 간략하게 설명하자면 이렇다. 클릭한 게 ▲인지 ▼인지(isUpIcon) 판단 └ ▲클릭 시 조정하려는 컬럼이 맨 윗 컬럼이면 : ▲아이콘 스타일을 회색으로 변경(▲을 disabled처리) 맨 윗 컬럼이 아니면 : 바로 윗 컬럼과 위치를 바꿈(순서 변경) (※ ▼일 때는 반대로 진행) SortColumnPopup.tsx import React from 'react'; interface IColumn { colIdx: number; //컬럼순서 name: string; //컬럼명(키값으로 사용) header:..

즐겨찾기 메뉴와 메인 메뉴로 이루어진 상단 내비게이션 바를 만드는 도중 문제가 생겼다. 메인메뉴(하위메뉴)에서 별 아이콘을 클릭하면 즐겨찾기 추가/삭제가 정상 동작 한다. 하지만 즐겨찾기 메뉴에서 별 아이콘을 클릭하면 메인메뉴에 변경 내용이 즉각 반영이 안 되는 것. 새로 고침을 하면 그제야 변경한 내용이 적용되는 걸 보고 프론트의 문제란 걸 알았다. 즐겨찾기와 메인 메뉴 둘 다 빌드될 때 DB에서 한번 불러오고 mobX로 store에서 관리하고 있다. 별 아이콘은 FavIcon 컴포넌트를 만들어서 메뉴마다 넣어주고 있다. store.tsx //메인메뉴 @observable mainMenus: IMainMenus[] = []; //즐겨찾기메뉴 @observable favMenus: IFavMenus[] ..