4. ES6와 프로젝트 파일 구조의 이해

UMC - Node.js

4. ES6와 프로젝트 파일 구조의 이해

염두리안 2025. 4. 10. 22:18

728x90

ES6와 Babel

ES(ECMA Script) : Ecma International에서 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 | JS 표준화를 위한 규격

ES6 : ES의 6번째 버전 | ES5 이하 버전에서 문제가 됐던 부분 해결, 기능 추가(가독성&유지보수측면에서 ↑)

ES6의 주요 변화

화살표 함수 : 함수 선언을 더 간결하게 표현 가능함
- 인수가 하나 밖에 없다면, 인수를 감싸는 괄호 생략 가능 | 인수가 하나도 없을 땐 괄호를 비워놓으면 안됨(이때 괄호 생략 X) | 본문이 한 줄 밖에 없다면 중괄호 생략 가능 | 중괄호는 본문이 여러 줄로 구성되어 있음을 알려주며, 중괄호를 사용했다면 return으로 결괏값을 반환해야 함
var 대신 let, const으로 변수 선언 가능
- var : 함수 스코프를 가짐 | 변수 값 변경 가능 | 변수 재선언 가능
  - 문제점 : 변수 선언이 유연해서 예기치 못한 값을 반환할 수 잇음 | 코드가 길어지면 어디서 어떻게 사용될지 파악하기 힘듦 | 함수 외부에서 선언한 변수는 모두 전역 변수 | 변수 선언문 이전에 변수를 참조하면 언제나 undefined 반환(호이스팅 발생)
