리액트 성능 최적화와 관련된 내용을 살펴볼때마다 useMemo()와 달리 제대로 이해되지 않는 부분이 많았습니다. 이와 관련하여 알게된 내용을 정리합니다.일반적으로 useMemo()와 useCallback()은 다음과 같은 방식으로 이해됩니다.useMemo() - 복잡

Hooks는 자바스크립트 함수지만 두 가지 규칙을 지키며 사용해야 합니다. 이런 규칙은 linter plugin을 통해 자동으로 적용할 수 있습니다. Only Call Hooks at the Top Level Hooks를 루프 내부, 조건(condition), 또는 중

Hooks는 Class없이 상태를 관리할 수 있도록 도와준다.Effect hooks는 함수형 컴포넌트 내부에서 side effect를 실행하도록 도와줍니다.대표적인 "side effect"의 예시로 Data fetching, setting up a subscripti

"프로세스 내부에 CPU 수행 단위가 여러 개 있는 경우 CPU 수행 단위를 쓰레드라고 부른다." 쓰레드, 경량 프로세스라고 불리는 개념은 프로세스에 비해 다소 난해합니다. 그도 그럴것이 쓰레드는 프로세스보다 좀 더 나중에 기술이 발전되며 등장한 개념이기 때문입니다.

먼저 자바스크립트로 리스트를 다루는 방법을 살펴봅시다.map함수에 익숙하신 분들은 위의 doubled가 2, 4, 6, 8, 10인 것을 알 수 있습니다.리액트에서 리스트를 다룰때도 위와 비슷한 방식을 사용합니다.리액트에선 curly brace({})를 사용하여 JSX

HTML에 대한 정리

Ajax는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작합니다.

websocket은 HTML5 표준 기술로, 서버와 클라이언트 간 connection을 유지하며 "패킷" 형태로 양방향 통신, 데이터 전송이 가능하도록 하는 기술입니다.웹 소켓은 다음과 같은 특징을 갖고 있습니다.통산적인 HTTP 통신이 요청에 대한 응답의 단방향 통신

"객체지향은 가동부를 캡슐화하여 코드의 이해를 돕는다. > 함수형 프로그래밍은 가동부를 최소화하여 코드의 이해를 돕는다." > - 마이클 페더스, 트위터에 쓴 글에서 개발자는 본능적으로 확장성 좋고 깔끔한 애플리케이션 아키텍처를 구축하고 싶어합니다. 오늘날의 웹은 비

자바스크립트는 비동기 처리를 위한 패턴으로 콜백 함수를 사용합니다. 하지만 콜백 함수는 비동기 처리 중 발생한 에러의 처리가 곤란하며, 여러 개의 비동기 처리를 한번에 처리하기 어렵고 콜백 헬이 발생합니다.ES6에서 등장한 프로미스 패턴은 이러한 단점을 보완하며 비동기

REST(REpresentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개된 개념입니다. 발표 당시 HTTP를 제대로 사용하지 못하고 있

Hooks는 하위 호환성을 갖고 있습니다. 이번 포스팅에선 우리가 배워볼 hooks의 전반적인 개요를 살펴보겠습니다. 다음 포스팅부터 각각에 대해 자세히 알아볼 것입니다. State Hook 아래 예시는 counter를 렌더링합니다. 버튼을 클릭하면 값을 올려주죠.

React 16.8부터 도입된 hooks는 state를 비롯한 여러 리액트의 특징을 class없이 사용할 수 있도록 도와줍니다. 이번 시간에는 리액트팀이 왜 hools를 도입했고 어떤 도움을 주는지 살펴보겠습니다.hooks를 시작하기 전, 먼저 살펴볼 특징을 알아보겠습

과거에는, 컴포넌트 내부에서 발생한 자바스크립트 에러가 리액트의 internal 상태를 오염시키고 다음 렌더링에서 암호화된 에러를 방출 (emit cryptic error)했습니다. 이런 에러는 언제나 application code이전 단계의 문제로 발생했지만, 리액트

Bundling 대부분의 리액트 어플리케이션은 webpack등의 도구를 이용해 번들링을 진행합니다. 번들링이란 어플리케이션 파일 사이의 의존성을 추적하고 합치며 하나의 "번들"이라고 불리는 파일로 만드는 과정을 말합니다. 번들은 웹페이지에 포함되어 전체 어플리케이션을

이번시간에는 브라우저가 서버와 어떻게 통신을 주고받으며 화면을 표시해주는지 알아보겠습니다.브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, javascript 등)을 서버에 요청하고, 서버로부터 응답 받아 브라우저에 시각적으로 렌더링 하는 것입니다. 서버에서 필

HOC(Higher Order Component)패턴은 리액트에서 같은 컴포넌트 로직을 사용하기 위해 사용되는 기술입니다. 리액트를 다루면 정말 자주 보이는 패턴이죠. 이번시간에는 HOC가 어떤식으로 동작하는지 예시를 통해 알아보겠습니다. 여기 두 개의 컴포넌트가 있

리액트는 프론트엔드 진영에서 가장 많이 사용되는 라이브러리입니다. 페이스북에서 만들어진 리액트는 국내/외 유수의 기업들에서 view를 담당하는 라이브러리로서 사용되고 있습니다. 리액트가 이렇게 널리 사용되는 이유가 무엇일까요? 왜 여러 기업들이 리액트를 프론트엔드 기술

교착상태란 2개 이상의 프로세스가 다른 프로세스의 작업이 끝나기를 기다리며 더 이상 작업을 진행할 수 없는 상태를 말합니다. 교착상태는 아사현상과 비슷하지만 잘못된 정책으로 인해 프로세스의 작업이 지연되는 아사현상과 달리 여러 프로세스가 작업하는 환경에서 자연스럽게 발

프로세스들은 작업을 진행하며 서로 데이터를 주고 받아야 하는 경우가 생깁니다. 프로세스끼리 통신을 하는 경우 누가 먼저 작업할지, 언제 작업이 끝날지 등을 서로 알려주어야 하는데 이를 "동기화"라고 합니다. 프로세스 간 통신 프로세스는 시스템 내에서 독립적으로 실행되기