📅2022/2월/14부터 ~ 2022/3월/24까지

웹사이트를 만들어서 내가 일하지 않아도 돈을 벌어오는 나만의 파이프라인을 만들자!! 라고 생각하고 시작한 나의 첫 웹 시작기. ~~(하지만 열심히 일하는 건 언제나 나였고)~~

만약 어떤 건물을 짓고 싶으면, 건축의 기초부터 배워야 한다고 생각해서 웹사이트라는 건물을 짓기위해 '코드잇'이라는 코딩 유료강의에서 2달을 배웠다.(대략 8만원) HTML,CSS,JAVASCRIPT,REACT까지.

하지만 막상 이론을 주구장창 배우면서 느낀 것은 내가 이걸로 뭘 만들 수 있을까?이다. 사실 React를 배우고 다음으론 DJango을 배울 생각이었다. 하지만 계속 이론만 배우기만 하다가 이 웹사이트 제작에 흥미를 잃을 거 같아서 유료강의는 여기서 멈췄다.

그래서 시작된 나의 "Next Level" 찾기. 당장 html, css조차 정확히 기억이 가물가물해서 노마드 코더 니콜라쌤의 의견대로 클론 코딩을 시작했다. 바로 "구글 클론 코딩"
(당시 만들었던 나만의 구글 "한글")
클론 코딩을 하기 전까지는 html, css 걍 개쉽지라는 생각을 가졌지만, 막상 내가 처음으로 백지에서 저 사이트 하나 만들면서 무려 3일을 썼다. ~~(진짜 나는 아직 웹 개초보였다!)~~

그런데 이 클론 코딩 이후 내가 직접 뭔가를 더 만들어 보고 싶은 마음이 강해졌다. 그래서 휴학의 계기가 된 "조코딩"의 실전 수익형 웹 프로그래밍 재생목록을 따라 순서대로 만들기 시작했고 그 결과 탄생한 것이 바로 "무한도전 닮은꼴 테스트"이다.🙊

📅2022/3월/25부터 ~ 2022/4월/07까지

✨https://muhanface.netlify.app/✨

"무한도전 닮은꼴 테스트"의 컨텐츠는 구글의 Teachable Machine으로 미리 무한도전 멤버들의 얼굴을 학습시켜서 그 모델을 바탕으로 사용자가 무한도전 멤버들중 누구를 가장 닮았는지를 알아내는 것이다.

👀Teachable Machine 모델 만들기 & 사진 수집

웹 크롤링

먼저 학습시킬 무한도전 멤버들의 사진들을 모아야했다. 하지만 대충 600장 정도가 필요한데, 그걸 일일이 언제 구글에서 다운받고 있겠는가. 그래서 웹 크롤링을 이용해서 각 멤버의 사진을 얻었다.

조코딩 셀레니움 이미지 크롤링: https://www.youtube.com/watch?v=1b7pXC1-IbE&list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO&index=2

밑 코드는 크롬 브라우저에서 '하하'를 검색하고 이미지 창에서 스크롤을 가장 밑으로 내리고 모든 하하의 사진을 jpg형식으로 다운 받는 코드이다. 만약 '유재석' 사진을 다운받고 싶으면 '하하'를 지우고 '유재석'을 넣으면 된다.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time
import urllib.request
from selenium.webdriver.chrome.options import Options

driver = webdriver.Chrome()
# options = webdriver.ChromeOptions()
# options.add_experimental_option("excludeSwitches", ["enable-logging"])
# driver = webdriver.Chrome(options=options)

# chrome_options = Options()
# chrome_options.add_experimental_option("detach", True)
driver.get("https://www.google.co.kr/imghp?hl=ko&ogbl")
elem = driver.find_element_by_name("q")
elem.send_keys("하하")
elem.send_keys(Keys.RETURN)
SCROLL_PAUSE_TIME = 1

# Get scroll height
last_height = driver.execute_script("return document.body.scrollHeight")

while True:
    # Scroll down to bottom
    driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

    # Wait to load page
    time.sleep(SCROLL_PAUSE_TIME)

    # Calculate new scroll height and compare with last scroll height
    new_height = driver.execute_script("return document.body.scrollHeight")
    if new_height == last_height:
        try:
            # driver.find_element_by_class_name(".mye4qd").click()
            driver.find_element_by_xpath("/html/body/div[2]/c-wiz/div[3]/div[1]/div/div/div/div[1]/div[2]/div[2]/input").click()
        except:
            break
    last_height = new_height



