react 초기세팅

syeong_ii·2021년 5월 9일
0

TIL

목록 보기
9/9
post-thumbnail

리액트는 크게 세가지 특징을 가지고 있습니다.

  1. JSX 문법 사용

  JSX는 Javascript Syntax Extension의 약자로, 자바스크립트 문법 내에 HTML형태로 정보를 전달하거나 표기할 수 있게하는 기술입니다. 

  2. Component 기반

  기존에 HTML/CSS로 서비스를 제작할 때에는, 서비스의 복잡도에 따라 코드가 굉장히 길어지고 여러번 사용되는 요소 또한 모두 일일이 작성해줘야 했습니다. 리액트에서는 서비스 내에 재사용이 가능한 요소르 컴포넌트 형태로 분리할 수 있어, 개발 과정에서 많은 효율성을 가져다줄 수 있습니다.

  3. 가상 DOM

  가상 DOM은 추상화된 DOM을 생성하여, 이를 실제 DOM과 비교하여 변경하려는 요소를 감지한 후 변경이 가해진 부분만 변경해줍니다.
  
    초기 개발환경 세팅

  리액트 웹 애플리케이션을 개발하는 것에 사용되는 바벨, 웹팩 등이 Node JS(브라우저 밖에서도 자바스크립트를 작성할 수 있는 환경) 코드를 필요로 하기 때문에, node JS를 설치해주어야 합니다.
  node JS와 Node기반의 패키지 매니저 npm을 설치합니다

ex> coco 폴더 내에 CRA 기반의 learn-project 프로젝트 생성

  1. Desktop 폴더 내에 coco 폴더 진입
    cd Desktop/coco

  2. learn-project 프로젝트 설치
    npx create-react-app learn-project

  3. learn-project 프로젝트 진입
    cd learn-project

  4. 로컬 서버 띄우기
    npm start

이런 img 가 나오면 성공~~
profile
u can do it! = Frontend syeongii

0개의 댓글