개발 아카이브

예쁜 리액트 프로필 아바타 라이브러리 - 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..

[DB] ORDER BY를 했을 때, 정렬 결과가 달라지는 현상

사용하고 있는 DB는 postgreSQL이지만, 다른 DB에서도 다 똑같이 적용된다고 생각합니다. 문제 ORDER BY와 LIMIT를 함께 사용했을 때, LIMIT의 수가 바뀌면 ORDER BY 정렬 결과도 함께 달라지는 현상이 있었습니다. 예를 들어, LIMIT 30과 LIMIT 31의 ORDER BY 결과가 달라지는 것입니다. 실행계획의 차이도 없고 문제의 원인을 알 수 없어서, 구글에서 검색하다가 레딧에서 같은 현상을 겪는 사람을 발견했습니다. 그래서 레딧의 질문을 기준으로 이 현상에 대해 이야기해 보겠습니다. 레딧에서 발견한 동일한 문제 https://www.reddit.com/r/PostgreSQL/comments/ni2l9u/why_is_a_query_with_limit_returning_re..

AWS Lightsail - 라이트세일을 소개합니다.

이번에 운쿠 사이트 개발하면서 AWS Lightsail이라는 사이트를 알게 되었습니다. 그동안 EC2를 사용하기 부담스러웠던 저는 가볍고 가격이 싸면서 쉽게 만들 수 있는 VPS가 필요했습니다. https://aws.amazon.com/ko/lightsail/ 가상 프라이빗 서버 및 웹 호스팅–Amazon Lightsail—Amazon Web Services WordPress, Magento, Prestashop, Joomla와 같은 사전 구성된 애플리케이션을 통해 단 몇 번의 클릭으로 블로그, 전자 상거래 또는 개인 웹 사이트를 구축합니다. aws.amazon.com Lightsail은 AWS에서 만든 가상 프라이빗 서버 (VPS)입니다. Lightsail은 복잡한 EC2에 비해 간편하고 싸게 인스턴스..

[자바스크립트] console.log를 다양하게 쓰자. console 객체

console.log()는 자바스크립트로 개발하면서 아주 다양하게 사용됩니다. 개발자나 사용자에게 여러 정보를 알리는 수단이 되거나 디버깅에 사용되는 용도가 되곤 합니다. 그런데 혹시 console.log()만 사용하고 계신가요? console 객체는 log 함수만 아니라 다양한 함수를 가지고 있습니다. 많은 사람들이 알고 있지만, 모르는 사람은 모르는 console 객체의 함수들을 살펴보겠습니다. ※ 참고로 웹 콘솔 기반의 포스팅입니다. nodejs나 다른 경우는 제외했습니다. 1. console.log(), console.info(), console.warn(), console.error() 처음부터 간단하고 쉬운 것부터 다루겠습니다. 익숙한 console.log()는 매개변수의 문자열을 콘솔에 출력..

Nomad coders - 바닐라 JS로 크롬 앱 만들기 후기

첫 자바스크립트 공부 시작은 노마드 코더의 "바닐라 JS로 크롬 앱 만들기" 강의를 본 것이었습니다. 그래도 일하면서 자바스크립트는 많이 사용했으니 이 정도는 다 알겠지? 하면서 저의 전투력을 측정하는 느낌으로 강의를 들었습니다. 하지만 은근 저도 어이없게 모르는 것도 있고, 원래 몰랐던 것들도 있었습니다. 강의에 대해 이 강의는 momentum이라는 크롬 앱의 기능을 일부 구현해보는 강의로 클론까지는 아니고 기능 구현하기 강의입니다. 제목에서 알 수 있듯이 vanilla js를 배우고 코딩해보는 실습을 가집니다. 배우면서 몰랐던 것 요소 탐색 DOM 탐색은 가장 기초 중에 기초인데, 저는 jQuery에 의존했습니다. 하지만 document.getElementById, document.getElement..

자바스크립트를 공부하기 위한 여정 - jQuery를 벗어내기

2022년 첫 블로그 포스팅입니다. 2022년 기념으로 앞으로 더 나은 개발자가 되기 위해 나아가는 한 걸음에 대해서 이야기해볼까 합니다. 저는 직장에서 풀스택 개발을 하고 있습니다. 하지만 이번에 일을 하나 하면서 자바스크립트에 대해 모르는 것이 많고 부족하다는 생각을 했습니다. 그래서 이번 기회에 자바스크립트를 제대로 기초부터 차근차근 공부해 나아가 보려고 합니다. 사실 지금 이미 공부를 하고 있었는데, 2022년도 첫 포스팅이라 새해 다짐인 느낌으로 말해봤습니다 ㅎㅎ. jQuery는 이제 사용할 필요가 없다. 프론트엔드에서 개발을 쉽고 용이하게 도와줬던 jQuery가 오랫동안 자리를 잡고 있었습니다. 다양한 라이브러리도 jQuery의 도움을 받아 제작되고 그 유명한 부트스트랩도 버전4까지 jQuer..