Sparta/항해99

항해 사전준비 5일차 - 입학시험/ 웹개발플러스 1/토이프로젝트2 - 나의 작은 여행기

또롱또 2022. 5. 4. 06:52
728x90

웹개발 플러스 1주차가 수강기간이 끝나서 pdf로 공부를 하고있는데,

python flask에서 웹스크래핑을해서 POST하는것을 보았다.

즉, client에서는 url을 보내주고,

server에서는 url을 받아서 그 url을 토대로 필요한 정보를 웹 스크래핑을 진행하는 내용이다.

 

생각해보면 간단한 이야기지만, 

이런방법도 있구나 라는 생각이 들었고,

이번 토이프로젝트2는 이 내용들을 들어가게해서 진행할 예정이다.

 

생각해보니까, 코드를 나열하거나 사진을 붙이는거 보다

깃헙에 사진을 넣고, 코드에 주석을 붙이는게 나을거 같다는 생각이 들었다.

플러스1 - 나의 일기장

https://github.com/kevinkim910408/-Web-Diary

플러스1 - 영화 기록하기

https://github.com/kevinkim910408/-Web-MyMovieMemo

 

토이프로젝트 2 

- 파일올리기, 웹스크래핑, db연결 을 모두 사용하고 싶어서 계획을 짜는데 오래걸리고 있다.

1. Flowchart에 기본세팅을 적는걸 빼먹었다..

flask를 사용할거니까 static, templates 폴더를 준비하고

 

Interpreter 세팅을 하기전 필요한걸 정리해 보았다.

flask - flask

mongoDB - pymongo, dnspython

Scrapping - requests, bs4 (셀레니움도 해봐야하는데.. 이정도 스크래핑은 requests가 딱이다)

(다시한번 느끼는거지만, 파이참의 Interpreter 세팅은 참 간편하다.)

 

2. html 뼈대 만들기인데, html, css는 하면서 같이하게 된다.

다음 flowchart에는 같이 써놔야 겠다..

client 와 server 뼈대를 만들어야하는데..

입학시험이 얼마 안남아서 그냥 복붙해서 가져왔다.

 

대충 할려했는데.. 갑자기 디자인에 불붙어서 시간 가는줄도 몰랐다가 겨우 정신차렸다.

구조가 조금 달라졌다 만들다보니.

Posting box 내부를 가운데로 몰았고,

카드가 아래에 너무 작게 붙는거만 같아서 그냥 한 줄에 카드 한개씩 크게크게 넣었다.

 

3. 제이쿼리로 파일 import 준비

    <!-- File Upload -->
    <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
        $(document).ready(function () { // 웹페이지 로딩될때 시작할 코드
            bsCustomFileInput.init()  // 파일 업로드 코드
        })
                <!-- 파일 업로드-->
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="file">
                    <label class="custom-file-label" for="file">Choose file</label>
                </div>
                <!-- 여기 까지 파일 업로드 html from bootstrap-->

생각보다 잘 붙은거 같다.

처음에 file 부분하고, city name이 붙어있었는데

스파르타에서는 css에 margin을 추가했지만, 

나는 html을 보니까 각 글 창마다 bootstrap으로 wrapping 되어 있어서, 똑같이 감싸줬다.

 

5. Client - ajax() / Server - flask기초 작업 -> Flowchart에 빼먹었다..

기초작업을 하면서 느낀건데, 스파르타가 준 기본 자료가 없었으면..

나만의 템플릿을 만드는데 고생하지 않았을까..

지금은 스파르타에서 준 자료들을 템플릿으로 따로 빼놔서 복붙만 하면 flask - ajax()는 간단히 세팅한다.

 

6. City name / my review post, get으로 주고받기

 

성공적이긴 한데

발견한 문제점 - 글자수 제한을 걸지 않으니까 제일 아래 카드처럼 나올 수도 있다.. 

html의 속성인 maxlength를 이용해서 해결

<input type="text" class="form-control" id="cityName" placeholder="City Name" maxlength="9">

 

7. 파일 업로드 기능 구현 - flowchart의 6,7번을 같이했다.

 

8. Area / Population 스크래핑

실은 Area/Population 스크래핑을 하기에 좋은 사이트가 없어서,구글 검색으로 나오는 wiki의 information 창만 스크래핑 했다.

Information에는 url을 넘겨줘서 클릭하면 구글검색에 도시이름이 검색되게 했다.

 

9. 파일질라, git bash로 ec2연결 

파일질라로 기존에 있던 데이터를 날리고

새 데이터를 넣어준 다음

git bash로 서버를 실행하면 끝이다.

10. 부족한부분 채우기

일단 ps -ef | grep 'python app.py' 그리고 kill -9 로 ec2를 종료해주고

부족해 보이는 부분을 채워보려고 한다.

 

먼저, 제일아래 높이 0.5cm 정도의 작은 바를 두려고 한다.

약간 footer 느낌? 내부는 비었지만.

 

그리고 마진을 좀 두어서 사진을 제일 아래서 띄우려고 한다.

딱 이런 느낌을 원했다.

 

다음으로는 og 태그를 추가해 보려고 한다.

og태그까지 추가가 잘 된것을 보고 (이미지는 구글링!)

이번 토이프로젝트2도 무사히 끝난거 같아 다행이다.

 

(실은 모바일에서 테스트할때는 박살났었다 ㅋㅋ.. 모바일 호환도 꼭 다음에는..)

728x90