내일배움캠프 AI - 33일차 TIL, 2022.06.03

Dongwoo Kim·2022년 6월 7일

AI TIL 내일배움캠프 스파르타코딩클럽

TIL / WIL

목록 보기

34/113

스파르타 코딩클럽

내일배움캠프 AI 웹개발자양성과정 2회차

2022.06.03. 33일차- TIL

1. 장고 강의 마무리

09:00-12:00 5주차 강의 완강 및 리뷰

오전에는 장고 실무 기초 강의 5주차를 진행했다. 5주차에는 글을 작성할 때 태그를 달 수 있는 기능과 aws배포하는 과정을 진행했다. 태그 달기 기능은 사실 원리를 이해한다기보다 라이브러리를 사용하는 법을 배운 것 같아서 크게 어려운 점은 없었고 아 이렇게 사용하는 거구나 싶었다.

aws 배포는 기존에 웹개발 종합반에서도 했던 작업이라서 기존의 ec2 인스턴스를 종료하고 새로 추가받아 진행했다. 기존과 달랐던 점이라면 git bash가 아니라 브라우저로 접속하여 작업했던 정도였다.

2. 오후부터 다시 팀리뷰를

12:00-13:00 점심시간
13:00-16:00 크롤링 / 추천시스템 팀리뷰

오후에는 어제 아침에 진행했던 특강을 리뷰하는 시간을 가졌다. 이번에 진행하는 팀 프로젝트의 주 목표 중 하나가 추천시스템을 이용하는 것이었기 때문에 이를 위해서 한번 복습차원에서 진행한 것이다.

먼저 특강시간에 데이터를 수집하기위한 크롤링 작업 내용을 리뷰했는데 생각보다 팀원들이 아직 크롤링에 대해 제대로 이해를 못한 것 같아서 코드를 세세하게 짚고 넘어갔다. requests와 bueatifulsoup의 역할과 용도에 대해서 집고 넘어갔고, 수집한 데이터를 벡터화하는 과정까지 생각보다 사전작업 단계를 리뷰하는데 오래걸렸다. 이후 이 데이터로는 벡터화한 후 데이터끼리의 유사도를 측정하는 것까지만 진행했다.

왼쪽의 크롤링한 기사내용과 오른쪽의 벡터화 하기전 토큰화 시킨 단어들, 토큰화 라이브러리 (mecab) 출처 : https://github.com/SOMJANG/Mecab-ko-for-Google-Colab.git

데이터기반과 유저기반 협업 필터링하는 과정은 영화 리뷰 데이터셋을 가지고 리뷰했다. 여기서도 데이터(아이템)기반 협업필터링과 유저기반 협업 필터링을 이해하기 어려워하는 팀원들이 있어서 개념을 다시 짚고 넘어가느라 시간이 좀 걸렸다. 사실 이 부분까지는 우리가 팀 프로젝트를 진행하는 데 있어서 코드 구현까지할 필요성은 없었기 때문에 개념을 확실히 하고 넘어가는 것에 중점을 둔 탓도 있었다. 우리가 프로젝트에서 추천시스템을 이용할 방법은 위의 기사를 크롤링해서 유사도 측정을 한 것처럼 맥주 종류별로 유사도를 측정하여 유저가 선호는 맥주의 스타일과 비슷한 맥주를 찾는 데이터기반 협업 필터링이다.

3. 타임어택 너무 쉽고..?

16:00-17:30 타임어택 설명 & 진행
17:30-18:30 타임어택 해설

오늘은 금요일이었기 때문에 타임어택을 진행했다. 지난주에 조금 난이도가 있었던 탓인지 이번주 문제는 오히려 너무 쉬운 난이도였다. 간단한 drink와 category 모델을 만들고 데이터를 등록해서 리스팅하는 페이지를 만드는 것. 조건이 있었다면 카테고리별로 drink들을 볼 수 있도록하는 것이었다.

카테고리 버튼을 만들거나 리스팅을 하기위한 API를 만드는 등은 정말 쉽게 구현할 수 있었는데 한가지 막히는 부분이 있었다. 이전까지는 form태그를 이용해 request를 날렸었는데 이번 문제에서 카테고리 버튼의 onclick함수로 ajax를 이용하여 request를 날리려고하니 django에서는 ajax를 사용해본 적이 없어서 flask에서 하던대로 하면 오류가 발생한 것이다. 이 부분에 있어서 ajax에 csrf token을 설정해주는 부분과 해당 카테고리에 대한 html정보를 response로 받아 화면을 렌더링 하는 부분까지 새롭게 찾아봐야 했다.

$.ajaxSetup({
  headers: {"X-CSRFToken": '{{csrf_token}}'}
});

  function list_up(event) {
  	let data = {category: event.target.name}
    $.ajax({
      type: "POST",
      url: '/menu/',
      data: JSON.stringify(data),
      success: function (response) {
        $('.drink_box').html(response)
      }
    })
}