면접카타 5,6 - TIL 250212

5. Arrow Function 이란 무엇인지 설명해주세요.

Arrow Function(화살표 함수)은 ES6에서 도입된 함수 표현식의 새로운 문법으로, =>(화살표)를 사용하여 함수를 정의한다. 기존 function 키워드를 사용하는 방식보다 간결하며, 특히 this 바인딩 방식이 다르다.

 

Arrow Function을 사용하는 이유

✅ this 바인딩 유지 → 화살표 함수는 자신을 감싸는 스코프의 this 값을 그대로 사용한다.
✅ 코드가 간결함 → 한 줄로 함수를 표현할 수 있어 가독성이 좋아진다.

Arrow Function 문법

// 일반 함수
function add(a, b) {
    return a + b;
}

// 화살표 함수 변환
const add = (a, b) => a + b; // 한 줄로 표현 가능

 

function에서  Arrow Function으로

function 함수명(파라미터){ 내용 }

let 함수명 = function(파라미터){내용}

let 함수명 = (파라미터) => {내용}

let 함수명 = 파라미터 => {내용} // 파라미터가 1개면 ()생략가능

let 함수명 = 파라미터 => 반환값  //중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략가능

Arrow Function의 특징

✔ this 바인딩 방식이 다름

• 일반 함수는 호출 방식에 따라 this가 동적으로 결정됨
• 화살표 함수는 상위 스코프(lexical scope)의 this를 유지함

const obj = {
    value: 42,
    normalFunction: function() { console.log(this.value); }, // 42
    arrowFunction: () => { console.log(this.value); }       // undefined
};

obj.normalFunction(); // 42
obj.arrowFunction();  // undefined (this는 외부 스코프 참조)

 

 

✔ 생성자로 사용할 수 없음

const Person = (name) => { this.name = name; }; // 오류 발생

 

✔ arguments 객체를 가지지 않음

function normalFunction() { console.log(arguments); } // 존재함
const arrowFunction = () => { console.log(arguments); } // 오류 발생

---

🔎  꼬리 질문

Q1. 화살표 함수와 일반 함수의 this 바인딩 차이를 설명해주세요.

 

A1. 화살표 함수는 자신의 this를 바인딩하지 않고, 부모(상위) 스코프의 this를 유지합니다. 반면 일반 함수는 호출 방식에 따라 this가 동적으로 결정됩니다. 예를 들어, 객체의 메서드에서 일반 함수는 this가 호출한 객체를 가리키지만, 화살표 함수는 그렇지 않습니다.

const obj = {
    value: 42,
    normalFunction: function() { console.log(this.value); },
    arrowFunction: () => { console.log(this.value); }
};

obj.normalFunction(); // 42
obj.arrowFunction();  // undefined (this는 obj가 아니라 외부 스코프를 참조)

 

Q2. 화살표 함수가 ES6 이전에는 없었는데, 그 이유는 무엇인가요?

A2. ES6 이전에는 함수 선언 방식이 function 키워드뿐이었고, JavaScript는 동적 this 바인딩을 이용한 설계를 기반으로 했습니다. 하지만 비동기 코드나 이벤트 핸들러에서 this 바인딩 문제를 자주 겪었기 때문에, 이를 해결하기 위해 ES6에서 화살표 함수가 추가되었습니다.

 

Q3. 화살표 함수를 사용할 때 주의해야 할 점이 있다면 무엇인가요?

A3. 주요 주의점은 다음과 같습니다.

객체의 메서드에서 화살표 함수 사용 시 주의 → this가 의도치 않게 부모 스코프를 참조

arguments 객체를 사용할 수 없음 → 대신 rest parameter (...args) 사용

생성자 함수로 사용할 수 없음 → new와 함께 사용할 수 없음

prototype을 가지지 않음 → 프로토타입 메서드 정의 불가

 

※ arguments 객체란?

arguments 객체는 일반 함수(function 키워드로 선언한 함수)에서 전달된 인자(arguments)들을 포함하는 유사 배열 객체입니다.  화살표 함수에서는 arguments 객체가 없읍니다.

 

---

6. Express란 무엇이고 왜 필요하며 대안은 무엇이 있는지 설명해주세요.

Express는 Node.js 기반의 경량 웹 프레임워크로, 서버를 쉽게 구축할 수 있도록 도와 주는 라이브러리입니다.

Express의 특징

✅ 간결하고 사용하기 쉬운 API 제공
✅ 라우팅 시스템 지원 (GET, POST, PUT, DELETE 등)
✅ 미들웨어 시스템 지원 → 요청과 응답을 쉽게 제어 가능
✅ 다양한 플러그인 및 라이브러리와 호환 가능

📌 Express로 할 수 있는 것

1️⃣ REST API 서버 구축

const express = require('express');
const app = express();

app.use(express.json());

app.get('/users', (req, res) => {
    res.json([{ id: 1, name: "John Doe" }]);
});

app.post('/users', (req, res) => {
    console.log(req.body);
    res.status(201).send('User created');
});

app.listen(3000, () => console.log('Server running on port 3000'));

✔ HTTP 요청(GET, POST, PUT, DELETE 등)을 처리하여 클라이언트와 데이터를 주고받는 API 서버 구축 가능

2️⃣ 정적 파일 제공 (HTML, CSS, JS)

app.use(express.static('public'));

✔ public 폴더에 있는 파일을 정적 파일로 서빙 가능

3️⃣ 서버 측 렌더링 (SSR, Server-Side Rendering)

