[React] React 소개 및 개발환경

vanLan·2022년 11월 16일
0

React

목록 보기
1/11
post-thumbnail

🔑 React 란?

  • 프론트엔드 개발을 보다 체계적으로 할 수 있게 도와주는 라이브러리이다.
  • React의 특징
    • 선언형
      • 어떤 방법으로 해야하는지 보다 무엇과 같은지를 선언.
      • 직관적으로 각 상태에 따른 필요한 뷰를 만들고 => React가 필요한 부분만을 효율적으로 렌더링.
    • 컴포넌트
      • 조그만 부분 부분들을 컴포넌트로 작성.
      • 컴포넌트들을 조합해 한 페이지를 만듬.
      • 각 컴포넌트는 독립적으로 작동.
    • 재사용성
      • Server-Side Rendering(Node.js)
      • React Native(모바일 앱)

💡 라이브러리 vs 프레임워크

  • 라이브러리 란?
    • 다른 사람들이 개발한 기능을 쉽게 가져다 쓸수 있도록 만들어진 코드.
    • 아무곳에서나 불러서 사용할 수 있다.
  • 프레임워크 란?
    • 복잡한 소프트웨어를 간단하게 만들 수 있게 짜여진 코드 집합체.
    • 개발한 사람들이 의도한 대로 코드를 작성해야함.
    • 예시) Next.js

🗝 Node.js

  • Javascript를 데스크톱에서도 실행할 수 있게 해주는 런타임이다.
  • Node.js 설치 방법
    • Node.js 홈페이지에서 설치파일을 다운로드 받아 설치.
    • nvm(Node Version Manager)
      • Node.js는 활발히 개발되는 언어이기 때문에 수없이 많은 버전이 존재하기 때문에 프로젝트 별로 다른 Node.js 버전을 활용할 때가 많아 이를 해결하기 위해 nvm이 등장하였다.
      • nvmrc 파일을 통해 프로젝트 별 Node.js 버전을 관리한다.
      • nvm use 커맨드를 이용하여 nvmrc 내부의 버전으로 교체 가능하다.
    • Volta
      • Rust로 개발된 nvm의 대체제(빠름!)이다.
      • volta pin 커맨드를 통해 프로젝트 별 Node.js 버전을 관리한다.
      • nvm과 다르게 프로젝트를 이동하면 알아서 알맞는 Node.js 버전으로 적용시켜준다.

🗝 Package Manager

  • Node.js에는 수없이 많은 라이브러리(패키지)가 존재한다.
    이러한 패키지들을 활용하려면 프로젝트에 설치를 하여야 하는데, Package Manager(npm, yarn, pnpm 등)를 통해 설치한다.
    • npm(Node Package Manager)
      • Node.js에서 활용할 수 있는 라이브러리들을 설치할 수 있게 해주는 툴이다.
    • yarn
      • 처음 시작은 npm이 느려 facebook에서 출시한 패키지 매니저이다.
        (지금은 npm도 충분히 빠름)
      • v3 부터는 plug in play 등의 유니크한 기능을 제공한다.
    • pnpm
      • 기존 npm과 yarn의 문제점을 해결하기 위해 나온 패키지이다.
      • npm/yarn에서는 ghost dependency 문제가 있다. pnpm은 해당 문제점을 해결하여 예상치 못한 버그를 방지한다.
      • 💡 ghost dependency: 직접 설치하지 않은 패키지나, 설치한 패키지가 의존하는 패키지여서 같이 설치된 패키지이다.(의도하지 않은 패키지 설치로 인해 예상치 못한 버그가 발생할 수 있다.)

🗝 개발환경 설정 툴

  • CRA(Create React App)
    • 프로젝트 생성
      • npx create-react-app (프로젝트 명)
    • 기본제공 스크립트
      • npm start: 로컬 개발 서버를 실행.
      • npm test: 테스트 코드 실행.
      • npm run build: 운영 배포를 위한 빌드 실행.
    • 번들러: Webpack을 사용.
    • 트랜스파일러: babel을 사용.
    • 린터: Eslint를 사용.
    • 장점
      • 빌드 툴을 별도로 굳이 공부하지 않아도 되며, 각종 툴 보전을 신경쓰지 않아도 된다.
        (react-scripts 의존성 하나만 있고, 해당 패키지가 모든 툴을 관리하며, 툴들을 원하는 대로 커스텀 하고 싶다면 eject 스크립트를 실행하여 커스텀이 가능하다.)
  • Vite
    • 프로젝트 생성
      • npm: npm crate vite@latest
        yarn: yarn create vite
        pnpm: pnpm create vite
    • 기본제공 스크립트
      • npm run dev: 로컬 개발 서버를 실행.
      • npm test: 테스트 코드 실행.
      • npm run build: 운영 배포를 위한 빌드 실행.
    • 번들러: Rollup 사용.
      (Webpack 보다 훨씬 빠른 빌드 속도이며, 빌드 결과물이 Webpack 보다 용량이 작고 ES6 Module로 출력된다.)
    • 개발 서버 실행시에는 따로 building하지 않고 소스를 바로 로드한다.
    • 디버깅이 수월하다.
    • 장점
      • 원하는 툴들을 입맛에 맞게 설치해 사용할 수 있다.
      • 빠른 속도.

💡 용어 설명

  • 번들러
    • 프로젝트를 진행하다 보면 굉장히 많은 양의 코드가 생성된다.
      실제 운영되는 서버에서 이 많은 양의 파일을 일일히 다 로딩하려면 로딩 속도가 너무 느려지기 때문에 많은 코드들을 하나의 번들 파일로 묶어주는 역할을 한다.
  • 트랜스파일러
    • 매년 Javascript가 발전하면서 새로운 기능들이 추가되는데, 오래된 브라우저는 새로운 Javascript 기능을 실행하지 못한다.
      트랜스 파일러는 지원되지 않는 코드들을 호환성이 좋은 코드로 변환해 주는 역할을 한다.
  • 린터
    • 여러 개발자가 협업을 하다보면 각자 코딩하는 스타일이 다르기 쉽다. 이러할 때, 코드 스타일을 통일 시켜주는 역할을 한다.
    • 예시) 세미콜론 사용여부, 의존성 import 순서 조정, etc...

profile
프론트엔드 개발자를 꿈꾸는 이

0개의 댓글