images = driver.find_elements_by_css_selector(".rg_i.Q4LuWd")
count = 1
for image in images :
    try:
        image.click()
        time.sleep(1)

        # imageURL= driver.find_element_by_css_selector(".n3VNCb").get_attribute("src")
        imageURL =driver.find_element_by_xpath("/html/body/div[2]/c-wiz/div[3]/div[2]/div[3]/div/div/div[3]/div[2]/c-wiz/div/div[1]/div[1]/div[2]/div/a/img").get_attribute("src")
        urllib.request.urlretrieve(imageURL, str(count)+ ".jpg")
        count+=1
    except:
        pass

# driver.close()

위 코드를 실행해서 유재석, 박명수, 정준하, 노홍철, 하하, 정형돈, 길의 사진 총 600장 가량을 모았다. 이 중 유재석이 150장이고 나머지 멤버는 80장이다. 유재석의 이미지가 가장 많이 검색되었다. ~~(유느님이 가장 인기가 많아서 그런듯)~~

얼굴 사진 작업

사실 600장 사진을 그대로 Teachable Machine에 넣으면 모델 정확도가 떨어진다. 왜냐하면 대부분 전신 사진이고 컬러 사진이기 때문이다. 그래서 흑백의 얼굴 사진만 필요한데 내가 언제 다 일일이 사진을 자르고 있겠는가. 그래서 이것도 관련 라이브러리가 있는지 찾아보았다.

CV2 라이브러리

검색해보니 이게 가장 유명했다. 그런데 막상 동작해보니 멤버들 사진을 80장씩 넣으면 얼굴사진을 10장 정도밖에 안 내보낸다. 그래서 어떻게 해결할지는 잘 모르겠고 내가 이 코드 고치느라고 많은 시간을 쏟을 여력도 없어서 내가 일일이 다 수작업으로 얼굴을 잘랐다.~~( 열심히 일하는 건 언제나 나였고 )~~!

다행히 cv2 라이브러리로 컬러를 흑백으로 바꾸는 것은 잘 작동했다.

Teachable Machine 모델 학습

https://teachablemachine.withgoogle.com/ 로 접속하고 새 프로젝트에서 이미지 프로젝트로 들어간다.

👀React로 웹페이지 만들기

먼저 완성된 페이지는 다음과 같다. (모바일 환경에서 본 버전)

Nav Bar

맨 상단의 Navigation bar는 React-Bootstrap을 통해서 아주 쉽게 구현했다. 초보자 입장에서 Bootstrap같은 라이브러리는 정말 간편해서 좋다. (물론 획일화된 디자인이 단점이지만). 사실 Nav Bar의 Helper에 도움을 준 이들 페이지를 넣으려고 했는데, 처음부터 React-Router 구조로 만들지 않아서 포기했다. (현재의 지식으론 페이지 이동은 react-router뿐이라고 생각했음)

사진 넣는 칸

이번 프로젝트에서 가장 많은 시간을 때려넣은 component. 먼저 전체적인 디자인은 조코딩님의 디자인을 토대로 만들었다. 그리고 이 component에게 필요한 기능들은 다음과 같다.

박스 칸을 누르면 background색이 회색이 되면서 손으로 누른 거 같은 인터페이스.
< input > 태그에서 img파일만 받을 수 있게 제한. accept="image/*" 프로퍼티를 이용.
사진을 넣은 순간 점선 박스 칸이 사라지고, 넣은 이미지 미리보기를 할 수 있는 태그 생성
fileImage라는 state를 생성하고 image를 fileImage state에 넣어서 삼항 연산자로 구현.

<div class="file-upload">
        {!fileImage ? (
          <div class="image-upload-wrap">
            <input
              class="file-upload-input"
              type="file"
              accept="image/*"
              onChange={saveFileImage}
            />
            <div class="drag-text">
              <img src={upLoadImg} class="upload" alt="upload" />
              <h3>얼굴 사진을 올려놓거나 눌러서 업로드하세요!</h3>
            </div>
          </div>
        ) : (
          <img
            class="file-upload-image"
            id="face"
            src={fileImage}
            alt="yours"
          />
        )}

