Development/React

리액트에서 프로젝트 생성 방법인 Create-react-app에 대해 알아보고자 합니다. 리액트에서 Create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구입니다. 나중에 설정을 커스트마이징 해야하면 자유롭게 설정을 변경할 수도 있습니다. 프로젝트 생성하기 프로젝트는 npm / yarn 두가지로 생성할 수 있습니다. 이 도구를 사용하는 명령어는 다음과 같습니다. $ npx create-react-app # yarn 을 사용하는 경우 에는 다음과 같이 명령어를 입력합니다. $ yarn create react-app 프로젝트 생성이 완료되면 다음 명령어를 입력하여 프로젝트 디렉터리로 이동한 뒤 리액트..

개발환경 세팅을 하기 이전에 리액트 사용시 같이 사용하는 node.js / npm / yarn / git에 대해 간단하게 개념을 정리하고자 합니다. Node js란? Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다. node.js를 설치하면 node.js 패키지 매니저 도구인 npm이 설치가 됩니다. npm이란? NPM는 Node Package Manager의 약자이다. 자바스크립트 패키지 매니저이고 NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공한다. (CLI : 명령 줄 인터페이스, 터미널을 통해 사용자와 ..

리액트란 무엇인가? Facebook에서 개발한 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용하며, 오로지 View만 신경쓰는 라이브러리 입니다. 리액트는 프로젝트에서 특정 부분이 어떻게 생길지, 어떻게 동작할지를 정하는 컴포넌트를 이용하여 View를 렌더링 합니다. 렌더링은 사용자 화면에 뷰를 보여주는 것을 말합니다. 리액트 라이브러리는 렌더링에 드는 비용을 최적화 하는데 도움을 줍니다. 그렇다면 어떻게 도움을 주고 있는 것일까요? 이 비밀을 파악하려면 리액트의 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 렌더링에 사용되는 데이터가 변경하면서 일어나는 리렌더링에 대한 의미를 이해해야 합니다. 초기 렌더링 어떤 UI 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는..