즐겁게, 코드

React에서는 Context.Provider ↔ useContext 로 구성된 Context API를 사용해 하위 컴포넌트로 값을 공유할 수 있듯, Vue에서도 provide ↔ inject 라는 함수(편의상 '패턴' 이라 부르겠습니다)를 조합해 값을 공유할 수 있습니다.이번 글에서는 Provide - inject 패턴의 사용법을 간단히 알아보면서, 두 가지 팁을 함께 소개해보려 합니다. TL;DRprovide - inject 함수의 키로 심볼을 활용하면 키의 중복을 차단할 수 있다.InjectionKey 타입을 활용하면 키에 따라 inject될 값의 타입을 미리 추론할 수 있다.Provide - Inject 패턴의 예시앱에 다크 모드 / 라이트 모드 / 시스템 테마에 알맞는 UI 색상을 적용하기 위해..

📣 알림 : 이 글은 'HTML블럭' 기능을 활용해 XSS 스크립팅의 위험성을 전달하기 위한 목적으로 작성되었으며,이 글의 정보들은 독자의 노트북에서만 재생될 뿐 서버로 전달되지 않습니다.오랜만에 티스토리에 글을 쓰려 했는데 "HTML블럭" 이라는 새로운 기능이 보였다. 조금 살펴보니 HTML + CSS + JS를 게시물 내에서 실행할 수 있도록 해주는데, 아마 codepen 등 코드 작성 솔루션을 대체할 수 있도록 만들어준 것으로 추측된다. 본래의 목적으로 사용하면 멋진 인터렉션이나 CSS 애니메이션 등의 튜토리얼과 함께 데모를 제공하는 용도로 사용할 수 있다. AAPL 181.16 -1.36 (-0.67%) ..

지난 프로젝트를 회고하며 부족했던 점들을 돌아봤을 때, 새로운 서비스를 추가할 때마다 기존 코드를 복사 - 붙여넣기 후 새로운 프로젝트를 시작하는 것에 좋지 않은 경험을 느꼈던 것 같다. 어떤 경로로 진입했을 때 어떤 페이지를 렌더할지 설정하는 modules/[모듈명]/route.ts 를 작성하는 상황을 예로 들어보겠다.import type { RouteRecordRaw } from 'vue-router';export const accountRoutes: RouteRecordRaw[] = [];accountRoutes.push({ path: '/account/signUp', name: 'accountSignup', component: () => import('@/pages/account/Accoun..

컨텐츠로 수익을 창출할 수 있는 시대가 되면서 미디어에 광고를 부착하는 것이 흔한 광경이 되었는데요,여러 광고 유형들 중에서도 제 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 정책을 적용해 사용자 개별적으로 정책을..