profile
이유와 방법을 알려주는 메모장 겸 블로그
post-thumbnail

Next.js 페이지 렌더링 이해하기

React는 기본적으로 1개의 HTML 파일을 가지고 화면을 렌더링하는 Single Page Application으로서 HTML 노드를 생성-수정-삭제하는 과정은 모두 클라이언트 측 브라우저에서 발생한다.

3일 전
·
0개의 댓글
post-thumbnail

React Hooks 이해하기 (2)

앞서 살펴본 기본적인 3가지 hook 이외에도 React에는 다양한 hook이 존재한다. useReducer useState와 역할은 비슷한데, useState가 제공하는 기능 이외에도 상태 업데이트 로직을 외부 함수로 분리할 수 있는 기능을 제공한다. 그래서 상태를

2021년 1월 18일
·
0개의 댓글
post-thumbnail

React Virtual DOM 이해하기

React는 렌더링된 UI를 내부적으로 따로 만들어서 관리한다. 이는 React 컴포넌트가 반환한 JSX 엘리먼트(=JavaScript 객체)가 중첩된 구조(=트리 구조)로 이루어져 있다.React는 성능 향상을 위해 실제 렌더링된 UI를 내부적으로 JavaScript

2021년 1월 16일
·
0개의 댓글

[React Warning] Can't perform a React state update on an unmounted component

외부 서버로 fetch한 후 결과를 업데이트하는 컴포넌트가 있는데, 이런 저런 이유로 중간에 컴포넌트를 DOM에서 unmount하는 경우 위와 같은 경고가 발생할 수 있다. 당연히 컴포넌트가 DOM에서 언마운트됐기 때문에 존재하지 않는 컴포넌트에 상태를 업데이트할 순

2021년 1월 15일
·
0개의 댓글

ESLint + Prettier + TypeScript + Husky + VSCode (+ Node)

TypeScript, Node 환경에서 Visual Studio Code를 통해 작성한 코드를 저장할 때마다 자동으로 포맷하고, ESLint를 통해 문법 오류를 확인하고, Husky를 통해 커밋하기 전에 스크립트를 실행하는 기능을 사용해보도록 하자.

2020년 12월 26일
·
0개의 댓글

프론트엔드와 백엔드가 있는 웹 프로젝트의 구조

프로젝트는 데이터 흐름, 코드가 실행되는 순서 등에 따라 구조를 나눌 수 있다. 이렇게 구조를 나누면 해당 계층의 역할에 집중할 수 있고 각 계층의 역할을 기억하기 쉬워진다. 네트워크를 5계층으로 나눈 이유와 비슷하다.

2020년 12월 17일
·
0개의 댓글

React 코딩 규칙

페스타에서 인턴하면서 개인적으로 느낀 React, Next, Apollo, JavaScript, CSS 코딩 규칙아래에서 언급된 규칙 외에도 좋은 저명한 레퍼런스 사이트가 있으면 추가해주세요 😎

2020년 12월 13일
·
0개의 댓글

React Hook Form

어느 시점부터 입력값 유효성 검사를 시작할지 설정한다. 기본값은 onSubmit으로 폼 입력값을 제출한 후부터 입력값 유효성 검사를 시작한다.언제마다 입력값 유효성을 검사할지 설정한다.input에 설정될 기본값컴포넌트가 마운트될 때만 설정된다.기본값을 '', null

2020년 11월 2일
·
0개의 댓글
post-thumbnail

Apollo 캐시 설정

Apollo 클라이언트는 GraphQL 쿼리를 로컬에 저장할 수 있는 캐시 기능을 제공한다. 클라이언트에서 서버로 GraphQL 쿼리를 요청하면 그 결과를 클라이언트 측 메모리에 특정 규칙에 따라 저장한다. 이렇게 캐시된 결과는 이후에 클라이언트 측에서 동일한 쿼리를

2020년 10월 12일
·
0개의 댓글

Git 줄 시퀀스 충돌

