search

eunja511005 / AutoCoding

0 stars 0 forks source link

Web Server Dream Team 지원 화면 메뉴 추가 #131

Open eunja511005 opened 1 year ago

eunja511005 commented 1 year ago

1. ChatGPT 활용하여 HTML 화면 만들기

웹서버를 개발하려고 하는데 어떤 사람들이 필요할까? 예를들어 디자이너 퍼브리셔 프론트앤드 개발자 백앤드 개발자. 또 어떤 사람들이 필요할까?
웹서버를 개발하려면 다양한 역할의 전문가가 필요합니다. 예를 들어:

1. 디자이너: 사용자 인터페이스(UI) 및 사용자 경험(UX)를 디자인하여 웹사이트나 애플리케이션의 시각적인 부분을 담당합니다.
2. 퍼브리셔: 디자이너가 제작한 디자인을 웹 페이지로 구현하고, 웹 요소들을 배치하여 사용자가 접근할 수 있게 만듭니다.
3. 프론트엔드 개발자: 웹 페이지나 애플리케이션의 사용자 인터페이스를 개발하며, 사용자와 상호작용할 수 있는 기능을 구현합니다.
4. 백엔드 개발자: 서버 측의 로직을 개발하고 데이터베이스와의 상호작용을 다루어 웹 서비스의 기능을 구축합니다.
5. 데이터베이스 관리자: 데이터베이스 설계와 관리를 담당하여 애플리케이션의 데이터를 효율적으로 저장하고 관리합니다.
6. 시스템 관리자: 서버와 네트워크 인프라를 관리하여 웹서버의 안정성과 보안을 유지합니다.

또한 프로젝트에 따라 추가적인 역할이 필요할 수 있습니다. 이러한 역할들이 조화롭게 협력하면 웹서버 개발 프로세스를 효과적으로 진행할 수 있습니다.
좀더 세분화되고 자세한 설명 부탁해
물론입니다! 웹서버를 개발할 때 필요한 역할을 더 자세히 설명해보겠습니다.

1. 디자이너:
   - UI/UX 디자인: 사용자가 웹 페이지나 애플리케이션을 직관적으로 이해하고 사용할 수 있도록 사용자 경험을 디자인합니다.
   - 디자인 도구 사용: Adobe XD, Sketch, Figma 등과 같은 도구를 활용하여 디자인을 생성하고 공유합니다.
   - 일러스트레이션 및 그래픽 디자인: 아이콘, 그래픽 요소, 배경 이미지 등을 디자인하여 웹 페이지를 시각적으로 풍부하게 만듭니다.

2. 퍼브리셔:
   - HTML/CSS/JavaScript 구현: 디자이너가 제작한 디자인을 기반으로 웹 페이지를 구현하며, HTML을 사용하여 구조를 만들고 CSS를 이용하여 스타일을 적용합니다.
   - 반응형 웹 디자인: 다양한 디바이스와 화면 크기에서 웹 페이지가 잘 보이도록 반응형 디자인을 구현합니다.

3. 프론트엔드 개발자:
   - 사용자 인터페이스 개발: 웹 페이지나 애플리케이션의 사용자 인터페이스를 개발하고, 사용자와의 상호작용을 위한 버튼, 폼 등을 구현합니다.
   - 프레임워크 사용: React, Angular, Vue.js와 같은 프론트엔드 프레임워크를 사용하여 웹 페이지의 동적 기능을 구현합니다.

4. 백엔드 개발자:
   - 서버 로직 개발: 클라이언트의 요청을 처리하고 데이터를 가공하여 응답을 생성하는 서버 로직을 개발합니다.
   - 데이터베이스 통합: 데이터베이스와의 상호작용을 위해 SQL 또는 NoSQL 데이터베이스를 사용하여 데이터를 저장하고 검색합니다.
   - 서버 사이드 언어: Node.js, Python(Django), Java(Spring), Ruby on Rails 등을 사용하여 백엔드 로직을 구현합니다.

5. 데이터베이스 관리자:
   - 데이터베이스 설계: 데이터의 구조와 관계를 정의하고, 효율적인 데이터베이스 스키마를 설계합니다.
   - 데이터 관리: 데이터의 추가, 수정, 삭제를 관리하며, 백엔드와 함께 데이터의 무결성과 보안을 유지합니다.

