데이터 분석 part

웹서비스 구현 - 게시판 만들어보기

bleufonce 2025. 2. 16. 16:17

 

 

웹 서비스의 전체 흐름

 

 

 

웹 서비스는 클라이언트(사용자)가 요청을 보내면, 이를 웹 서버와 웹 애플리케이션 서비스(WAS), DBMS가 협력하여 응답을 제공하는 구조이다.

 

  1. 클라이언트가 웹사이트에서 특정 정보를 요청 → 웹 서버에 전달
  2. 웹 서버가 정적 파일이면 바로 응답하고, 동적 데이터가 필요하면 웹 애플리케이션 서비스에 요청
  3. 웹 애플리케이션 서비스가 비즈니스 로직을 처리하고, 필요한 데이터가 있으면 DBMS에서 가져옴
  4. DBMS가 요청한 데이터를 웹 애플리케이션 서비스로 전달
  5. 웹 애플리케이션 서비스가 데이터를 가공하여 클라이언트가 볼 수 있는 HTML/JSON을 생성
  6. 웹 서버가 최종적으로 클라이언트에게 응답
요소 역할
웹 서버 HTTP 요청을 받아 웹 애플리케이션에 전달 (정적 파일 제공)
웹 애플리케이션 서비스
(WAS)
비즈니스 로직 처리, 데이터 요청
DBMS 데이터를 저장하고 제공

 

 

 

웹서비스 로직

웹 서비스의 기본 구조

  • 프론트엔드 (Front-end): 사용자와 직접 상호작용하는 부분으로, 웹 브라우저를 통해 사용자에게 보여지는 화면과 기능을 담당한다. HTML, CSS, JavaScript 등의 언어를 사용하여 개발된다.
  • 백엔드 (Back-end): 웹 서비스의 핵심 로직을 처리하는 부분으로, 서버에서 실행되며 데이터 저장, 처리, 관리 등을 담당한다. 다양한 프로그래밍 언어 (Python, Java, Node.js 등)와 데이터베이스 (MySQL, PostgreSQL 등)를 사용하여 개발된다.
  • 클라우드 (Cloud): 웹 서비스를 운영하는 데 필요한 서버, 스토리지, 네트워크 등의 인프라를 제공하는 환경이다. 클라우드 서비스를 통해 서버 관리 부담을 줄이고 확장성을 확보할 수 있다.
  • 디바이스 (Device): 사용자가 웹 서비스에 접속하는 데 사용하는 장치. (스마트폰, 태블릿, PC 등)

웹 서비스 작동 과정

  1. 사용자 요청 (Request): 사용자가 웹 브라우저를 통해 웹 서비스에 접속하면, 브라우저는 해당 웹 서비스의 주소 (URL)를 서버에 요청한다.
  2. IP 주소 변환: 도메인 이름 (예: naver.com)은 DNS 서버를 통해 실제 서버의 IP 주소로 변환된다.
  3. 백엔드 처리: 서버는 사용자의 요청을 받아들여 적절한 처리를 수행한다. 예를 들어, 웹 페이지의 내용을 데이터베이스에서 가져오거나, 사용자의 로그인 정보를 확인하는 등의 작업을 수행한다.
  4. 응답 (Response): 서버는 처리 결과를 담아 사용자에게 응답한다. 이 응답은 HTML, CSS, JavaScript 등의 형태로 구성되어 웹 브라우저로 전송된다.
  5. 렌더링 (Rendering): 웹 브라우저는 서버로부터 받은 응답을 해석하여 화면에 웹 페이지를 표시한다. 이 과정을 렌더링이라고 한다.

웹 서비스 구성 요소

  • 웹 서버 (Web Server): 클라이언트의 요청을 받아들이고 정적인 웹 페이지 (HTML, CSS 등)를 제공하는 역할을 한다. 
  • 웹 애플리케이션 서버 (WAS/Logic): 동적인 웹 페이지를 생성하고 웹 애플리케이션의 로직을 처리하는 역할을 한다. 
  • 데이터베이스 관리 시스템 (DBMS/파일 시스템): 웹 서비스에서 사용하는 데이터를 저장하고 관리하는 시스템이다. MySQL, PostgreSQL, MongoDB 등.
  • 공통 소프트웨어: 웹 브라우저 (Chrome, Edge, Safari 등)와 같이 웹 서비스 이용에 필요한 기본적인 소프트웨어를 의미한다.

기타

  • HTML, CSS, JavaScript: 웹 페이지를 구성하는 핵심 기술입니다. HTML은 웹 페이지의 구조를 정의하고, CSS는 디자인을 입히고, JavaScript는 동적인 기능을 추가하는 데 사용됩니다.
  • 브라우저: 웹 페이지를 보여주고 사용자와 상호작용하는 프로그램입니다. Chrome, Edge, Safari 등이 대표적인 브라우저입니다.

 

 

게시판 구현해보기 - Database의 CRUD 이해

 

  • CRUD는 데이터베이스에서 데이터를 생성(Create), 읽기(Read), 업데이트(Update), 삭제(Delete)하는 네 가지 기본 작업을 나타낸다. 이 네 가지 작업은 웹 애플리케이션에서 데이터를 처리하는 핵심적인 부분이다.

 

 

방화벽 설정하기

게시판 구현을 위해 방화벽을 설정하는 이유는 보안네트워크 보호 때문이다. 방화벽은 서버와 외부 네트워크 간의 트래픽을 모니터링하고 제어하는 역할을 하며, 게시판과 같은 웹 애플리케이션을 운영할 때 중요한 보안 요소이다. 

 

 

GCP에서 VPC 네트워크에서 방화벽을 클릭한다.

 

 

 

