거니의 velog

CRA 환경에서 FSD 아키텍처 적용하기

Unlimited00 — Tue, 15 Apr 2025 11:17:18 +0900

아래는 Create React App(CRA) 환경에서 Feature-Sliced Design(FSD) 아키텍처를 적용할 때의 예시 구조와 간략한 코드 샘플입니다. 실제로는 프로젝트의 규모나 팀 상황에 따라 세부 구조나 네이밍을 조정해야 하지만, 전반적인 디렉터리 레이아웃과 개념을 잡는 데 도움이 될 것입니다.

1. 폴더 구조 예시

FSD에서는 일반적으로 다음과 같은 레이어(layer) 가 사용됩니다:

app/: 루트 애플리케이션 레벨 설정 (Provider, 라우팅, 전역 스타일 등)
processes/ (선택): 사용자 인증, 빌링 처리 등 전역적·비즈니스 크로스컷 기능
pages/: 페이지 단위 (URL 단위)로 구성
widgets/: 화면에서 주요 UI 블록(헤더, 푸터, 사이드바 등)
features/: 특정 기능(검색, 로그인, 코멘트 작성 등)
entities/: 도메인 엔티티(사용자, 게시글, 상품 등) + 비즈니스 로직
shared/: 전역 유틸, 재사용 가능한 컴포넌트, 타입, 함수 등
assets/: 이미지, 폰트, 글로벌 스타일 등

예시는 다음과 같습니다:

src/
├── index.js                # [CRA 필수] 앱 진입점
├── app/
│   ├── providers/
│   │   └── store.js          # Redux Store, 혹은 React Query 설정 등
│   ├── App.js                # 전역 라우팅, 레이아웃 등
├── processes/
│   └── <...>                 # (선택) 인증, 빌링 등의 전역적 비즈니스 로직
├── pages/
│   └── HomePage/
│       ├── ui/
│       │   └── HomePage.jsx  # 페이지 UI
│       └── index.js          # HomePage 관련 설정/내보내기
├── widgets/
│   └── Header/
│       ├── ui/
│       │   └── Header.jsx    # 헤더 UI
│       └── index.js
├── features/
│   └── userAuth/
│       ├── ui/
│       │   └── LoginForm.jsx # 로그인 UI 컴포넌트
│       ├── model/
│       │   └── useLogin.js   # 로그인 상태, 훅, 액션 로직 등
│       └── index.js
├── entities/
│   └── user/
│       ├── model/
│       │   └── userSlice.js  # Redux slice, Recoil atom, Zustand store 등
│       ├── lib/
│       │   └── userApi.js    # API 호출 로직, DTO 변환 등
│       ├── types/
│       │   └── index.js      # 사용자 타입 정의(TypeScript 시)
│       └── index.js
├── shared/
│   ├── config/
│   │   └── index.js          # 환경변수, 전역 설정 등
│   ├── api/
│   │   └── httpClient.js     # axios, fetch 래퍼 등
│   ├── ui/
│   │   └── Button.jsx        # 재사용 가능한 디자인 컴포넌트
│   ├── lib/
│   │   └── helpers.js        # 공통 헬퍼함수
│   └── index.js
└── assets/                # 이미지, 폰트, 글로벌 스타일 등

폴더 이름과 구조는 FSD의 핵심 개념
을 지키되, 팀의 합의에 따라 조정해도 됩니다.

예:

widgets 대신 components 를 쓰는 경우도 있고,

processes 레이어가 불필요하면 생략할 수도 있습니다.

2. 예시 코드 스니펫

2.1 app/index.js

CRA에서 기본적으로 제공되는 index.js(또는 main.js) 파일입니다. 전역 Store, Router, Error Boundary 등을 제공할 수 있습니다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from './app/App';
import { Provider } from "react-redux";
import { store } from "./providers/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

2.2 app/providers/store.js

Redux를 사용한다고 가정한 예시입니다. (React Query, Zustand 등 다른 상태 관리도 유사하게 구성)

import { configureStore } from "@reduxjs/toolkit";
import { userReducer } from "entities/user";

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

2.3 app/App.js

전역 라우팅을 담당하는 컴포넌트 예시입니다.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { HomePage } from "pages/HomePage";
import { Header } from "widgets/Header";

function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* 라우트 추가 가능 */}
      </Routes>
    </Router>
  );
}

export default App;

2.4 pages/HomePage/ui/HomePage.js

HomePage에서 필요한 상태나 로직은 features나 entities에서 가져다가 사용합니다.

import React from "react";
import { LoginForm } from "features/userAuth";
import "./HomePage.css";

export const HomePage = () => {
  return (
    <div className="home-page">
      <h1>Welcome to the Home Page</h1>
      <LoginForm />
    </div>
  );
};

2.5 features/userAuth/ui/LoginForm.js

실제 로그인 폼 UI와 관련된 로직입니다. 로그인 액션은 model/useLogin.js에서 가져옵니다.

import React, { useState } from "react";
import { useLogin } from "../model/useLogin";

export const LoginForm = () => {
  const { login, isLoading, error } = useLogin();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    login({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email
        <input 
          type="email" 
          value={email}
          onChange={(e) => setEmail(e.target.value)} 
        />
      </label>
      <label>
        Password
        <input 
          type="password" 
          value={password}
          onChange={(e) => setPassword(e.target.value)} 
        />
      </label>
      {error && <div>{error}</div>}
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Logging in..." : "Login"}
      </button>
    </form>
  );
};

2.6 features/userAuth/model/useLogin.js

useLogin 훅에서는 API 요청을 처리하거나, Redux와 연결하는 등 비즈니스 로직을 구현합니다.

import { useCallback, useState } from "react";
import { loginUser } from "entities/user"; // 가령 userSlice 혹은 user API

export function useLogin() {
  const [isLoading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const login = useCallback(async ({ email, password }) => {
    setLoading(true);
    setError(null);
    try {
      // 실제 API 호출 혹은 Redux 액션 디스패치
      await loginUser({ email, password });
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, []);

  return { login, isLoading, error };
}

2.7 entities/user/model/userSlice.js

Redux Toolkit을 예시로 사용자 데이터를 관리합니다.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { authApi } from "shared/api/authApi";

// Thunk: 비동기 로그인 로직
export const loginUser = createAsyncThunk(
  "user/loginUser",
  async ({ email, password }) => {
    const response = await authApi.login({ email, password });
    return response.data;
  }
);

const userSlice = createSlice({
  name: "user",
  initialState: {
    userData: null,
    status: "idle",
    error: null,
  },
  reducers: {
    logout: (state) => {
      state.userData = null;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(loginUser.pending, (state) => {
        state.status = "loading";
      })
      .addCase(loginUser.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.userData = action.payload;
      })
      .addCase(loginUser.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.error.message;
      });
  },
});

export const { logout } = userSlice.actions;
export const userReducer = userSlice.reducer;

3. 경로 설정(옵션)

CRA에서는 절대 경로(alias)를 쓰려면 jsconfig.json 또는 tsconfig.json에서 설정해야 합니다. 예:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "app/*": ["app/*"],
      "pages/*": ["pages/*"],
      "widgets/*": ["widgets/*"],
      "features/*": ["features/*"],
      "entities/*": ["entities/*"],
      "shared/*": ["shared/*"]
    }
  }
}

이렇게 설정하면 import { LoginForm } from "features/userAuth"; 와 같은 절대 경로를 사용하여 가독성을 높일 수 있습니다.

4. 마무리

위 예시는 CRA 환경에서 FSD 아키텍처를 간단히 적용한 것이며, 실제 프로젝트에서는:

각 레이어(폴더)의 역할과 책임을 팀원들이 명확히 이해해야 합니다.
pages, widgets, features, entities, shared 순으로 의존이 흐르도록(상하 관계 준수) 구조를 지켜야 유지 보수가 수월해집니다.
프로젝트 규모가 작으면 processes 폴더를 생략하거나, 반대로 대형 프로젝트라면 app, pages, widgets 아래 하위 레이어를 좀 더 세분화할 수도 있습니다.

이렇게 FSD를 적용하면 기능과 엔티티별로 코드가 모듈화되어 코드 가독성, 확장성, 유지보수성 모두 크게 개선될 수 있습니다.

시작, 중단, 재시작, 접속 단축 명령

Unlimited00 — Tue, 15 Apr 2025 10:28:02 +0900

# Apache Control
alias apache-start='/poa/server/web/bin/apachectl start'
alias apache-stop='/poa/server/web/bin/apachectl stop'
alias apache-restart='/poa/server/web/bin/apachectl restart'

# Tomcat Control
alias tomcat-start='/poa/server/was/tomcat-9.0.97/bin/startup.sh'
alias tomcat-stop='/poa/server/was/tomcat-9.0.97/bin/shutdown.sh'

# MariaDB Control
alias mariadb-start='/poa/server/db/mariadb/bin/mysqld_safe --defaults-file=/poa/server/db/mariadb/etc/my.cnf --datadir=/poa/server/db/mariadb/data &'
alias mariadb-stop='/poa/server/db/mariadb/bin/mysqladmin shutdown --socket=/poa/server/db/mariadb/mariadb.sock -u poa -p'
alias mariadb-login='/poa/server/db/mariadb/bin/mysql -u poa -p --socket=/poa/server/db/mariadb/mariadb.sock'

