뭐든지 할 수 있어

자바스크립트

→ Html, css와 함께 웹을 구성하는 요소 중 하나

→ 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

• 기존의 프로그래밍 언어에서 많은 영향을 받음
• 기본 문법은 c, 자바와 유사
• 셀프에서는 프로토타입 기반 상속
• 스킴에서는 일급함수의 개념을 차용

인터프리터 언어

개발자가 별도의 컴파일 작업을 수행하지 않음

→ 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합

→인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화

→컴파일 단계에서 추가적인 시간이 필요함에도 더욱 빠르게 코드를 실행할 수 있다.

컴파일러 언어 인터프리터 언어

💡 대부분의 모던 브라우저에서 사용되는 인터프리터는 전통적인 컴파일러 언어처럼 명시적인 컴파일 단계를 거치지는 않지만 복잡한 과정을 거치며 소스코드를 컴파일하고 실행한다

 💡 인터프리터 언어의 장점인 동적 기능 지원을 살리면서 실행 속도가 느리다는 단점을 극복한다. 따라서 컴파일러와 인터프리터의 기술적 구분이 점차 모호해져 가는 추세다. 하지만 자바스크립트는 런타임에 컴파일되며 실행 파일이 생성되지 않고 인터프리터의 도움 없이 실행할 수 없기 때문에 컴파일러 언어라고는 할 수 없다.

자바스크립트 : 명령형, 함수형 , 프로토타입 기반 객체지향 프로그램을 지원하는 멀티 패러다임 프로그래밍 언어

→ 강력한 객체지향 프로그래밍 능력을 지니고 있음

→ 상속, 정보 은닉을 위한 키워드가 없어서 객체지향 언어ㄹ가 아니라고 오해 하는 경우도 있지만, 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다.

Multer 모듈

Multer는 Node.js 환경에서 파일 업로드를 처리하기 위한 미들웨어이다. Express와 함께 사용하면 파일 업로드를 쉽게 처리할 수 있으며, connect-multiparty와 비교하여 더 유연하고 안정적으로 파일 업로드를 처리할 수 있다.

Multer는 다양한 옵션을 제공하여 파일 업로드를 보다 세밀하게 제어할 수 있으며, 다양한 예외 상황에 대한 처리도 가능하다.

예를 들어, 파일 사이즈 제한, 파일 형식 제한, 파일 이름 중복 방지 등 다양한 옵션을 설정할 수 있다. 또한, Multer는 여러 파일을 동시에 업로드할 수 있으며, 업로드된 파일의 정보를 쉽게 가져올 수 있는 API도 제공한다.

Multer 모듈은 다음과 같이 설치할 수 있다.

npm install multer

Multer를 사용하기 위해서는 먼저 multer 모듈을 임포트해야 한다.

const multer = require('multer');

1. multer 모듈을 임포트한다.
2. multer 객체를 생성한다. 이때, storage, limits, fileFilter 등의 옵션을 설정할 수 있다.
3. multer 객체를 사용하여 파일 업로드를 처리한다. 이때, single, array, fields 등의 메소드를 사용하여 파일 업로드를 처리할 수 있다.
   
   

파일 업로드 처리

multer는 http 요청의 본문에 포함된 파일을 서버로 업로드할 수 있도록 지원함

upload.single(fieldname) 또는 upload.array(fieldname[, maxCount])과 같은 메서드를 사용하여 단일 파일 또는 여러 파일을 처리할 수 있음

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/profile', upload.single('ramona'), (req, res, next) => {
  // req.file은 `ramona` 파일에 대한 정보
  // 키(`avatar`)는 multer 미들웨어가 사용되는 필드
})

• multer는 HTTP 요청의 본문에 포함된 파일을 서버로 업로드할 수 있도록 지원한다
• upload.single(fieldname) 또는 upload.array(fieldname[, maxCount])과 같은 메서드를 사용하여 단일 파일 또는 여러 파일을 처리할 수 있다
• upload.single(fieldname)은 fieldname 필드의 단일 파일을 처리한다
• req.file 객체는 파일에 대한 정보를 담고 있다. fieldname은 upload.single() 메서드가 사용되는 필드 이름

파일 저장 경로 및 이름 지정

업로드된 파일의 저장 경로와 이름을 지정할 수 있다.

const multer = require('multer');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
});
const upload = multer({ storage: storage });

• storage 옵션을 설정해 파일 저장 위치, 파일 이름 규칙, 파일 확장자 등을 제어할 수 있다.
• multer.diskStorage() 메서드를 사용하여 파일 저장 경로와 파일 이름 규칙을 설정한다.
• cb 콜백 함수를 사용하여 저장 경로와 파일 이름을 반환한다.
• cb(null, 'uploads/')는 업로드된 파일이 uploads 폴더에 저장되도록 지정한다.
• cb(null, file.fieldname + '-' + Date.now())는 파일 이름을 fieldname-현재시간 형식으로 지정

파일 유효성 검사

filefilter 옵션을 설정하여 허용되는 파일 확장자, 파일 크기 등을 제한할 수 있다.

const multer = require('multer');
const upload = multer({
  storage: storage,
  fileFilter: function (req, file, cb) {
    // 파일 필터링 로직
    if (!file.originalname.match(/\\\\\\\\.(jpg|jpeg|png|gif)$/)) {
      return cb(new Error('Only image files are allowed!'));
    }
    cb(null, true);
  }
});

• fileFilter 옵션을 설정해 허용되는 파일 확장자, 파일 크기 등을 제한할 수 있다.
• fileFilter 콜백 함수는 업로드할 파일의 유효성을 검사한다.
• 파일이 유효한 경우 cb(null, true)를 호출한다.
• 유효하지 않은 경우 cb(new Error('Only image files are allowed!'))와 같이 에러를 반환한다

