한국영화 박스오피스 순위

나의 첫 공식 퍼스널 개발 프로젝트는 '한국영화 박스오피스 순위' 웹사이트였다. (약 1달 전 퍼블리쉬)

원래 '환율 계산기' 사이트를 첫 공식 프로젝트로 제작하고 있었는데

개발 중에 너무 심하게 막히는 부분이 있었어서 잠시 미루고

나름 쉽게 도전해볼만하겠다?! 라고 생각해서 덤벼 본 프로젝트가 바로 이 프로젝트였다.

 

마침 영화진흥위원회라는 곳에서 일간 박스오피스순위, 주간 박스오피스 순위 등의

좋은 오픈API 소스를 제공하고 있었고

그 정보를 가지고 사이트를 만들어보면 재미있고 유용하겠다고 판단해서 만들어 본 사이트.

 

https://koreanmovieboxoffice.netlify.app/

 

깃허브 : https://github.com/designerDK/KOREAN-MOVIE-BOX-OFFICE

 

 

 

하지만 좀 더 깊이 살펴보니 해당 API에서 포스터 이미지는 제공하고 있지 않아서

이미지는 카카오디벨로퍼에서 다음 이미지 검색 부분의 썸네일 API를 사용하게 되었다.

(이 두 API를 연동시키느라 꽤 고생했었다;; 지역변수와 전역변수 개념도 애매했던 때라...

일단 영화정보API를 가져오는 ajax 안쪽에 이미지를 가져오는 api ajax를 넣어서

변수를 가져다 쓸 수 있게 해서 해결했었다.)

 

API 정보만 잘 가져오면 그리 어렵지 않을 것이라고 생각하고 도전 했었지만

모든 게 처음이었던 프로젝트였기 때문에 너무나 많은 시행착오가 있었고...

그만큼 배운 점도 무지 많았다.

 

개발도 개발이지만 퍼블리싱도 처음이었는데

일단 시작단계인 만큼 유료 도메인은 부담스러워서 netlify로 퍼블리싱을 해보았었다.

나름 깃허브에도 올려보고 그것을 netlify로 퍼블리싱해보는 것 까지 많은 부분을

경험해 볼 수 있었다.

 

그리고 퍼블리싱을 한 이상 검색 결과에도 나올 수 있었으면 하는 바램에

SEO의 개념도 조금 스터디를 해볼 수 있었다.

robots.txt, sitemap.xml 등을 만들고 메타태그나 h1태그를 잘 작성해서

구글 서치콘솔, 네이버 서치어드바이저 등에 검색결과를 등록하는 과정도 처음이라 꽤 고생했었는데

이 부분은 여전히 많은 공부가 필요하다고 느껴진다.

 

마지막으로 귀엽게 카카오 애드핏 까지 달아보면서 프로젝트는 마무리 되었었다.

생각보다 험난했었지만 그만큼 어마어마하게 많이 배웠던 프로젝트.

---

 

개발언어 관련 성장 포인트

 

1. 외부 오픈 api 연동해보기 - ajax 사용