자세한 설명

Alias 설정
- alias: 터미널에서 특정 명령어(별명)를 입력했을 때, 뒤따르는 실제 명령어를 대신 실행하도록 만드는 기능입니다.
- 위 예시에서는 Apache, Tomcat, MariaDB를 쉽게 시작·중단·접속할 수 있도록 별명(alias)을 지정하고 있습니다.
Apache 관련 alias
- apache-start: /poa/server/web/bin/apachectl start를 실행 → Apache HTTP Server를 시작
- apache-stop: /poa/server/web/bin/apachectl stop → Apache HTTP Server를 중단
- apache-restart: /poa/server/web/bin/apachectl restart → Apache HTTP Server를 재시작
Tomcat 관련 alias
- tomcat-start: /poa/server/was/tomcat-9.0.97/bin/startup.sh → Tomcat을 시작
- tomcat-stop: /poa/server/was/tomcat-9.0.97/bin/shutdown.sh → Tomcat을 중단
MariaDB 관련 alias
- mariadb-start:
  - mysqld_safe 스크립트를 통해 MariaDB 서버를 안전 모드(백그라운드)로 실행합니다.
  - --defaults-file로 my.cnf 경로를 지정하고, --datadir로 데이터베이스 파일 위치를 설정.
  - 마지막에 &로 백그라운드 실행을 의미합니다.
- mariadb-stop:
  - mysqladmin 명령어로 MariaDB 서버에 종료(shutdown) 명령을 전달합니다.
  - --socket으로 Mariadb 소켓 파일 위치를 지정하고, -u poa -p는 종료 권한이 있는 사용자(여기서는 poa)로 접속하겠다는 의미이며, 비밀번호가 필요(-p).
- mariadb-login:
  - 명령줄에서 MariaDB에 로그인할 때 사용할 명령어입니다.
  - 소켓 파일(mariadb.sock)과 사용자 이름(poa), 비밀번호(-p 필요)를 지정합니다.

요약

위 Alias들은 Apache, Tomcat, MariaDB 각각을 쉽게 시작, 중단, 재시작, 접속할 수 있도록 돕는 단축 명령입니다.
이 설정이 들어간 스크립트 혹은 쉘 설정 파일(.bashrc 등)을 로드하면, 터미널에서 예를 들어 apache-start만 입력해도 Apache 서버가 손쉽게 시작됩니다.
각 별명(alias)이 실제 수행하는 동작은 명령문 뒷부분에 나와 있으며, 서버 관리 및 DB 접속 시 매번 긴 경로를 입력할 필요 없이 간편하게 사용할 수 있습니다.

리눅스 개발환경 세팅

Unlimited00 — Tue, 15 Apr 2025 09:56:54 +0900

실무에서는 프로젝트 성격·배포 파이프라인 구성에 따라 좀 더 합리적인 순서를 정해놓고 설치·셋업을 진행합니다. 모든 구성요소가 서로 어느 정도 독립적이기 때문에, 순서가 바뀌어도 동작 자체는 가능합니다. 다만, 아래와 같은 실무적 추천 순서가 있습니다.

1. OS 환경 & 기초 도구 세팅

리눅스 업데이트 (yum update, apt-get update 등)
필수 패키지/라이브러리 설치 (Java, gcc, openssl, wget 등)
방화벽 설정, 네트워크 설정 확인
이 부분은 가장 먼저 해야, 이후 각종 서버와 도구 설치 시 충돌이 적습니다.

sudo ufw status

sudo ufw allow 9876
sudo ufw allow 9877
sudo ufw allow 9878
sudo ufw allow 9879
sudo ufw allow 9880
sudo ufw allow 9881

#apache tomcat 연결
sudo ufw allow 8009/tcp


#테스트후 was 직접 접근은 차단
sudo ufw deny 9880/tcp
sudo ufw deny 8009/tcp

sudo ufw reload

sudo netstat -tuln | grep 9881

자세한 설명:

sudo ufw status
- **ufw(Ubuntu Firewall)**의 현재 상태(활성화 여부, 규칙 등)를 확인하는 명령어입니다.
- 이 명령어를 통해, 현재 어떤 포트가 열려있는지, 방화벽 정책이 어떤지 등을 확인할 수 있습니다.
sudo ufw allow 9876, sudo ufw allow 9877, sudo ufw allow 9878, sudo ufw allow 9879, sudo ufw allow 9880, sudo ufw allow 9881
- ufw 방화벽에서 9876, 9877, 9878, 9879, 9880, 9881 포트를 열어주는(Allow) 설정입니다.
- 기본적으로 Linux 서버에서 필요한 서비스(프로그램)들이 해당 포트를 통해 외부와 통신할 수 있도록 허용해줍니다.
sudo ufw allow 8009/tcp
- Apache Tomcat에서 AJP(Apache JServ Protocol) 등을 사용할 때 기본적으로 8009 포트를 사용하는데, 이를 허용합니다.
- tcp 프로토콜로 외부에서 접속할 수 있게 허용한다는 의미입니다.
sudo ufw deny 9880/tcp, sudo ufw deny 8009/tcp
- 앞서 허용했던 9880/tcp와 8009/tcp를 이제 차단(deny)하겠다는 설정입니다.
- 테스트가 끝났으므로 WAS에 대한 직접 접속은 방지하고, 프록시나 다른 방식으로만 접근하도록 하겠다는 의도입니다.
sudo ufw reload
- ufw 방화벽 규칙을 다시 로드(reload)하여, 방금 설정한 규칙들을 적용합니다.
sudo netstat -tuln | grep 9881
- netstat 명령어를 사용하여 TCP/UDP 포트 별 Listen 상태를 확인하고, 그 결과 중에 9881이라는 문자열이 포함된 부분만 grep으로 필터링합니다.
- 9881 포트가 실제로 열려 있고, 어떤 프로세스가 사용 중인지 여부 등을 확인할 수 있습니다.
- -tuln 옵션:
  - -t: TCP 소켓 정보만 표시
  - -u: UDP 소켓 정보만 표시
  - -l: Listening 중인 소켓만 표시
  - -n: 호스트명 대신 IP, 포트번호 등 숫자로 된 정보를 표시

2. 버전 관리 시스템(SVN) & 빌드 도구(Maven)

SVN(Subversion) 서버
- 코드 버전을 관리하기 위해 필요
- 이미 다른 서버에서 운용 중이면 건너뛸 수 있음
Maven
- Java 프로젝트 빌드·관리
- 로컬 개발/빌드 환경에서 먼저 설치 후, 서버(젠킨스 등)에서도 사용
- mvn -v로 설치 검증

보통 SVN을 먼저 설치 후 Maven을 설치해도 되고, 반대로 해도 문제는 없습니다.
Maven을 설치해둔 뒤, 바로 레포지토리를 연결하거나, SVN에서 코드를 가져와 빌드할 때 필요하므로
같은 시점에 진행하는 경우가 많습니다.

sudo apt update
sudo apt install build-essential libapr1-dev libaprutil1-dev liblz4-dev libutf8proc-dev zlib1g-dev

# 최신 버전의 Subversion 다운로드
cd /poa/data
wget http://archive.apache.org/dist/subversion/subversion-1.14.3.tar.gz
tar -xzvf subversion-1.14.3.tar.gz
cd subversion-1.14.3

cd /poa/data
wget https://www.sqlite.org/2015/sqlite-amalgamation-3081101.zip
unzip sqlite-amalgamation-3081101.zip

mv sqlite-amalgamation-3081101 /poa/data/subversion-1.14.3/sqlite-amalgamation

cd /poa/data/subversion-1.14.3
./configure --prefix=/poa/svn
make
sudo make install

export PATH=/poa/svn/bin:$PATH

svn --version

sudo ss -tulnp | grep 9876

sudo /poa/svn/bin/svnadmin create /poa/svn/poarepo

/poa/svn/bin/svnserve -d -r /poa/svn/poarepo --listen-port 9876

sudo nano /etc/systemd/system/svn.service

sudo systemctl daemon-reload
sudo systemctl enable svn
sudo systemctl restart svn
sudo systemctl status svn

sudo chmod -R 777 /poa/svn/poarepo

svn://10.100.100.137:9876/poa-web

자세한 설명

