FUNDAMENTAL 28. 파이썬으로 데이터 전처리 웹 만들기

1. 전처리 웹 사이트를 제작해보자
    - 오늘은 화면이 있는 프로그램을 만들어서 나만의 프로그램을 직접 만드는 것을 할 것이다.
    - 웹 사이트는 크게 두 가지로 구성된다. 프론트 엔드(front-end)와 백 엔드(back-end)이다.
       1) 프론트 엔드는 우리가 보고 있는 웹 사이트의 화면을 말하고,
       2) 백 엔드는 화면에서는 보이지 않지만, 웹 사이트를 화면에 보여주기 위해 데이터베이스를 활용해 실질적인 정보의 가공 / 처리를 수행하는 구성 요소라고 이해하면 되겠다.
    - 웹 사이트에서의 프론트 엔드는 단순히 화면을 보여주는 것이기 때문에 백 엔드 없이 이용할 수 있을 때도 있다. 하지만 백 엔드가 없으면 DB 같은 것들을 붙여 이용하기 어렵다.
    - 백 엔드도 프론트 엔드 없이 백 엔드만 사용하게 되면 화면 없이 파이썬 코드처럼 텍스트로 이루어진 명령문을 이용해서 직접 코드를 짜면서 이용해야 한다.
    - 오늘은 아주 기본 개념에 해당하는 지식에 대해서 다룰 것이다. 그리고 이미지 전처리 페이지와 SQL 처리 페이지를 만들어 볼 것이다.
2. 웹 페이지 개발의 위대한 첫걸음
    - 파이썬을 이용해 웹 페이지를 개발할 것이다. Java, C++ 등의 언어로 개발하는 것보다 빠른 속도로 개발할 수 있다는 장점을 가진다.
    - 환경 설정은 모든 개발의 첫 걸음이다. 하지만 쉽진 않을 수 있다. 환경 설정이 어려운 이유는 다양하지만 대표적으로 옛날에 쓰여진 정보를 사용해서 지금과는 맞지 않을 때 일 것이다.
    - 가상 환경을 만들라고 나와있지만 이미 aiffel을 시작할 때 만들었기 때문에 이 부분은 패스했다.
3. 플라스크(Flask) 시작하기
    - 플라스크(flask)는 마이크로 웹 프레임워크이다. 웹 개발자가 아니면 처음 들어봤을 것이다. 한 단어씩 풀어 설명하면
       1) 마이크로(Micro) : 플라스크의 특징인 웹서비스를 구성하는 최소한의 기능을 담아 단순하지만, 확장이 가능한 설계를 의미한다.
       2) 웹(Web) : 인터넷 브라우저를 통해서 보고 있는 공간을 의미한다.
       3) 프레임워크(Framework) : 어떤 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조이며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. 프레임워크 안에는 기본적으로 필요한 기능들이 미리 구축되어 있어서 추가하고자 하는 기능들만 선별적으로 개발하면 된다.
    - flask를 설치하고 아래에 내용대로 코드를 일단 실행해봤다. 자세한 코드 설명은 그림 밑에 있다.

       1) from flask import Flask : flask 패키지에서 Flask 모듈을 가져온다.
       2) app = Flask(__name__) : Flask 객체가 생성되어 app라는 변수에 저장된다.

       3) @app.route("/")

          (1) @와 같이 적힌 코드를 데코레이터(decorator)라고 부른다. 이 데코레이터는 URL 규칙을 받아 해당하는 규칙의 URL로 요청이 들어오면 붙어 있는 함수(여기서는 hello())를 실행하게 설정한다.
          (2) ("/")가 http://IP:(port number)/ 맨 뒤의 /를 의미하며 이는 root의 위치를 나타낸다.
