인생은 효율성

며칠 전에 프론트 엔드 개발자 면접을 보고 왔는데 면접에서 받았던 질문 중에 몰랐던 부분을 알게 되었다. 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월 중순으로 잡..

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

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