패키지 업데이트 및 설치
- apt update 명령어로 패키지 리스트를 최신 상태로 갱신합니다.
- Subversion(이하 SVN)을 소스에서 빌드하기 위해 필요한 라이브러리와 헤더 파일(build-essential, libapr1-dev 등)을 설치합니다.
Subversion 소스 다운로드
- /poa/data 디렉터리로 이동 후, Subversion 1.14.3 버전의 소스 코드를 다운로드합니다.
- 다운로드한 tar.gz 파일을 압축 해제하고, 그 디렉터리로 이동합니다.
SQLite 다운로드
- Subversion은 내부적으로 SQLite를 사용합니다.
- 적절한 버전의 SQLite 코드(sqlite-amalgamation-3081101)를 다운로드해 압축을 풉니다.
SQLite를 Subversion 디렉터리에 이동
- Subversion 빌드 시 참고할 수 있도록, SQLite 소스 코드를 Subversion 소스 트리 내의 sqlite-amalgamation 디렉터리로 이동합니다.
Subversion 빌드 및 설치
- configure 스크립트를 이용하여 빌드 환경을 설정합니다. --prefix=/poa/svn 옵션은 Subversion이 /poa/svn 경로에 설치되도록 하는 설정입니다.
- make 명령어로 소스 코드를 빌드한 뒤, sudo make install으로 실제 파일들을 /poa/svn 디렉터리에 설치합니다.
환경변수 설정
- PATH 환경변수에 Subversion 실행 파일들이 들어있는 /poa/svn/bin 디렉터리를 추가하여, 터미널에서 svn 명령어를 바로 사용할 수 있게 합니다.
Subversion 버전 확인
- Subversion이 정상적으로 설치되었는지, 그리고 설치된 버전이 맞는지 확인합니다.
포트 확인
- ss -tulnp로 현재 열려 있는 TCP/UDP 소켓을 확인하고, grep 9876으로 9876 포트 사용 여부를 확인합니다.
- Subversion 서버가 이 포트를 사용할 계획이므로 사전에 비어 있는지 등을 확인할 수 있습니다.
SVN 리포지토리 생성
- /poa/svn/poarepo라는 이름으로 새로운 SVN 리포지토리를 생성합니다.
- svnadmin create 명령어를 사용하면 SVN 저장소 디렉터리가 만들어지고, 필요한 구조가 생성됩니다.
SVN 서버 실행
- svnserve를 데몬(-d) 모드로 실행합니다.
- -r /poa/svn/poarepo 옵션으로 리포지토리 기본 경로를 /poa/svn/poarepo로 지정하고, --listen-port 옵션으로 9876 포트를 사용합니다.
Systemd 서비스 파일 생성 및 설정
- nano 편집기를 사용하여 /etc/systemd/system/svn.service 파일을 열어, SVN 서버를 systemd 서비스로 등록할 수 있도록 설정 파일을 작성합니다.
- 일반적으로 svn.service 파일에는 [Unit], [Service], [Install] 섹션 등을 작성해, 위에서 명령했던 svnserve가 systemd로 관리되도록 설정합니다.
Systemd 서비스 리로드 및 활성화
- daemon-reload로 systemd가 새 서비스 파일을 인식하도록 합니다.
- enable로 부팅 시 자동으로 SVN 서버가 시작되도록 설정합니다.
- restart 명령어로 서비스를 재시작하고, status로 현재 상태를 확인합니다.
리포지토리 권한 설정
- 리포지토리 디렉터리 전체에 대해 읽기/쓰기/실행 권한을 모두 부여합니다. (테스트 환경에서는 편할 수 있지만, 실제 운영 환경에서는 보안상 문제가 될 수 있으므로 주의가 필요합니다.)
SVN 리포지토리 접근
- 로컬 네트워크 혹은 서버 환경에서 SVN 클라이언트를 통해 10.100.100.137 서버의 9876 포트로 접근하여, poa-web 리포지토리를 사용할 수 있습니다.
- 위 주소는 예시이므로 실제 환경에 맞게 변경할 수 있습니다.

wget https://dlcdn.apache.org/maven/maven-3/3.9.4/binaries/apache-maven-3.9.4-bin.tar.gz

sudo tar -zxvf apache-maven-3.9.4-bin.tar.gz -C /poa
sudo mv /poa/apache-maven-3.9.4 /poa/maven


sudo nano /etc/profile.d/maven.sh
 > export M2_HOME=/poa/maven
 > export PATH=$M2_HOME/bin:$PATH

source /etc/profile.d/maven.sh

mvn clean install

자세한 설명

Maven 다운로드
- Apache Maven의 3.9.4 버전 바이너리 압축 파일(.tar.gz)을 다운로드합니다.
- Maven은 Java 프로젝트를 관리하고 빌드할 때 널리 사용되는 빌드 툴입니다.
압축 해제 및 디렉터리 이동
- 다운로드한 압축 파일을 /poa 경로로 해제합니다(-C /poa).
- 해제 후 생긴 디렉터리 apache-maven-3.9.4를 /poa/maven으로 이름 변경합니다.
- 결과적으로 Maven의 설치 경로는 /poa/maven이 됩니다.
환경 변수 설정 스크립트 작성
- maven.sh라는 이름의 스크립트 파일을 생성(또는 열기)하여, 다음 내용을 추가합니다:
- bash
  
  복사편집
  
  export M2_HOME=/poa/maven export PATH=$M2_HOME/bin:$PATH
- /etc/profile.d 내의 스크립트는 로그인 시 자동으로 실행되어 시스템 전역의 환경 변수를 설정할 수 있습니다.
설정 적용
- 지금 터미널 세션에서만 즉시 환경 변수를 적용하기 위해 source 명령어를 사용합니다.
- 이후에는 새로 로그인하거나 새 터미널을 열었을 때도 자동으로 /etc/profile.d/maven.sh가 실행되어 Maven 경로가 잡히게 됩니다.
Maven 프로젝트 빌드
- Maven 프로젝트 디렉터리 안에서 이 명령을 실행하면, pom.xml 설정에 따라 프로젝트를 클린 빌드(기존 빌드 산출물 제거 후 다시 빌드)하고, 모든 의존성 패키지 다운로드 후 테스트 및 설치 단계를 진행합니다.
- 프로젝트마다 필요한 라이브러리를 자동으로 내려받고, 컴파일, 패키징, 테스트 등을 일괄적으로 수행합니다.

3. Nexus(혹은 Artifactory 등) 저장소

빌드 결과물을 내부 Repository로 관리하려면 필요
Maven이 빌드한 아티팩트(JAR, WAR 등)를 업로드·배포할 저장소이기 때문에
SVN, Maven 설치 후 “Nexus에 빌드된 산출물을 배포”하는 구조가 될 수 있습니다.
- 그래서 보통 SVN, Maven 다음에 Nexus 설치가 논리적으로 이어집니다.

wget https://download.sonatype.com/nexus/3/nexus-3.30.1-01-unix.tar.gz
tar -zxvf nexus-3.30.1-01-unix.tar.gz
sudo mv nexus-3.30.1-01 /poa/nexus
sudo mv sonatype-work /poa/sonatype-work

sudo chown -R poa:poa /poa/nexus
sudo chown -R poa:poa /poa/sonatype-work

sudo nano /poa/nexus/bin/nexus.rc

sudo nano /etc/systemd/system/nexus.service

vi /poa/sonatype-work/nexus3/etc/nexus.properties

sudo nano /poa/nexus/etc/nexus-default.properties

sudo systemctl enable nexus
sudo systemctl start nexus
sudo systemctl status nexus

자세한 설명

Nexus 다운로드 및 압축 해제
- Sonatype Nexus(3.30.1 버전)를 다운로드하고 압축을 풉니다.
- 압축 해제 후 생성된 nexus-3.30.1-01 디렉터리를 /poa/nexus로, sonatype-work 디렉터리를 /poa/sonatype-work로 이동합니다.
- 이렇게 하면 Nexus 실행 관련 파일은 /poa/nexus, 데이터(저장소, 설정파일) 등은 /poa/sonatype-work에 위치하게 됩니다.
소유권 변경
- Nexus 실행 계정(예: poa)으로 /poa/nexus와 /poa/sonatype-work 디렉터리의 소유권을 변경합니다.
- 이로써 Nexus가 파일을 읽고 쓸 수 있도록 적절한 권한을 갖게 합니다.
Nexus 설정 파일(nexus.rc) 수정
- 일반적으로 nexus.rc 파일 안에는 run_as_user 환경변수를 설정하는 내용이 있습니다.
- 예: run_as_user="poa"
- Nexus가 어떤 사용자 계정으로 동작할지를 지정할 수 있습니다.
Systemd 서비스 파일 생성(nexus.service)
- Systemd를 통해 Nexus를 서비스(데몬)로 관리하기 위해 서비스 파일을 작성합니다.
- 예시 내용(참고용):
- ini
  
  복사편집
  
  [Unit] Description=nexus service After=network.target [Service] Type=forking LimitNOFILE=65536 User=poa Group=poa ExecStart=/poa/nexus/bin/nexus start ExecStop=/poa/nexus/bin/nexus stop Restart=on-abort [Install] WantedBy=multi-user.target
- 작성 후 저장하면, systemd가 Nexus를 systemctl 명령어로 제어할 수 있게 됩니다.
포트 및 Nexus 속성 설정(nexus.properties, nexus-default.properties 등)
- vi /poa/sonatype-work/nexus3/etc/nexus.properties
- sudo nano /poa/nexus/etc/nexus-default.properties
- Nexus가 사용할 포트(기본 8081), 호스트 IP, 데이터 디렉터리 위치 등을 이 파일(들)에 설정할 수 있습니다.
- 예시(기본 포트 변경 시):
- ini
  
  복사편집
  
  application-port=8081 application-host=0.0.0.0
