🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

Creact-React-App 리액트에서도 es6 등 최신 문법을 사용하기 때문에 웹팩과 바벨이 필요하다. 웹팩은 파일들을 하나로 묶어 빌드시켜주기 위해 필요하고, 바벨은 최신 자바스크립트 문법도 구형 브라우저에서 잘 동작할 수 있도록 해주기 위해 필요하다. 하지만 create-react-app, CRA를 사용하면 이러한 개발 환경을 알아서 세팅해주기 때문에 우리가 웹팩과 바벨 세팅을 하지 않아도 된다. CRA없이 직접 React 프로젝트 시작하기 CRA가 작동되는 원리를 알기 위해 CRA없이 직접 개발 환경을 구축해보자. 1. 필요한 폴더, 파일들 생성하기 직접 creact-react-app으로 리액트 프로젝트를 시작하면 아래와 같은 폴더 구조를 볼 수 있다. 여기서 public 폴더는 정적 파일(ht..

웹 개발을 공부할 때 자주 등장하는 단어 '웹팩', 웹팩이란 무엇일까? 하나의 웹 페이지를 만들기 위해서는 .sass파일(css), .js파일, .html파일, .jpg 이미지 파일 등 수많은 파일이 생겨난다. naver.com 페이지에 접속하더라도 굉장히 많은 JS,CSS, Img 파일들을 불러오는 것을 확인할 수 있다. 하지만 이렇게 많은 파일을 서버와 계속 통신하며 받아올 경우, 렌더링 속도가 느려질 것이다. 또한, 같은 변수명을 사용하는 다른 파일이 있다면, 덮어씌워지는 등 문제점이 생긴다. 바로 위의 문제를 해결하기 위해서 도입된 개념은 모듈(module)이다. 스크립트의 타입을 모듈로 바꾼 후, export, import를 사용해서 같은 변수를 가지고 있더라도 각각 분리해서 사용할 수 있다. ..