디노문경

우주: 세계의 탄생 차원에 대하여 0차원에 대한 상상 차원이란 무엇인가? 사전적 의미는 '위치를 말하는 데 필요한 좌표의 수'를 말한다. 예를 들어, 사과의 크기를 말하기 위해서는 세 개의 좌표가 필요하다. 가로, 세로, 높이. 사과는 3개의 좌표축이면 크기나 위치를 말하기에 충분하다. 그래서 3차원의 존재다. 그런데 사과의 색깔이 변해간다고 해보자. 이런 변화는 어떻게 표현해야 할까? 하나의 좌표가 더 필요하다. '시간'이라는 좌표축이다. 그래서 실제 세계 속에 존재하는 사과는 4차원에 존재한다고 할 수 있다. 공간의 3차원과 시간의 1차원으로 말이다. 이를 합해서 4차원의 시공간이라 부른다. 우리 모두 4차원의 시공간에 존재한다. 특정 차원의 존재는 자신의 세계를 한 차원 낮은 단계로 경험한다. 1차..

프롤로그 파잔(phajaan)은 코끼리의 영혼을 파괴하는 의식이다. 야생에서 잡은 아기 코끼리를 움직이지 못하게 묶어둔 뒤 저항이 완전히 사라질 때까지 몇 날을 굶기고 구타하는 의식. 절반의 코끼리가 이를 견디지 못하고 죽음에 이르지만, 강인한 코끼리는 살아남아 관광객을 등에 태우고 돈벌이의 수단이 된다. 당신은 어느 곳에서는 매 맞는 코끼리였고, 다른 곳에서는 몽둥이를 든 자였다. 우리가 고민해야 하는 것은 내가 피해자였는지 가해자였는지가 아니라, 우리의 영혼이 이미 파괴된 것은 아닌가 하는 점이다. 영혼이 파괴되었다는 것이 어떤 의미일까? 빛나는 고전을 남긴 위대한 스승들은 서로 다른 시공간에서 태어났음에도 공통적으로 우리가 다시 내면의 목소리에 귀 기울여야 함을 알려주었다. 그리고 그 안에서 잊고 ..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 18장 리덕스 미들웨어를 통한 비동기 작업 관리 18장 리덕스 미들웨어를 통한 비동기 작업 관리 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있고 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 리덕스 미들웨어: C..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 17장 리덕스를 사용하여 상태 관리하기 앞의 16장에서는 리덕스를 사용할 때 스토어의 내장 함수인 store.dispatch와 store.subscribe 함수를 사용했지만 리액트 애플리케이션에서 리덕스를 사용할 때는 store 인스턴스를 직접 사용하기보다는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리합니다. 흐름 1. 프로젝트 준비 (생략) 2. 프레젠테이셔널 컴포넌트 작성 3. 리덕스 관련 코드 작성 4. 컨테이너 컴포넌트 작성 5. 더 편하게 사용하는 방법..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 15장 Context API 16장 리덕스 라이브러리 이해하기 15장 Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 흐름 Context API를 사용한 전역 상태 관리 흐름 이해하기 (생략) 기본적인 사용법 익히기 동적 Context 사용하기 Consumer 대신 Hook 또는 static contextType 사용하기 15.2 Context API 사용법 익히기 15.2.1 새 Context 만들기 // contexts/color.js import { createContext } from 'react'; const ColorContext = c..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 14장 외부 API를 연동하여 뉴스 뷰어 만들기 14장 외부 API를 연동하여 뉴스 뷰어 만들기 흐름 비동기 작업의 이해 (생략) axios로 API 호출해서 데이터 받아오기 newsapi API 키 발급받기 뉴스 뷰어 UI 만들기 데이터 연동하기 카테고리 기능 구현하기 리액트 라우터 적용하기 14.2 axios로 API 호출해서 데이터 받아 오기 axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트입니다. 이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점입니다. async, await을 사용하지 않았을 때 import React, { useState } from 're..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 13장 리액트 라우터로 SPA 개발하기 13장 리액트 라우터로 SPA 개발하기 13.1 SPA란? 단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다. link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 11장 컴포넌트 성능 최적화 12장 immer를 사용하여 더 쉽게 불변성 유지하기 11장 컴포넌트 성능 최적화 10장에서 멋진 일정 관리 애플리케이션을 만들어보았습니다. 현재까지는 사용할 때 불편하지 않지만 데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있습니다 흐름 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle과 onRemove가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더링하기 import React, { useCallback, useRef, us..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 9장 컴포넌트 스타일링 10장 일정관리 웹 애플리케이션 만들기 9장 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링할 때는 다양한 방법을 사용할 수 있다. 이 장에서 알아볼 스타일링 방식들 일반 CSS Sass CSS Module styled-components 가장 흔한 방식, 일반 CSS 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것. 중복되는 것을 방지하기 위해서 규칙을 사용하거나 CSS Selector를 활용하면 됨. 규칙 사용: 컴포넌트 이름-클래스 형태로 짓거나 BEM 네이밍 등등.. CSS Selector: ex) .App .logo Sass 사용하기 Sass(Syntactically Awesome..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 7장 컴포넌트 라이프사이클 메서드 8장 Hooks 7장 컴포넌트 라이프사이클 메서드 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지 마운트, 업데이트, 언마운트의 세 가지 카테고리로 나눌 수 있음 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 의미함. 호출되는 메서드 constructor getDerivedStateFromProps render componentDidMount 업데이트 컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 호출되는 메서드 ge..