// 템플릿 엔진(Pug, EJS, Handlebars 등) 중 Pug와 함께 사용하여 서버에서 HTML을 동적으로 생성
// views/index.pug 파일을 클라이언트에게 렌더링하여 반환
app.set('view engine', 'pug');

app.get('/hello', (req, res) => {
    res.render('index', { title: 'Hello', message: 'Express with Pug' });
});

✔ 템플릿 엔진(Pug, EJS, Handlebars 등)과 함께 사용하여 서버에서 HTML을 동적으로 생성하여 클라이언트에 전달 가능

4️⃣ 사용자 인증 및 JWT 기반 인증 시스템 구축

// 로그인 후 JWT를 발급받아 API 호출 시 인증에 사용
const jwt = require('jsonwebtoken');

app.post('/login', (req, res) => {
    const user = { id: 1, username: req.body.username };
    const token = jwt.sign(user, 'secretkey', { expiresIn: '1h' });
    res.json({ token });
});

✔ JWT, OAuth, 세션 쿠키 등을  활용하여 로그인 및 인증 기능 구현 가능

5️⃣ WebSocket과 결합하여 실시간 기능 구현

const http = require('http');
const { Server } = require('socket.io');

const server = http.createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
    console.log('User connected');

    socket.on('message', (msg) => {
        io.emit('message', msg);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

server.listen(3000, () => console.log('Server running'));

✔ socket.io 같은 라이브러리와 함께 사용하여 실시간 채팅, 알림 시스템, 게임 서버 개발 가능

6️⃣ 미들웨어를 활용한 로깅, 보안, 에러 핸들링

 

const morgan = require('morgan');
const helmet = require('helmet');
const cors = require('cors');

app.use(morgan('dev'));  // 요청 로깅
app.use(helmet());       // 보안 강화
app.use(cors());         // CORS 정책 설정

 

✔ morgan, helmet, cors 등의 미들웨어를 활용하여 보안 및 성능 개선 가능

 

---

🔥 Express를 사용해야 하는 이유

✅ Node.js의 기본 HTTP 모듈보다 사용이 간편함 → 기본 HTTP 모듈은 저수준(low-level)이라 직접 요청을 처리하려면 코드가 많아짐. Express를 사용하면 간결한 코드로 서버 구축 가능!

✅ 라우팅 및 미들웨어 기능 제공 → 특정 URL 요청을 쉽게 처리할 수 있으며, 미들웨어를 활용해 인증, 로깅, 요청 가공 등을 추가 가능!

✅ 미들웨어 기반 확장성 제공 → 로깅, 인증, 보안, 에러 핸들링 등 다양한 기능을 추가하기 용이

✅ 빠르고 가벼움 → 불필요한 기능이 없고, 필요한 기능만 플러그인으로 추가 가능

✅ 웹 애플리케이션 및 REST API 서버 구축이 간편함

✅ 대규모 커뮤니티와 풍부한 문서 지원 → 사용자가 많아 자료가 풍부하고 유지보수가 활발

 

🔥 Express로 빠르고 효율적인 서버 개발 가능! 🚀

---

🚀 Express의 대안

1️⃣ Fastify

✅ Express보다 성능이 뛰어나고 JSON 처리 속도가 빠름
✅ Express와 비슷한 API 구조를 가지면서 더 효율적인 요청 처리 가능

2️⃣ Koa

✅ Express보다 경량화된 프레임워크 (같은 개발자인 TJ Holowaychuk이 개발)
✅ async/await 기반의 미들웨어 체인 작성 가능

3️⃣ NestJS

✅ TypeScript 기반의 구조화된 프레임워크
✅ Angular 스타일의 모듈 시스템 제공 → 대규모 프로젝트에 적합

4️⃣ Hapi.js

✅ 보안과 확장성을 고려한 API 서버 구축용 프레임워크
✅ API 서버 구축에 최적화

 

🔥 Express 외에도 다양한 대안이 있으므로, 프로젝트 특성에 맞는 프레임워크 선택하세요

---

🔎 꼬리 질문

 

Q1. Express에서 미들웨어란 무엇이며, 어떤 역할을 하나요?

A1. Express의 미들웨어는 요청(Request)과 응답(Response) 객체를 가로채어 특정 작업을 수행하는 함수입니다.

예를 들어, 로그 기록, 인증 처리, 요청 데이터 변환 등을 수행할 수 있습니다.

const express = require('express');
const app = express();

app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next(); // 다음 미들웨어로 이동
});

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(3000);

 

Q2. Express와 Fastify의 성능 차이는 어떻게 되며, 어떤 상황에서 Fastify를 사용하는 것이 좋을까요?

A2. Fastify는 Express보다 성능이 뛰어나며, 특히 JSON 처리 속도가 더 빠릅니다. 대규모 API 서버에서 Express보다 더 나은 성능을 기대할 수 있습니다. 하지만 Express는 더 많은 라이브러리와 플러그인이 지원되므로, 작은 프로젝트에서는 여전히 Express가 더 편리할 수 있습니다.

Q3. NestJS는 Express 기반인데, 그렇다면 Express와의 차이점은 무엇인가요?

A3. NestJS는 Express를 기반으로 하지만, 모듈 시스템과 의존성 주입(DI)을 통해 더 구조적인 코드를 작성할 수 있도록 돕습니다. NestJS는 TypeScript를 기본적으로 사용하며, 대규모 프로젝트에 적합한 구조를 제공합니다.

반면 Express는 더 자유로운 방식으로 서버를 구축할 수 있습니다.

 

 

---

※ 참고

 

Arrow Function

- https://codingapple.com/unit/es6-3-arrow-function-why/

 

Express

- https://despiteallthat.tistory.com/139