리액트 프로젝트 만들기! 리액트 프로젝트 간단 생성 (create-react-app 사용)

-1. create-react-app 설치 명령어 입력 : npm install -g create-react-app (=npm i -g create-react-app) npm을 이용해, create-react-app 설치 완료 화면 2. create-react-app 을 이용해 프로젝트 생성 명령어 입력 : create-react-app 프로젝트명 create-react-app을 이용한, 리액트 프로젝트 생성 완료 화면 3. 개발 서버 실행 프로젝트 디렉토리 위치에서 명령어 입력 : npm start npm을 이용한, 리액트 프로젝트 개발서버 실행 화면 npm을 이용한, 리액트 프로젝트 개발서버 정상 실행 화면 리액트 프로젝트 실행 완료 후, 정상 브라우저 접속 화면 - 끝 -

2020.09.09

리액트 프로젝트 만들기! 리액트 (React) 설치 부터, 환경설정, 기본 셋팅까지!

오늘은, 리액트에 대해서 알아보고, 리액트 사용을 위한 필수 설치 및 환경 설정을 해보도록 하겠습니다. - 리액트 사용을 위한 필수 설치 및 환경입니다. node.js 설치 (npm) React project 설정 webpack 설치 babel 설치 React 설치 및 설정 (webpack+babel 프로젝트) Hot module replacement 설치 . . . 1. node.js 설치합니다. (npm) : 다운로드 사이트 → https://nodejs.org/en/ node.js 홈페이지 다운로드 화면 모습 : 원하는 버전 다운로드 ※ npm ( Node Package Manager ) : 터미널 프로그램에서 명령어를 이용해 작업하는 프로젝트의 package.json 파일을 생성 및 작업에 필요한..

2020.09.07

리액트 (=React) 개념 및 특징 정리

- 단순 개념 : 페이스북이 만든 사용자 UI 구축을 위한 컴포넌트 기반 라이브러리 : 오직 사용자의 View에만 초점을 맞춤 : Reuting 같은 기술이 미포함 ( but, 현재는 프레임워크 위치 수준 > 커뮤니티의 활발성 ) - 대표적인 특징 1. JSX 문법 : 자바스크립트 안에서 html 문법을 사용하여 view를 구성할 수 있게 도와주는 자바스크립트 문법 2. Component 기반 : 하나의 html 코드가 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가 3. Virtual DOM : DOM의 한계를 탈피기 위해 나온 대안 : 변화를 가상 돔에서 미리 인지 후 변화 ( = 불필요한 렌더링 및 연산 비용의 절감화 ) : 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지 후 업데이트..

2020.09.07