6. 시스템 관리자:
   - 서버 설정 및 관리: 웹 서버의 구성과 설정을 관리하여 안정적인 서비스를 제공합니다.
   - 보안 관리: 웹 서버와 데이터의 보안을 유지하고, 적절한 방화벽 및 보안 프로토콜을 구성합니다.

이러한 역할들은 프로젝트의 복잡성과 범위에 따라 조율되며, 팀원 간의 원활한 협업이 중요합니다.
이렇게 6개 롤을 가지고 HTML 화면을 만들어줘. 이 HTML 화면의 역할은 네가 알려준 각 역할별 롤을 보여 주고 각 역할 별로 지원 할수 있는 링크를 클릭 하도록 해줘. 링크 클릭시 회원 가입 화면으로 이동해서 각 역할 별로 지원 할수 있도록 하고 싶어. 나는 부트 스트랩을 사용중이고 백앤드는 스프링 부트 사용중이야
물론, HTML 화면을 생성하고 역할 별로 지원할 수 있는 링크를 만들어주겠습니다. 여기서는 기본적인 틀을 보여드릴게요. 실제로는 디자인과 상세 기능은 추가적인 작업이 필요할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹서버 개발 지원</title>
    <!-- 부트스트랩 링크 추가 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>웹서버 개발 지원</h1>
        <p>다음 역할 중 하나를 선택하여 지원해주세요:</p>
        <ul>
            <li><a href="/apply/designer">디자이너</a></li>
            <li><a href="/apply/publisher">퍼브리셔</a></li>
            <li><a href="/apply/frontend">프론트앤드 개발자</a></li>
            <li><a href="/apply/backend">백앤드 개발자</a></li>
            <li><a href="/apply/dbadmin">데이터베이스 관리자</a></li>
            <li><a href="/apply/sysadmin">시스템 관리자</a></li>
        </ul>
    </div>
</body>
</html>

위 코드는 각 역할 별로 지원 페이지로 이동할 수 있는 링크를 포함한 기본적인 HTML 구조를 보여줍니다. 각 링크를 클릭하면 `/apply/[role]` 경로로 이동하여 해당 역할에 대한 지원 페이지로 이동할 수 있도록 합니다. 이렇게 생성한 HTML 파일을 부트스트랩을 활용하여 디자인을 더욱 개선하실 수 있습니다.

스프링 부트를 사용하여 백엔드를 구현하고, 해당 경로들에 대한 컨트롤러를 만들어 링크 클릭 시 회원 가입 화면으로 이동하도록 설정하시면 됩니다. 이러한 기능은 백엔드 로직을 구현하면서 조금 더 복잡해질 수 있습니다.
각 역할별로 상세한 롤정의 도 같이 보여줘야지. 그냥 샐랙트 박스처럼 보여 주는게 아니라... 역할 별로 적당한 이미지도 보여 주고 그 이미지 아래 롤별 상세 역할도 보여줘
물론, 각 역할에 대한 이미지와 상세 설명을 포함하여 보여주는 방식으로 업그레이드된 화면을 만들어보겠습니다. 아래는 예시 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹서버 개발 지원</title>
    <!-- 부트스트랩 링크 추가 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>웹서버 개발 지원</h1>
        <p>다음 역할 중 하나를 선택하여 지원해주세요:</p>
        <div class="row">
            <div class="col-md-4">
                <a href="/apply/designer">
                    <img src="designer.jpg" alt="디자이너 이미지">
                    <h3>디자이너</h3>
                    <p>UI/UX 디자인 및 그래픽 디자인을 담당합니다.</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="/apply/publisher">
                    <img src="publisher.jpg" alt="퍼브리셔 이미지">
                    <h3>퍼브리셔</h3>
                    <p>디자인을 웹 페이지로 구현하여 사용자가 접근할 수 있게 만듭니다.</p>
                </a>
            </div>
            <div class="col-md-4">
                <!-- 다른 역할들도 동일한 형식으로 추가 -->
            </div>
        </div>
    </div>
</body>
</html>
위 코드는 이미지와 함께 각 역할에 대한 상세 설명을 보여주는 방식의 HTML 구조를 보여줍니다. 각 역할에 대한 이미지 파일은 `img` 폴더에 저장되어 있다고 가정합니다. 역할마다 이미지와 설명을 추가하면서 이러한 디자인을 보다 상세하게 커스터마이징하실 수 있습니다. 