- 필요에 따라 HTTPS 설정, Reverse Proxy 설정 등을 진행할 때도 이 파일들을 수정합니다.
Nexus 서비스 활성화 및 실행
- systemctl enable nexus로 서버 부팅 시 자동으로 Nexus가 실행되도록 설정합니다.
- systemctl start nexus로 Nexus 서비스를 실행하고, systemctl status nexus로 현재 상태를 확인합니다.
- 실행 후 Nexus 콘솔 로깅(/poa/sonatype-work/nexus3/log) 등을 통해 문제가 없는지 확인할 수 있습니다.

4. CI/CD 툴 (Jenkins)

Jenkins가 Maven 빌드를 실행하고, SVN에서 코드를 체크아웃하여 Nexus로 올리는 파이프라인을 구성
따라서 Jenkins 설치 시점에는 SVN, Maven, Nexus가 이미 구축돼 있으면 세팅이 쉬워집니다.
- Jenkins → SVN(코드 가져오기) → Maven(빌드) → Nexus(결과물 저장)
Jenkins 이후에는 DB나 WAS와 연동해서 자동 배포 파이프라인을 확장할 수 있습니다.

wget https://get.jenkins.io/war-stable/latest/jenkins.war -P /poa/

java -jar /poa/jenkins.war --httpPort=9878

sudo nano /etc/systemd/system/jenkins.service

[Unit]
Description=Jenkins Daemon
After=network.target

[Service]
User=poa
WorkingDirectory=/poa
Restart=always
Environment="JAVA_HOME=/poa/java/jdk-17.0.2"
Environment="PATH=/poa/java/jdk-17.0.2/bin:/usr/bin:/bin"
ExecStart=/poa/java/jdk-17.0.2/bin/java -DJENKINS_HOME=/poa/jenkins -jar /poa/jenkins.war --httpPort=9878
Environment="JENKINS_HOME=/poa/jenkins"

[Install]
WantedBy=multi-user.target

sudo systemctl daemon-reload
sudo systemctl start jenkins
sudo systemctl enable jenkins

자세한 설명

Jenkins WAR 파일 다운로드
- 최신 안정 버전(Stale Release)의 Jenkins WAR 파일을 /poa/ 디렉터리에 다운로드합니다.
Jenkins 수동 실행 (테스트용)
- 다운로드 받은 jenkins.war를 직접 실행하며, 9878 포트를 통해 접근 가능하도록 설정합니다.
- 이 상태에서 브라우저로 http://<서버IP>:9878에 접속하면 Jenkins 설치 마법사(초기 설정 페이지)에 접속할 수 있습니다.
- 단, 이렇게 실행하면 현재 터미널 세션에 종속되므로, 터미널을 닫으면 Jenkins가 중단됩니다.
Systemd 서비스 파일 생성
- jenkins.service라는 systemd 유닛 파일을 생성(또는 열기)합니다.
- 작성 예시(사용자 제공 내용):
- ini
  
  복사편집
  
  [Unit] Description=Jenkins Daemon After=network.target [Service] User=poa WorkingDirectory=/poa Restart=always Environment="JAVA_HOME=/poa/java/jdk-17.0.2" Environment="PATH=/poa/java/jdk-17.0.2/bin:/usr/bin:/bin" ExecStart=/poa/java/jdk-17.0.2/bin/java -DJENKINS_HOME=/poa/jenkins -jar /poa/jenkins.war --httpPort=9878 Environment="JENKINS_HOME=/poa/jenkins" [Install] WantedBy=multi-user.target
- 주요 설정:
  - User=poa: Jenkins 프로세스를 poa 계정으로 실행합니다.
  - WorkingDirectory=/poa: Jenkins 프로세스가 동작할 기본 디렉터리입니다.
  - Restart=always: 프로세스가 종료되면 자동 재시작하도록 설정합니다.
  - Environment: JAVA_HOME, PATH, JENKINS_HOME 등 필수 환경 변수를 설정합니다.
  - ExecStart: Jenkins를 실행하는 실제 명령어입니다. -DJENKINS_HOME=/poa/jenkins 옵션을 통해 Jenkins 홈 디렉터리를 /poa/jenkins로 지정하고, --httpPort=9878로 포트를 설정합니다.
Systemd 데몬 재로드
- 새로 생성한 jenkins.service 파일을 systemd가 인식할 수 있도록 데몬 정보를 재로드합니다.
Jenkins 서비스 시작 및 활성화
- Jenkins 서비스를 바로 시작하고, 서버 부팅 시 자동으로 실행되도록 활성화(enable)합니다.
접속 확인
- 브라우저에서 http://<서버 IP 또는 도메인>:9878로 접속해서, Jenkins 초기 설정 화면을 확인합니다.
- 최초 실행 시 /poa/jenkins 폴더 내에 initialAdminPassword 파일이 생성되며, 그 암호를 통해 Administrator 계정 초기 설정을 진행할 수 있습니다.

5. DB (Database)

DB가 필요없는 애플리케이션이라면 건너뛸 수 있지만, 실제로는 WAS나 애플리케이션 구동 테스트 시 DB 연결이 필요한 경우가 많습니다.
예시:
- MariaDB, MySQL, PostgreSQL, Oracle 등 원하는 DB 설치
- DB 계정·스키마 생성
WAS 설치 전에 DB가 준비돼 있으면, WAS 설정 시 JDBC 연동, 환경설정 파일(application.yml, server.xml 등)에서 DB URL을 바로 입력해 테스트할 수 있습니다.

cd /poa/data
wget https://downloads.mariadb.com/MariaDB/mariadb-10.11.4/source/mariadb-10.11.4.tar.gz
tar -xvzf mariadb-10.11.4.tar.gz
mv mariadb-10.11.4 /poa/server/db

sudo apt update
sudo apt install cmake gcc g++ libncurses5-dev bison -y

cd /poa/server/db/mariadb-10.11.4
cmake -DCMAKE_INSTALL_PREFIX=/poa/server/db/mariadb
make
sudo make install

mkdir -p /poa/server/db/mariadb/etc
nano /poa/server/db/mariadb/etc/my.cnf
[mysqld]
port = 9880
basedir = /poa/server/db/mariadb
datadir = /poa/server/db/mariadb/data
socket = /poa/server/db/mariadb/mariadb.sock
log-error = /poa/server/db/mariadb/logs/mariadb.err
pid-file = /poa/server/db/mariadb/mariadb.pid
[client]
socket = /poa/server/db/mariadb/mariadb.sock

mkdir -p /poa/server/db/mariadb/data
mkdir -p /poa/server/db/mariadb/logs

/poa/server/db/mariadb/scripts/mysql_install_db --user=poa --basedir=/poa/server/db/mariadb --datadir=/poa/server/db/mariadb/data
sudo -u poa /poa/server/db/mariadb/bin/mysqld_safe --defaults-file=/poa/server/db/mariadb/etc/my.cnf --datadir=/poa/server/db/mariadb/data &

/poa/server/db/mariadb/bin/mysql_secure_installation --socket=/poa/server/db/mariadb/mariadb.sock

/poa/server/db/mariadb/bin/mysql -u root -p --socket=/poa/server/db/mariadb/mariadb.sock

자세한 설명

소스 파일 다운로드 및 준비
- /poa/data 폴더로 이동한 뒤, mariadb-10.11.4 소스를 다운로드하고 압축을 해제합니다.
- 압축 해제 후 폴더명을 /poa/server/db/mariadb-10.11.4로 옮겨 둡니다.
빌드에 필요한 패키지 설치
- Mariadb(또는 MySQL) 소스 빌드에 필요한 cmake, gcc, g++, ncurses, bison 등을 설치합니다.
MariaDB 빌드 및 설치
- cmake 실행 시 -DCMAKE_INSTALL_PREFIX 옵션을 통해 MariaDB 설치 경로를 /poa/server/db/mariadb로 지정합니다.
- make 명령어로 소스를 빌드하고, sudo make install으로 해당 경로에 설치합니다.
설정 파일 작성(my.cnf)
- my.cnf에 다음과 같은 설정을 추가할 수 있습니다:
- ini
  
  복사편집
  
  [mysqld] port = 9880 basedir = /poa/server/db/mariadb datadir = /poa/server/db/mariadb/data socket = /poa/server/db/mariadb/mariadb.sock log-error = /poa/server/db/mariadb/logs/mariadb.err pid-file = /poa/server/db/mariadb/mariadb.pid [client] socket = /poa/server/db/mariadb/mariadb.sock
- mysqld 섹션에서는 포트(9880), 설치 경로(basedir), 데이터 디렉터리(datadir), 소켓 경로 등을 지정합니다.
- client 섹션에서는 클라이언트가 사용할 소켓 경로를 동일하게 맞춰줘야 합니다.
데이터 및 로그 디렉터리 생성
- 데이터베이스 파일 및 로그 파일을 저장할 디렉터리를 미리 만들어 둡니다.
DB 초기화
- MariaDB를 처음 사용할 때 필요한 시스템 테이블 등을 생성합니다.
- --user=poa는 데이터베이스를 실행할 계정(사용자)을 지정합니다.
- --basedir 및 --datadir를 앞서 지정한 경로와 동일하게 맞춰줍니다.
MariaDB 서버 실행
- mysqld_safe 스크립트를 이용해 MariaDB 서버를 백그라운드(&)에서 실행합니다.
- sudo -u poa는 poa 사용자로 프로세스를 실행하겠다는 의미입니다.
- --defaults-file 옵션에 우리가 생성한 my.cnf 파일 경로를 지정하여, 해당 설정을 적용합니다.
보안 설정(mysql_secure_installation)
- 기본 root 암호 설정, 익명 사용자 삭제, 원격 root 접속 차단 등 보안 관련 설정을 간편하게 해주는 스크립트입니다.
- --socket 옵션으로 우리가 지정한 소켓 경로를 설정하여 로컬로 연결합니다.
MariaDB 접속 확인
- 설정한 root 암호를 사용하여 MariaDB에 접속합니다.
- 접속 후 show databases; 등의 명령을 통해 정상 작동 여부를 확인할 수 있습니다.

