hika_kwon.log https://velog.io/ Wed, 17 Aug 2022 09:16:35 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed hika_kwon.log https://velog.velcdn.com/images/hika_kwon/profile/5dde1369-da71-42ac-8d23-09ff91894f15/image.png https://velog.io/ Copyright (C) 2019. hika_kwon.log. All rights reserved. <![CDATA[오랜만에 만져본 Visual Studio, 그리고 HTML과 CSS ]]> https://velog.io/@hika_kwon/%EC%98%A4%EB%9E%9C%EB%A7%8C%EC%97%90-%EB%A7%8C%EC%A0%B8%EB%B3%B8-Visual-Studio-%EA%B7%B8%EB%A6%AC%EA%B3%A0-HTML%EA%B3%BC-CSS https://velog.io/@hika_kwon/%EC%98%A4%EB%9E%9C%EB%A7%8C%EC%97%90-%EB%A7%8C%EC%A0%B8%EB%B3%B8-Visual-Studio-%EA%B7%B8%EB%A6%AC%EA%B3%A0-HTML%EA%B3%BC-CSS Wed, 17 Aug 2022 09:16:35 GMT

이번주에 느낀점

서당개 3년이면 풍월을 읊는다는 말이 있다. 내가 이쪽일을 5년넘게 하면서 데이터 수집을 위한 Script 및 Pixel 설치와 후속 관리등을 진행하다보니 대충 코드를 어떤식으로 이해해야 하는지, 이부분이 어떤걸 뜻하는지 등 앵간한 부분은 꿰차고 있다고 생각한다. 그리고 이러한 이해는 HTML 코드를 볼때마다 알게된다.

이번주에 배운건 예전에 대표님께 짧게나마 Visual Studio로 배웠던 C#을 생각나게 했다. 당시에 내가 실습으로 기획했던 로스트아크내 호감도 DB를 구현하여 프로그램화 시키는 거였는데, 한 개 지역만하고 포기했던 기억이 있다 ㅋㅋㅋ;

당시에 UI 구현은 정말 대충하고 반복문과 데이터 가져오는데에만 집중했는데, 이번 실습에서는 반대로 디자인 먼저 구현하는데 집중을 해주었다. 보기좋은 떡이 먹기도 좋다라는 말이 있지 않은가? 어느정도 알고있는 명령어들을 바탕으로 간단하게 디자인을 꾸미는걸 배우는데 있어 상당히 흥미로웠다. 이정도면 난이도는 상당히 Easy한데.. 매주 배울때마다 너무 날로 먹는거 아닌가 한다. 혹은 나중에 얼마나 어려운게 나올까? 하는 걱정도 좀 있다.

실제로 이번주엔 개발일지만 3개를 작성했다. 양으로만 보면 절대 많지는 않지만, 매주 조금씩 진행해야하는 당초 목적과는 벗어나지 않았나 생각도 든다. 하지만 난 역시 게으르고 노는걸 좋아하기에 계속 천천히 나아갈 것이다.

이번주에 배운 것

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩 - 로그인페이지</title>
    <style>
        .mytitle{
            background-image: url('https://static.spartacodingclub.kr/media/main_carousel/1kq0i51tuqc2kfzp.png');
            background-position: center;
            background-size: cover;

            width: 300px;
            height: 250px;

            color: white;
            border-radius: 10px;

            display: flex;
            flex-direction:  column;
            justify-content: center;
            align-items: center;
        }

        .wrap{

            width: 300px;
            margin: auto;
        }

        .mybtn{
            background-color: brown;
            border: none;
            border-radius: 10px;

            color: white;

            width: 300px;
            height: 35px;
        }

        .mybox{
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap">
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h3>코딩의 시작, 띵동코딩</h3>
    </div>   
    <p>ID : <input type="text"></p>
    <p>PW : <input type="password"></p>
    <button class="mybtn">로그인하기</button>
    </div>
</body>
</html>

head와 body는 나에게 너무나 익숙하고 친숙한 구조다. 그리고 그 안에 div로 나누고 또 p로 나뉘고 class로 묶어서 외관 디자인을 수정 적용하는걸 배웠다. 정확히는 배웠다보단 복습했다 라는 느낌이 강했다. 너무나 자연스럽게 눈으로 오랜시간 익혀온 구조라 그럴것이다. 여기서 기본적인 넓이나 높이 등은 눈으로 봐온게 많았는데 이미지와 글자등을 가운데 정렬하는데 사용되는 커맨드들은 상대적으로 낯설었다. 여백 조절에 필요한 margin이라는 개념도 마찬가지였다. 그리고 Visual Studio에서 명령어 앞부분만 입력하면 자동완성들이 나오고 Tab키로 순식간에 ; 까지 완성되는 기능은.... 정말 편리하고 친화적이라 좋으면서도 이렇게 내 실력이 늘어갈까하는 우려도 느꼈다. 그래도 계속 반복하면서 하다보면 나름대로 또 배우는게 있을것이라 생각한다. 다음주 학습지를 기다려본다.

]]> <![CDATA[웹크롤링 해보았다. (3주차)]]> https://velog.io/@hika_kwon/%EC%9B%B9%ED%81%AC%EB%A1%A4%EB%A7%81-%ED%95%B4%EB%B3%B4%EC%95%98%EB%8B%A4.-3%EC%A3%BC%EC%B0%A8 https://velog.io/@hika_kwon/%EC%9B%B9%ED%81%AC%EB%A1%A4%EB%A7%81-%ED%95%B4%EB%B3%B4%EC%95%98%EB%8B%A4.-3%EC%A3%BC%EC%B0%A8 Tue, 16 Aug 2022 06:17:20 GMT

