서비스개발(Web, App)

VAST란? - (2) VAST & VPAID

지난 글에서 비디오 광고의 종류의 대해서 알아보았습니다. [https://roothyo.tistory.com/93] VAST란? - (1) 비디오 광고 및 종류 VAST에 대해 알기 위해서는 먼저 비디오 광고와 그 종류들을 알아봐야 한다. 비디오 광고는 동영상이 나오는 환경에서 스트리밍 동영상, 애니매이션, 게임 및 음악 동영상 콘텐츠를 비롯해 다양 roothyo.tistory.com 이제 이 비디오 광고를 하기 위한 표준인 VAST에 대해서 알아보도록 하겠습니다. VAST(Vidwo Ad Serving Template) VAST는 미국 인터넷 광고 협회(IAB, Interactive Advertising Bureau) Tech Lab에서 지정한 비디오 광고 전달 양식 표준입니다. XML 형식으로 Med..

VAST란? - (1) 비디오 광고 및 종류

VAST에 대해 알기 위해서는 먼저 비디오 광고와 그 종류들을 알아봐야 한다. 비디오 광고는 동영상이 나오는 환경에서 스트리밍 동영상, 애니매이션, 게임 및 음악 동영상 콘텐츠를 비롯해 다양한 콘텐츠가 구동 전, 구동 중, 구동 후에 나오는 광고를 의미한다. (IAB, Interactive Advertising Bureau 미국 인터넷광고협회) Forbes에 따르면, 마케팅 담당자의 거의 90%가 광고 켐페인에 비디오 광고를 사용하며, 70%의 시청률을 주로 확보할 수 있다. 비디오 광고주는 주로 2가지 목표를 갖는다. 시청자에게 풍부한 광고 경험을 제공 시헝한 광고 경험에 대한 반응 및 사용자 상호 작용 세부 정보 확인. 온라인 동영상 광고는 온라인이나 모바일로 제공되는 동영상 광고를 비롯해 유튜브와 ..

CSR vs SSR (Rendering 기법의 차이)

이 글에서는 Server Side Rendering과 Client Side Rendering의 차이점을 공유하고자 합니다. 상반된 관계에 있는 방식인 만큼 장단점이 서로 엇갈려서 서로의 장단을 정확하게 알고 적재적소에 필요한 방식으로 구현하는 것이 중요하다고 생각합니다. SSR (Server Side Rendering) SSR은 서버측에서 렌더링이 되고 나온 결과물을 클라이언트에 전달하는 방식을 의미합니다. User가 WebSite 요청을 보냅니다. Server는 'Ready To Render'. 즉, 즉시 렌더링 가능한 html 파일을 만듭니다. 렌더링 된 HTML과 함께 클라이언트가 자바 스크립트를 다운받습니다. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만, 사이트를 조작할 수는 없습니다..

[FE] 브라우저 작동 원리

브라우저는 아마 사람들이 가장 많이 사용하는 소프트웨어 중 하나이며, 이 글을 통해서 어떤 과정을 거쳐 웹 페이지가 화면에 보이게 되는지 알게 될 것입니다. 브라우저의 기본 구조 사용자 인터페이스 : 주소 표시줄, 이전/다음버튼, 북마크 메뉴 등, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 : 요청한 콘텐츠를 표시. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 그리는 엔진 통신 : HTTP 요청과 같은 네트워크 호출에 사용됨. 플랫폼 독립적인 인터페이스로 각 플랫폼 하부에서 실행. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. OS 사용자 인터페이스 체계를 사용. 자바스크립트 해석기..

Nest JS 프레임워크 공부하기 - TypeORM, MariaDB(mysql) 연동

오늘은 서비스를 운용하기 위해 필요한 데이터베이스를 직접 연결해보는 방법에 대해서 알아보도록 하자. 오늘날 대부분의 서비스들은 데이터를 저장하고 저장된 데이터로 sight와 의미를 생성해내는 일을 하고 있으며, 이를 실현하기 위해서는 서버와 데이터베이스의 연결은 가히 필수라고 말할 수 있다. 과거 서비스의 데이터베이스를 연동하기 위해서는 데이터베이스 전문가인 DBA가 쿼리를 생성하고, 백엔드 개발자가 해당 쿼리를 JDBC등을 통해 데이터를 받아오는 작업을 했었다. 그렇다 보니 회의를 할 때도, 이 둘 간의 신경전이 꽤나 있었다고 한다... 결국 서비스의 기능은 데이터베이스의 데이터가 핵심이기 때문에 DBA의 권력이 더 강했고, 이에 화가 난 백엔드개발자가 DBA 없이 프로그래밍에만 집중하여 개발할 수 있..

Nest JS 프레임워크 공부하기 (Node.js) - 3 [DTO, DAO, Entity]

오늘은 프레임워크에 좀 더 상세히 알아보면서 모듈로 관리하는 방법에 대해 알아보도록 하자. DB까지 접근하기 위한 Framework의 구조는 주로 다음과 같이 구성되며 이전에 Contorller, Service, Repository에 대한 설명을 했었다. [이전 글 참조 : https://roothyo.tistory.com/56?category=1034781] 간단히 설명하자면, Contoller : 해당 서버로 요청이 오는 것을 처리해주는 Router 기능 Service : 유저가 요청한 데이터를 실질적으로 처리하고 Controller에게 건네주는 기능 Repository : 서버에서 DB로 직접 접근하여 데이터를 가져오는 기능 이라고 보면 된다. 그럼 그냥 Framework를 위와 같이 3개의 구조로..

Nest JS 프레임워크 공부하기 (Node.js) - 2

오늘은 Service에 대해 알아보려 한다. Nest는 객체지향적 방식으로 종속성을 설계하기 때문에 서비스, 리포지토리, 팩토리, 헬퍼 등이 프로바이더로 취급되며 사용된다. 서버에서의 처리 과정을 다음과 같이 크게 3가지로 분리된다. Controller - 클라이언트의 요청을 받음 - 요청에 대한 처리는 서비스에게 전담 - 클라이언트에게 응답 Service - 사용자의 요구사항 처리 - DB 정보가 필요한 경우 Repository에게 전담 Repository - DB 관리(연결, 해제, 자원 관리) - DB CRUD 작업 처리 그럼, Nest.js에서 Service를 구현하는 것을 알아보자. 먼저, Nest CLI를 통해 Service를 생성해준다. 서비스 name은 controller와 똑같이 movi..

Nest JS 프레임워크 공부하기 (Node.js) - 1

npm install -g @nest/cli nest new nestJS 시작에 앞서 nest/cli를 npm을 통해 설치를 하고 nest 명령어를 통해 새 프로젝트를 생성한다. npm과 yarn중에 편한 것을 고르면 된다. 필자는 npm을 사용하였다. 처음에 패키지를 시작하기 위해 설치를 하는데 시간이 걸리니까 잠깐 기다리면 알아서 구조와 필요한 dependency를 설치해준다. 만들어진 nest-js 디렉토리를 vscode로 열고 src 파일을 보면 코드 구조는 다음과 같으며, 각각의 설명이 있다. src ㄴapp.controller.spec.ts app.controller.ts app.module.ts app.service.ts main.ts app.controller.ts 하나의 라우트가 있는 기..