백엔드는 각 역할에 대한 페이지로 연결되는 경로에 대한 컨트롤러 및 뷰를 구현하여 링크 클릭 시 회원 가입 화면으로 이동할 수 있도록 설정하시면 됩니다.
6개 가지 역할 모두 지원 할수 있도록 전체 소스 보여줘
물론, 여기에 각 역할을 지원할 수 있는 전체 HTML 소스 코드를 보여드리겠습니다. 아래 코드를 참고하여 역할마다 이미지와 상세 설명이 표시되며, 링크를 클릭하면 해당 역할의 지원 페이지로 이동할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹서버 개발 지원</title>
    <!-- 부트스트랩 링크 추가 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>웹서버 개발 지원</h1>
        <p>다음 역할 중 하나를 선택하여 지원해주세요:</p>
        <div class="row">
            <div class="col-md-4">
                <a href="/apply/designer">
                    <img src="designer.jpg" alt="디자이너 이미지">
                    <h3>디자이너</h3>
                    <p>UI/UX 디자인 및 그래픽 디자인을 담당합니다.</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="/apply/publisher">
                    <img src="publisher.jpg" alt="퍼브리셔 이미지">
                    <h3>퍼브리셔</h3>
                    <p>디자인을 웹 페이지로 구현하여 사용자가 접근할 수 있게 만듭니다.</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="/apply/frontend">
                    <img src="frontend.jpg" alt="프론트앤드 개발자 이미지">
                    <h3>프론트앤드 개발자</h3>
                    <p>웹 페이지의 사용자 인터페이스 및 기능을 개발합니다.</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="/apply/backend">
                    <img src="backend.jpg" alt="백앤드 개발자 이미지">
                    <h3>백앤드 개발자</h3>
                    <p>서버 측의 로직과 데이터 처리를 담당합니다.</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="/apply/dbadmin">
                    <img src="dbadmin.jpg" alt="데이터베이스 관리자 이미지">
                    <h3>데이터베이스 관리자</h3>
                    <p>데이터베이스 설계 및 관리를 담당합니다.</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="/apply/sysadmin">
                    <img src="sysadmin.jpg" alt="시스템 관리자 이미지">
                    <h3>시스템 관리자</h3>
                    <p>서버와 네트워크 인프라를 관리하여 웹 서비스의 안정성과 보안을 유지합니다.</p>
                </a>
            </div>
        </div>
    </div>
</body>
</html>

이 코드는 각 역할을 나타내는 이미지와 상세 설명이 포함된 화면을 만들어줍니다. 역할에 맞는 이미지 파일은 `img` 폴더에 저장되어 있다고 가정하였습니다. 해당 이미지와 설명을 업데이트하여 원하는 디자인을 만드시면 됩니다.

