IT & Mobile

springboot 버전정보를 api로 제공하는 2가지 방법.

1. 1 build.gradle에서 processResources 태스크를 사용하여 애플리케이션 속성 파일에 버전 정보를 주입

// build.gradle
processResources {
    filesMatching('application.properties') {
        expand(project: project)
    }
}

1.2 

# application.properties
app.version=${version}

# application.yml
app:
  version: ${version}

1.3

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class VersionController {

    @Value("${app.version}")
    private String appVersion;

    @GetMapping("/api/version")
    public String getVersion() {
        return appVersion;
    }
}

2. @Autowired BuildProperties buildProperties;를 사용하여 애플리케이션의 빌드 정보에 접근하는 것은 Spring Boot 2.0 이상에서 가능합니다. BuildProperties는 Spring Boot의 org.springframework.boot.info 패키지에 포함된 클래스로, 빌드 시 생성된 META-INF/build-info.properties 파일의 정보를 제공

2.1  build.gradle 1

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-actuator'
    // 기타 의존성들...
}

2.2 build.gradle 2

springBoot {
    buildInfo()
}

2.3 

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.info.BuildProperties;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class VersionController {

    @Autowired
    private BuildProperties buildProperties;

    @GetMapping("/api/version")
    public String getVersion() {
        return buildProperties.getVersion();
    }
}

클라이언트에서 사용 방법.

const AppVersionChecker = () => {
  const [clientVersion, setClientVersion] = useState('1.0.0'); // 클라이언트 버전-> localStorage에 기록해 놓으면 좋을듯.

  useEffect(() => {
    const checkVersion = async () => {
      try {
        // 서버에서 현재 버전을 가져옵니다.
        const response = await axios.get('https://yourserver.com/api/version');
        const serverVersion = response.data.version;

        // 서버 버전과 클라이언트 버전이 다르면 페이지를 새로고침합니다.
        if (serverVersion !== clientVersion) {
          window.location.reload();
        }
      } catch (error) {
        console.error('버전 확인 중 오류 발생:', error);
      }
    };

antd의 Dragger를 custom하게 바꾸는 예제. (목록을 우측으로 )

https://stackoverflow.com/questions/58469157/antd-how-to-display-fileuploadlist-to-the-right-of-dragger-upload 

<Input type={'file'} 과 함께 사용하는 drag&drop 예제.

import React, { useState } from 'react';

function FileUpload() {
  const [files, setFiles] = useState([]);

  const handleDrop = (e) => {
    e.preventDefault();
    const droppedFiles = [...e.dataTransfer.files];
    setFiles(droppedFiles);
  };

  const handleFileInputChange = (e) => {
    const selectedFiles = [...e.target.files];
    setFiles(selectedFiles);
  };

  const handleUpload = () => {
    // 업로드할 파일들을 처리하는 로직을 작성하세요.
    console.log(files);
  };

  return (
    <div
      onDrop={handleDrop}
      onDragOver={(e) => e.preventDefault()}
      style={{
        border: '2px dashed #ccc',
        padding: '20px',
        textAlign: 'center',
        cursor: 'pointer',
      }}
    >
      <input
        type="file"
        style={{ display: 'none' }}
        multiple
        onChange={handleFileInputChange}
        id="fileInput"
      />
      <label htmlFor="fileInput">
        드래그 앤 드롭 또는 클릭하여 파일을 업로드하세요.
      </label>
      <button onClick={handleUpload}>업로드</button>
      {files.map((file, index) => (
        <div key={index}>{file.name}</div>
      ))}
    </div>
  );
}

export default FileUpload;