6. WAS (Web Application Server)

예: Tomcat, WildFly, WebSphere, JEUS 등
DB가 준비된 상태에서 WAS의 데이터소스, 또는 Spring Boot 앱 배포 시 DB 연결 테스트가 가능
“WAS → DB” 연결이 정상 동작하는지 확인 후, 애플리케이션(WAR/JAR) 배포를 진행

cd /poa/data
wget https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.97/bin/apache-tomcat-9.0.97.tar.gz
tar -xvzf apache-tomcat-9.0.97.tar.gz
mv apache-tomcat-9.0.97 /poa/server/was/tomcat-9.0.97

nano /poa/server/was/tomcat-9.0.97/conf/server.xml

/poa/server/was/tomcat-9.0.97/bin/startup.sh

자세한 설명

Tomcat 9.0.97 다운로드 및 압축 해제
- /poa/data 디렉터리로 이동한 뒤, Tomcat 9.0.97 버전을 다운로드합니다.
- 다운로드한 파일(apache-tomcat-9.0.97.tar.gz)을 압축 해제합니다.
- 압축 해제 후 폴더명을 /poa/server/was/tomcat-9.0.97로 이동·정리합니다.
서버 설정 파일(server.xml) 수정
- Tomcat의 주요 설정(포트, 커넥터, 리스너 등)은 conf/server.xml에서 변경할 수 있습니다.
- 예를 들어, 기본 HTTP 포트(8080)를 다른 포트로 바꾸거나, AJP 커넥터(8009) 설정을 변경할 때 이 파일을 수정합니다.
- 필요에 따라 <Connector port="8080" ... /> 부분 등을 원하는 값으로 변경한 뒤 저장합니다.
Tomcat 서버 실행
- Tomcat을 백그라운드에서 실행하는 스크립트입니다.
- 실행 후 브라우저에서 http://<서버IP나도메인>:포트번호/ 로 접속하면 Tomcat 기본 페이지가 표시됩니다.
- 기본 포트(8080)를 그대로 두었다면 http://<서버IP>:8080으로 접근 가능합니다.

7. Web Server (Apache, Nginx 등)

보통 Reverse Proxy나 SSL 종료(HTTPS) 용도로 많이 사용
WAS 앞단에 “로드밸런싱” 또는 “정적 리소스 제공” 등을 담당
WAS가 먼저 깔려있어야, Web 서버에서 ProxyPass나 Nginx 설정을 해서 리다이렉트/프록시 기능을 쓸 수 있습니다.
한편, 개발/테스트 환경에서는 굳이 Web 서버 없이 WAS 단독(Tomcat의 HTTP 포트)으로 쓰기도 합니다.

cd /poa/da
wget https://downloads.apache.org/httpd/httpd-2.4.62.tar.gz
tar -xvzf httpd-2.4.62.tar.gz
mv httpd-2.4.62 /poa/server/web/apache

cd /poa/server/web/apache
./configure --prefix=/poa/server/web --enable-ssl --enable-so
make
sudo make install

/poa/server/web/bin/apachectl start

자세한 설명

Apache HTTP Server 소스 다운로드 및 압축 해제
- /poa/da 디렉터리로 이동 후, httpd-2.4.62.tar.gz를 다운로드합니다.
- 다운로드된 파일을 해제(tar -xvzf)한 뒤, /poa/server/web/apache로 디렉터리명을 변경합니다.
Apache HTTP Server 빌드
- configure 스크립트를 이용해 빌드 환경을 설정합니다.
- --prefix=/poa/server/web 옵션을 사용하면 Apache가 /poa/server/web 경로에 설치됩니다.
- --enable-ssl은 SSL 모듈(HTTPS 기능)을 활성화하고, --enable-so는 동적 모듈 로딩(so 모듈)을 사용할 수 있도록 설정합니다.
- make 명령으로 컴파일을 진행한 후, sudo make install으로 설치합니다.
Apache 서버 구동
- 설치가 완료되면 /poa/server/web/bin/apachectl 스크립트를 사용해 Apache를 시작합니다.
- 웹 브라우저에서 http://<서버 IP>:80 (기본 포트가 80으로 설정되었을 경우)로 접속했을 때 Apache 테스트 페이지가 뜨면 정상 실행된 것입니다.

8. 실제 운영/배포 시나리오 예시

(OS 세팅) → Maven, SVN
- 코드 버전 관리, 빌드 도구 준비
Nexus
- 빌드 산출물 저장소
Jenkins
- 빌드 & 배포 자동화 (SVN → Maven → Nexus 파이프라인)
DB 설치
- DB 계정/권한/스키마 생성
WAS 설치
- DB 연동 설정, 애플리케이션(WAR/JAR) 배포
- Jenkins 파이프라인에서 빌드 결과물을 WAS에 자동 배포
Web Server 설치(아파치, Nginx)
- 최종 외부 트래픽 수신, HTTPS(SSL) 적용, 프록시 → WAS 로 트래픽 전달

주의: 실제로는 회사마다 시스템 정책, 네트워크 구조, 서버 리소스 배치에 따라 순서가 달라질 수 있습니다. “무조건 이 순서”라기보다는,

빌드→배포→운영 흐름에 맞춰 개발/CI/CD 도구(SVN, Maven, Jenkins, Nexus) 먼저,
애플리케이션 구동에 필요한 DB & WAS,
최종 외부 서비스용 Web 서버 순으로 가는 것이 일반적입니다.

Tomcat에서 MariaDB에 접속하기 위해 JDBC 드라이버를 Tomcat lib 폴더에 두고, context.xml에 데이터소스(JNDI) 정보를 설정하는 과정입니다.

JDBC 드라이버를 추가함으로써, Tomcat이 MariaDB에 연결할 때 필요한 클래스( org.mariadb.jdbc.Driver )를 인식할 수 있게 됩니다.
context.xml의 <Resource> 설정을 통해, 웹 애플리케이션은 java:comp/env/jdbc/MyDB라는 JNDI 이름으로 DB 커넥션을 받아올 수 있습니다.
이렇게 하면 각 애플리케이션에서 따로 DB 접속 정보를 관리할 필요 없이, 서버(Tomcat) 레벨에서 통합 관리되어 편리하고 안전합니다.

wget https://downloads.mariadb.com/Connectors/java/connector-java-3.2.0/mariadb-java-client-3.2.0.jar

mv mariadb-java-client-3.2.0.jar /poa/server/was/tomcat-9.0.97/lib/mariadb-java-client-3.2.0.jar

nano /poa/server/was/tomcat-9.0.97/conf/context.xml

<Resource name="jdbc/MyDB"
          auth="Container"
          type="javax.sql.DataSource"
          maxTotal="20"
          maxIdle="10"
          username="your_db_user"
          password="your_db_password"
          driverClassName="org.mariadb.jdbc.Driver"
          url="jdbc:mariadb://localhost:3306/your_database_name"/>

/poa/server/web/bin/apachectl start

/poa/server/was/bin/startup.sh

/poa/server/db/mariadb/bin/mysqld_safe --datadir=/poa/server/db/mariadb/data &

자세한 설명

MariaDB JDBC 드라이버(JAR) 다운로드 및 배치
- 최신 버전의 MariaDB Java Connector(JDBC 드라이버)를 다운로드한 뒤, Tomcat의 lib 디렉터리에 배치합니다.
- 이 JAR 파일이 Tomcat 내부에서 동작하는 웹 애플리케이션들이 org.mariadb.jdbc.Driver를 사용할 수 있게 해줍니다.
Tomcat context.xml 설정
- Tomcat의 context.xml에 데이터 소스 리소스를 등록합니다.
- name="jdbc/MyDB"는 JNDI 리소스 이름이며, 애플리케이션에서 java:comp/env/jdbc/MyDB 형태로 참조할 수 있습니다.
- username, password는 DB 접속 정보이며, driverClassName과 url을 통해 MariaDB에 접속할 드라이버와 URL을 지정합니다.
- maxTotal, maxIdle 등은 커넥션 풀 관련 설정으로, 최대 연결 수, 유휴(Idle) 연결 수를 제한합니다.
서버 실행 순서 예시
- Apache(apachectl start), Tomcat(startup.sh), MariaDB(mysqld_safe) 순으로 서비스를 시작하고 있습니다.
- 실제 운영환경에서는 보통 DB가 먼저 구동되고, Tomcat(또는 WAS)이 다음에 구동되며, Apache가 가장 마지막에 구동되는 경우가 많습니다. (즉, DB → WAS → Web 순서)
  - 하지만 여기서는 명령어를 예시로 보여준 것일 수 있으므로, 순서는 상황에 맞게 조정하시기 바랍니다.
