Progamming/ReactJS12 [벨로퍼트] JSX 컴포넌트 파일 파헤치기 리액트를 사용하면 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수를 우수하게 해준다. 컴포넌트에 해당하는 코드는 App.js 에서 확인할 수 있다. import 무엇인가를 불러온다는 것이다. 첫번째 import는 리액트와 그 내부의 Component를 불러온다. 파일에서 JSX를 사용하려면, 꼭 React를 import 해주어야 한다. import 한다는 것은 webpack을 사용하기에 가능한 작업이다. 이렇게 불러오고 나면 나중에 프로젝트를 빌드하게됐을 때 웹팩에서 파일의 확장자에 따라 다른 작업을 하게된다. CSS 파일을 불러오게되면, 나중에 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해주는 작업을 진행하고, 자바스.. 2019. 7. 5. [벨로퍼트] 리액트 프로젝트 시작하기 Webpack, Bable은 무슨 용도인가요? 리액트 프로젝트를 만들게 되면서, 컴포넌트를 여러가지 파일로 분리해서 저장할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX라는 문법으로 작성하게 된다. 여러가지 파일을 한 개로 결합하기 위해서 "Webpack" 이라는 도구를 사용하고, JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해 Babel이라는 도구를 사용하게 된다. 준비사항 1. Node.js 설치 : Webpack과 Babel같은 도구들은 자바스크립트 런타임인 Node.js를 기반으로 만들어졌다. 그렇기에 해당 도구들을 사용하기 위해 Node.js를 설치한다. 2. Yarn 설치 : 개선된 버전의 npm이라고 생각하면 된다. npm은 Node.js를 설치하게 될 때 같이 딸려오.. 2019. 7. 5. [벨로퍼트] 리액트는 무엇인가 프론트엔드 라이브러리/프레임워크 리액트는 정말 인기있는 프론트엔드 라이브러리이다. 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다. 어떠한 UI를 동적으로 나타내기 위해서는 수많은 상태를 관리해줘야한다. 프로젝트가 사용자와의 인터랙션(상호작용)이 별로 없다면, 사실상 프론트엔드 라이브러리는 필요하지 않다. 하지만 프로젝트의 규모가 커지고, 다양한 UI와 인터랙션을 제공하게 된다면, 많은 DOM 요소들을 직접 관리하고 코드를 정리하는 것은 갈수록 힘든 일이 될 것이다. 웹 개발을 하게 될 때 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발과 UI를 구현하는 것에 집중할 수 있도록 하기 위해서 여러 라이브러리나 프레임워크들이 만들어졌다. 대표적으로 Angular, Embe.. 2019. 7. 5. 이전 1 2 다음
