프로젝트/수튜브 : 유튜브 클론코딩

    중복 광고 노출 방지(2) 로그 남기기
    프로젝트/수튜브 : 유튜브 클론코딩

    중복 광고 노출 방지(2) 로그 남기기

    로그 남기기지난 포스팅에서 Cookie에 사용자 식별정보를 담아, 비로그인 사용자를 구분할 수 있게 되었습니다. 이번에는 광고 시청을 완료했을 때, txt파일에 로그를 남겨보겠습니다.   현재 프로젝트에서는 DB대신 txt파일을 활용하여 데이터를 저장하고 있습니다. DB를 도입할 경우, 서버에서 JSON형태의 응답을 준다고 가정하여, ad.txt를 다음과 같이 설정하였습니다.이름타입설명seqint광고의 고유한 sequencecontentsstring화면에 노출 할 광고 내용{"seq":1, "contents": "광고 노출 중"}{"seq":2, "contents": "텍스트 광고 입니다"}{"seq":3, "contents": "텍스트 광고3"}{"seq":4, "contents": "광고4"}{"se..

    중복 광고 노출 방지(1) 클라이언트 식별 - 비로그인 유저를 어떻게 구분할 수 있을까?
    프로젝트/수튜브 : 유튜브 클론코딩

    중복 광고 노출 방지(1) 클라이언트 식별 - 비로그인 유저를 어떻게 구분할 수 있을까?

    과거 프로젝트를 돌아보며처음 Frontend 개발자를 희망했을 때 시작했던 개인 프로젝트 '수튜브'를 이어서 작업해보려고 합니다. 기획했던 기능을 다 개발하지 않고 방치해 두었던 것이 아쉬워서, 마무리를 짓는 것을 목표로 해보겠습니다.  제가 생각하는 '유튜브'를 구현하는 데 있어서 핵심 기능은 이 두 가지입니다. 1. 커스텀 비디오 컨트롤러2. 광고 노출    대략적인 화면 구현은 마쳤지만, 최종 목표는 같은 유저에게, 같은 광고를 중복 노출하는 것을 방지하는 것이었습니다. 이 플랫폼을 실제로 서비스한다면, 광고주는 많은 사람들이 광고를 보길 원할 것이고, 한 사람이 같은 광고를 계속해서 조회하는 일은 없어야 하기 때문입니다. (광고 노출 횟수당 광고 요금을 받는다고 가정했을 때..) 누가 어떤 광고를..

    210718 [수튜브] - 브라우저의 저장소
    프로젝트/수튜브 : 유튜브 클론코딩

    210718 [수튜브] - 브라우저의 저장소

    학습 시간 약 3시간 To Do 아래 이슈를 해결 학습 내용 수튜브에서 사용자가 같은 광고를 중복 시청하지 않도록 방지하기 위해, localStorage를 사용하고 있습니다. 이번 학습시간에는 localStorage에 대한 이해를 높이기 위해 sessionStorage, cookie와 비교해보겠습니다. 그리고 브라우저별 실제 저장 위치와, 각 도메인별 저장용량 및 위치가 구체적으로 어떻게 되는지 알아보겠습니다. | 브라우저의 저장소 localStorage sessionStorage cookie 공통 - 데이터를 문자열 형태로 저장 (객체를 저장하고 싶다면 JSON 또는 store.js 활용) - key & value로 이루어짐 - same-origin policy에 따라, 도메인별로 다르게 관리 특징 -..

    210710 [수튜브] - 이슈트래킹 + 커스텀 컨트롤러 리팩토링
    프로젝트/수튜브 : 유튜브 클론코딩

    210710 [수튜브] - 이슈트래킹 + 커스텀 컨트롤러 리팩토링

    학습 시간 약 7시간 To Do 이슈트래커 설정 및 Issue와 PR 템플릿 작성 아래 이슈를 해결 학습 내용 제가 개발하고 있는 커스텀 컨트롤러는 전체 controls영역(보라색)과 그 내부에 위치한 버튼 영역(연두색)의 클릭 이벤트를 구분해야 합니다. 전체 영역(보라색) : video 화면 위에 controls를 보여주거나 숨김 각 버튼 영역(연두색) : 해당 버튼의 기능 수행 각 클릭 이벤트를 구분해야 하지만, 모든 버튼이 전체 controls 영역 내부에 위치하기 때문에 코드가 복잡하고, 조금만 수정해도 동작이 꼬이는 문제가 있었습니다. 이벤트 위임을 적용한 코드 controls.addEventListener('click', function(e) { // ...생략 let target = e.ta..

티스토리툴바