4. 플라크스(Flask) 프로젝트
    - 플라스크에는 프로젝트(project)라는 개념이 있다. 하나의 웹 사이트는 하나의 프로젝트이다.
    - 아무 웹 사이트를 검색해 들어가보면 여러 페이지로 이루어져 있는 것을 볼 수 있다. 여기서 웹 페이지는 앱(app)이라고 볼 수 있다. 그래서 하나의 프로젝트 안에는 여러 개의 앱이 존재할 수 있다.
    - 플라스크 웹 프로젝트 디렉토리를 만들고, 폴더의 구조를 설계했다. 구조는 아래와 같다.

       1) ~/aiffel/flask_app : 루트 디렉토리의 경로이다.
       2) pyproject/ : 플라스크의 프로젝트 디렉토리이다.
       3) static/ : 웹 사이트는 CSS 파일과 같은 정적 파일을 필요로한다. HTML 페이지를 이쁘게 꾸미는 코드가 있는 CSS 파일을 넣게 되는 폴더이다. 하지만 오늘은 CSS까지는 하지 않았다.
       4) templates : HTML 파일들을 넣어두는 폴더이다.
    - 간단하게 html파일과 py파일을 만들어서 어떤 느낌으로 만들 것인지 웹 사이트를 만들어 봤다.
    - GET & POST
       1) GET과 POST는 웹에서 데이터를 주고받을 때 쓰이는 통신 규약이다.
       2) 클라이언트에서 HTTP로 백 엔드와 통신하는 방법 중 대표적인 방식은 GET과 POST 방식이다.
       3) GET은 주로 링크를 클릭할 때 사용하고,
       4) POST는 데이터가 있는 게시물을 올릴 때, 즉 이미지나 대량의 텍스트 데이터를 담아 보낼 때 주로 사용한다.
5. UI 코드
    - 기본적인 UI 컴포넌트를 다루는 방법을 알아봤다.
    - 이번 목표는 아래의 사진처럼 나오도록 구현하는 것이다.

    - index.html : templates 폴더 밑에 있는 index.html을 수정 혹은 새로 만들어서 코드를 입력했다.

    - app.py : 기존에 있던 app.py를 삭제하고 다시 만들어도 되고, 기존에 있는 것을 수정해도 된다. 코드를 입력했다.
    - 그리고 실행시켜봤다.
6. UI 코드 (1) HTML 기초
    - 태그(tag)
       1) <a>와 같이 홑화살괄호로 감싸진 것을 태그라고 부른다. 즉, < 와 > 가 앞뒤로 있는 명령어이다.
       2) 태그에는 시작 태그와 종료 태그가 있다.
          (1) 시작 태그 : <a>
          (2) 종료 태그 : </a>
       3) 말 그대로 시작 태그는 시작을 알리고, 종료 태그는 종료를 알린다.
       4) 그리고 시작 태그에는 속성(attribute)과 값(value)을 가질 수 있다.

       5) 예를 들어 <a href ="http://naver.com">를 보면

          (1) href는 속성이라 하며 "http://naver.com"을 값이라고 한다. 

          (2) <a>는 문서를 링크시키기 위해 사용하는 태그인데 여기에 href라는 속성에 "http://naver.com"값을 넣어 문서를 링크시키는 목적지를 적용한다.

    - 엘리먼트(element)
       1) HTML에서 시작 태그와 종료 태그로 이루어진 명령어들을 의미한다.
7. UI 코드 (2) 버튼과 텍스트 박스
    - 버튼 : 다음 페이지로 넘어가거나, 데이터를 선택하면 다음 작업을 진행하라고 명령할 때 쓰인다. 
    - 텍스트 입력 : 위에서 버튼을 하면서 같이 살펴봤다.
    - 체크 박스 : 체크 박스를 만들고 화면에서 체크 박스 선택에 대한 유/무 상태 정보를 가져오는 방법을 알아봤다.
8. UI 코드 (3) 파일 선택
    - 이미지 전처리 부분의 UI를 먼저 설명하느라 이미지 파일을 넣고 파일을 선택하는 파트를 조금 늦게 다뤘다. 그래서 여기서 알아봤다.
9 ~ 10. 이미지 전처리 페이지 만들기
    - 여기서는 이미지 전처리 페이지를 만들고 코드를 하나하나 알아봤다.

11 ~ 12. SQL 처리 페이지 만들기
    - 여기서는 SQL 처리 페이지를 만들고 코드를 하나하나 알아봤다.