개발 아카이브

웹사이트에 눈 내리게 하기

정말로 간단하고 예쁘게 자신이 만든 웹에 크리스마스를 맞이하여 눈을 내리게 해봅시다. https://embed.im/snow/ 위의 링크에 들어가면 확인할 수 있습니다. 방법은 정말 간단합니다. 위의 스크린샷에서 보시다시피 아래와 script를 추가하면 됩니다. See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.

Postman 대신 사용하는 VS Code API Test Extention - Thunder Client

https://www.thunderclient.com/ Thunder Client - Rest API Client Extension for VS Code Thunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Code www.thunderclient.com 비주얼 스튜디오 코드를 사용한다면 Postman을 또 설치할 필요 없이 Rest API를 테스트할 수 있습니다. 사용 화면 Thunder Client의 전반적인 모습입니다. 만든 테스트를 저장하고 불러올 수 있고, 테스트에 필요한 여러 가지 필수 기능들이 있습니다. UI와 디자인이 심플하고 VS Code에 맞춤이라 어려워 보이지 않고 거부감이 없습니..

배워보자 정규표현식! (Regular Expression)

정규표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현할 때 사용하는 형식 언어입니다. 주로 문자열의 특정 부분을 찾거나, 다른 문자열로 대체하거나, 특정 문자열을 추출할 때 사용합니다. 정규표현식은 다른 말로 정규식, Regexp, Regex라고 불리기도 합니다. /^[\w.%+\-]+@[\w.\-]+\.[A-Za-z]{2,3}$/ig 이것이 정규식의 모습입니다. 이메일 패턴을 간단하게 표현한 정규식인데, 처음보면 정말 무슨 소리인지 파악하기 힘들 겁니다. 하지만 개발자는 많은 자연어 속에서 특정 문자를 추출하고 가공하고 수정할 수 있어야 합니다. 불규칙한 자연어 속에서 특정 패턴을 찾아 처리하려면, 일반적으로 if문을 사용합니다. 하지만 if문을 그렇게 사용하다간 if 속에 if, 그 속에 if, ..

브라우저 이미지 회전 현상 해결하기 (IE) - EXIF

이 문제는 회사에서 이미지 회전 현상이 일어난다는 QA를 받아서 수정하던 중 알게 되었습니다. 가끔 브라우저에서 사진을 업로드하거나 조회할 때 이미지가 본의 아니게 돌아가 있는 상태를 보실 수 있습니다. 요즘은 그런 현상이 거의 없지만, 2020년도에는 그런 현상이 있었습니다. 2022년 6월 15일부로 돌아가신 인터넷 익스플로러에도 아직까지 이러한 현상이 있습니다. 이 현상은 브라우저가 파일에 저장되어 있는 메타데이터를 읽고 대응해야 하는데, 그러지 못해서 생기는 일입니다. 일단 이미지 메타데이터는 어떤 것이 있는지 살펴보겠습니다. 메타데이터를 저장하게 해주는, 이미지 파일 포맷 : EXIF 디지털카메라, 스마트폰 카메라로 이미지를 찍으면 EXIF라는 이미지 파일 포맷입니다. EXIF는 JPEG, TI..

자바스크립트 객체 관리와 V8엔진 히든클래스

이 글은 모던 자바스크립트 Deep Dive를 보고 공부한 내용입니다. 자바스크립트에서 객체는 복합적인 자료구조입니다. 객체 내부에 있는 property의 수는 개수가 정해지지 않아, 객체의 크기도 정해지지 않고 동적으로 property가 추가, 삭제가 될 수 있습니다. 그래서 객체는 리터럴처럼 메모리 공간에 크기를 사전에 정의할 수 없습니다. 객체의 구현 방식은 브라우저 제조사마다 다를 수 있습니다. 그리고 객체를 생성하고 프로퍼티에 접근하는 것도 리터럴을 이용하는 것보다 비용이 많이 들기 때문에, 괜히 깔끔하게 코딩하겠다고 적은 데이터를 객체를 이용하여 선언하고 사용하면 오히려 쓸데없이 비용을 많이 쓸 수 있습니다. (엄청 크게 차이나진 않지만..) 자바스크립트의 객체 특징 자바스크립트에서 객체는 프..

자바스크립트 맵 객체 (Javascript Map Object)

Map이란? Map객체는 Key와 Value로 이루어진 자료구조입니다. Key는 고유한 값을 가져야 하는 특징을 가지고 있습니다. 자바스크립트에서의 Map객체는 Key와 Value을 서로 매핑시켜 저장하고, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 해줍니다. ES6부터 도입된 문법이며 ES5에서는 사용할 수 없습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections 키기반의 컬렉션 - JavaScript | MDN 이번 장에서는 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)에 대해 소개 할 것이다. Map과 Set은 입력된 순서대로 반복적으로 접근 가능한 요소들을 포함하고 있다. deve..

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