맥이나 리눅스에서 작업한 파일은 기본적으로 줄 시퀀스가 LF로 설정되어 있고 Git 저장소(repository)에 push할 때 LF로 저장된다. 하지만 LF로 설정된 파일이 있는 저장소를 클론해서 윈도우에서 작업하려고 하면 기본적으로 모든 파일의 줄 시퀀스가 CRLF

2020년 10월 8일
·
0개의 댓글
post-thumbnail

React 컴포넌트 재사용 방법

수학과 컴퓨터 과학에서 고차 함수는 하나 이상의 함수를 인수로 가지거나 함수를 결과로 반환하는 함수이다. 다른 모든 함수들은 일차 함수이다. (위키백과)컴포넌트를 매개변수로 받아서 컴포넌트를 반환하는 컴포넌트

2020년 10월 6일
·
0개의 댓글

Atomic Design

HTML 태그조건부 렌더링 없음무조건 해당 태그가 반환됨원자를 묶어서 간단한 로직 반영사용자가 관심있어 하는 분자랑 유기체의 차이?네비게이션 바사용자에게 보여지는 페이지를 추상화한 것특정 URL로 접속했을 때 사용자에게 실제로 보여지는 HTML 파일템플릿은 클래스, 페

2020년 9월 21일
·
0개의 댓글
post-thumbnail

React Hooks 이해하기 (1)

React는 v16.8부터 컴포넌트 상태와 컴포넌트 생명주기를 관리할 수 있는 API인 Hook을 제공하고 있다. Hook을 사용하면 함수 컴포넌트에서도 클래스 컴포넌트처럼 상태를 저장할 수 있고 컴포넌트 생명주기에 관여할 수 있다.

2020년 9월 16일
·
0개의 댓글

GraphQL과 REST API

GraphQL은 서버로부터 데이터를 요청하는 방식 중 하나다. 기존에 존재하는 REST API와 역할이 비슷하다. REST API와의 차이점 - Overfetching - Underfetching - Cross platform -Type

2020년 9월 9일
·
0개의 댓글

JavaScript의 비동기 처리

JavaScript는 싱글 스레드, 논블로킹, 비동기, 동시성을 지닌 동적 타입 언어다. 이러한 기능을 지원하기 위해 JavaScript는 스택, 큐, 힙, 이벤트 루프, 외부 API를 가진다. 각각의 의미를 하나하나씩 알아보자.

2020년 9월 8일
·
0개의 댓글

함수형 프로그래밍 with JS

함수형 프로그래밍은 순수 함수(pure function)를 이용해 프로그래밍 하는 방식이다. 순수 함수는 동일한 입력에 대해 항상 동일한 값을 반환하는 함수를 의미한다. 순수 함수는 함수 내부에서 함수 외부 변수를 참조하거나 변경, 대입하는 것을 지양한다.

2020년 9월 8일
·
0개의 댓글

TypeScript 개념 및 설치

TypeScript는 JavaScript에 정적 타입 기능을 추가한 언어로서 JavaScript를 모두 포함한다. TypeScript의 간단한 테스트는 아래의 공식 사이트에서 할 수 있다. https://www.typescriptlang.org/play/

2020년 9월 2일
·
0개의 댓글

파이썬 멀티스레딩

컴퓨터에 있는 모든 코어를 활용해 프로그램의 성능을 높이기 위해 멀티스레딩을 활용한다.각 스레드에게 작업량을 미리 정해준다. 각 스레드에게 할당한 작업의 걸리는 시간이 비슷하다고 예측할 수 있을 때 사용한다. 각 스레드에게 작업을 분배하는데 걸리는 오버헤드가 적고 구현

2020년 7월 7일
·
0개의 댓글

페이지 테이블

Virtual address가 32bit면 운영체제가 프로세스에게 할당할 수 있는 최대 메모리 크기는 $2^{32}$ bytes (4GB)다. 그리고 Physical Page Offset (bit) = $\\log_2 Page Size$Page Table Index (

2020년 7월 2일
·
0개의 댓글

자바 파일 입출력

바이너리 파일 출력(쓰기)

2020년 6월 30일
·
0개의 댓글