그리고 모델 분석을 하는 동안 돌아가는 spinner (이것도 React-Bootstrap을 통해 구현!)

분석 결과를 그래프로 보이게 만들기 (이것은 조코딩님의 코드를 사용했다.)
카카오 공유 버튼.
저 버튼을 누르면 분석 결과가 공유되진 않고 이 홈페이지 주소가 카카오톡으로 공유된다.
아직 분석결과를 공유하는 것은 잘 모르겠음. (이것도 언젠간 해내고 싶은 기능.)
삭제 버튼.
그림과 결과를 통으로 삭제하는 것보단 홈페이지를 리로딩하는 것이 훨씬 쉽다. 그리고 사진이 따로 저장되는 것도 아니기에 페이지뷰도 늘릴 수 있다 생각해서 삭제 버튼을 누르면 페이지가 리로딩되게 하였다.

KakaoAdFit

수익형 웹사이트가 목적이었으니 맨 하단에 카카오 애드핏을 달았는데 생각보다 쉽게 달았다. 그냥 태그 복사 붙여넣기 하면 끝. ~~(하지만 현재 페이지뷰가 200회인데 수익은 90원..!!! 츄파춥스도 못 사먹게 생겼다.)~~ 사실 구글 애드센스를 달고 싶었는데 애드고시라고 불릴만큼 달기 어려운 광고였다. 그래서 일단은 카카오꺼만 달기로 했음.

👀그외 잡다한 노력들

웹사이트가 html, css, js만 잘 한다고 뚝딱 만들어지는 게 아니였다. 웹페이지를 만들고 그걸 배포해야지 다른사람들도 들어와서 볼 수 있다. 그리고 웹 분석 도구를 사이트에 연결해야 사이트 분석도 할 수 있다.

Netflify 배포

https://www.netlify.com/
나는 원래 AWS밖에 몰랐는데, 조코딩님을 통해 Netflify를 알게 되었다. 이 사이트가 좋은게 github에 내 프로젝트를 올리고 사이트와 연결해놓으면, 내가 새 버전을 푸시할 때마다 그 버전을 빌딩해서 배포해준다! 아주 편하고 좋았다. 게다가 무료!

SEO

사이트 배포만 한다고 네이버 구글에 검색이 되는 게 아니다! 내 사이트의 robot.txt와 sitemap을 만들어야지 각 사이트의 크롤링 로봇들이 내 사이트에 방문해서 네이버나 구글에서 검색되게 만들어준다.

Open Graph

html의 head에 들어가는 내용인데, 간략히 요약하자면 내 사이트가 어떤 타이틀이고 어떤 내용이고 어떤 이미지인지 알려주는 내용이다. 이게 있어야 네이버 웹마스터도구에서 좋은 웹사이트라고 판단 한다. 그리고 이것들 설정하면 링크 공유할 때 이 내용들이 미리 보여진다.

Favicon

구글에 탭을 보면 타이틀 옆에 작은 이미지가 있다. 이것을 favicon이라고 함. 이것도 따로 설정해줘야 한다. (저절로 되는게 하나 없다!)

Google Analytic

내 사이트에 몇명이 방문했고 페이지뷰는 어떤지 확인하려면 웹 분석도구가 필수이다. 그래서 google analytic에 내 사이트를 연결하고 코드 내에 google analytic이 추적할 수 있게 추적코드도 붙여줬다. 이걸 통해 이제 나는 하루에 몇명정도 내 사이트에 방문했는지, 어느 지역에서 방문했는지, 모바일인지, 데스크탑인지 등등을 알 수 있다. 매우 정보가 방대한 분석 도구이다.

Google TagManager

만약 내 사이트에서 어떤 버튼을 사용자가 얼마나 눌렀는지 알고 싶으면 이걸 사용하면된다. 직접 어떤 태그를 선택했는지 알 수 있다. 그리고 이걸 google analytic과 연결하여 보기쉽게 분석할 수 있다.

📅2022/4월/08부터 ~ 2022/4월/12까지

