[UMC 7th Server] Chapter 4. ES6와 프로젝트 파일 구조의 이해

 

 

 

🎯핵심 키워드 정리

---

 

 

🔹ES란?

• 표준화된 스크립트 프로그래밍 언어
• ES라고 부르는 것은 ECMA Script의 약자이며, ES5는 ECMA Script 5의 규격을 따른다고 생각하면 된다.

 

🔹ECMAScript 특징

1. 표준화: 브라우저나 다른 환경에서 JavaScript가 일관되게 동작하도록 보장한다.
2. 버전 관리: ECMAScript는 여러 버전으로 발전해 왔으며, 가장 널리 알려진 버전 중 하나가 ECMAScript 6(ES6) 또는 ECMAScript 2015이다.
3. 주요 기능: ECMAScript는 변수 선언, 제어 흐름, 함수, 클래스, 모듈화 등 다양한 프로그래밍 기능을 제공한다. 특히 ES6에서는 let, const, arrow function, class, modules 등 현대적인 프로그래밍 스타일을 지원하는 기능이 추가 되었다.
4. 브라우저 호환성: ECMAScript는 대부분의 최신 웹 브라우저에서 지원되며, 이를 통해 JavaScript 기반 웹 애플리케이션이 다양한 환경에서 일관되게 작동할 수 있도록 한다.

 

 

ES6의 주요 변화 및 특징

 

 

   ES6(ECMAScript 6)는 2015년에 도입된 자바스크립트의 6번째 표준안

 

🔹ES6의 주요 변화

 

 1. 변수 선언 방식의 차이 (var, let, const)

• let, const 키워드 추가 (기존 var 키워드의 암시적 재할당의 단점을 보완하기 위해 추가)
• var은 재정의와 재선언 모두 가능하다.
• let은 가변변수로 재정의가 가능하지만 재선언은 불가능하다.
• const는 불변변수로 재선언과 재정의 모두 불가능하다.

//변수 선언
var x = 2;
// 재정의
x = 4;
// 재선언
var x = 4;

 

2. 템플릿 리터럴 (Template literals)

• 백틱 추가${}를 통해 표현식 삽입이 가능

var jsp = "자바스크립트";

// 기존 코드
console.log("이건 " + jsp + "입니다.");

// 템플릿 리터럴 방식
console.log(`이건 ${jsp}입니다.`);

// 출력 결과 -> 이건 자바스크립트입니다.

 

 

3. 화살표 함수 (Arrow function)

• 화살표 함수 (Arrow Function) 추가함수를 간결하게 나타낼 수 있게 되었음.기존 함수와 this 바인딩이 다름.

// 기본 함수 형식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수 형식
let sum = (a, b) => a + b;

 

 

4. 클래스 (class)

• ES6에서는 클래스 구문이 도입되어 객체 지향 프로그래밍을 더욱 쉽게 할 수 있게 되었다
• 생성자, 상속, 메서드, 정적 메서드 등을 지원

class Person { 
	constructor(name) { 
    	this.name = name;
    }
    
    greet() { 
    	console.log(`Hello, ${this.name}!`); 
    } 
} 

class Employee extends Person { 
	constructor(name, company) { 
    	super(name); 
        this.company = company; 
    } 
}

 

 

5. 구조분해할당 (destructing)

• 객체와 배열의 값을 쉽게 변수로 저장할 수 있다

const introduce = {name: 'unknown', age: 23};
// key와 같은 이름으로 변수 선언
const { name, age } = introduce;
// 다른 이름으로 변수 선언 -> 변수이름: 키값
const { myName: name, myAge: age } = introduce;

console.log(myName) // unknown
console.log(myAge) // 23

 

 

6. Rest Operator / Spread Operator

 

Rest Operator(나머지 매개변수)는 나머지 후속 매개변수들을 묶어 하나의 배열에 저장해서 사용하는 것 (…으로 저장)

 

 

Spread Operator(전개 구문)는 묶인 배열 혹은 객체를 개별적인 요소로 분리

 

 

7. forEach() / map() / reduce()

 

 

- forEach() : 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행

배열.forEach((요소, 인덱스, 배열) => { return 요소 });

 

 

- map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환

배열.map((요소, 인덱스, 배열) => { return 요소 });

 

 

-reduce() : 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

 

 

8.모듈 (ESM)

• 모듈 : 독립성을 가진 재사용 가능한 코드블록
• import, export 구문을 이용해 모듈 가져오기 & 내보내기 가능

export default func;

import func from './utils/func';

 

 

 

🔹 ES6를 중요시 하는 이유

 

   1. 가독성과 유지보수성을 크게 향상

• 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당 등의 기능을 통해 기존보다 훨씬 간결하고 명확한 코드 작성이 가능해졌다

// ES5
var add = function(a, b) {
    return a + b;
};

// ES6
const add = (a, b) => a + b;

 

    2. 비동기 처리의 개선

• ES6에서 async/await가 도입되어 더욱 편리하게 비동기 작업을 다룰 수 있게 되었다.

fetchData()
    .then(result => {
        // 처리 로직
    })
    .catch(error => {
        // 에러 처리
    });

  

    3. 모듈화 지원

• ES6는 모듈 시스템을 도입하여, 코드 분리와 재사용을 더 쉽게 할 수 있도록 지원하였다
• 각 파일에서 필요한 코드만 가져오고, 불필요한 코드의 중복을 줄일 수 있게 되었습니다. 이는 대규모 프로젝트나 팀 단위 개발에서 특히 유용하다.

 

 

 

---

 

개념정리 및 마인드맵 

 

4주차 필기

4주차 필기

 

 

---

 

 

 

🔥 미션 인증

---

 

 

 

1️⃣로컬 DB 준비 하기

 

저는 MYSQL를 사용하여 로컬 DB를 준비하였습니다.

 

1. 생성할 테이블 코드 작성

테이블은 간단한 유저테이블을 새롭게 구성하여 작성하였습니다. 

 

-- 데이터베이스 사용 (선택한 데이터베이스를 사용)
USE new_schema;


-- 간단한 테이블 생성
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 기본 데이터 삽입 (이름하고 이메일!)
INSERT INTO users (name, email) 
VALUES 
('chaewon', 'alice@example.com'),
('winny', 'winny@example.com');

 

 

   2. DB 생성 완료 

 

 

new_shcema 생성

 

더미데이터 입력 결과

 

 

 

2️⃣깃허브 설정 하기

 

1. 레포지토리 생성 후 feature/mission-04 생성하기

        UMC-winny-repo를 생성 한 뒤 브랜치를 생성해 주었습니다!

 

 

     2. vscode에서 파일 생성 후 푸시

        다음 vscode에서 git checkout 명령어를 사용해 브랜치 이동 후 파일을 푸시해주었습니다!