$.ajax({

  method: "GET",

  url: "http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json",

  data: { key: "key", targetDt: yyyymmWeek, weekGb: "0"},

}).done(function (msg) {

 

}

 

 

2. 가져온 api 정보를 통해 또다른 api를 가져오기 - ajax 안쪽에 ajax 구문을 넣어서 어찌저찌 해결...

 

3. 박스오피스 순위 목록을 for문을 통해 가져왔고 for문 안에서 html 정보를 순환시켜서 insertAdjacentHTML을 통해 index.html 안에 삽입. 

if(weeklyMov[i].rankInten > 0){

      document.getElementById(`weeklyRatingNum${[i]}`).style.color = "#00E86B"

      document.getElementById(`weeklyRating${[i]}`).insertAdjacentHTML("beforeend", upIcon);

    }else if(weeklyMov[i].rankInten < 0){

      document.getElementById(`weeklyRatingNum${[i]}`).style.color = "#ED2222"

      document.getElementById(`weeklyRating${[i]}`).insertAdjacentHTML("beforeend", downIcon);

    } else {

      document.getElementById(`weeklyRatingNum${[i]}`).style.color = "#C9C9C9"

      document.getElementById(`weeklyRating${[i]}`).insertAdjacentHTML("beforeend", midIcon);

    }

 

 

해결 함에 있어서 아래 사이트가 꽤 유용했었다.

https://kincoding.com/entry/%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C-%EB%B0%9B%EC%9D%80-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-forEach-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-UI-%EB%B0%98%EB%B3%B5-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0

서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기

 

 

4. 날짜 가져오기, 정보들 중간에 점 찍기 등 디테일한 것들도 많이 공부할 수 있었다.

const today = new Date();

const year = today.getFullYear();

const month = (today.getMonth() + 1).toString().padStart(2, '0');  

const day = (today.getDate() -1).toString().padStart(2, '0');

const yyyymmdd = `${year}${month}${day}`;

let week = (today.getDate() -7).toString().padStart(2, '0');

if(week < 0) {week = '00'};

const yyyymmWeek = `${year}${month}${week}`;

let dailyDateInfo = `| 기준일: ${year}-${month}-${day}`;

if(day == '00') {

  dailyDateInfo = `| 기준일: ${year}. ${month}. 01`;

}else{

  dailyDateInfo = `| 기준일: ${year}. ${month}. ${day}`;

};

$("#dailyDate").append(dailyDateInfo);

---

개발언어 외 성장 포인트

 

1. 깃허브 업로드

2. netlify를 사용해서 퍼블리쉬

3. 검색엔진의 검색 허용을 위해 robots.txt파일을 index.html과 같은 카테고리에 넣어줌.

 

robots.txt 내용

User-agent: *
Allow:/
Sitemap: https://koreanmovieboxoffice.netlify.app/sitemap.xml

 

 

4. https://www.xml-sitemaps.com/ 이 사이트에서 사이트맵 생성. index.html과 같은 카테고리에 넣어줌.

 

5. 구글 서치콘솔과 네이버 서치어드바이저를 통해 검색엔진에 검색될 수 있도록 진행 (SEO)

소유자 확인 방식을 html에 직접 meta태그를 넣는 방식으로 해결.

<meta name="google-site-verification" content="key" />

    <meta name="naver-site-verification" content="key" />

 

 

6. 그 외에도 검색에 도움이 되기 위해 다양한 메타태그 및 h1, title 태그 활용

<meta name="description"

    content="한국영화 흥행 순위를 보여주는 홈페이지입니다. 일별/주간 박스오피스 순위, 개봉일, 누적 관객수 등의 정보를 확인하실 수 있습니다.">

    <meta name="author" content="designerDK">

    <meta name="keywords" content="한국영화, 박스오피스, 흥행, 순위, 영화순위, 랭킹, 일별박스오피스, 주간박스오피스, KOREAN MOVIE, BOX OFFICE, RANKING, DAILY BOX OFFICE, WEEKLY BOX OFFICE">

    <meta property="og:description"

    content="한국영화 박스오피스 순위를 보여주는 홈페이지입니다. 일별/주간 박스오피스 순위, 개봉일, 누적 관객수 등의 정보를 확인하실 수 있습니다.">

    <meta property="og:title" content="한국영화 박스오피스 순위 - KOREAN MOVIE BOX OFFICE">

    <meta property="og:image" content="data/ogimage.png">

    <meta property="og:url" content="https://koreanmovieboxoffice.netlify.app/">

 <title>한국영화 흥행 순위 - KOREAN MOVIE BOX OFFICE</title>

<h1 id="heroKOR">

                한국영화 박스오피스 순위

            </h1>

 

h1은 페이지에 하나만 사용하는게 좋다.