0. 들어가면서 Webpack과 Babel을 사용한 프로젝트에서 html-webpack-plugin은 webpack이 html 파일을 읽어서 로드할 수 있도록 도와준다고 했다. 근데 이게 무슨 말일까? 여기서부터 시작된 의문이 ' 과연 이게 진짜 해당 기능을 하는 걸까? ', ' 사실 더 어썸 한 기능이 있는 것은 아닐까? ', ' 아에 다른 기능인가? ', ' 쓸모없는 기능일까? ' 등 별에 별 의문이 생겨서 한번 알아보게 되었다. 1. html-webpack-plugin ? Custom Html html-webpack-plugin은 webpack 번들을 제공하는 HTML 파일 생성을 단순화시켜준다. const path = require("path"); const HtmlWebpackPlugin = r..

0. 들어가며 해당 프로젝트는 webpack과 babel을 사용해서 만든 프로젝트에 그동안 React 프로젝트를 할 때마다 헷갈리던 폰트 파일을 적용하는 방법을 작성하였다. 1. 준비물 특별하게 사용한 것은 React 프로젝트, 구글에서 가져온 Font 파일(ttf), styled-components 패키지가 있다. 2. 시작 public 폴더 이용하기 먼저 구글에서 가져온 폰트를 public 폴더에 넣어주었다. import React from "react"; import styled from "styled-components"; const CustomDiv = styled.div` @font-face { font-family: "BlackHanSans"; src: url("./assets/fonts/B..

0. 사건의 발단 평화로운 어느날, Custom Webpack을 사용해서 만든 프로젝트에 styled-component를 사용할때 발생하였다.... 나는 분명 yarn add styled-component를 입력하고 package.json에 제대로 입력되어있는 것까지 확인하였는데, 왜 모듈이 없다고 나오는 것일까?! 1. 바로 해결 Holy!! yarn add styled-components 를 사용해서 설치해야하는 것이였다!?

Reconcilation? React를 사용할 때, `render() 함수는 React 엘리먼트 트리를 만드는 것이다.' 라고 생각할 수 있다. state나 props가 갱신되면 render() 함수는 새로운 React 엘리먼트 트리를 반환한다. 이때 React가 가장 효과적으로 UI를 갱신해서 트리를 만드는지 알아보자! 여기서 사용된 것이 Reconciliation (재조정) 알고리즘이다. 하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있다. 하지만 이런 알고리즘도 n개의 엘리먼트가 있는 트리에 대해 O(n3)의 복잡도를 가진다. 1000개의 엘리먼트를 그리기 위해서 10억 번의 비교 연산을 수행해야 한다는 뜻이다. 그래서 Re..

1. PropTypes ? Props의 타입을 확인하기 위한 도구이다. 애플리케이션 개발을 진행하다가 점차 규모가 커지면서 타입 확인을 통해서 버그를 잡을 경우가 있다. Flow 또는 TypeScript 같은 JavaScription 도구를 사용할 수 있지만 React에 내장된 타입 확인 기능이 PropTypes이다. 성능상의 이유로 개발 모드에서만 확인할 수 있다. 2. 사용하기 하나의 자식만 요구하기 import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { // 이것은 반드시 하나의 엘리먼트여야 합니다. 아니라면, 경고(warn)가 일어날 것입니다. const children = this.prop..

1. Render Props 재사용의 한 방법이다. ( Composition, HOC, render props ... ) React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 기능이다. 2. 사용 이유 class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( M..

1. Portals? DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이다. 일반적으로 컴포넌트를 렌더링 메서드에서 엘리먼트를 반환할 때 부모 노드에서 가장 가까운 자식으로 DOM이 마운트 된다. 그런데 가끔 DOM의 다른 위치에서 자식을 삽입하는 것이 유용할 수 있다. 예를 들어, overflow: hidden이나 z-index가 있는 경우 시각적으로 자식을 "튀어나오도록" 보여야 하는 경우가 있다. 다이얼로그, 툴팁 같은 것 말이다. 2. 필요성 import React, { useState } from "react"; export default function Portals(props) { const [isOpen, setIsOpen] = useState(false); re..

0. 들어가며 처음 React를 공부할때, 보통 CRA(create react app)을 사용해서 프로젝트를 만들지만 Webpack과 Babel을 공부하는 겸 한번 빈 페이지에서 프로젝트를 만들어보겠다. 1. 세팅 및 패키지 설치 npm init npm init 명령어를 통해서 package.json을 만들어주자! npm i --s react react-dom React 프로젝트를 만들 것이기 때문에 당연히 react와 react-dom을 설치한다. npm i -D --s webpack webpack-cli webpack-dev-server - webpack : webpack을 사용해서 프로젝트를 만들기 때문에 당연히 설치한다. - webpack-cli : 커맨드 라인에서 webpack을 사용할 수 있게..