인생은 효율성

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

[React] 1 먼저 type="file"인 인풋 태그를 만들어서 파일을 선택할 수 있도록 해준다. 2 파일을 선택하면 그 정보를 state에 저장해준다. const [selectedFile, setSelectedFile] = React.useState(null); //업로드할 파일 정보 const handleFileChange = (event: any) => { setSelectedFile(event.target.files[0]); }; // JSX 부분 3 업로드 기능을 수행할 버튼을 만들어 클릭 이벤트로 파일을 서버로 전달해준다. - formData를 생성해 여기에 선택 파일 정보와 이름을 담는다. * 정보를 담을 때 사용한 userfile은 node.js 서버에서 받을 때 사용할 이름이다. - ..

Nods.js 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계된 자바스크립트 런타임 환경이다. 자바스크립트를 브라우저 밖에서 사용할 수 있게 도와준다고 생각하면 된다. * 런타임 : 프로그램이 실행되는 상태를 뜻함 Node.js 환경에 express 등의 프레임워크를 구동하면 서버가 되고 Node.js 환경으로 React를 제작하면 프론트엔드가 된다. 바벨이라는 컴파일러 도구를 가지고 있어 JSX문법을 사용할 수 있다. Nods.js 특징 이벤트 기반 : 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 논 블로킹 I/O 모델 : 이전 작업이 완료될 때까지 대기하지 않고 다음 작업을 수행 (=비동기) 싱글 스레드 : 싱글 스레드를 사용하지만 child_process.fork() API를 사..

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