문자열 치환, ...처리

토이 프로젝트 3일 차.

진행 상황과 그 과정에서 겪은 몇 가지 이슈에 대해 다뤄보고자 한다.

이슈 1. 프린트 공백

드디어 어제 골머리를 싸매게 만들었던 문제를 동기의 도움을 받아 해결했다! (동기 사랑 나라 사랑!)

tagTemp = '#contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(number) > li'
for i in range(4,51,2):
    tag = tagTemp.replace('number',str(i))
    movies = soup.select(tag)

    for movie in movies:
        title = movie.select_one('div.box-contents > a > strong').text
        print(title)

조건식을 만들어 놓고도 어떻게 활용해야 할지 헤맸었는데 동기가 이런 식으로 치환하는 접근법을 알려주었다.

 

덕분에 포스터와, 제목, 예매율을 뽑아내는 것까지 순식간에 완성했지만 또 다른 문제에 봉착했다.

D-day와 날짜, 개봉 종류가 모두 한 카테고리에 묶여있었던 것.

프린트하자 넓은 공백이 보인다.

.strip()을 해줘도 마찬가지였다.

해결까지 도달하는 데 두 가지 과정을 거쳤다.

date = movie.select_one('div.box-contents > span.txt-info > strong').text.split('D')[0].strip()[0:10]

이렇게 짜 놓고 생각해보니 굳이 스플릿을 D로 나눌 필요가 없었다.

date = movie.select_one('div.box-contents > span.txt-info > strong').text.split()[0]

해결.

 

tagTemp = '#contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(number) > li'
for i in range(4,51,2):
    tag = tagTemp.replace('number',str(i))
    movies = soup.select(tag)

    for movie in movies:
        title = movie.select_one('div.box-contents > a > strong').text
        img = movie.select_one('div.box-image > a > span > img')['src']
        booking = movie.select_one('div.box-contents > div > strong').text
        date = movie.select_one('div.box-contents > span.txt-info > strong').text.split()[0]
        schedule = movie.select_one('div.box-contents > span.txt-info > strong > span').text

        doc = {
            'title': title,
            'img': img,
            'booking': booking,
            'date': date,
            'schedule': schedule
        }

        db.preMovies.insert_one(doc)

 

D-day는 따로 작업을 해야 할 것 같아 우선 놔뒀다.

 

 

이슈 2. GET 방식 미작동

큰 문제는 아니었다. 

$(document).ready(function () {
    show();
});

function show() {

show 함수의 대괄호가 하나 빠져있었다.

알아둬야 할 점은 show함수를 쓴 이유가 페이지를 불러올 때 작동한다는 것을 적기 위해서였다는 것 정도.

 

 

이슈 3. ...처리

가장 시간을 오래 잡아먹은 문제였다.

 

아래 그림처럼 글씨가 길어지는 부분을 기준으로 그 아래 영화가 밀려서 출력되는 문제가 발생했다.

글씨가 겹쳐 출력되는 문제는 덤.

 

글자가 겹치는 것이 문제인 건가 싶어 ...처리해주는 css를 입혀봤는데...

놀랍게도 글씨가 사라지는 마법이 일어났다.

한참을 끙끙댄 결과, 글씨가 사라지는 것의 원인이 글씨 줄 간격을 좁히기 위해 클래스 pre-movies(영화 하나)에 아래와 같은 스타일을 지정해줘서라는 것을 알게 됐다.

line-height: 0px;

해당 스타일을 지워주니 글씨가 제대로 적용됐다. 

칸이 뒤로 밀린 이유는 칸의 높이가 문제가 아닐까 추측해보았다.

 

칸 크기에 문제는 없었으나, 길이만 지정해주고 높이는 따로 지정해주지 않은 스타일에 높이를 저만큼 다시 따로 지정해주니 영화들이 제자리를 찾아갔다.

 

 

 

 

이슈 4. 글자 줄 간격

이 부분 또한 간단한 문제였는데 시간을 많이 잡아먹었다.

 

글자의 줄 간격을 잡아주던 line-height: 0px;를 지우고 나니 줄 간격이 마음에 들지 않았다.

그렇다고 다시 집어넣으면 긴 제목의 글씨가 또 겹치는 상황.

엔터와 같은 기능인 <br>을 사용해봤으나 스타일을 따로 지정해 줄 수 없는 문제가 발생했다.

그래서 나는 줄 간격에 margin을 이용해 보기로 했다.

제목과 예매율, 날짜에 margin을 넣으니 말끔히 해결되었다.

 

 

이슈 5. 길이

브라우저 창의 크기를 줄이면 아래처럼 글씨가 겹치고 줄의 길이도 줄어드는 문제가 발생했다.

큰 문제는 아니었다.

길이를 지정해주니 해결. (마무리할 때 모바일 처리는 따로 확인해봐야 할 것 같다.)

 

내일 할 것

내일은 D-day 계산해주는 것과 날짜가 지나 개봉한 영화는 안 나오도록 하는 작업을 해볼 생각이다.

그리고 마무리할 때 모바일 화면에서 체크해 크기만 조절해주면 될 것 같다.

 

예상했던 것보다 많은 기능들이 담겨있어서 하는 맛이 있다.