즐겁게, 코드

컨텐츠로 수익을 창출할 수 있는 시대가 되면서 미디어에 광고를 부착하는 것이 흔한 광경이 되었는데요,여러 광고 유형들 중에서도 제 3의 페이지를 방문하도록 유도하는 형태가 점점 많이 보이는 것 같아요. 그런데 갑자기 광고팀에서 우리의 플랫폼에도 방문형 광고 기능을 추가해달라고 요청하면 어떻게 해야 할까요? (안된다고 누워야겠죠?)이런 불상사를 대비하기 위해 오늘은 간단한 형태의 방문형 광고를 만들어 보겠습니다.🔔 필요한 코드는 아래 링크에 미리 준비해 두었어요!https://github.com/C17AN/page-visibility-demo GitHub - C17AN/page-visibility-demoContribute to C17AN/page-visibility-demo development by ..

웹 서비스를 사용하다 보면 때때로 '이 기능은 어떻게 구현한 걸까?' 라는 의문이 들 때가 있지 않나요? 저는 최근 인스타그램을 사용하다가 "내가 올린 게시물에 좋아요가 달리면, 어떻게 실시간으로 알림이 오는 걸까?" 라는 궁금증을 가지게 되었는데요, 오늘 다룰 Server-Sent Event (SSE) 라는 키워드가 약간의 해답이 되었던 것 같아요. 그런데 ‘서버에서 보내는 이벤트’ 라는 명칭만 들어서는 이게 어떤 기술인지 금방 알아차리기 어려울 수 있는데요,Server-Sent Event에 대해 더 이해할 수 있도록 이번 글을 작성해 보았습니다.목차Server-Sent Event란?Server-Sent Event 구현하기SSE를 응용해 친구 초대 알람 만들어보기1. Server-Sent Event (..

리액트와 비교했을 때 뷰의 장점 중 하나는 유용한 빌트인 컴포넌트를 제공한다는 점이라 생각한다. 이 중 컴포넌트는 정말 유용하게 사용하고 있는 중인데, 페이지 전환 시에도 트랜지션 효과를 줄 수 있다고 한다. Home About Contact nuxt가 아닌 vue-router로 라우터를 구성하면 위와 같이 router-view 컴포넌트를 사용한다. Home About Contact 그리고 으로 를 감싸면 애니메이션이 잘 적용된 것처럼 보이나, 콘솔에 경고가 출력된다. Home About Contact 대신 router-view는 "Component" 라는 named slot을 expose하는데, expose된 Component 슬롯을 동적으로 렌더한다. (※ 여기서 Component 는 현재 경로에서 ..

1. IAM 기초 IAM : Identity and Access Management, 리전이 구분되지 않는 글로벌 서비스 AWS에 가입하면 루트 계정이 생성되는데, 루트 계정은 계정을 생성할 때만 사용되어야 한다. 사용자 는 조직 에 속하며, 하나 이상의 그룹에 속할 수 있다. 그룹에는 사용자만 속할 수 있으며, 하위 그룹은 존재할 수 없다. 그룹을 분리하는 이유는 *정책 때문이다. (*정책 = 사용자의 권한을 정의하기 위한 JSON 문서) Least Privilege Principle : 필요로 하는 정책 이상으로 부여하면 안된다. 2. IAM 정책 상속 사용자가 그룹에 속하면 그룹이 갖는 정책(= 권한)을 상속받게 된다. 사용가 그룹에 속하지 않아도 inline 정책을 적용해 사용자 개별적으로 정책을..

1. 디펜던시 오류 디버깅 TL;DR : JPA가 jakarta.persistence와 javax.persistence 두 버전으로 분화되어 있다. 둘을 혼용하지 않고 jakarta.persistence로 통일해 문제를 해결할 수 있었다. org.springframework.boot spring-boot-starter-data-jpa 이놈이 없으면 에러는 발생하지 않으나, H2 DB에 접근하지 못하는 문제가 있다. 하지만 위 의존성을 추가하면 H2 Console이 제대로 잡히기는 하나, Class org.springframework.orm.jpa.vendor.SpringHibernateJpaPersistenceProvider does not implement the requested interface j..

1. MySQL 접속하기 mySQL을 실행하려 할 때 이런 오류가 뜰 때가 있는데, 이는 권한과 관련된 오류로 'using password' 를 봐주면 된다. NO : 비밀번호를 입력하지 않아 생긴 문제 YES : 비밀번호가 일치하지 않아 생긴 문제 비밀번호를 사용해 mySQL에 접속할 때는 -p 플래그를 사용해주면 된다. # 패스워드를 사용한다 mysql -p # 특정 유저로 로그인하면서 패스워드를 사용한다 mysql -u [유저네임] 2. DBeaver SQL에 익숙하지 않은 사람들을 위해 DBeaver GUI 툴을 사용할 수도 있다. 데이터베이스 / 테이블 / 칼럼 생성을 GUI에서 수행할 수 있다. 3. DTO와 엔티티의 차이 DTO와 엔티티는 데이터 구조를 나타내는 역할인데, 엄밀한 차이가 무엇..

1. mysql-connector-java 스프링 어플리케이션을 MySQL과 연결하기 위해 아래처럼 pom.xml에 의존성을 작성했는데 오류를 겪었다. com.mysql mysql-connector-java runtime 무엇이 문제였고 하니, 대략 스프링 3부터는 mysql-connector-j 라는 의존성을 사용해줘야 함을 알 수 있었다. 2. DTO 작성하기 FE에서 타입스크립트로 객체를 구조화하는 것처럼 스프링에서도 DTO를 작성해 사용한다. package com.example.dto; public class TodoDTO { private Long id; private String title; private String description; private boolean completed; //..