개발 아카이브/라이브러리
웹사이트에 눈 내리게 하기
정말로 간단하고 예쁘게 자신이 만든 웹에 크리스마스를 맞이하여 눈을 내리게 해봅시다. https://embed.im/snow/ 위의 링크에 들어가면 확인할 수 있습니다. 방법은 정말 간단합니다. 위의 스크린샷에서 보시다시피 아래와 script를 추가하면 됩니다. See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.
예쁜 리액트 프로필 아바타 라이브러리 - avvvatars
세 번째 아바타 라이브러리 소개입니다. 이번에는 리액트에서 사용할 수 있는 리액트용 라이브러리입니다. 저는 리액트를 사용하지 않지만, 그래도 좋은 라이브러리이고 디자인도 예뻐서 소개하고 싶었습니다. 리액트를 모르는 저도 알 정도로 사용법도 간단합니다. 필요한 분이 이 글을 보고 좋은 영향을 받았으면 하는 마음으로 이렇게 소개합니다. AVVVATARS avvvatars는 알파벳 글자와 도형으로 사용자의 프로필을 표현해줍니다. 40가지 색상과 60가지 모양의 조합이라 총 2400개의 개성 있는 프로필을 만들 수 있습니다. 사이즈는 가볍고 다양한 옵션도 있어서 예쁜 랜덤 프로필 만드는데 함께 사용하면 좋을 것 같습니다. 웹사이트 (website) https://avvvatars.com/ Avvvatars - ..
예쁜 랜덤 프로필 이미지 만들기 - Boring Avatars
이전에 소개했던 DiceBear Avatars는 예쁜 그림이 별로 없어서 호불호가 많이 갈렸을 것 같습니다. 하지만 이번에는 좀 더 귀엽고 예쁜 아바타를 만들 수 있는 라이브러리를 소개하겠습니다. Boring Avatars https://boringavatars.com/ Avatar generator playground - Boring Avatars Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette. boringavatars.com https://github.com/boringdesigners/boring-avatar..
자동 프로필 이미지 생성 API - DiceBear Avatars
회원 시스템이 있는 서비스를 만들면, 보통 회원의 프로필 이미지를 설정할 수 있는 기능이 있습니다. 프로필 이미지 기능을 만들면, 프로필 사진이 없을 때, 보통 아래와 같은 이미지로 보여주도록 만들죠. 해외에서는 이것을 아바타라고 합니다. 그런데 혹시 Github 계정을 만들면 처음에 설정되는 아바타를 보신 적 있으신가요? Github는 이 초기 아바타를 계정 ID를 Seed로 랜덤한 이미지를 등록해 놓습니다. 이런 아바타는 Github에서 직접 만들어서 등록해주는 것일까요? 아닙니다. 이러한 랜덤 아바타를 만들어주는 API가 따로 있고 Github는 이것을 이용했습니다. 이렇게 ID를 넣고 랜덤 아바타를 만들어주는 API를 다양하게 소개해 드리겠습니다. DiceBear Avatars https://av..
더미 이미지가 필요할 땐, 로렘 픽숨 (Lorem Picsum)
웹 개발을 하면서 가끔 더미 텍스트가 필요할 때, 로렘 입숨(Lorem Ipsum)을 사용해 보셨을 겁니다. 로렘 입숨(Lorem Ipsum)은 문서나 웹 퍼블리싱, 프론트개발을 할 때 더미 글이 필요할 경우 자주 사용합니다. 글은 그렇다 쳐도, 만약 더미 이미지가 필요할 경우는 어떻게 할까요? 주로 저작권 없는 사진을 다운 받을 수 있는 사이트에서 다운 받아서 사용하곤 합니다. 보통 'unsplash'나 'pixabay'를 사용하곤 합니다. 그런데 이렇게 다운 받아서 사용하는 것은 귀찮지 않나요? 그리고 다운받은 후 사진 크기를 조정하는 작업이 필요하면 정말 귀찮아집니다. 로렘 픽숨 (Lorem Picsum) https://picsum.photos/ Lorem Picsum Lorem Ipsum... b..
[자바스크립트] 쉽게 문자열 처리하기 - Voca.js
이제 라이브러리 관련 콘텐츠를 거의 소진해서 다른 걸 써보려고 했는데.. 찾다 보니 별의별 라이브러리가 다 있어서 한동안은 이런 글이 계속 올라올 것 같네요 ㅎㅎ;; 문자열 라이브러리 Voca.js Front-End 작업을 하면서 자바스크립트를 이용해 문자열 작업을 하다 보면 가끔 부족함을 느끼게 됩니다. 저도 C#이나 JAVA의 프레임워크에서 제공하는 다양한 문자열 함수를 사용하다가 자바스크립트를 쓰면 가끔 부족한 느낌을 받곤 했습니다. Voca.js를 추가하여 사용하면 이런 답답함을 풀어주고 더 다양한 기능을 제공합니다. Voca.js 링크 vocajs.com/ Voca: The ultimate JavaScript string library Voca provides functions to manipu..
billboard.js Playground
billboard.js 관한 이전 포스트 wooncloud.tistory.com/35 오픈소스 차트 라이브러리 billboard.js 코로나가 터지면서 많은 개발자들이 코로나 현황과 정보를 실시간으로 보여주기 위해 사이트를 개발했습니다. 코로나 현황을 보여주다보면 전일대비 얼마나 확진자가 증가했는지 등 한눈에 파 wooncloud.tistory.com billboard.js 링크 naver.github.io/billboard.js/ billboard.js billboard.js, the "chart" library The name "billboard" comes from the famous "billboard chart" which everybody knows. billboard.js provides t..
자바스크립트 날짜 포맷 설정하기 - moment.js 라이브러리
원래 직접 날짜 변환 코드를 만들어서 포스팅하려고 했다가.. 관련 코드 참고하려고 검색했더니 더 좋은 라이브러리를 발견해서 또 라이브러리 소개 포스팅을 하게 되었네요. 이번에 가져온 라이브러리는 날짜 포맷을 쉽게 설정하는 라이브러리입니다. moment.js 라이브러리 1. 홈페이지 momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYY..
웹에서 그래프를 만들자! - 오픈소스 차트 라이브러리 billboard.js
코로나가 터지면서 많은 개발자들이 코로나 현황과 정보를 실시간으로 보여주기 위해 사이트를 개발했습니다. 코로나 현황을 보여주다보면 전일대비 얼마나 확진자가 증가했는지 등 한눈에 파악하게 알려주기 위해선 차트 사용이 필수적입니다. billboard.js 를 사용하면 데이터들을 차트로 쉽게 구현할 수 있습니다. billboard.js 란? billboard.js는 C3.js를 변형한 라이브러리 입니다. MIT 라이센스인 C3.js 를 네이버에서 변형하여 불편한 부분을 편리하게 만들어서 오픈소스로 배포하고 있습니다. c3js.org/ C3.js | D3-based reusable chart library Comfortable C3 makes it easy to generate D3-based charts by..