inblog logo
|
p4rksk
    React

    React

    박선규's avatar
    박선규
    Oct 11, 2024
    React
    Contents
    React란리엑트 프레임 워크Node.js 설치프로젝트 생성하기

    React란

    📌
    React란 UI를 동적인 데이터에 맞춰 업데이트하고 변환하는 상태를 효율적으로 관리할 수 있는 라이브러리다.
    • 랜더링이 CSR방식이다.
    • 컴포넌트 기반으로 돼있어 재사용 가능
    • JSX문법을 통해 JavaSc ript와 유사한 문법으로 UI 컴포넌트 작성
     

    리엑트 프레임 워크

    Create React App

    • JavaScript 라이브러리
    • CSR방식
    • Javascript의 기본 문법 이해시 접근 쉽다.
    • SEO(검색 엔진)에 약하다.
    • 주소 표시줄로 컴포넌트를 다양하게 보여 주려면 리엑트 라우터 돔 라이브러리 설치
    • 상효 작용이 많은 개발을 할 때
     

    Next.js

    • 프레임워크
    • 부트 스트랩 같은 개념
    • 미리 만들어진 요소를 컴포넌트로 불러와서 사용가능하다.
    • SCR 및 SSR 둘다 가능
    • 파일명만 가지고 자동으로 라우터가 된다.
    • SEO가 중요한 개발을 할 때
     

    Node.js 설치

    Node.js — Run JavaScript Everywhere
    Node.js — Run JavaScript Everywhere

    Node.js — Run JavaScript Everywhere

    Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

    📌
    JavaScript 런타임 환경으로 자바스크립트를 서버에서도 실행 할 수 있게 해주는 도구 원래 JavaScript는 브라우저에서만 작동 했지만, Node.js를 사용하면 서버 측에서도 자바 스크립트를 실행 가능하다. 크롬의 v8엔진을 기반으로 만들어졌다.
    모두 next 하기
     

    프로젝트 생성하기

     
    Getting Started | Create React App
    Getting Started | Create React App

    Getting Started | Create React App

    Create React App is an officially supported way to create single-page React

     
    npm =노드 패키지 매니저
    npm을 이용해서 필요한 라이브러리들 다운 가능
     

    React 프로젝트로 세팅

    - 리엑트 프로젝트 생성 명령어 npx create-react-app [내 프로젝트 명] -폴더 이동 명령어 cd [내 프로젝트 명] -실행하기 npm start
    notion image
     

    실행하기

    npm start
    notion image
    notion image

    깃으로 세팅 확인하기

    notion image
     
    Share article

    p4rksk

    RSS·Powered by Inblog