이번주 느낀점

지난번에 배운걸 스스로 이리저리 굴려보면서 작성해보았다. 시작하기전 또 궁금증이 생겼다. soup은 무엇일까.. 왜 저기다 Beautiful까지 붙여서 BeautifulSoup이 되었을까.. 하는.. 그냥 위키를 검색해보니 저렇게 나온다.

뷰티풀 수프(Beautiful Soup)는 HTML과 XML 문서들의 구문을 분석하기 위한 파이썬 패키지이다. HTML로부터 데이터를 추출하기 위해 사용할 수 있는 파싱된 페이지의 파스 트리를 만드는데, 이는 웹 스크래핑에 유용하다. 뷰티풀 수프는 이 프로젝트를 계속 기여하고 있는 Leonard Richardson이 시작하였다. 추가적인 지원은 오픈 소스 유지보수를 위한 유료 구독형인 Tidelift의 지원을 받는다.

바로 다음 주 수업에 HTML이 들어가는거 같던데, 이렇게 얼렁뚱땅 넘어가도 되는게 맞는가? 라는 생각이 자꾸 든다. 그래도 어찌저찌 스스로 고민도 해보고 출력시키려고 print를 눌러보며 계속되는 에러에 자주 사용하지 않던 뇌 한쪽이 돌아가는 느낌도 든다. 수업의 핵심은 어떻게 굴러가는지 알려주고 이걸 일련의 복습 및 실습을 통해 계속 각인시키려는거 같다.

이번주 배운 내용

import requests
from bs4 import BeautifulSoup

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210101',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

lis = soup.select('#old_content > table > tbody > tr')

for li in lis:
  a = li.select_one('a')
  if a is not None:
    title = a.text
    rank = li.select_one('img')['alt']
    star = li.select_one('td.point').text
    print(rank,title,star)

개발자 도구는 이전에 FB Pixel 체크나 즐겨하는 게임인 로아에서 액세서리 검색을 위해 사용했던 icepeng 개발자가 만든걸 console로 실행하는거 정도였는데.. 내가 이걸 파트별로 찾아봐서 파악하는 용도로 쓰게 될 줄이야. 사실 마우스 커서를 통해 어느 파트에 속해있는지, 어느 데이터(이미지)를 가져와야 하는지 등에 대해서는 회사일을 하는 과정에서 자연스럽게 깨우치고 있던 내용이었다.

웹 크롤링시에 제일 중요한 것은 당연히 구조를 파악하는 일인거같다. 너무나 당연한거다.. 그래도 td 나 tr 로 나뉘는 파트 자체는 빠르게 파악해서 바로 구분하는데는 성공했다.

for를 통한 반복문을 구성하는데 있어, 중간중간 들어가는 구분선이 None으로 찍혀나오는걸 방지하기위한 if 조건문까지는 무난하게 이해했다. 하지만 나중에 이걸 직접 혼자 하는 과정에서 자연스럽게 기억해서 입력하거나 하다못해 잘 찾아서 하기만 해도 좋겠다는 생각이 들었다.

영화 순위는 img 형태로 되어있었는데, 거기서 alt 부분이 곧 순위를 나타내는 텍스트임을 깨달았으나 alt 부분만 어떻게 출력 시켜야하는지에서는 막혔었다. li.select_one(td.ac.alt).text / li.select_one('ac.alt').text 와 같은 형식으로 똥꼬쇼를 펼쳤으나 현실은 img가 나오는 파트에서 alt 부분만 따로 출력하는 방식이었던 것이다. 그 밑에있는 평점은 내가 생각한대로 텍스트부분만 깔끔하게 가져올 수 있었는데, 저부분은 무난했다. 저 이미지에서 순위 가져오는건 이것도 회사 개발자분이 출근하면 물어볼 예정이다...

