728x90 반응형 SMALL reactjs3 웹팩의 기본 개념 이해하기 웹팩은 자바스클비트로 만든 프로그램을 배포하기 좋은 형태로 묶어주는 도구입니다. 2000년대 초반의 웹페이지는 페이가 전활 될 때마다 새로운 HTML파일을 요청새허 화면을 새로 그렸습니다. 그 당시 자바스크립트는 돔을 조작하는 간단한 역할만 했기 때문에 코드의 양이 많지 않았습니다. 한두개의 자바스클비트 파일을 HTML의 script 태그를 이용해서 서비스하는 방식이면 충분했습니다. AJax가 유행했을 때는 자바스크립트의 비중이 조금더 커졌지만 많이 봐야 페이지당 자바스크립트파일 열개 정도 수준이었습니다. 그런데 웹사이트 제작 방식이 단일 페이지 애플리케이션으로 전환 되면서 상황은 달라졌습니다. 한 페이지에서도 자바스크립트 파일이 수십 또는 수백개가 필요했기 때문에 더는 기존 방식이 통하지 않았습니다. .. 2022. 1. 19. 바벨 사용해 보기 바벨(bable)은 자ㅏㅂ스크립트 코드를 변환해 주는 컴파일러 입니다. 바벨을 사용하면 최신 자바스크립트 문법을 지원힞 않는 환경에서도 최신 문법을 사용할 수 있습니다. ES6가 막 나왔을 때는 대부분의 브라우저가 ES5가 지원하고 있었기 때문에 ES6문법을 사용할 수 없었습니다. 그때 바벨(ekdtl dlfmadms 6to5)이 ES6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해 주었습니다. ES6 문법을 사용하고 싶어 하는 개발자가 많았기 때문에 바벨의 인기도 높아졌습니다. 바벨은 자바스크립트 최신 문법을 사용하는 용도 외에도 다양하게 활용될 수 있습니다. 이를테면 코드에서 주석을 제거하거나, 코드를 압축하는 용도로 사용될 수 있습니다. 리액트에서는 JSX 문법을 사용하기 위해 바벨을 .. 2022. 1. 19. 리액트 개발 환경 직접 구축하기 리액트는 UI라이브러리이기 때문에 UI를 제외한 나머지 요소들은 개발자가 신경써서 관리해야한다. 웹 어플리케이션을 만들기 위해서는 테스트 시스템, 빌드 시스템, 라우팅 시스템 등 UI외에도 신경써야할 부분들이 많습니다. 리액트로 웹 애플리케이션을 제작할 때는 다양한 외부 패키지를 활용하는게 일반적입니다. 하지만 이런 다양한 외부 패키지의 존재는 처음 리액트를 접하는 사람에게 오히려 큰 부담이 됩니다. 사용되는 외부 패키지가 너무 많아서 각 패키지의 용도도 모르는 경우가 많습니다. 우선 패키지를 전혀 사용하지 않고 리액트로 간단한 웹페이지를 만들어 보도록 하겠습니다. 다음 경로에서 리액트 자바 스크립트 파일을 4개를 내려받습니다. https://unpkg.com/react@16.14.0/umd/react... 2022. 1. 19. 이전 1 다음 728x90 반응형 LIST