- MariaDB를 실행할 때 --datadir=/poa/server/db/mariadb/data 옵션으로 데이터가 저장될 경로를 지정하고 있습니다.
- & 기호로 백그라운드에서 프로세스를 실행하도록 합니다.
JNDI 데이터소스 사용
- Tomcat이 실행된 뒤에는, 웹 애플리케이션 내에서 java:comp/env/jdbc/MyDB 리소스를 찾아 커넥션을 얻어올 수 있습니다.

이 설정( mod_jk )은 Apache 웹 서버와 Tomcat(Java 애플리케이션 서버)을 AJP 프로토콜로 연결해 주는 다리(브리지) 역할을 합니다.

왜 필요한가?
- Apache 웹 서버(HTTPD)는 정적인 컨텐츠(HTML, CSS, JS, 이미지)를 빠르게 제공하는 데 특화되어 있습니다.
- Tomcat은 Java 기반 웹 애플리케이션을 구동하고 동적인 요청(서블릿, JSP 등)을 처리합니다.
- 이 둘을 한 서버에서 함께 사용하거나, 외부에선 Apache만 공개하고 Tomcat은 내부에서만 동작하게 하려면 둘 사이를 연결할 방법이 필요합니다.
- 그 연결을 담당하는 모듈이 mod_jk입니다.
어떻게 동작하나?
1. 사용자가 http://서버/tomcat/무언가 URL로 요청을 보냅니다.
2. Apache는 JkMount 설정을 보고 /tomcat/으로 시작하는 경로는 mod_jk 모듈에게 처리하라고 넘깁니다.
3. mod_jk는 AJP(8009 포트 등)를 통해 Tomcat으로 요청을 전달합니다.
4. Tomcat이 요청을 처리한 뒤 응답을 Apache에 되돌려 주면, Apache가 최종적으로 클라이언트에게 전송합니다.

정리하면, mod_jk는

Apache를 앞단에 두고, Tomcat은 뒤에서 애플리케이션 로직을 처리하도록 구성하고 싶을 때
둘 간의 트래픽(요청/응답)을 AJP 프로토콜로 주고받도록 해 주는 연결 모듈입니다.

cd /poa/data
wget https://downloads.apache.org/tomcat/tomcat-connectors/jk/tomcat-connectors-1.2.50-src.tar.gz
tar -xvzf tomcat-connectors-1.2.50-src.tar.gz
cd tomcat-connectors-1.2.50-src/native
./buildconf.sh
./configure --with-apxs=/poa/server/web/bin/apxs
make
sudo make install

sudo nano /poa/server/web/conf/httpd.conf

