포스코DX X 비트교육센터 6기 - build & deploy

webpack.config.js

   entry: path.resolve(`src/index.js`),
        output: {
            path: path.resolve('../backend/src/main/resources'),
            filename: 'assets/js/main.js',
            assetModuleFilename: 'assets/images/[hash][ext]'
        },

.
.
.

 proxy: {
                '/api': 'http://localhost:8080'
            },
            static: {
                directory: path.resolve('./public')
            },

path.resolve는 Node.js의 내장 모듈인 path를 사용하여 파일 경로를 해결하는 함수 (절대경로로 반환해줌)
src/index.js를 절대 경로로 변환하는 이유는 Webpack이 번들 작업을 수행할 때, 어디에서 소스 코드를 가져오고 번들된 결과물을 어디에 저장할지를 명확하게 지정하기 위해서
entry 설정은 애플리케이션의 시작점
output 설정은 번들된 JavaScript 파일을 어디에 저장할 것인지를 정의

package.json

"scripts": {
    "build": "npm run build:fe && npm run build:be",
    "dev": "concurrently \"npm run dev:be\" \"npm run dev:fe\" --kill-others",

    "build:be": "cd ../backend && mvn clean package",
    "dev:be": "cd ../backend && mvn spring-boot:run",

    "build:fe": "npx webpack --config config/webpack.config.js --mode production",
    "dev:fe": "npx webpack serve --config config/webpack.config.js --progress --mode development"
  },

프로젝트 사용 명령어 스크립트를 관리
start(npm start)를 제외한 모든 스크립트는 npm run ___ 으로 실행한다.

“build:be”: 이 스크립트는 백엔드 (backend) 애플리케이션을 빌드
“build:fe”: 이 스크립트는 프론트엔드 (frontend) 애플리케이션을 빌드
“dev”: 이 스크립트는 백엔드와 프론트엔드 개발 서버를 동시에 실행. concurrently 패키지를 사용하여 “npm run dev:be” 및 “npm run dev:fe”를 병렬로 실행 + 다른 프로세스 종료
“dev:be”: 이 스크립트는 백엔드 개발 서버를 실행
“dev:fe”: 이 스크립트는 프론트엔드 개발 서버를 실행

Thymeleaf Starter

<!-- Thymeleaf Starter -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

Thymeleaf라는 템플릿 엔진을 Spring Framework 프로젝트에서 사용하기 위한 도구나 라이브러리 중 하나.
Thymeleaf는 HTML, XML, 또는 다른 마크업 문서를 생성하는 데 사용

emaillist/backend/src/main/resources/templates/index.html 파일 생성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>React Practices</title>
</head>
<body>
  <div id="root"></div>
  <script src="/assets/js/main.js"></script>
</body>
</html>

서버에서 동적인 데이터 삽입: Thymeleaf를 사용하면 서버 측에서 동적으로 데이터를 생성하여 HTML에 삽입할 수 있습니다. 이를 통해 서버에서 클라이언트로 동적인 컨텐츠를 전송
React 애플리케이션의 통합: <div id="root"></div> 부분은 React 애플리케이션을 마운트할 곳으로, React가 이 부분에 UI를 생성. 이렇게 하면 서버 측에서 Thymeleaf를 사용하여 동적인 부분을 렌더링하고, 클라이언트 측에서 React를 사용하여 동적인 UI를 제공.
자바스크립트 파일 로드: 부분은 클라이언트 측에서 실행될 자바스크립트 파일을 로드하는 역할. 이 부분에서는 React 애플리케이션의 메인 자바스크립트 파일을 가져와서 실행.

index 파일을 controll하는 controller

package com.poscodx.emaillist.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class LandingController {

	@RequestMapping("")
	public String index() {
		return "index";
	}

	@GetMapping("favicon.ico")
	@ResponseBody
	public void returnNoFavivon() {
	}
}

application.yml에서 thymeleaf 관련 설정 추가

Spring Boot 애플리케이션에서 Thymeleaf 템플릿 엔진을 사용하기 위함

 web:
      resources:
         static-locations: classpath:/assets/

   thymeleaf:
      prefix : classpath:templates/
      check-template-location: true
      mode: HTML5
      suffix : .html
      cache : false

frontend index.js

backend에서 production profile로 실행되는 경우에 (배포가 아닌 개발상황인 경우)

if(process.env.NODE_ENV === 'production') {
  console.log = () => {};
  console.error = () => {};
  console.debug = () => {};
  console.info = () => {};     
}

개발 환경과 프로덕션 환경에서 로깅(Logging)을 다르게 설정하기 위한 용도.
보통, 개발 환경에서는 다양한 로그 메시지를 콘솔에 출력하여 디버깅을 도와주고, 프로덕션 환경에서는 로그를 최소화하여 성능을 향상시킨다.