01. React

많은 사람들이 사용하고 있는 javascript 라이브러리에 대해서 알아보도록하겠습니다. 

1. React(리엑트)

- Facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리
- 재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며, 데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공
- Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상
- 단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용
- JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴퍼넌트를 정의

 

1-1. 라이브러리(library) vs 프레임워크(Framework)

라이브러리
    - 개발자가 필요할 때 함수 또는 모듈을 호출하여 사용하는 방식으로 동작
    - 애플리케이션의 전체 구조를 개발자가 직접 설계
    - 추가적인 기능을 제공하거나 특정 기능을 수행하기 위한 도구
    
프레임워크
    - 제공된 틀 안에서 코드를 작성하고 프레임워크가 코드를 호출하여 실행
    - 개발자는 프레임워크가 정의한 규칙과 패턴을 따라야 함
    - 애플리케이션의 구조와 제어 흐름을 결정하며, 개발자는 프레임워크에 의해 제어되는 애플리케이션의 일부분을 작성

 

터미널 툴

맥: iterm2 다운로드
윈도우: cmder 다운로드


node -v
npm -v
git --version

corepack enable
- node.js의 패키지 매니저인 npm의 새로운 기능
- npm의 내장 패키지 설치 속도를 향상시키는 기능
- npm 7 이후에 도입된 기능

yarn -v

npm i -g corepack

 

1-2. 패키지 도구

 

a. npm(Node Package Manager)
- Node.js 패키지를 관리하고 배포하는 데 사용되는 표준 패키지 관리자
- 패키지를 설치하거나 업데이트하며, 프로젝트를 빌드 및 실행하는 데 사용

b. npx(Node Package Execute)
- npm 패키지를 실행하고 사용하는 도구
- 로컬에 설치된 패키지를 직접 실행할 수 있음(프로젝트에 의존성을 전역으로 설치하지 않고도 패키지를 사용)
- 예) npx create-react-app 앱이름

c. yarn
- JavaScript 패키지 매니저로, npm과 유사한 역할을 함
- Facebook, Google, Exponent .. 개발자들이 공동으로 개발한 오픈 소스 프로젝트
- npm보다 빠른 속도와 안정적인 패키지 설치를 제공하며 다양한 기능을 포함

 

1-3. 리엑트 앱 만들기

    npx create-react-app basic
    yarn create react-app basic

 

create-react-app을 사용하여 앱을 생성

public 디렉토리
브라우저에서 직접 엑세스할 수 있는 파일들이 포함
    index.html: 웹 애플리케이션의 진입점

src 디렉토리
애플리케이션의 소스 코드를 포함
    index.js: React 앱의 진입점 파일. ReactDOM.render를 호출하여 React 컴퍼넌트를 DOM에 렌더링
    App.js: 기본적인 앱 컴퍼넌트가 정의된 파일. 앱의 기본 구조와 레이아웃을 정의
    App.css: App 컴퍼넌트에 적용되는 css 스타일을 정의

 

 

Hello.js

Member.js

Wrapper.js

App.js

App.css

 

 

yarn start를 통해 작성한 코드를 가성환경에서 확인할 수 있습니다.