여러 필드 처리

단일 파일 뿐만 아니라 여러 필드(텍스트, 파일)등을 동시에 처리할 수 있다

const multer = require('multer');
const upload = multer();

app.post('/profile', upload.fields([
  { name: 'avatar', maxCount: 1 },
  { name: 'gallery', maxCount: 8 }
]), (req, res, next) => {
  // req.files는 `avatar`와 `gallery` 파일에 대한 정보
  // 키(`avatar`와 `gallery`)는 multer 미들웨어가 사용되는 필드명
})

• 단일 파일 뿐만 아니라 여러 필드(텍스트, 파일)등을 동시에 처리할 수 있다.
• upload.fields(fields) 메서드를 사용하여 여러 필드를 처리한다.
• fields는 배열 형태로 필드 정보를 담고 있다
• 필드 정보는 { name: 필드이름, maxCount: 파일 수 }의 형태로 지정한다.
• req.files 객체에는 { 필드이름: 파일정보 } 형태로 정보가 담겨 있다.

동기/비동기 정리

동기/비동기는 자바스크립트에서 중요한 개념 중 하나이다. 동기는 코드가 순차적으로 실행된다는 것을 의미하며, 비동기는 코드가 순차적으로 실행되지 않는다는 것을 의미한다. 비동기 코드는 예측할 수 없는 순서로 실행되며, 실행이 완료되면 콜백 함수가 호출된다.

동기 코드의 예시는 다음과 같다.

function add(x, y) {
  return x + y;
}

const result = add(1, 2);
console.log(result); // 3

위 코드에서 add 함수는 두 개의 숫자를 더한 값을 반환하는 일반적인 함수이다. 함수가 호출되면 결과가 즉시 반환되며, 결과는 result 변수에 할당된다. 이것은 동기 코드이다.

비동기 코드의 예시는 다음과 같다.

setTimeout(() => {
  console.log('Hello, World!');
}, 1000);

위 코드에서 setTimeout 함수는 일정 시간이 지난 후에 실행될 콜백 함수를 등록하는 함수이다. 이 함수는 1초 후에 'Hello, World!' 문자열을 콘솔에 출력한다. 이것은 비동기 코드이다. setTimeout 함수가 호출되면 결과가 즉시 반환되지 않으며, 1초 후에 콜백 함수가 호출된다.

따라서 자바스크립트에서는 비동기 함수를 항상 콜백 함수와 함께 사용해야 한다. 이를 통해 비동기 코드의 실행 순서를 보장하고, 비동기 함수가 완료된 후에 콜백 함수를 호출할 수 있다.

예시

동기와 비동기를 이해하기 위해 일상 생활에서의 예시를 들어볼 수 있다.

예를 들어, 음식을 주문하는 것을 생각해보자. 동기 방식에서는 주문을 하면 음식이 나올 때까지 대기하며, 결과가 반환될 때까지 다른 일을 할 수 없다. 반면, 비동기 방식에서는 주문을 하고 나면 다른 스케줄을 세우거나, 다른 주문을 하거나, 롤이나 한 판 하는 등 다른 작업을 할 수 있다. 음식이 나오면 알림을 받아서 음식을 수령하고 먹으면 된다.

이와 같이 동기 방식은 결과가 반환될 때까지 대기해야 하며, 다른 작업을 수행할 수 없다. 반면, 비동기 방식은 결과가 반환되기를 기다리지 않고 다른 작업을 수행할 수 있다.

• [ 시나리오 1 ]
• 개발팀장이 3명의 사원에게 동시다발적으로 각각의 업무를 지시한다. ( = 비동기 )
• 놀랍게도 개발팀장은 3명의 사원에게 시킨 일을 확인도 안하고 본인 할 일도 한다 ( = 비동기 )
• 사원마다 맡은 일을 알아서 끝내고 개발팀장에게 보고한다. ( = 논블로킹 )
• [ 시나리오 2 ]
• 개발팀장이 사원1 에게 업무를 지시한다.
• 그리고 사원1 업무가 끝날때까지 언제 끝나냐고 눈초리를 준다. ( = 동기 )
• 사원1 의 업무처리가 너무 느려서 다른 사원에게 일을 주려고한다. ( = 비동기 )
• 그런데 사원1 은 도와달라며 개발팀장의 옷자락을 붙잡는다. ( = 블로킹 )
• 그걸 지켜보는 사원2 와 사원3 은 무슨 일을 주던 열심히 할 생각은 있지만 일이 없다. ( = 동기 )

요약

동기/비동기 프로그래밍은 모든 프로그래밍 언어에서 중요한 개념 중 하나이다. 동기 프로그래밍은 코드가 순차적으로 실행되며, 결과가 즉시 반환된다는 것을 의미한다. 비동기 프로그래밍은 코드가 순차적으로 실행되지 않으며, 결과가 바로 반환되지 않는다는 것을 의미한다.

비동기 함수는 대개 비동기 콜백 함수와 함께 사용되며, 콜백 함수는 비동기 함수가 완료된 후에 호출된다. 이를 통해 프로그램이 예측 가능한 방식으로 실행되는 것을 보장할 수 있다. 예를 들어, 파일을 읽는 비동기 함수는 파일이 성공적으로 읽혔을 때 콜백 함수를 호출하여 결과를 반환한다.

동기 함수와 비동기 함수는 각각의 장단점이 있으며, 상황에 따라 적절한 방식을 선택해야 한다. 일반적으로, 네트워크 요청과 같은 오래 걸리는 작업을 수행할 때는 비동기 함수를 사용하는 것이 좋다. 이를 통해 사용자 인터페이스가 응답성을 유지하면서 백그라운드 작업이 수행될 수 있다.