인기글
-
Count up 효과 (숫자 올라가는 효과) - js / vue
Count up 효과 - js, vue로 구현하기 웹 개발을 하다보면 0부터 설정한 값까지 숫자가 올라가는 count-up 모션을 만들어야 하는 경우가 있습니다. 근데 카운트업 효과를 구글에 찾아보면 죄다 jQuery로 구현이 되어있더라구요. 그래서 직접 js와 vue를 이용해서 한번 만들어 보았습니다. 간단하게 만든거니 가져다 쓸 때 고치셔야 할거에요. JSFiddle 창을 클릭하면 결과와 소스를 볼 수 있습니다. JavaScript 로 구현 Vue 로 구현 이해가 안되시면 답글 달아주세요:)
2021.12.08
-
Vue3에서 swiper 쓰는법 (오류 해결법)
Vue3에서 swiper 사용법 (오류 해결법) swiper는 슬라이드를 만들때 사용하는 라이브러리로 많은 사랑을 받고 있습니다. 대부분의 사이트에서 슬라이드를 구현할 때 스와이퍼를 사용하죠. swiper의 공식 사이트에 가보면 기본 js 뿐만아니라 react, angular, vue의 demo 코드도 제공하기 때문에 초심자들도 따라 배우기가 쉽습니다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 문제 그런데 공식 사이트에서 제공하는 demo 코드..
2022.02.05
-
웹 기반 통합 인증 (SSO) 구현
통합 인증 (SSO) 구현최근 여러 자사 서비스들을 개발하면서 전체 서비스들에 대한 통합 로그인 솔루션이 필요하게 되었습니다.통합 인증(SSO) 서비스 개발을 진행하면서 얻은 지식들을 정리하고 공유해보려고 합니다. SSO란?먼저 SSO(Single Sign-On)은 1회 사용자 인증으로 다수의 서비스에 로그인을 허용하는 통합 로그인(인증) 솔루션입니다.SSO는 여러 서비스들이 독립적으로 동작하지만 같은 회사에서 제공하는 서비스일 때 유용합니다. 기존 방식SSO를 사용하지 않고 기존 방식대로 세개의 서비스에 로그인 로직을 따로 구현할 때의 문제점은 다음과 같습니다.사용자: 세 쌍을 기억해야 합니다.서비스 개발자: 로그인 화면 세 개, 데이터 베이스 세 개, 로그인 프로세스 세 개를 각각 구현 해야 합니다..
2024.10.11
-
오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리
오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리 - 오픈그래프란 사이트가 SNS를 통해 공유될 때 미리보기 형식으로 나올 컨텐츠를 정하는 용도로 메타태그 안에 설정합니다. 카카오톡으로 url을 보냈을 때, 아래의 사진과 같이 사이트의 설명과 썸네일을 포함한 카드가 생기는 것을 많이 보셨을 거에요. 오픈그래프는 바로 이 카드의 내용을 설정할 때 쓰이는 것입니다. - 트위터카드는 트위터에 최적화된 오픈그래프라고 생각하면 됩니다. 보통 둘다 동시에 써주죠. 오픈그래프(SNS) 트위터카드(트위터) 오픈그래프 & 트위터카드 기본(basic) 속성 아래는 필수로 들어갈만한 속성들입니다. 속성의 이름을 보면 어떤 쓰임인지 대충 알테니 설명은 스킵하겠습니다. 보면 오픈그래프와 트..
2022.02.06
-
Canvas로 육각형 그래프 그리기 - js / vue
canvas로 육각형 그래프 그리기 프로젝트를 진행하다보니 육각형 모양의 그래프를 만들어야 했습니다. 이미지를 사용한다면 좋겠지만, 데이터에 맞는 그래프를 그때그때 그려야 했기 때문에 HTML의 를 사용하여 구현하기로 하였습니다. 정육각형 그리는 법 먼저 정육각형을 그리는 방법부터 알아보겠습니다. 1. 먼저 정육각형의 꼭짓점이 될 6개의 점을 구해야합니다. 각 꼭짓점은 원을 6등분을 하면 구할 수 있습니다. 즉, 60도 간격으로 점을 찍으면 되겠네요. 2. 문제는 그림을 그리기 위해선 꼭짓점의 x좌표와 y 좌표를 구해야 한다는 것이죠. 반지름이 r이고 중심점이 (x,y)인 원을 6등분 했다고 가정해봅시다. 60도는 PI/3이니까 각 점의 x좌표는 x+r*cos(PI/3*i), y좌표는 y+r*sin(PI..
2021.12.13