cra없이 react 프로젝트 설정하기(feat. webpack,babel) 리액트를 만들고 사용하다보면 webpack과 babel에 대해 많이 들어봤을 겁니다. 하지만 지금까지 진행한 프로젝트는 cra로 react 프로젝트를 셋팅하기 때문에 크게 wepack과 babel에 대해 신경쓰지 않아도 blog.doyeonism.com 저번 글에서 우리는 cra없이 리액트를 세팅했습니다. 하지만 글이너무 길어져 각 파일의 구성에 대해선 알아보지 못했는데요. 이번글에선 각 파일들의 내용에 대해 분석해보고 알아가보겠습니다. webpack.config.js 저번 글에서 우리가 만들었던 webpack.config.js의 코드는 이렇습니다. const path = require("path"); const HtmlWebp..
리액트를 만들고 사용하다보면 webpack과 babel에 대해 많이 들어봤을 겁니다. 하지만 지금까지 진행한 프로젝트는 cra로 react 프로젝트를 셋팅하기 때문에 크게 wepack과 babel에 대해 신경쓰지 않아도 됐습니다. webpack과 babel에 대해 알지 못하면 깊은 리액트 공부가 되지 않을 것 같다는 생각에 webpack과 babel에 대해 알아보고 직접 cra없이 react프로젝트를 셋팅해보겠습니다. Webpack이란? 웹팩(Webpack 또는 webpack)은 오픈소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는..
리액트를 사용하면서 위와 같은 수많은 Props를 하위컴포넌트로 전달해야하는 경우를 경험했을 것입니다. 간단히 만든 제 리따배 프로젝트에도 많이 볼 수 있는 상황인데요. 제가 진행하는 프로젝트에선 컴포넌트 수가 굉장히 적어 Props를 하위컴포넌트의 하위컴포넌트까지 전달해도 크게 힘들진 않지만 하위컴포넌트의 하위컴포넌트의 하위컴포넌트... 으로 Props를 전달해야하는 경우 굉장히 귀찮아집니다. 또 이런 반복되는 코드가 많을 수록 오류확률도 높아지고 코드 가독성도 떨어지죠. * 이 처럼 사용하지도 않는 Props를 받아 바로 하위컴포넌트로 Props를 보내야하는 경우를 Props drilling이라고 부릅니다. 이런 문제를 해결하기 위해 사용하는 라이브러리가 바로 전역상태관리 라이브러리입니다. 라이브러리..
이전 포스팅에서 리액트는 VirtualDom이라는 방식을 사용해 리렌더링한다는 것을 확인했습니다. 리액트에서 사용하는 VirtualDOM에 대해 알아보자 리액트는 직접 DOM에 접근하지 않고 값을 변경해야하는 규칙을 가지고 있습니다. 그렇기 때문에 이런 규칙을 이해해야 올바른 개발을 할 수 있습니다. 이런 코드를 본 적 있을 것입니다. document.ge blog.doyeonism.com 1. VirtualDOM에서 useState로 인해 변경된 값이 있다는 것을 확인합니다. 2. 변경된 값이 있는 컴포넌트와 그 하위컴포넌트 모두 파악합니다. 3. 그렇게 파악한 컴포넌트들을 모두 VirtualDOM에서 수정한다. 4. VirtualDOM의 계산이 끝나면 DOM에 적용한다. 그리고 VirtualDom으로..
