1. module export와 import

• export와 import는 module 시스템에서 데이터를 주고받기 위한 기능(서로의 데이터를 주고 받을 수 있다.)

1-1. export

• export는 변수, 함수, 클래스 등의 값을 다른 모듈로 내보내는 역할을 한다.
• 이름을 보내주는 Named Export와 기본으로 보내주는 Default Export로 2가지이다.

1) Named Export

// a.js
export const sum = (a, b) => a + b;   // 이름을 지정하여 내보냄
export const multiply = (a, b) => a * b;

-----------------------------------------------
  
// b.js
import { sum, multiply } from './a';  // 중괄호로 이름을 가져옴

console.log(sum(2, 3));  // 5
console.log(multiply(4, 5));  // 20

-----------------------------------------------
// c.js
import { sum as add, multiply as times } from './a';	// sum => add, multiply => times 로 바꿈.

console.log(add(2, 3));  // 5
console.log(times(4, 5));  // 20

• 하나의 파일에서 여러 값을 내보낼 수 있는 방식
• 각 값을 보낼 때, 이름을 지정하고 그 값을 가져올 때도 동일한 이름으로 사용해야함.
• 동일한 이름으로 사용하고 싶지 않다면 as로 바꿔서 사용한다.

2) Default Export

// a.js
const subtract = (a, b) => a - b;
export default subtract;  // 기본으로 내보내기

-----------------------------------------------
// b.js
import minus from './a';  // 이름을 자유롭게 사용 가능

console.log(minus(10, 5));  // 5

• Default Export는 모듈당 하나의 값만 내보낼 때 사용하는 방식(Default Export로 2개 이상의 값을 보낼 수 없음.)
• Named Export와 다르게 이름이 없이 내보내게 때문에 가져올 때도 중괄호를 사용하지 않음.

3) 2가지를 혼합해서 사용하는 경우

// a.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;
const subtract = (a, b) => a - b;
export default subtract;  // Default Export

-----------------------------------------------
// b.js
import minus, { sum, multiply } from './a';

console.log(sum(2, 3));  // 5
console.log(multiply(4, 5));  // 20
console.log(minus(10, 5));  // 5

4) 객체로 묶어서 받아오는 경우

// a.js
const favoriteFruit = '딸기';
export default favoriteFruit;  // Default Export

export const apple = '사과';
export const banana = '바나나';
export function eatFruit() {
  console.log('맛있게 먹습니다!');
}

-----------------------------------------------
// b.js
import favorite, * as 과일뭉치 from './a.js';

console.log(favorite);  // '딸기' (Default Export로 가져온 값)
console.log(과일뭉치.apple);  // '사과'
console.log(과일뭉치.banana);  // '바나나'
과일뭉치.eatFruit();  // '맛있게 먹습니다!'

• favorite는 bbb.js에서 Default Export로 내보낸 값 favoriteFruit을 가져온 것

• import * as 과일뭉치는 Named Export로 내보낸 값들을 모두 하나의 객체로 묶어 가져온다. ex) 과일뭉치.apple, 과일뭉치.banana, 과일뭉치.eatFruit 등

2. 리액트 설치(CRA)

2-1. CRA란

• CRA는 Create React App의 약자로, 리액트 애플리케이션을 쉽게 시작할 수 있도록 도와주는 공식 도구이다.
• 복잡한 설정 없이 React 프로젝트를 빠르게 구축할 수 있으며, 내부적으로 필요한 도구들이 이미 준비되어 있어 개발자가 설정 과정에 신경 쓰지 않고 애플리케이션 개발에만 집중할 수 있다.

CRA 사용

npx create-react-app my-app
cd my-app
npm start

• npx create-react-app my-app: 새로운 리액트 프로젝트를 생성합니다.(이 때, my-app 대신 원하는 디렉토리명을 작성해도 좋고, .을 입력하면 현재 위치한 디렉토리에 리액트 프로젝트가 설치됩니다.)

• cd my-app: 생성된 프로젝트 디렉토리로 이동합니다.

• npm start: 개발 서버를 실행하여 애플리케이션을 브라우저에서 볼 수 있습니다.