마지막으로 print 위치 또한 신기했는데, 처음에 들여쓰기를 잘못해서 print가 한칸 앞으로 나와서 출력시켰더니, 50위에 위치만 정보값이 제일 위에 나오고 마지막에 두 번 더 반복해서 나오더라. 들여쓰는걸로 바로 해결했으나, 왜 한번 잘못했을때는 그게 먼저 나왔는지도 다시 찾아볼 예정이다.

]]> <![CDATA[내 코딩은 1년짜리니까.. 기대해라...]]> https://velog.io/@hika_kwon/1%EB%85%84%EC%A7%9C%EB%A6%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%9D%98-%EC%8B%9C%EC%9E%91-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%88%98%EC%97%85%EC%9D%B4-%EB%B0%80%EB%A0%B8%EB%8B%A4 https://velog.io/@hika_kwon/1%EB%85%84%EC%A7%9C%EB%A6%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%9D%98-%EC%8B%9C%EC%9E%91-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%88%98%EC%97%85%EC%9D%B4-%EB%B0%80%EB%A0%B8%EB%8B%A4 Tue, 16 Aug 2022 03:17:15 GMT 나는 누구인가

소프트웨어 스타트업으로 시작한 회사에서 데이터 엔지니어와 관련된 일을 하고있다. 이쪽 전공도 아니고, 전문도 아니고.. 말그대로 누군가 했어야하는 일이기에 하다보니 어느새 DA 업무를 주로 전담해서 하고 있었고, 현재는 QA까지 하게 되었다. 어깨너머로 CTO와 개발자들이 해오는것들을 보며 SQL쿼리부터 모든 개발 프로세스 이해까지는 갖추게 되었는데, 점점 일이 고도화되고 스스로 필요성은 많이 느껴 개발 공부는 늘 해야겠다고 생각했었다. 그런데 나는 내 여가 시간을 너무나 사랑했기에.. 그리고 공부는 더럽게 하기싫어하는 성격에 시작을 못하고 있었다. 그런데 일주일에 2시간 정도만 투자하면 된다는 건 나름 매력적이면서 게으른 나에게는 너무나 최적의 수업이었다. 흡사 매달 2만원씩만 넣는 적금을 든 기분이랄까... 예전에도 매우 적은 적금을 1년동안 들었는데, 나중에 1년 만기 채우고 용돈으로 너무 잘 사용했던 기억이 있다. 이번에도 1년 뒤 내가 코딩을 접하는데 있어, 혹은 업무에 적용하는데 있어 도움이 될거라는 기대로 차근차근 진행해보려 한다.

지금까지의 코딩 수업 이야기 (첫 후기)

띵동코딩이 시작된지는 약 3주, 그리고 1 주치가 밀렸다. (정확히는 2주인데 한 주치를 끝내고 급하게 후기를 작성하니 1주라고 하자) 그사이에 코로나 이슈도 있었고, 몸이 회복되는 기간에 회사 업무도 힘든데 이건 꿈도 못꾸었다. 어느정도 개발 지식이 있다보니 개념이나 단어 그리고 접근에 있어서 도움이 될거라고 생각했지만, 일단 보고 따라하는 수업 위주로 진행되고 있어 좀 더 지켜봐야할 것 같다. 이전에도 간단하게 개발 언어 배울때, '이건 왜 이런건가요? 이건 무슨 뜻인가요?' 라는 질문을 해도 '이건 처음부터 이거였어' 식의 답변을 하도 듣다보니, 지금 띵동코딩을 보면서도 의문점은 최대한 들지 않으려고 노력한다. 이건 원래 이렇게 쓰는거고 실행하면 되는거니까 라는 식이랄까. 사실 아직까진 잘 모르겠다. 위에서도 이야기했지만 2만원짜리 적금으로 무엇을 원하는가? 딱 2만원 어치만 얻어가면 되는거라 생각하고 무작정 따라하고 있다. 부디 1년간 내 스스로가 지치지않고 계속 천천히만 잘 따라갔으면 좋겠다.

이번주에 배운 것

import requests
from bs4 import BeautifulSoup

def get_news(keyword) : 
  headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
  data = requests.get(f'https://search.naver.com/search.naver?where=news&ie=utf8&sm=nws_hty&query={keyword}',headers=headers)

  soup = BeautifulSoup(data.text, 'html.parser')

  lis = soup.select('#main_pack > section > div > div.group_news > ul > li')

  for li in lis:
    a = li.select_one('a.news_tit')
    media = li.select_one('a.info.press')
    print(a.text, a['href'], media.text.replace('언론사 선정',''))

웹 크롤링을 배웠다. 약 2주정도 보다보니 파이썬에선 def가 정의할때 사용하는 함수로 보인다. 예전에 C샵 아주 잠깐 배울때도 정의를 하고 반복문과 조건문을 사용해서 최종적으로 출력시키는 식으로 했던것으로 기억하는데.. 하나도 기억나질 않는다 ㅋㅋㅋ; 그리고 저렇게 정의한 def를 for로 무엇을 할지에 대한 반복문 정리를 하는거로 보인다. 그리고 나선 최종적으로 print로 출력한다. (현재까지는 간단하게 text로만 출력하고 있다.) 이번주에 한가지 의문인건 media = li.select_one('a.info.press') 부분이다. 여기서 개발자 도구로 보았을때 class="info press"라고 되어있는데, 왜 그대로 쓰면 안되고 그사이에 . 을 찍어야 하는지이다. 이건 나중에 업무 끝나고 우리 개발자에게 물어봐야겠다 ㅠ.ㅠ

]]>