- let : 블록 스코프를 가짐 | 값 변경 가능 | 변수 재선언 X
- const : 재할당 불가능한 상수 | 블록 스코프
템플릿 리터럴 : 백틱(`)을 사용한 문자열 표현 | ${}로 변수, 표현식 삽입 가능
디스트럭처링(Destructuring) : 배열, 객체에서 쉽게 값 추출
기본 매개변수 : 함수 매개변수에 기본값 설정 가능
스프레드/나머지 연산자 : ... 으로 표현
- 스프레드 : 배열 or 객체를 펼침
- 나머지 : 나머지 요소를 모음
클래스 : 기존 프로토타입 기반의 객체지향 문법을 더 직관적으로 표현 | ES5 이전에선 제공 X
- 클래스는 함수로 호출 X | 블록스코프에 선언되며, 호이스팅이 일어나지 않음... => 반드시 정의 후 사용 | 메소드 안에서 super 키워드 사용 가능 | static을 붙이면 해당 메소드는 정적 메소드가 됨 | Getter, Setter를 정의하고 싶을 땐 메소드 이름 앞에 get, set을 붙여주면 됨 | extends 키워드를 사용해 클래스에서 다른 클래스로 상속하면서 클래스의 기능을 확장할 수 있음 | 일반적으로는 Pubilc Property | 프로퍼티 앞에 # 키워드를 작성해 선언하면 Private Property가 됨(오직 클래스 안에서만 사용, 변경 가능하고 외부 접근 불가)
모듈 : 독립성을 가진 재사용이 가능한 코드 블록으로 import, export를 통해 코드 모듈화 가능 | import 할 때 이름 변경하고 싶다면 as 예약어 사용 | 한 파일에 있는 클래스, 변수들을 한번에 import 하려면 * as 사용
- default export는 하나의 파일에서 단 하나의 변수, 파일 등등만 export 가능... import 할 때 아무 이름으로나 자유롭게 import 가능하며, 중괄호에 묶지 않아도 됨
프로미스(Promise) : 비동기 처리의 표준화된 방식

// 화살표 함수
// 기존
let add = function(a, b) {
  return a + b;
};
// 화살표 함수
const add = (a, b) => a + b;

// 템플릿 리터럴
const name = "yamdurian";
console.log(`Hello, ${name}!`);

// 디스트럭처링
const [a, b] = [1, 2];
const {name, age} = {name: "yamdurian", age: 26};

// 기본 매개변수
function greet(name = "yamdurian") {
  console.log(`Hello, ${name}`);
}

// 스프레드/나머지연산자
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];  // [1, 2, 3, 4]

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

// 클래스
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

// 모듈
// utils.js
export const PI = 3.14;
// main.js
import { PI } from './utils.js';

// 프로미스
const fetchData = () => {
  return new Promise((resolve, reject) => {
    // 비동기 처리
  });
};

ES Module : Node.js는 기본적으로 실행하면 CommonJS 방식으로 실행... ES Module 방식으로 실행하기 위해선 별도 설정 추가로 필요함

CommonJS와 ES Module의 비교

	CommonJs	ES Module
내보내기	module.exports	export
불러오기	require()	import
실행시점	런타임	정적(빌드 타임)
사용환경	Node.js 중심	브라우저 + Node.js (최신)

ES Module을 사용하는 이유 : 브라우저 호환성(CommonJS의 경우 번들러 필요) | 정적구조(코드 실행 전 의존성 분석 가능) | 표준화된 문법(CommonJS는 Node.js 자체 구현이라 범용성이 떨어짐) | 비동기적으로 로딩 | 미래지향적

프로젝트 파일 구조

(Service-Oriented Architecture 기준으로 작성)

Service-Oriented Architecture : 비즈니스 로직의 분리를 목적으로 함 | 다른 계층에 영향 X 특정 계층만 수정&확장 가능 → 새로운 기능을 개발하면서 확장하거나 유지보수 할 때 유리함

Controller : 클라이언트의 요청을 받아 서비스에 전달 | 서비스에서 작업을 마친 데이터를 받아 클라이언트에게 응답 | 단지 요청을 받아 응답 처리 진행
- 단지요청? 컨트롤러가 주로 요청을 받아서 해당 요청에 적합한 처리를 위해 적절한 서비스를 전달하고, 그 처리된 결과를 다시 클라이언트에게 응답으로 반환하는 역할만 한다는 의미
Service Layer : 비즈니스 로직 캡슐화 및 추상화 | 컨트롤러로부터 전달된 요청에 로직을 적용하는 계층
Data Access Layer(Repository Layer) : 쿼리를 수행하며 DB와 상호작용 | 서비스 계층에서 DB접근이 필요한 경우, 데이터에 대한 직접적인 코드가 작성되는 계층
통신 방법 : 클라이언트에서 요청 → 컨트롤러 → 서비스 전달
- 서비스는 DB가 필요한 경우, 레포지토리를 통해 DB와 상호작용해 얻어낸 결과로 비즈니스 로직 처리
- 그 후 서비스가 그 결과를 컨트롤러에 전달, 응답을 클라이언트에게 내려줌
- 일반적으로 Routing 관련 코드는 controller | Service 관련 코드는 service | 데이터 관련 코드는 repository에서 관리

DTO(Data Transfer Object) : 데이터를 옮기는 객체 역할... 계층 간 데이터 전송시에도 사용, 클라이언트로부터 전송 받은 데이터를 객체로 변환할 때도 사용 | 유효성 검사를 진행해서 오류 예방 | 외부에서 전달되는 데이터가 달라질 경우, DTO 내용만 수정하면 Service를 수정하지 않아도 됨!

Service에서 req.body의 json 객체를 바로 사용하는 대신, Controller에서 req.body를 dto 형태로 받아 service에게 dto로 값을 전달
- todoService.create(req.body) → X | todoService.create(dto) → good!
Service에서 DTO 생성(컨트롤러가 DTO를 받아 사용) : DTO로 데이터를 걸러 Controller로 전달해 Controller에서 작업시 DB의 일부 민감한 정보를 숨길 수 있는 장점 존재
Controller에서 DTO 생성(서비스가 DTO를 받아 사용) : 서비스 함수의 범용성이 늘어 유지보수에 용이

환경변수 : 민감정보를 깃에 올리면 안되니까 환경변수를 통해 안전하게 관리 | .env 파일에서 '변수명=값' 형태로 선언 | .gitignore 파일에 .env가 포함되어 있는지 체크해야 함(올리면 안됨)

npm install dotenv

미션 기록

728x90