1️⃣ 이 책을 선택한 이유는?최근에 진행된 특강에서 Node.js를 메인으로 서버 개발을 하는 개발자를 만났고, 그 경험은 나에게 큰 영향을 주었다. 프론트엔드 개발자로서 백엔드 기술에 대한 이해는 선택이 아닌 필수가 되어가고 있다고 생각한다. 그리고 Node.js는 그 중심에서 매우 중요한 역할을 차지한다고 생각한다(프론트엔드 개발자라서 그렇게 생각하는 것일지도!). 그리고 다가오는 백엔드 개발자의 소통이 필요한 프로젝트에서 효율적인 소통을 위해, Node.js에 대한 기술을 이해하는게 중요하다 생각했고, 이 책을 결정했다.2️⃣ 책을 읽으며 느낀 점들접근성이 좋은 설명이지만, 추가적인 학습이 필요하다고 생각된다."업무에 활용하는 Node.js"는 초보자도 부담 없이 접근할 수 있도록 쓰여졌다. 쉬운..
1️⃣ 페어 프로그래밍현재 나는 부트캠프를 다니고 있는데, 여기서는 페어 프로그래밍을 진행한다. 두 명이서 같이 프로그래밍을 진행하다 보면, 어느정도 협업이 어떤 것인지 배울 수 있는 과정이라 생각하고, 소통을 원할히 할 수 있는 좋은 방법이라고 생각했다.하지만 시간이 차츰 지나고, 페어 프로그래밍에 익숙해지며, ‘페어 프로그래밍’스럽지 않은 페어 프로그래밍을 하고 있다는 것을 이 책을 통해서 깨달았다.코드에 정통한 누군가와 함께 일을 할 수 있다면 그 점을 활용하라.질문하기를 주저하지 말라. 할 수 있다면 페어 프로그래밍을 하고, 자신의 작업을 검토해줄 것을 요청하라.경험 많은 프로그래머에게 README 문서 리뷰를 요청하라. 이를 통해 자신의 지식이 얼마나 정확한지 확인할 수 있고, 새로 오는 사람들..
🚀 리액트의 모든 훅 파헤치기1️⃣ useStateuseEffect와 함께 상태 관리를 할 수 있게 해주는 훅.기본 사용법import { useState } from "react";const [state, setState] = useState(initValue);아무런 값도 넘겨주지 않으면 초깃값은 undefined 이다.리액트의 렌더링은 함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되기 때문에 다음과 같은 상황에서는 렌더링이 되지 않는다.function Component() { const [_, triggerRender] = useState(); let state = "hello"; function handleButtonClick() { state = "hi"; t..
리액트에서 제공하는 API 중 useMemo, useCallback 훅과 고차 컴포넌트인 memo를 사용해 리엑트에서의 렌더링을 최소한으로 줄일 수 있다. 이러한 렌더링 최적화 기법을 메모이제이션 기법이라고 한다. → 렌더링 비용과 메모이제이션 비용 중 어떤 게 더 비싼가라는 질문이 등장 일부 컴포넌트에서는 메모이제이션을 하는 것이 성능에 도움이 된다. 우리는 두 가지 선택권이 있다. memo를 컴포넌트의 사용에 따라 잘 살펴보고 일부에만 적용하는 방법 memo를 일단 다 적용하는 방법 1️⃣ 섣부른 최적화는 독이다. 필요한 곳에서만 메모이제이션 하자. 이상적인 상황이다. 메모이제이션 역시 어디까지나 비용이 발생하는 작업이다. 따라서 최적화가 필요한 곳에서만 사용해야 한다. 값을 비교하고 렌더링 또는 재..
리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이 렌더링 과정은 시간과 리소스를 소비해 수행하는 과정이다. 이 비용은 모두 웹 애플리케이션을 방문하는 사용자에게 청구되며, 시간이 길고 복잡해질 수록 사용성을 저해한다. 때문에 개발자는 렌더링 과정을 최소한으로 줄이기 위하여 렌더링 과정을 잘 숙지하고 있어야 한다. 1️⃣ 리액트의 렌더링이란? 브라우저에서도 사용되는 용어이므로 두 가지를 혼동해서 사용해선 안된다. 리액트에서의 렌더링이란 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고, 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다...
1️⃣ 클래스 컴포넌트 import React from "react"; class SampleComponent extends React.Component { render() { return Sample Component; } } 오래된 코드의 유지보수, 오래된 라이브러리를 사용할 때 도움을 얻기 위해서 기본적인 클래스 컴포넌트의 이해가 필요하다. 다음과 같은 클래스를 상속받아 컴포넌트를 만들 수 있다. React.Component React.PureComponent 이 둘의 차이점은 shouldComponentUpdate 를 다루는 데 있다. import React from 'react'; //Prop 타입 정의 interface SampleProps { required?: boolean; text: s..