React는 기본적으로 1개의 HTML 파일을 가지고 화면을 렌더링하는 Single Page Application으로서 HTML 노드를 생성-수정-삭제하는 과정은 모두 클라이언트 측 브라우저에서 발생한다.
앞서 살펴본 기본적인 3가지 hook 이외에도 React에는 다양한 hook이 존재한다. useReducer useState와 역할은 비슷한데, useState가 제공하는 기능 이외에도 상태 업데이트 로직을 외부 함수로 분리할 수 있는 기능을 제공한다. 그래서 상태를
React는 렌더링된 UI를 내부적으로 따로 만들어서 관리한다. 이는 React 컴포넌트가 반환한 JSX 엘리먼트(=JavaScript 객체)가 중첩된 구조(=트리 구조)로 이루어져 있다.React는 성능 향상을 위해 실제 렌더링된 UI를 내부적으로 JavaScript
외부 서버로 fetch한 후 결과를 업데이트하는 컴포넌트가 있는데, 이런 저런 이유로 중간에 컴포넌트를 DOM에서 unmount하는 경우 위와 같은 경고가 발생할 수 있다. 당연히 컴포넌트가 DOM에서 언마운트됐기 때문에 존재하지 않는 컴포넌트에 상태를 업데이트할 순
TypeScript, Node 환경에서 Visual Studio Code를 통해 작성한 코드를 저장할 때마다 자동으로 포맷하고, ESLint를 통해 문법 오류를 확인하고, Husky를 통해 커밋하기 전에 스크립트를 실행하는 기능을 사용해보도록 하자.
프로젝트는 데이터 흐름, 코드가 실행되는 순서 등에 따라 구조를 나눌 수 있다. 이렇게 구조를 나누면 해당 계층의 역할에 집중할 수 있고 각 계층의 역할을 기억하기 쉬워진다. 네트워크를 5계층으로 나눈 이유와 비슷하다.
페스타에서 인턴하면서 개인적으로 느낀 React, Next, Apollo, JavaScript, CSS 코딩 규칙아래에서 언급된 규칙 외에도 좋은 저명한 레퍼런스 사이트가 있으면 추가해주세요 😎
어느 시점부터 입력값 유효성 검사를 시작할지 설정한다. 기본값은 onSubmit으로 폼 입력값을 제출한 후부터 입력값 유효성 검사를 시작한다.언제마다 입력값 유효성을 검사할지 설정한다.input에 설정될 기본값컴포넌트가 마운트될 때만 설정된다.기본값을 '', null
Apollo 클라이언트는 GraphQL 쿼리를 로컬에 저장할 수 있는 캐시 기능을 제공한다. 클라이언트에서 서버로 GraphQL 쿼리를 요청하면 그 결과를 클라이언트 측 메모리에 특정 규칙에 따라 저장한다. 이렇게 캐시된 결과는 이후에 클라이언트 측에서 동일한 쿼리를
맥이나 리눅스에서 작업한 파일은 기본적으로 줄 시퀀스가 LF로 설정되어 있고 Git 저장소(repository)에 push할 때 LF로 저장된다. 하지만 LF로 설정된 파일이 있는 저장소를 클론해서 윈도우에서 작업하려고 하면 기본적으로 모든 파일의 줄 시퀀스가 CRLF
수학과 컴퓨터 과학에서 고차 함수는 하나 이상의 함수를 인수로 가지거나 함수를 결과로 반환하는 함수이다. 다른 모든 함수들은 일차 함수이다. (위키백과)컴포넌트를 매개변수로 받아서 컴포넌트를 반환하는 컴포넌트
HTML 태그조건부 렌더링 없음무조건 해당 태그가 반환됨원자를 묶어서 간단한 로직 반영사용자가 관심있어 하는 분자랑 유기체의 차이?네비게이션 바사용자에게 보여지는 페이지를 추상화한 것특정 URL로 접속했을 때 사용자에게 실제로 보여지는 HTML 파일템플릿은 클래스, 페
React는 v16.8부터 컴포넌트 상태와 컴포넌트 생명주기를 관리할 수 있는 API인 Hook을 제공하고 있다. Hook을 사용하면 함수 컴포넌트에서도 클래스 컴포넌트처럼 상태를 저장할 수 있고 컴포넌트 생명주기에 관여할 수 있다.
GraphQL은 서버로부터 데이터를 요청하는 방식 중 하나다. 기존에 존재하는 REST API와 역할이 비슷하다. REST API와의 차이점 - Overfetching - Underfetching - Cross platform -Type
JavaScript는 싱글 스레드, 논블로킹, 비동기, 동시성을 지닌 동적 타입 언어다. 이러한 기능을 지원하기 위해 JavaScript는 스택, 큐, 힙, 이벤트 루프, 외부 API를 가진다. 각각의 의미를 하나하나씩 알아보자.
함수형 프로그래밍은 순수 함수(pure function)를 이용해 프로그래밍 하는 방식이다. 순수 함수는 동일한 입력에 대해 항상 동일한 값을 반환하는 함수를 의미한다. 순수 함수는 함수 내부에서 함수 외부 변수를 참조하거나 변경, 대입하는 것을 지양한다.
TypeScript는 JavaScript에 정적 타입 기능을 추가한 언어로서 JavaScript를 모두 포함한다. TypeScript의 간단한 테스트는 아래의 공식 사이트에서 할 수 있다. https://www.typescriptlang.org/play/
컴퓨터에 있는 모든 코어를 활용해 프로그램의 성능을 높이기 위해 멀티스레딩을 활용한다.각 스레드에게 작업량을 미리 정해준다. 각 스레드에게 할당한 작업의 걸리는 시간이 비슷하다고 예측할 수 있을 때 사용한다. 각 스레드에게 작업을 분배하는데 걸리는 오버헤드가 적고 구현
Virtual address가 32bit면 운영체제가 프로세스에게 할당할 수 있는 최대 메모리 크기는 $2^{32}$ bytes (4GB)다. 그리고 Physical Page Offset (bit) = $\\log_2 Page Size$Page Table Index (