1. React (React 19)

• 왜 사용해야 하는가?

  • 컴포넌트 기반 아키텍처: 복잡한 UI를 재사용 가능한 컴포넌트 단위로 분리하여 관리할 수 있어 유지보수가 쉽습니다.
  • Virtual DOM: 변경 사항만 효율적으로 렌더링해 성능을 향상시킵니다.
  • Hook API: useState, useEffect 등 내장 Hook을 활용하여 함수형 컴포넌트에서 상태 관리와 사이드 이펙트를 간단하게 처리할 수 있습니다.

• 동작 원리 및 예시 코드:

  import React, { useState, useEffect } from "react";
  
  const ExampleComponent = () => {
    const [count, setCount] = useState(0);
  
    useEffect(() => {
      console.log("Component mounted or updated, count:", count);
    }, [count]);
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };
  
  export default ExampleComponent;
  

• 코드 설명

공식 문서:

• React 공식문서: https://react.dev/learn

2. Webpack & Babel

• 왜 사용해야 하는가?
  • Webpack:
    • 모듈 번들러: 애플리케이션의 JavaScript, CSS, 이미지 등을 하나 또는 여러 개의 번들 파일로 묶어줍니다.
    • 코드 분할: 필요한 시점에만 코드를 로드하여 초기 로딩 시간을 줄입니다.
    • 개발 서버 (devServer): Hot Module Replacement(HMR) 등의 기능을 제공해 개발 생산성을 높입니다.
  • Babel:
    • 트랜스파일러: 최신 ES6+ 문법과 JSX를 구형 브라우저에서도 실행 가능한 형태로 변환해줍니다.
• 동작 원리 및 예시 코드:

  • Webpack 예시 설정 (webpack.config.js):

    module.exports = {
      entry: "./src/index.tsx",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
      },
      module: {
        rules: [
          {
            test: /\\.(js|jsx|ts|tsx)$/,
            exclude: /node_modules/,
            use: "babel-loader",
          },
        ],
      },
      devServer: {
        port: 8080,
        historyApiFallback: true,
      },
    };
    

  • Babel 예시 설정 (.babelrc):

    {
      "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
    }
    

  • 코드 설명

공식 문서:

• Webpack 공식 문서: https://webpack.kr/
• Babel 공식 문서: https://babeljs.io/docs/

3. Express

• 왜 사용해야 하는가?

  • 경량 웹 프레임워크: 간결하고 확장 가능한 API를 쉽게 구축할 수 있습니다.
  • 미들웨어 기반: 요청/응답 처리 파이프라인을 유연하게 구성할 수 있습니다.
  • Node.js와 통합: JavaScript 환경에서 백엔드 로직을 작성할 수 있으므로 프론트엔드와 동일한 언어를 사용할 수 있습니다.

• 동작 원리 및 예시 코드:

  import express from "express";
  import bodyParser from "body-parser";
  
  const app = express();
  const port = process.env.PORT || 3001;
  
  app.use(bodyParser.json());
  
  // API 라우트 예시
  app.get("/api/hello", (req, res) => {
    res.json({ message: "Hello, world!" });
  });
  
  app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
  });
  

  • 코드 설명