전체 글
중복 광고 노출 방지(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) 클라이언트 식별 - 비로그인 유저를 어떻게 구분할 수 있을까?
과거 프로젝트를 돌아보며처음 Frontend 개발자를 희망했을 때 시작했던 개인 프로젝트 '수튜브'를 이어서 작업해보려고 합니다. 기획했던 기능을 다 개발하지 않고 방치해 두었던 것이 아쉬워서, 마무리를 짓는 것을 목표로 해보겠습니다. 제가 생각하는 '유튜브'를 구현하는 데 있어서 핵심 기능은 이 두 가지입니다. 1. 커스텀 비디오 컨트롤러2. 광고 노출 대략적인 화면 구현은 마쳤지만, 최종 목표는 같은 유저에게, 같은 광고를 중복 노출하는 것을 방지하는 것이었습니다. 이 플랫폼을 실제로 서비스한다면, 광고주는 많은 사람들이 광고를 보길 원할 것이고, 한 사람이 같은 광고를 계속해서 조회하는 일은 없어야 하기 때문입니다. (광고 노출 횟수당 광고 요금을 받는다고 가정했을 때..) 누가 어떤 광고를..
![210718 [수튜브] - 브라우저의 저장소](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMcw3v%2Fbtq9VjP8BWp%2FDUulEZlU2gtkkZAdMyKxu0%2Fimg.png)
210718 [수튜브] - 브라우저의 저장소
학습 시간 약 3시간 To Do 아래 이슈를 해결 학습 내용 수튜브에서 사용자가 같은 광고를 중복 시청하지 않도록 방지하기 위해, localStorage를 사용하고 있습니다. 이번 학습시간에는 localStorage에 대한 이해를 높이기 위해 sessionStorage, cookie와 비교해보겠습니다. 그리고 브라우저별 실제 저장 위치와, 각 도메인별 저장용량 및 위치가 구체적으로 어떻게 되는지 알아보겠습니다. | 브라우저의 저장소 localStorage sessionStorage cookie 공통 - 데이터를 문자열 형태로 저장 (객체를 저장하고 싶다면 JSON 또는 store.js 활용) - key & value로 이루어짐 - same-origin policy에 따라, 도메인별로 다르게 관리 특징 -..
프론트엔드 개발환경 구축 - VScode + React
설치 작업 | VScode 먼저 VScode를 설치하고 몇 가지 Extension을 설치했습니다. 코드 뒤에 남는 불필요한 공백을 삭제해주거나, 괄호가 제대로 짝지어져 있는지 색상을 표시해주는 기능 등 편의성을 위한 것부터, 디버깅 기능까지 추가할 수 있습니다. | node.js, npm, yarn node.js, npm, yarn을 설치했습니다. 각각의 역할은 다음과 같습니다. node.js : Jabascript 런타임. Babel, Webpack 등의 모듈을 가지고 있음 npm : Node Package Manager. Node.js의 패키지를 관리 yarn : npm에 비해 속도가 향상된 패키지 매니저 React 개발환경 구축 | create-react-app (CRA)로 개발환경 구축하기 아래와..
프론트엔드 개발환경 구축 - React vs Vue
컴포넌트 단위의 개발 방식과 Virtual Dom이라는 이점 때문에 React나 Vue.js를 사용하는 것이 좋겠다는 결론을 내렸습니다. 두 가지 모두 비슷한 장점을 가지고 있고, 성능 면에서도 큰 차이는 없기 때문에, 이후에는 직접 간단한 Todo List를 작성해보며 차이점을 비교해보았습니다. Todo List 작성하기 | 구성 참고 : 벨로퍼트와 함께하는 모던 리액트 위 자료를 참고하여 작성했던 React의 Todo List와 거의 동일한 것을 Vue에서도 만들어보았습니다. 왼쪽이 Vue.js, 오른쪽이 React로 만든 Todo List입니다. 몇 가지 CSS적용을 누락한 것을 제외하면 완전히 똑같이 작동하고 있습니다. 리액트는 create-react-app으로, 뷰는 vue-cli로 간단하게 프..
프론트엔드 개발환경 구축 - 프레임워크란? 바닐라 JS vs 프레임워크
지난 시간에 이어, 이번에는 프레임워크를 조사해보았습니다. 평소에 저는 팀 프로젝트 외에는 주로 바닐라 JS로 개발을 진행하기 때문에, 프레임워크를 썼을 때의 장점은 무엇인지, 쓴다면 무엇을 선택하는 것이 좋을지를 중점적으로 살펴보았습니다. 프레임워크(Framework) 또는 라이브러리 프론트엔드 프레임워크는 컴포넌트별 개발을 용이하게 도와주며, 유저 인터랙션에 따라 반응하는 웹을 구현해야 할 때 DOM과 state의 처리를 도와줍니다. 주로 많이 사용되고 있는 것으로는 라이브러리인 React와 프레임워크인 Vue.js, Angular가 있습니다. 우선 Angular는 러닝 커브가 크고, 장기 프로젝트 또는 대형 프로젝트에 좀 더 알맞기 때문에 제외하였고, Vue.js와 React를 비교해보았습니다. V..
프론트엔드 개발환경 구축 - IDE/편집기 조사 및 장단점 비교
개발환경 구축이란? 개발에 필요한 컴파일러, IDE, 라이브러리, 프레임워크 등을 컴퓨터에 세팅하는 것을 의미합니다. 저는 크게 다음 3가지로 나누어서 조사한 뒤 직접 비교해보고, 최종적으로 환경 구축을 진행할 계획입니다. IDE(통합개발환경) 또는 편집기 WebStorm, VScode, Sublime Text, Atom 등 프레임워크 React, Angular, Vue.js 등 그 외 Babel, Webpack 등 IDE(통합개발환경) 또는 편집기 먼저, 조사를 시작하면서 IDE와 편집기가 서로 구분된다는 것을 알게 되었습니다. IDE 대규모에 적합 / 디버깅 가능 VScode, Atom, IntelliJ, WebStorm 편집기 소규모에 적합 / 가볍지만 다양한 확장기능 보유 VScode, Atom,..
![210710 [수튜브] - 이슈트래킹 + 커스텀 컨트롤러 리팩토링](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc4s8WV%2Fbtq9hAeryQG%2Fhnkhskzh5kajUmDAxgtxjK%2Fimg.png)
210710 [수튜브] - 이슈트래킹 + 커스텀 컨트롤러 리팩토링
학습 시간 약 7시간 To Do 이슈트래커 설정 및 Issue와 PR 템플릿 작성 아래 이슈를 해결 학습 내용 제가 개발하고 있는 커스텀 컨트롤러는 전체 controls영역(보라색)과 그 내부에 위치한 버튼 영역(연두색)의 클릭 이벤트를 구분해야 합니다. 전체 영역(보라색) : video 화면 위에 controls를 보여주거나 숨김 각 버튼 영역(연두색) : 해당 버튼의 기능 수행 각 클릭 이벤트를 구분해야 하지만, 모든 버튼이 전체 controls 영역 내부에 위치하기 때문에 코드가 복잡하고, 조금만 수정해도 동작이 꼬이는 문제가 있었습니다. 이벤트 위임을 적용한 코드 controls.addEventListener('click', function(e) { // ...생략 let target = e.ta..