LoadModule jk_module modules/mod_jk.so
JkWorkersFile /poa/server/web/conf/workers.properties
JkLogFile /poa/server/web/logs/mod_jk.log
JkLogLevel info
JkMount /tomcat/* ajp13_worker

sudo nano /poa/server/web/conf/workers.properties

worker.list=ajp13_worker
worker.ajp13_worker.type=ajp13
worker.ajp13_worker.host=localhost
worker.ajp13_worker.port=8009
"apachetomcatconn20241205"

자세한 설명

mod_jk 소스 다운로드 및 압축 해제
- Apache Tomcat과 Apache HTTP Server를 연동하기 위해 사용되는 mod_jk(AJP 커넥터)의 소스 코드(1.2.50 버전)를 다운로드하고 압축 해제합니다.
- cd tomcat-connectors-1.2.50-src/native 명령어로 native 디렉터리로 이동합니다. 여기서 빌드를 진행합니다.
빌드 준비(buildconf.sh) 및 설정(configure)
- ./buildconf.sh를 통해 빌드 환경을 설정합니다.
- ./configure 스크립트에서 --with-apxs 옵션을 통해, mod_jk가 컴파일된 후 apxs(Apache eXtension tool)를 사용하여 Apache 모듈로 설치되도록 경로를 지정합니다.
- /poa/server/web/bin/apxs는 이전에 Apache를 /poa/server/web 아래 설치했을 때 함께 생성된 apxs 바이너리 경로입니다.
컴파일 및 설치
- make 명령어로 소스 코드를 컴파일합니다.
- sudo make install을 통해 mod_jk.so 모듈이 Apache 모듈 디렉터리(modules/)로 복사됩니다.
- 설치가 성공적으로 이루어지면 /poa/server/web/modules/mod_jk.so 등의 경로에 모듈이 위치하게 됩니다(설치 설정에 따라 디렉터리가 달라질 수 있음).
Apache 설정 파일(httpd.conf) 수정
- mod_jk 모듈을 Apache에서 사용하기 위해 httpd.conf에 로드 설정을 추가합니다.
  - LoadModule jk_module modules/mod_jk.so: 방금 설치한 모듈을 불러옵니다.
  - JkWorkersFile /poa/server/web/conf/workers.properties: AJP 워커 정보를 정의할 설정 파일의 위치를 지정합니다.
  - JkLogFile /poa/server/web/logs/mod_jk.log: mod_jk 관련 로깅을 저장할 로그 파일 경로를 지정합니다.
  - JkLogLevel info: 로그 레벨(verbosity)을 info로 설정합니다.
  - JkMount /tomcat/* ajp13_worker: /tomcat/으로 시작되는 URL 요청을 ajp13_worker라는 이름의 워커에게(AJP 프로토콜) 넘기도록 지정합니다.
workers.properties 파일 생성
- worker.list에는 사용할 워커들의 이름을 쉼표로 구분하여 나열합니다(여기서는 ajp13_worker만 하나 사용).
- worker.ajp13_worker.type=ajp13는 AJP 버전 1.3 프로토콜을 사용한다는 의미입니다.
- worker.ajp13_worker.host와 port 설정을 통해 Tomcat이 동작 중인 서버(호스트)와 AJP 포트(기본 8009)로 연결합니다.
- Tomcat 서버 server.xml에서 <Connector port="8009" protocol="AJP/1.3" /> 부분이 활성화되어 있어야 합니다.
Apache 재시작
- 설정 파일을 수정한 후, Apache 서버를 재시작해야 적용됩니다.
- 이제 브라우저에서 http://<서버IP 또는 도메인>/tomcat/으로 접근할 경우, Apache가 AJP를 통해 Tomcat으로 요청을 넘기고, Tomcat이 해당 응답을 다시 Apache에 전달하여 클라이언트로 전송합니다.

CREATE DATABASE poa_dev;

CREATE USER 'poa_dev'@'%' IDENTIFIED BY 'poa123';

GRANT ALL PRIVILEGES ON poa_dev.* TO 'poa_dev'@'%';

FLUSH PRIVILEGES;

SHOW DATABASES;

SELECT User, Host FROM mysql.user WHERE User = 'poa_dev';

SHOW GRANTS FOR 'poa_dev'@'%';

자세한 설명

데이터베이스 생성
- poa_dev라는 이름의 새로운 데이터베이스를 생성합니다.
사용자 생성
- poa_dev라는 사용자 계정을 만들고, 비밀번호를 poa123으로 설정합니다.
- '%'는 호스트를 의미하며, %이면 모든 IP(어디서든)에서 접속할 수 있음을 허용합니다.
- 로컬에서만 접속하도록 제한하고 싶다면 'localhost'로 지정할 수 있습니다.
권한 부여
- 새로 만든 poa_dev 사용자에게 poa_dev 데이터베이스 내 모든 테이블(poa_dev.*)에 대한 모든 권한(ALL PRIVILEGES)을 부여합니다.
- 예: SELECT, INSERT, UPDATE, DELETE, CREATE, DROP 등.
권한 적용
- MySQL/MariaDB 서버가 현재 부여된 권한 정보를 즉시 다시 로드하도록 합니다.
- 일반적으로 사용자 또는 권한 관련 변경 후에는 FLUSH PRIVILEGES;를 통해 권한 캐시를 다시 로드해 줍니다.
데이터베이스 목록 확인
- 현재 서버에 존재하는 모든 데이터베이스 목록을 보여줍니다.
- poa_dev가 잘 생성되었는지 확인할 수 있습니다.
사용자 정보 확인
- mysql.user 테이블에서 'poa_dev' 사용자에 대한 정보(사용자명, 호스트)를 조회합니다.
- 여기서 '%'라는 호스트 값이 잘 설정되었는지를 확인할 수 있습니다.
권한 정보 확인
- 특정 사용자('poa_dev'@'%')가 어떤 권한을 가지고 있는지 확인합니다.
- 위에서 GRANT ALL PRIVILEGES ON poa_dev.* 명령어를 내렸으므로, 결과로 GRANT ALL PRIVILEGES ON 'poa_dev'.* TO 'poa_dev'@'%' 같은 내용을 볼 수 있습니다.

CREATE DATABASE poa_ops;

CREATE USER 'poa_ops'@'%' IDENTIFIED BY 'poa123';

GRANT ALL PRIVILEGES ON poa_ops.* TO 'poa_ops'@'%';

FLUSH PRIVILEGES;

SHOW DATABASES;

SELECT User, Host FROM mysql.user WHERE User = 'poa_ops';

SHOW GRANTS FOR 'poa_ops'@'%';

자세한 설명

데이터베이스 생성
- poa_ops라는 이름의 새로운 데이터베이스를 생성합니다.
사용자 생성
- poa_ops 사용자 계정을 만들고, 비밀번호를 poa123으로 설정합니다.
- '%'는 호스트를 의미하며, 어느 IP(어디에서나)에서든 이 사용자로 접속을 허용하도록 설정합니다.
권한 부여
- poa_ops 사용자가 poa_ops 데이터베이스 내의 모든 테이블(poa_ops.*)에 대해 모든 권한(ALL PRIVILEGES)을 갖도록 설정합니다.
- 예를 들어 INSERT, SELECT, UPDATE, DELETE, CREATE, DROP 등의 권한이 포함됩니다.
권한 적용
- MySQL/MariaDB 서버가 현재 부여된 권한을 즉시 반영할 수 있도록 권한 캐시를 재로드합니다.
데이터베이스 목록 확인
- 현재 서버에 생성된 모든 데이터베이스 목록을 표시합니다.
- poa_ops 데이터베이스가 정상적으로 생성되었는지 확인할 수 있습니다.
사용자 정보 확인
- mysql.user 시스템 테이블에서 'poa_ops' 사용자 정보(사용자명, 호스트)를 조회합니다.
- 호스트가 '%'로 설정되어 있음이 확인됩니다.
권한 정보 확인
- 'poa_ops'@'%' 사용자가 어떤 권한을 가지고 있는지 확인합니다.
- 위에서 부여한 대로 GRANT ALL PRIVILEGES ON poa_ops.* TO 'poa_ops'@'%'와 같은 문구가 표시되어야 정상적으로 권한이 부여된 것입니다.

MySQL 사용자 정의 함수 > DB 암복호화

Unlimited00 — Tue, 15 Apr 2025 09:48:44 +0900

1. 암호화

CREATE DEFINER=`poa_dev`@`%` FUNCTION `poa_dev`.`ENC`(input TEXT, key_str TEXT) RETURNS text CHARSET latin1 COLLATE latin1_swedish_ci
    DETERMINISTIC
BEGIN
    DECLARE encrypted_data BLOB;
    
    -- 입력 데이터의 문자셋을 UTF-8로 설정
    SET input = CONVERT(input USING utf8);

    -- AES_ENCRYPT로 암호화 (BLOB 타입으로 암호화)
    SET encrypted_data = AES_ENCRYPT(input, key_str);

    -- 암호화된 데이터를 Base64로 인코딩하여 반환
    RETURN TO_BASE64(encrypted_data);
END

자세한 설명

함수 정의 구문
- 함수 이름: ENC
- 인자: input(TEXT), key_str(TEXT)
- 리턴 타입: TEXT (문자셋은 latin1, 정렬은 latin1_swedish_ci)
- DETERMINISTIC: 같은 입력에 대해서 항상 같은 결과를 반환하는 함수임을 의미합니다. (즉, 외부 상태나 시간 등에 따라 결과가 바뀌지 않는 함수로 선언)
함수 내용
- DECLARE encrypted_data BLOB;
  - 암호화 수행 후 결과를 임시로 저장할 변수를 선언(BLOB 타입).
- SET input = CONVERT(input USING utf8);
  - 들어온 input 텍스트를 UTF-8 문자셋으로 변환.
  - MySQL에서 AES_ENCRYPT를 사용할 때, 입력 데이터를 올바른 인코딩(예: UTF-8)으로 맞춰 주는 것이 중요합니다.
- AES_ENCRYPT(input, key_str);
  - input(평문)을 key_str(암호화 키)로 AES 알고리즘을 이용하여 암호화(결과값은 BLOB).
- RETURN TO_BASE64(encrypted_data);
  - AES_ENCRYPT 결과(이진 데이터)를 Base64로 인코딩하여 TEXT 형태로 반환.
결과적으로
- 이 함수는 문자열과 키를 입력으로 받아, input을 AES 알고리즘으로 암호화한 뒤, 그 암호화 결과를 Base64 문자열로 돌려줍니다.
- 즉, 암호화 + 인코딩 과정을 하나의 함수로 손쉽게 호출할 수 있도록 한 것입니다.

2. 복호화

CREATE DEFINER=`poa_dev`@`%` FUNCTION `poa_dev`.`DECRYPT`(input TEXT, key_str TEXT) RETURNS text CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci
    DETERMINISTIC
BEGIN
    DECLARE decrypted_data BLOB;

    -- AES_DECRYPT 함수로 복호화된 데이터를 BLOB 형식으로 얻기
    SET decrypted_data = AES_DECRYPT(FROM_BASE64(input), key_str);

    -- BLOB 데이터를 UTF-8로 변환하여 반환 (UTF-8로 변환하여 한글 등 멀티바이트 처리)
    RETURN CONVERT(decrypted_data USING utf8mb4);
END;

자세한 설명

함수 정의 구문
- 함수 이름: DECRYPT
- 인자: input(TEXT), key_str(TEXT)
- 리턴 타입: TEXT (문자셋은 utf8mb4, 정렬은 utf8mb4_unicode_ci)
- DETERMINISTIC: 동일한 입력에 대해 언제나 동일 결과가 반환되는 함수임을 명시합니다.
함수 본문
- AES_DECRYPT 함수에, Base64로 인코딩된 암호문(input)을 FROM_BASE64 함수로 디코딩한 결과와 암호화 키(key_str)를 인자로 넘겨, 복호화 결과를 decrypted_data라는 BLOB 변수에 담습니다.
- 복호화된 이진 데이터를 utf8mb4 문자셋으로 변환( CONVERT(decrypted_data USING utf8mb4) )하여 반환합니다.
- 이렇게 하면 한글, 이모지 등 멀티바이트 문자를 비롯한 다양한 문자셋을 제대로 처리할 수 있습니다.
종합
- 이 함수 DECRYPT는 Base64로 인코딩된 AES 암호문을 넘겨받아, 이를 디코딩( FROM_BASE64 )하고 AES_DECRYPT를 통해 평문을 추출한 뒤, 최종적으로 utf8mb4로 인코딩된 텍스트로 반환해 줍니다.

리눅스 > DB 암호화

Unlimited00 — Tue, 15 Apr 2025 09:46:50 +0900

java -cp jasypt-1.9.3.jar org.jasypt.intf.cli.JasyptPBEStringEncryptionCLI input="jdbc:mariadb://10.100.100.138:9881/poa_dev?characterEncoding=UTF8&autoReconnect=true&useSSL=false&autocommit=false" password="dev1" algorithm="PBEWithMD5AndDES"
java -cp jasypt-1.9.3.jar org.jasypt.intf.cli.JasyptPBEStringEncryptionCLI input="poa_dev" password="dev1" algorithm="PBEWithMD5AndDES"
java -cp jasypt-1.9.3.jar org.jasypt.intf.cli.JasyptPBEStringEncryptionCLI input="poa123" password="dev1" algorithm="PBEWithMD5AndDES"



java -cp jasypt-1.9.3.jar org.jasypt.intf.cli.JasyptPBEStringEncryptionCLI input="jdbc:mariadb://10.100.100.138:9881/poa_ops?characterEncoding=UTF8&autoReconnect=true&useSSL=false&autocommit=false" password="dev1" algorithm="PBEWithMD5AndDES"
java -cp jasypt-1.9.3.jar org.jasypt.intf.cli.JasyptPBEStringEncryptionCLI input="poa_ops" password="ops1" algorithm="PBEWithMD5AndDES"

위 내용은 Jasypt 라이브러리의 **CLI(Command Line Interface)**를 이용해 문자열을 암호화하는 명령어 예시입니다.
Jasypt(자이십트)는 Spring Boot나 Java 애플리케이션에서 암호를 쉽게 다룰 수 있도록 도와주는 라이브러리입니다.

주의

예시 명령어에서는 password="" 부분이 암호화를 위한 “마스터 패스워드” 역할을 합니다.

실제 운영 환경에서는 이 값을 안전한 방식으로 관리(환경변수, 별도 보안 시스템)해야 합니다.

PBEWithMD5AndDES 알고리즘은 비교적 구식(약한) 알고리즘으로 간주됩니다. 더 안전한 알고리즘(PBEWithHmacSHA512AndAES_256 등)을 사용하는 것이 권장됩니다.

아래 명령어는 각각 **입력 문자열(input)**을 Jasypt가 암호화하여 콘솔 출력해줍니다.
출력 결과는 예) ENC(~~...) 형태가 되며, 이를 Spring Boot 설정(application.yml 등)에 넣으면 됩니다.

리눅스 명령어

Unlimited00 — Tue, 15 Apr 2025 09:41:38 +0900

1. 기본

- mkdir : 디렉토리 생성
- ls : 목록 확인 (옵션 : -al)
- mv : 파일 잘라서 붙여넣기
- cp : 파일 복사 붙여넣기
- cd : 이동
- vi : 편집 또는 보기 (파일만가능)

2. 권한 관련

- chmod : 파일 또는 디렉터리에 대한 읽기, 쓰기 등 권한 변경
- chown : 파일 또는 디렉터리에 대한 사용자 권한 변경

3. 로그 등 확인 용도(파일)

- cat : 파일 안열고 보기
- tail : 로그 보기 (-f) 옵션시 실시간 확인

4. 프로세스 확인

- ps -ef | grep tomcat

> vi 편집기에서 알고있어야할 딱 기본 명령어
 - a (아무것도 동작안하고 기본 ui에서 클릭시) 현재 커서의 뒤에부터 insert를 할 수 있도록 지원

 > 저장 및 나가기를 할때는 esc를 누른후 : 를 입력 (shift + ;) 명령어 입력
 - wq! (강제저장)
 - q! (강제 나가기)

> 서버 용량 확인
 - df -h

 > 재기동 순서
   - 시작
     > db > was > web
   - 종료
     > web > was > db

- 안쓰는 도커 이미지 확인
docker images -f "dangling=true"

- 특정 id 이미지 삭제
docker rmi 1a91df371477

- 빌드 캐시 정리
docker builder prune -af

- 용량 확인
df -h

- 프로세스 모니터링
top -d 1    # 1초 단위로 새로고침
M : 메모리 사용량 순 정렬
h : 도움말
q : 종료

- 메모리 확인
cat /proc/meminfo

- cpu 확인
cat /proc/cpuinfo 

- 기존에 사용한 명령어 보기
history

- 종료된 컨테이너까지 확인
docker ps -a

톰캣 서버 잡기

Unlimited00 — Fri, 20 Dec 2024 08:38:08 +0900

C:\Windows\System32

netstat /?

netstat -anop -tcp

TASKKILL /?

TASKKILL /F /PID ?????

자세한 설명

C:\Windows\System32
- Windows 운영체제에서 시스템 명령어(예: netstat, taskkill, ipconfig 등)가 위치한 기본 디렉터리입니다.
- 보통 cmd 창(명령 프롬프트)이나 PowerShell에서 이러한 명령어를 실행할 때 자동으로 이 디렉터리를 탐색하므로, 직접 이동할 필요는 없습니다.
netstat /?
- netstat 명령어의 사용법과 옵션들을 확인하는 도움말(Help)을 표시합니다.
- 예:화면에 netstat 명령의 가능한 스위치나 설명이 나타납니다.
netstat -anop -tcp
- 일반적으로 netstat는 네트워크 연결 상태, 포트, 프로토콜, 프로세스 정보 등을 보여주는 명령어입니다.
- Windows에서는 옵션을 약간 다르게 써야 할 수도 있습니다(예: netstat -ano).
- -anop -tcp 같은 옵션을 쓰면, 활성화된 TCP 연결의:
  - -a: 모든 연결 및 포트(리스닝 상태 포함) 표시
  - -n: 숫자 형식(IP 주소, 포트 번호)로 표시
  - -o: 프로세스 ID(PID) 표시
  - -p: 특정 프로토콜 필터(예: TCP)
- 결과적으로, 어떤 프로세스가 어떤 포트를 열어두고 있는지를 PID 단위로 확인할 수 있습니다.
- 예:
  - TCP 연결 및 프로세스 ID(PID)를 숫자 형식으로 표시합니다.
TASKKILL /?
- taskkill 명령어의 도움말을 표시합니다.
- taskkill는 Windows에서 특정 PID(프로세스 ID)의 프로세스를 종료할 때 사용합니다.
- 예:화면에 taskkill의 사용법이 표시됩니다.
TASKKILL /F /PID ?????
- taskkill 명령어로 특정 프로세스를 강제 종료(/F)하는 예시입니다.
- ????? 자리에 종료할 프로세스의 PID(프로세스 ID)를 입력합니다.
- 예:
  - PID가 1234인 프로세스를 강제 종료합니다.
- /F 옵션이 없으면 일반 종료(프로세스가 종료 요청을 받음).
- /F 옵션이 있으면 강제 종료(SOFT 요청을 거부하거나 무시하더라도 프로세스가 종료됨)입니다.

요약

netstat: 현재 열려있는 포트, 연결 상태, 프로세스 식별자(PID) 등을 확인할 수 있는 명령어.
taskkill: 특정 프로세스를 종료하는 Windows 명령어.
-anop -tcp(Windows에선 netstat -ano -p tcp 형태)로 TCP 연결 상태와 PID를 함께 확인한 다음, 그 PID를 taskkill /F /PID <PID번호>로 종료할 수 있습니다.

React > 유용한 커스텀 훅

Unlimited00 — Thu, 7 Nov 2024 11:26:06 +0900

1. useConsolelog

import { useEffect } from 'react';

// 커스텀 훅 정의
function useConsoleLog(value) {
    useEffect(() => {
        if(value) {
            console.log(`${value} : `, value);
        }
    }, [value]);
}

export default useConsoleLog;

2. useCommonCodeList

import { useState, useEffect } from 'react';
import { getCommonCodeListInfo, tokenGetCommonCodeListInfo } from '../api/adminApi';
import fetchData from '../utils/fetchData';
import useAxiosWithAuth from 'hooks/useAxiosWithAuth';

// 공통 코드 리스트를 불러와 라디오, 셀렉트 옵션으로 변환하는 커스텀 훅
const useCommonCodeList = (groupCode) => {
    const axiosInstance = useAxiosWithAuth();
    const loginUser = '100';

    const [commonCodeListData, setCommonCodeListData] = useState([]);

    // 공통코드 리스트를 불러오는 함수
    const fetchCommonCodeList = async () => {
        const postData = { searchComGroupCd: groupCode };
        //await fetchData(getCommonCodeListInfo, setCommonCodeListData, postData);
        try {
            const data = await tokenGetCommonCodeListInfo(axiosInstance, postData);
            setCommonCodeListData(data);
        } catch (error) {
            console.error('Error fetching data: ', error);
        }
    };

    useEffect(() => {
        fetchCommonCodeList();
    }, []);

    // 공통 코드 리스트 데이터
    const commonCodeResultData = commonCodeListData?.resultData?.cmmnCdList;

    ////////////////////////////////////////

    // 라디오 옵션 변환
    const commonCodeRadioOptionFn = () => {
        const options = commonCodeResultData?.map(code => ({
            value: code.comCd,
            title: code.cdNm
        }));
        let commonCodeRadioOption = options;
        return commonCodeRadioOption;
    };

    ////////////////////////////////////////

    // 셀렉트 옵션 변환
    const commonCodeSelectOptionFn = () => {
        const options = commonCodeResultData?.map(code => ({
            id: code.comCd,
            name: code.cdNm
        }));
        let commonCodeSelectOption = options;
        return commonCodeSelectOption;
    };

    return {
        commonCodeResultData,
        commonCodeRadioOptionFn,
        commonCodeSelectOptionFn
    };
};

export default useCommonCodeList;

3. useNavigateWithQuery

import { useMemo } from 'react';

const useNavigateWithQuery = (path, queryParams) => {
    // useMemo를 사용하여 쿼리 스트링이 변경될 때만 새로운 URL을 계산합니다.
    const finalUrl = useMemo(() => {
        const newQueryString = Object.entries(queryParams)
            .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
            .join('&');

        return `${path}?${newQueryString}`;
    }, [path, queryParams]);

    return finalUrl;
};

export default useNavigateWithQuery;

4. JsonDataShowTemp

import React from 'react';

const JsonDataShowTemp = ({ data }) => {
    return (
        <pre>{JSON.stringify(data, null, 2)}</pre>
    );
};

export default JsonDataShowTemp;

5. stringifyJSON

// 응답 확인용 메서드
export const stringifyJSON = (obj, indent = 2) => {
    return JSON.stringify(obj, null, indent);
}

CSS 스크롤바 숨기기

Unlimited00 — Thu, 21 Mar 2024 11:28:08 +0900

.scrollCover {
    height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

CSS Flex 속성

Unlimited00 — Mon, 18 Mar 2024 20:16:14 +0900

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

studiomeal.com

#pond {
  display: flex;
  justify-content: flex-end;
}

#pond {
  display: flex;
  justify-content: center;
}

#pond {
  display: flex;
  justify-content: space-around;
}

#pond {
  display: flex;
  justify-content: space-between;
}

#pond {
  display: flex;
  align-items: flex-end;
}

#pond {
  display: flex;
  justify-content: center;
  align-items: center;
}

#pond {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

#pond {
  display: flex;
  flex-direction: row-reverse;
}

#pond {
  display: flex;
  flex-direction: column;
}

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

#pond {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#pond {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
}

#pond {
  display: flex;
}

.yellow {
  order: 1;
}

#pond {
  display: flex;
}

.red {
  order: -3;
}

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: flex-end;
}

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  order: 1;
  align-self: flex-end;
}

#pond {
  display: flex;
  flex-wrap: wrap;
}

#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#pond {
  display: flex;
  flex-flow: column wrap;
}

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-content: center;
}

#pond {
  display: flex;
  flex-flow: column-reverse wrap-reverse;
  align-content: space-between;
  justify-content: center;
}

#pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  align-content: space-between;
  justify-content: center;
}