사실 내가 꼭 구현하고 싶었던 기능이 하나 있었다. 바로 우리 사이트 방문자 수를 보여주는 기능이다. 처음에 굉장히 쉬울거라 생각했다. 그냥 구글 애널리틱스 방문자수를 끌고와서 보여주면 되는거 아님?? ~~(응 아니야~ 개어려워)~~ (이런 느낌이다)

👀Google analytics Reporting V4

진짜 한 이틀을 구르다가 겨우 발견한 이 레퍼런스
https://dev.to/ramonak/how-to-develop-a-custom-google-analytics-dashboard-using-google-analytics-reporting-api-v4-and-react-js-3k49

일명 Google analytics Reporting V4!!
들어가보면 React에서 방문자수나 페이지뷰를 json형태로 받을 수 있게 만들었다. 이걸로 난 해냈어!하고 생각했으면 아주 큰 경기도 오산이었다. 글쓴이가 말하길 이 request는 내 사이트를 연결한 내 구글계정으로 로그인을 해야만 볼 수 있는 것이였다. ( 그러니깐 내 사이트를 방문한 사람들은 못 보는 정보임)😠😠~~(으앙 내 사이트 방문자 수를 여러분에게 보이고 싶어요 으앙앙)~~

👀UA Query Explorer

그후 또 하루를 구글링 기글링 저글링하면서 구르다가 발견한 사이트.
https://ga-dev-tools.web.app/query-explorer/

여기서 내가 원하는 정보를 선택하고 access token을 입힌 이 url을 입력하면 json 형태로 내가 원하는 정보를 받을 수 있다. (야호 드디어 난 해냈어! 만세 만세!)
는 1시간짜리 성공이였다. 앞에서 입힌 access token의 유효기간은
을 어떻게 하면 계속 받아올 수 있나를 검색하게 되고

Oauth 2.0

아니 내가 어쩌다가 Oauth에 대해 공부하고 자빠졌냐고 ㅠㅠㅠㅠ 사실 아직도 이게 정확히 뭔지 모름.

밑에 사이트에 들어가면 access token을 refresh할 수 있었다!
https://developers.google.com/oauthplayground/

근데 refresh token도 주고 뭐 client id랑 client secret도 만들고 했는데 이 Request는 어떻게 보내는 거죠..? 하... 나는 뭐지 뿔소라인가

결국은 여기서 포기했다. 내가 아는 프론트엔드 지식으론 불가였다. 뭔가 DataBase쪽을 알면 쉽게 해결할 수도 있을거 같은데, 아직은 뭐 그쪽은 모르니까....😭

😏이번 프로젝트를 마치면서..

사실 마지막 방문자 수 카운터가 가장 어려웠고 해결도 못했다. 그전까지는 그렇게 오래 걸리지 않고 해결은 했다만 이건 뭐.. 내 영역 밖이다.

그래도 내가 만들고 싶은 사이트를 내가 구글링하고 찾으면서 하니깐 상당히 보람찼다. 이전에 했던 이론강의만 주구장창 듣는 거보단 나았다. 역시 내가 만들고 싶은 거 만들면서 배우는 게 좋다고 여러 유튜버와 친구가 한 말이 맞았던 것이다.

일단 내일 날짜로 난 제주도에 간다. 아무 생각없이 쉬었다가 돌아와서 다시 웹 제작을 시작해야겠다. 아직 어떤 웹 사이트를 만들지 정하진 않았지만, 후보는 몇 개 있다.

아니면 조코딩의 mbti 테스트 만들기를 따라 만들면서 기본기를 다지는게 나을 수도 있다.( 사실 이게 어떻게 보면 가장 쉬움. 그냥 따라하기만 하면 되니깐)

그리고 velog에 상당히 재밌어 보이는 토이 프로젝트들이 많던데 이걸 보면서도 인사이트를 얻어야겠다.

한동안 쉬면서 다음엔 뭘 할지 정해봐야겠다. 끝

Author And Source

이 문제에 관하여(기계공학도의 무한도전 닮은꼴 테스트 웹사이트 제작기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@winethaysay/기계공학도의-웹사이트-제작기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

기계공학도의 무한도전 닮은꼴 테스트 웹사이트 제작기