2-2. npm과 Yarn

1 ) npm

// 프로젝트 초기화
npm init   # package.json 파일을 생성해서 프로젝트 설정 시작
npm init -y  # 질문 없이 기본 설정으로 package.json 파일 생성

// 패키지 설치
npm install 패키지명   # 특정 패키지 설치
npm install -g 패키지명   # 전역 설치 (모든 프로젝트에서 사용 가능

// 패키지 제거
npm uninstall 패키지명   # 설치된 패키지 제거

// 전체 의존성 설치
npm install

• npm은 Node.js 패키지 관리 도구로, 자바스크립트 애플리케이션을 위한 패키지(모듈, 라이브러리)를 설치하고 관리할 수 있게 해준다. Node.js 설치 시 기본적으로 포함되어 있으며, 온라인 리포지토리에서 수많은 패키지들을 제공해 개발자들이 쉽게 모듈을 가져다 쓸 수 있다.

npm 주요 명령어

1. npm init: 새로운 프로젝트를 생성하고 package.json 파일을 만듭니다.

2. npm install [패키지명]: 특정 패키지를 설치합니다.

3. npm run [스크립트명]: package.json에 정의된 스크립트를 실행합니다.

4. npm install: package.json에 명시된 모든 의존성 패키지를 설치합니다.

2 ) Yarn

// Yarn 설치
npm install -g yarn   # Yarn을 전역 설치

// 설치 확인
yarn -v   # Yarn 버전 확인

// 프로젝트 초기화
yarn init   # Yarn으로 프로젝트 초기화

// 패키지 제거
yarn remove 패키지명   # 설치된 패키지 제거

// 전체 의존성 설치
yarn install   # 프로젝트의 모든 의존성 설치

• Yarn은 페이스북이 만든 패키지 매니저로, npm과 동일하게 패키지 설치 및 관리를 목적으로 하지만, 몇 가지 차이점이 있다. 더 빠르고 안정적인 패키지 관리를 목표로 만들어졌으며, 동시에 설치, 네트워크 성능 최적화, 오프라인 캐싱 같은 기능을 제공한다.

yarn 주요 명령어

1. yarn init: 새로운 프로젝트를 생성하고 package.json 파일을 만듭니다.

2. yarn add [패키지명]: 특정 패키지를 설치합니다.

3. yarn install: package.json과 yarn.lock에 명시된 모든 의존성 패키지를 설치합니다.

4. yarn run [스크립트명]: package.json에 정의된 스크립트를 실행합니다.

3 ) npm vs Yarn

서로의 차이

1. 속도: Yarn은 병렬로 패키지를 설치하기 때문에 npm보다 더 빠릅니다.

2. 캐싱: Yarn은 패키지를 한 번 설치하면 오프라인에서도 설치할 수 있는 캐싱 기능을 제공합니다.

3. 버전 관리: Yarn은 yarn.lock 파일을 사용해 의존성 버전을 더욱 엄격하게 관리하며, npm도 최근에는 package-lock.json을 통해 이 기능을 제공합니다.

3. React 폴더구조

4. 자주사용되는 커맨드어 정리

파일 및 디렉토리 관리
ls: 현재 디렉토리의 파일과 폴더 목록을 표시합니다.
cd [디렉토리]: 지정한 디렉토리로 이동합니다.
pwd: 현재 작업 중인 디렉토리의 경로를 표시합니다.
mkdir [디렉토리명]: 새로운 디렉토리를 생성합니다.
rmdir [디렉토리명]: 빈 디렉토리를 삭제합니다.
rm [파일명]: 파일을 삭제합니다.
cp [원본][대상]: 파일이나 디렉토리를 복사합니다.
mv [원본][대상]: 파일이나 디렉토리를 이동하거나 이름을 변경합니다.

텍스트파일 내용 확인
cat [파일명]: 파일의 내용을 출력합니다.
less [파일명]: 파일을 페이지 단위로 표시합니다.
head [파일명]: 파일의 처음 몇 줄을 출력합니다.
tail [파일명]: 파일의 마지막 몇 줄을 출력합니다.