-
디자이너를 위한 디자인 시스템, 개발자를 위한 디자인 시스템
들어가며 안녕하세요. TOKTOKHAN.DEV 프로덕트 디자이너 수지입니다. 디자인시스템이란 디지털 제품에서 디자이너와 개발자가 공용으로 활용할 수 있는 하나의 언어 형태로서, 디자인 원칙, UX 패턴, UI 툴킷, 코드(code) 등이 전부 포함되는 ‘시스템 라이브러리’를 의미합니다. 디자인과 프론트 단계에서 공용으로 관리되는 컴포넌트들을 활용해 효율적으로 커뮤니케이션 할 수 있고, 이를 통해 프로덕트 작업 시간을 단축하며, 사용자 경험과 로직에 집중해 구축 과정을 동기화 할 수 있는 효율적인 도구입니다. 지난 10월 부터 똑똑한개발자에서는 내부 디자인시스템 구축을 위한 디자인 정의 및 컴포넌트 개발 과정이...
-
Resize-Image
안녕하세요 똑똑한 개발자에서 백엔드 개발을 하고 있는 김영환 입니다. 웹 개발을 하다보면 다량의 이미지를 업로드해야되는 경우가 생김니다. 서로 다른 이미지 크기와 용량으로 사이트 업로드의 시간을 늦출수있는 경우가 있습니다. 그런 경우를 대비해서 이미지 리사이즈를 시켜준뒤 저장하는 방법에 대해 알아보겠습니다. 기존의 이미지 처리 방식 업로드 시에 이미지를 리사이징하거나 렌더링 해야하기 때문에 연산이 많아진다 (서버 사양이 좋아야한다.) 다양한 해상도의 이미지를 저장하기 때문에 스토리지 비용이 원본 하나 저장할 때 보다 증가한다. 이미지 스토리지 마이그레이션 시간과 비용이 장난이 아니다. 이러한...
-
데이터베이스 모델
안녕하세요, 똑똑한개발자에서 백엔드 개발을 하고 있는 권창식입니다. 오늘은 데이터베이스 모델의 개념에 대해 소개해드리고 자 합니다. 데이터베이스 모델의 정의 데이터 모델은 현실 세계의 정보들을 컴퓨터에 표현하기 위해서 단순화, 추상화하여 체계적으로 표현한 개념적 모형입니다. 데이터 모델은 데이터, 데이터의 관계, 데이터의 의미 및 일관성, 제약 조건등을 기술하기 위한 개념적 도구들의 모임입니다. 현실 세계의 데이터베이스에 표현하는 중간 과정, 즉 데이터베이스 설계 과정에서 데이터의 구조를 논리적으로 표현하기 위해 사용되는 지능적 도구입니다. 데이터 모델의 구성요소 개체(ENtitiy) : 데이터베이스에 표현하려는 것으로, 사람이...
-
Next.js active link 스타일링
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 메뉴(네비게이션)에서 현재 사용자가 들어와있는 메뉴, 즉 active link를 표시하고 싶을 때 사용할 수 있는 방법에 대해 소개해드리고자 합니다. React Router를 사용할 때는 <NavLink> 컴포넌트의 activeClassName이나 activeStyle을 사용하여 비교적 간편하게 active link를 스타일링할 수 있는데요, 이와 달리 Next.js에서는 아쉽게도 이러한 기능을 따로 제공하지는 않는다고 합니다. 이를 직접 구현할 수 있는 여러가지 방법들 중 제가 사용했던 방법에 대해 정리해보도록 하겠습니다~ 준비물 각 페이지에 공통적으로 들어가는 메뉴 컴포넌트 → MyMenu import...
-
Python Web Framework 3종 비교
Intro 안녕하세요 똑똑한 개발자에서 백엔드 개발을 하고 있는 강수빈입니다. 오늘은 파이썬의 대표적인 Web Framework 3가지를 소개하고 비교해보도록 하겠습니다. Django 첫번째로 가장 많이 쓰이고 있는 Django입니다. Django는 20003년에 만들어져, 전 세계에서 가장 많은 인기를 누리고 있는 웹 프레임워크 중 하나로 Instagram, Youtube등에서 활용되고 있습니다. 견고하고 직관적인 특징을 갖고 있으며, 재사용 가능한 코드를 장려함으로써 큰 인기를 얻고 있습니다. 특히 풀스텍 웹 프레임워크로써는 Django가 압도적인 지지를 받고 있습니다. 장점 Django는 보안부터 DRF(Django Rest Framework), ORM, 서드파티와의 연계 등...