# AI와 노코드 웹빌더로 서비스 만들기

- 작성자: [참새](https://community.clauders.ai/member/imported-member-yjQGVOIgPO)
- 공간: [문과생도 AI](https://community.clauders.ai/moongwa-ai)
- 게시: 2024-01-29
- 연재: [문과생도 AI 시즌 1](https://community.clauders.ai/series/moongwa-ai-season-1) 1/3편
- 태그: #개발 #문과생도AI
- 주소: https://community.clauders.ai/moongwa-ai/post/ai%EC%99%80-%EB%85%B8%EC%BD%94%EB%93%9C-%EC%9B%B9%EB%B9%8C%EB%8D%94%EB%A1%9C-%EC%84%9C%EB%B9%84%EC%8A%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0-a7245dae-f5c7-897e-b2e8-9ffa17b2e796

---

### 지피티 답변

백엔드 서버 구축을 위해 Python의 Flask 웹 프레임워크를 사용해 보겠습니다. Flask는 가볍고 사용하기 쉬운 웹 프레임워크로, 간단한 백엔드 서버를 빠르게 구축할 수 있습니다. 아래의 단계를 따라 백엔드 서버를 설정하고 기본적인 API를 만들어보겠습니다.

### 1. 필요한 라이브러리 설치

먼저 Flask와 필요한 라이브러리를 설치합니다. 이를 위해 Python의 패키지 관리자인 pip를 사용합니다. 콘솔(명령 프롬프트 또는 터미널)에 다음과 같이 입력합니다:

```
pip install Flask pandas
```

### 2. Flask 애플리케이션 기본 구조 생성

다음으로 Flask 애플리케이션의 기본 구조를 만듭니다. 아래의 코드를 app.py라는 이름의 파일로 저장합니다:

```
from flask import Flask, jsonify, request
import pandas as pd

app = Flask(__name__)

# 데이터 불러오기 (예시 파일 경로)
df = pd.read_csv('your_data.csv')

@app.route('/')
def index():
    return "Hello, Flask!"

@app.route('/search', methods=['GET'])
def search():
    keyword = request.args.get('keyword', '')  # 검색어 가져오기
    if keyword:
        # DataFrame에서 키워드 검색
        search_result = df[df['column_name'].str.contains(keyword, na=False)]
        return jsonify(search_result.to_dict(orient='records'))
    else:
        return jsonify([])

if __name__ == '__main__':
    app.run(debug=True)
```

### 3. 백엔드 서버 실행 및 테스트

작성한 app.py 파일을 실행하여 로컬에서 Flask 서버를 시작합니다:

```
python app.py
```

서버가 실행되면, 웹 브라우저나 API 테스팅 툴 (예: Postman)을 사용하여 [http://127.0.0.1:5000/에](http://127.0.0.1:5000/에) 접속하거나, [http://127.0.0.1:5000/search?keyword=your_keyword로](http://127.0.0.1:5000/search?keyword=your_keyword로) 검색 기능을 테스트할 수 있습니다.

### 4. 데이터와 컬럼명 변경

위의 예시에서는 your_data.csv와 'column_name'을 실제 데이터 파일 경로와 검색하고자 하는 컬럼명으로 변경해야 합니다. 또한, 데이터 파일이 같은 디렉토리에 있어야 합니다.

### 5. 추가 기능 개발

필요에 따라 추가 기능 (예: 데이터 업데이트, 사용자 인증, 에러 처리 등)을 개발합니다. Flask는 확장성이 뛰어나 다양한 기능을 쉽게 추가할 수 있습니다.

이 단계들을 완료하면 기본적인 Flask 백엔드 서버와 간단한 검색 API가 준비됩니다. 이 서버를 사용하여 아임웹

과 연동할 수 있도록 프론트엔드 인터페이스를 개발하고, 사용자가 웹 페이지에서 검색을 수행할 수 있도록 구성할 수 있습니다.

### 추가 팁

- **API 테스트와 디버깅**: 개발 과정에서 API의 동작을 테스트하고 디버깅하는 것이 중요합니다. 이를 위해 Postman과 같은 API 테스팅 도구를 사용할 수 있습니다.
- **데이터 보안**: 사용자 데이터를 처리할 때는 보안과 개인정보 보호를 고려해야 합니다. HTTPS 프로토콜을 사용하여 데이터 전송을 암호화하고, 필요한 경우 사용자 인증 및 권한 관리를 구현합니다.
- **에러 처리**: 사용자가 잘못된 요청을 보내거나 서버 내부에서 오류가 발생할 수 있습니다. 이러한 상황을 대비하여 적절한 에러 메시지를 반환하고, 로깅을 통해 오류를 추적할 수 있도록 합니다.
- **서버 성능 및 확장성**: 사용자의 요청이 많아질 경우 서버의 성능과 확장성 문제가 발생할 수 있습니다. 이를 대비하여 캐싱, 로드 밸런싱, 클라우드 서비스의 확장 기능 등을 고려할 수 있습니다.
- **유지보수 및 업데이트**: 서버를 지속적으로 운영하면서 발생할 수 있는 문제들에 대비하고, 정기적으로 시스템을 업데이트하며 유지보수를 진행합니다.

이제 백엔드 서버 구축의 기본적인 과정을 알게 되었으니, 위의 단계를 참고하여 서버를 구축하고, 필요한 기능을 추가하여 개발을 진행해보시기 바랍니다. 프로젝트의 성공적인 완수를 기원합니다!

## 추가 질문

그러면 이 서버에 따른 아임웹에 넣을 프론트 코드를 짜줘 팁을 6000$ 줄게

### 지피티 답변

아임웹에 넣을 수 있는 기본적인 프론트엔드 코드를 작성해 드리겠습니다. 이 코드는 사용자가 검색어를 입력하고, 검색 버튼을 누르면 Flask 백엔드 서버에 요청을 보내고, 결과를 웹 페이지에 표시하는 기능을 수행합니다. HTML, CSS, JavaScript (AJAX)를 사용하여 구현됩니다.

### HTML (검색 폼 및 결과 표시)

아임웹의 HTML/CSS/JavaScript 위젯에 아래의 HTML 코드를 삽입합니다.

```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>검색 서비스</title>
    <style>
        /* 간단한 CSS 스타일 */
        #searchForm {
            margin: 20px;
        }
        #results {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="searchForm">
        <input type="text" id="keyword" placeholder="검색어를 입력하세요">
        <button onclick="search()">검색</button>
    </div>

    <div id="results">
        <!-- 검색 결과가 여기에 표시됩니다 -->
    </div>

    <script src="<[https://code.jquery.com/jquery-3.6.0.min.js>"></script>](https://code.jquery.com/jquery-3.6.0.min.js>)
    <script>
        function search() {
            var keyword = $('#keyword').val();
            $.ajax({
                url: '<[http://127.0.0.1:5000/search?keyword=>'](http://127.0.0.1:5000/search?keyword=>') + keyword,
                method: 'GET',
                success: function(data) {
                    displayResults(data);
                },
                error: function() {
                    alert('검색 결과를 가져오는 데 실패했습니다.');
                }
            });
        }

        function displayResults(data) {
            var resultsDiv = $('#results');
            resultsDiv.empty();

            if (data.length === 0) {
                resultsDiv.append('<p>검색 결과가 없습니다.</p>');
            } else {
                var list = $('<ul>');
                $.each(data, function(index, item) {
                    list.append('<li>' + item.column_name + '</li>'); // 여기서 'column_name'은 백엔드에서 반환되는 JSON의 키에 맞추어 변경해야 합니다.
                });
                resultsDiv.append(list);
            }
        }
    </script>
</body>
</html>
```

### 중요 사항

1. **서버 주소 변경**: 위의 코드에서 [http://127.0.0.1:5000/search는](http://127.0.0.1:5000/search는) 로컬에서 실행 중인 Flask 서버의 주소입니다. 실제 서버를 다른 주소에 호스팅하는 경우, 이 URL을 적절한 서버의 주소로 변경해야 합니다.
2. **결과 표시 커스터마이즈**: displayResults 함수에서 결과를 표시하는 방식을 원하는 형태로 수정할 수 있습니다. 예시에서는 간단한 리스트를 사용했지만, 테이블 형태나 다른 형태로 결과를 표시할 수 있습니다.
3. **크로스 오리진 리소스 공유 (CORS) 문제**: 웹 브라우저의 보안 정책으로 인해, 다른 도메인(또는 포트)에 있는 서버로 AJAX 요청을 보낼 때 CORS 문제가 발생할 수 있습니다. 이를 해결하기 위해 Flask 서버에 CORS 처리를 추가해야 할 수 있습니다. Python의 Flask에서는 flask-cors 라이브러리를 사용하여 쉽게 해결할 수 있습니다.
4. **보안 고려**: 실제 운영 환경에서는 HTTPS를 사용하여 데이터를 암호화하고, 입력 데이터에 대한 검증 및 적절한 에러 처리를 수행하는 것이 중요합니다.
5. **반응형 웹 디자인**: 모바일 사용자를 고려하여 반응형 웹 디자인을 적용하는 것이 좋습니다. CSS 프레임워크인 Bootstrap과 같은 도구를 사용하여 쉽게 구현할 수 있습니다.

위의 코드는 기본적인 구조를 제공하며, 실제 사용 환경에 맞게 수정 및 확장해야 합니다. Flask 백엔드와의 연동을 테스트하고, 필요에 따라 프론트엔드의 기능과 디자인을 개선하여 사용자에게 좋은 경험을 제공하는 서비스를 만들어 보세요. 프로젝트의 성공을 기원합니다!

## 결론

1. 내가 만든 프로그램이 있다면, 그 프로그램을 노코드 웹빌더에 붙이는 것을 GPT를 활용한다면, 아무것도 모르는 상황에서도 단계별로 하나하나씩 시도할 수 있다.

   1. 백엔드 서버 구축을 GPT 질문을 통해서 AWS ElasticBeanStalk으로 올리고, 프론트 코드와 연동 성공
2. GPT와 질문 티키타카를 통해 원하는 바를 이룰 수 있다. 다만, 코딩적 지식이 많을수록 적은량의 질문으로 완성이 가능하다.
3. GPT와 질문 + 구글링 어느정도는 필요 (모든걸 다 물어보면 GPT4 한도 소진이 금방 생길 수 있음)

#문과생도AI