방화벽 규칙 만들기를 클릭한다. - 방화벽은 외부서버 해킹시도를 막기 위한 것이다.

 

 

 

방화벽 규칙 이름은 원하는대로 입력한다.

나머지 설정들은 그대로 둔다.

인그래스 = 수신

 

 

 

대상은 어떤 인스턴스에 해당 규칙을 적용할지 설정하는 것이다. 

네트워크의 모든 인스턴스를 클릭해준다.

소스 필터/ 범위는 접속이 가능한 IP를 설정해주는 것이다.

0.0.0.0/0 으로 설정해준다. ( 전세계 모든 곳에서 접속이 가능함.)

프로토콜 및 포트에서 접속을 허용할 IP를 지정해준다.

접속을 허용할 포트만 지정해서 입력해 준다.

(ex. tcp 5000 : 5000을 tcp로 하면 바이러스/해커 방지에 좋음)

실습용이니 모두허용을 눌러 만들기를 누른다.

 

 

Flask와 MySQL Connector 설치

 

cd /

pip install mysql-connector-python

pip install Flask

를 차례대로 입력하여 Flask와 MySQL Connector를 설치한다.

 

 

 

새 연습폴더 만들고 권한부여

 

sudo mkdir 만들폴더명 을 입력하여 새 연습폴더를 만들어주자.

sudo chmod -R 777 만든폴더명 을 입력하여 모든 권한을 부여하자.

ls -li를 눌러 권한이 잘 부여됐는지 확인하자. 

 

 

실습폴더 board를 새로 만들고

board 폴더 밑에 하위폴더 templates, static, uploards를 새로 만들고 전부 권한을 부여한다.

sudo chmod -R 777 board 를 치면 하위폴더에도 한꺼번에 권한이 부여된다.

( 명령어 배열 순서를 바꿔 쳤으나 어찌저찌 적용됨;;)

 

cd .. 은 현재 디렉터리의 상위 디렉터리(부모 폴더)로 이동하는 명령어이다.

(cd - 를 입력하면 이전디렉터리로 이동한다.)

cd 다음에 띄어쓰기 꼭 해야한다.. cd는 명령어이고, 이동할 디렉터리는 인자로 전달해야 한다.

명령어와 인자(디렉터리) 사이에는 반드시 띄어쓰기를 해야한다.

 

 

파일질라에 파일 옮기기

 

실습파일들을 파일질라에서 해당 하위폴더에 넣는다.

board 폴더 안에 app.py를 넣는다. templates 폴더(HTML 템플릿 파일 저장), static 폴더(정적 파일 저장) 안에는 위 사진과 같이 파일들을 넣는다. upload 폴더는 그대로 둔다. (업로드된 이미지 파일을 저장)

 

 

 

폴더 안에 맞는 파일이 들어갔는지 꼼꼼히 확인한다.

 

 

 

게시판 구현을 위한 mySQL 데이터베이스의 테이블 구조 정의 하기

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    author VARCHAR(255) NOT NULL,
    created_at VARCHAR(255),  
    image VARCHAR(255)
);

 

모델 정의를 위해 MySQL 데이터베이스의 테이블 구조를 정의한다. 이번 실습에서는 post 테이블을 사용하여 게시판 애플리케이션의 글을 저장한다.

 

 

CREATE TABLE 테이블명; 입력하여 post 테이블을 생성해준다.

 

 

app.py파일 실행하기

 

python3 app.py  명령어 실행하여 app.py파일을 실행해준다.

 

 

 

만든 게시판 확인하기

 

나는 포트를 5001로 지정하였다.

만든 게시판을 확인해보려면 

http://외부IP주소:포트번호 를 입력하면 된다.

(https로 하면 절대 안된다. 실행 안됨)

외부 IP주소는 VM인스턴스에서 확인가능.

 

 

 

게시글 작성도 잘 된다.

 

 

 

 

 

발생한 에러들...

1. 처음에는 mySQL(MariaDB)에서 테이블 구조를 정의해주지 못해서 에러가 났다.

 

2. 다시 연습해보는거라 기존 수업에서 실습했던 5002 포트로 하니까 에러가 났다. 실습하는 터미널만 켜고 다른 터미널은 켜지도 않았는데.. 그래서 app.py 파일에서 포트를 5001로 수정했다. 그리고 app.py에서 Database Connection코드부분에서 내가 실습해서 만든 유저명, 패스워드, 데이터베이스도 틀리게 쓴 것을 확인할 수 있었다....(꼼꼼하게 확인하자!)

 

에러 발생한 문구들........

 

 

 

 

 

 

 

 

기타

 

내가 만든 게시판 다시 보고 싶으면 터미널로 들어와 python3 app.py를 실행하면 주소창에 http://외부IP주소:포트번호 쳐서 보면 다시 내 게시판이 보인다.

 

 

 

 

 

기억하기

  • 아규먼트(인수)와 파라미터(변수)의 차이
용어 설명 예시
파라미터 (매개변수) 함수를 정의할 때 입력받는 변수 def add(a, b): 에서 a, b
아규먼트(인수) 함수를 호출할 때 전달하는 실제값 add(3, 5)에서 3, 5

 

  • 객체는 메서드를 포함
  • ls -li     -공백이 있으면 각각의 명령
  • 파이썬은 인터프리터형으로 한줄씩 실행된다. / 컴파일러 - 한방에 실행
  • 귀찮으면 VACHAR로 통일하자 - sql문 작성하기 골아프면 데이터타입을 이걸로 통일해버리자..(데이터에 " " 쓰는거 잊지말기)
  • 자꾸 명령어 쳐야할 화면을 헷갈리고 있다. 터미널에서 쳐야할 명령어 / mariaDB에서 쳐야할 명령어 구분하자.