또한 백엔드는 각 역할에 대한 지원 페이지로 이동하는 경로에 대한 컨트롤러 및 뷰를 구현하여 링크를 클릭하면 회원 가입 화면으로 이동할 수 있도록 설정하시면 됩니다.
카드를 사용하는건 어떨까? 좀더 디자인이 훌륭한 HTML좀 부탁해. 필요하면 폰트어썸도 사용하고 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹서버 개발 지원</title>
    <!-- 부트스트랩 링크 추가 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 폰트어썸 링크 추가 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
        .role-card {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 10px;
            text-align: center;
        }

        .role-icon {
            font-size: 3rem;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center">웹서버 개발 지원</h1>
        <p class="text-center">다음 역할 중 하나를 선택하여 지원해주세요:</p>
        <div class="row">
            <div class="col-md-4">
                <div class="role-card">
                    <i class="fas fa-paint-brush role-icon"></i>
                    <h3>디자이너</h3>
                    <p>UI/UX 디자인 및 그래픽 디자인을 담당합니다.</p>
                    <a href="/apply/designer" class="btn btn-primary">지원하기</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="role-card">
                    <i class="fas fa-desktop role-icon"></i>
                    <h3>퍼브리셔</h3>
                    <p>디자인을 웹 페이지로 구현하여 사용자가 접근할 수 있게 만듭니다.</p>
                    <a href="/apply/publisher" class="btn btn-primary">지원하기</a>
                </div>
            </div>
            <!-- 다른 역할들도 동일한 형식으로 추가 -->
        </div>
    </div>
</body>
</html>
eunja511005 commented 1 year ago

2. 메뉴 추가

1. autoCoding1로 로그인
2. Admin > Menu > Menu List로 이동
3. 메뉴 등록

image  

4. message.properties 3형제 등록
menu.webServerDeveloperRegister=웹 서버 개발자 등록
page.title.webServerDeveloperRegister=웹 서버 개발자 등록

 

5. Controller 생성

image  

6. JSP 일단 복사하여 생성
7. 서버 재시작해야 message.properties 파일을 인식해서 추가된 메뉴가 보임
8. 로그인 해서 해당 메뉴 클릭해어 메뉴 접근 권한에 Any로 등록 됨
9. 서버 재시작해야 메뉴 접근 권한이 적용 되어 Any로 접근 가능
10. ChatGPT가 생성해준 HTML 이용해서 화면 수정
eunja511005 commented 1 year ago

쿼리문 이관

INSERT INTO WASADMIN.ZTHH_MENU
(ID, CATEGORY, MENU_LEVEL, MENU_ID, MENU_PATH, MENU_ICON, MENU_ORDER, PARENT_MENU_ID, DEL_YN, CREATE_ID, CREATE_DT, UPDATE_ID, UPDATE_DT, MENU_AUTH)
VALUES('menu_e94fe56f-9b1d-4617-85e2-12b5bcb4287a', 'Interface', 2, 'menu.webServerDeveloperRegister', '/webServerDeveloperRegister/list', 'N/A', 11, 'layout', 'N', NULL, TIMESTAMP '2023-08-15 09:19:56.486077', NULL, TIMESTAMP '2023-08-15 09:19:56.486077', 'ROLE_ANY');

INSERT INTO WASADMIN.ZTHH_MENUCONTROL
(ID, URL, "METHOD", ROLE_ID, DEL_YN, CREATE_ID, CREATE_DT, UPDATE_ID, UPDATE_DT, LOG_YN, LOG_DATA_YN)
VALUES('menuControl_90807956-c22f-4e99-b812-6fdf2bd15187', '/webServerDeveloperRegister/list', 'GET', 'ANY', 'N', 'autoCoding1', TIMESTAMP '2023-08-15 09:42:26.483813', 'autoCoding1', TIMESTAMP '2023-08-15 09:42:26.483813', 'Y', 'N');
eunja511005 commented 1 year ago

한글 깨짐

message.properties 파일을 이용하여 javascript 파일에서 다국어 처리시 한글 깨짐 현상 발생

image

eunja511005 commented 1 year ago

한글 깨짐 톰캣 설정 참고 싸이트

https://blog.naver.com/baekmg1988/221302236018

eunja511005 commented 1 year ago

톰캣 설정도 바꿔 보고 내장 톰캣 사용하도록 해 보고 별 짓을 다해도 한글 깨짐 서버 이관하면 발생해서 유니코드 이스케이스 형식으로 변환 하도록 함. 아래 싸이트에서 변환 하면 됨. 그런데 문제는 변환후 %20을 스페이스로 변경해 줘야 한다. 일괄로 replacceAll 하면 됨.

https://www.online-toolz.com/tool/unicode-decoder-encoder/ko

eunja511005 commented 1 year ago

ps -ef | grep java kill -9 11232 mvn package -Dmaven.test.skip=true java -Dfile.encoding=UTF-8 -jar /home/opc/git/AutoCoding/target/demo-0.0.1-SNAPSHOT.jar

eunja511005 commented 1 year ago

자바에서 유니코드 이스케이프 형식으로 인코딩 디코딩 하는 API

import org.apache.commons.text.StringEscapeUtils;

public class UnicodeEscapeExample {
    public static void main(String[] args) {
        String original = "안녕하세요";
        String escaped = StringEscapeUtils.escapeJava(original);
        System.out.println(escaped); // 출력: \uc548\ub155\ud558\uc138\uc694
    }
}

 

public class UnicodeDecodeExample {
    public static void main(String[] args) {
        String escaped = "\\uc548\\ub155\\ud558\\uc138\\uc694";
        String decoded = decodeUnicodeEscapes(escaped);
        System.out.println(decoded); // 출력: 안녕하세요
    }

    public static String decodeUnicodeEscapes(String input) {
        String result = input.replaceAll("\\\\u([0-9a-fA-F]{4})", "\\u$1");
        return new String(result.getBytes(), StandardCharsets.ISO_8859_1);
    }
}