728x90

IT/기초 지식 111

UX 디자인의 5단계 모델

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. '프로덕트 개발에 있어서 UX가 중요하다는 것을 알지만 어떻게 하면 좋을지 모르겠다'라고 생각하고 있지 않은가? 이번 포스트에서는 UX을 디자인하는 방침인 "UX의 5단계 모델"에 대해서 설명하고자 한다. UX의 5단계 모델이란? UX의 5단계 모델이란. UX(User Experience)의 요소를 5개의 단계로 분류한 것이다. 이 개념에 대해 이해하기 위해서 그 전에 UX는 무엇인지에 대해서 알 필요가 있다. UX(=User Experience)이란? 유저가 프로덕트를 이용했을 때 얻게 되는 체험, 감정의 전체를 의미한다. 예를 들어 메시지 어플리케이션에서 친구와 연력하기,..

IT/기초 지식 2023.06.15

DB 설계 공유는 dbdocs를 이용하자

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. DB설계의 관리나 생성이 힘들지 않은가? 오늘은 DB 설계의 공유와 관리에 편리한 툴인 dbdocs에 대해서 이야기하고 한자. dbdocs를 사용하면, 설계의 가시화나 공유가 간단해진다. 이번에는 장점과 실제 사용법에 대해서 설명하도록 하겠다. dbdocs이란? dbdocs는 코드베이스(DBML)로 DB설계를 관리하고, URL로 공유하는 것이 가능한 툴이다. 데이터 베이스의 테이블 구조나 관계성을 과시화하여, 이것을 다른 팀 멤버나 기업의 이해관계자에게 쉽게 공유할 수 있다. dbdocs의 장점 dbdocs의 장점에 대해서 살펴보자. 1. 무료 맨 처음으로 dbdocs는 기본 ..

IT/기초 지식 2023.06.14

읽기 쉬운 코드를 쓰기 위한 가이드라인

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. TypeDoc를 활용하기 TypeScript용의 도큐멘트를 생성하는 툴이다. 메소드등의 처리를 보완해주므로 처리의 흐름등 여러 가지를 알기 쉽게 해준다. /** * @param a - the first number * @param b - the second number */ export function sum(a: number, b: number) { return a + b; } 비슷한 것으로 JavaScript 파일의 정보를 제공하는 JSDoc가 있지만, 데이터형 정보를 {String}과 같이 번거롭게 표기할 필요가 없으므로, 개인적으로는 TypeDoc을 좋아한다. 간결하지만..

IT/기초 지식 2023.06.11

[axios] axios의 error handling

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. axios란? JavaScript(Node.js)의 HTTP 통신에 편리한 라이브러리이다. 상세한 내용은 github를 참고하길 바란다. aixos의 error handling 이해하기 설명용 소스코드 const express = require('express') const app = express() // 생략 app.listen(8081, () => console.log('listening on port 8081!')) const axios = require('axios').default; const instance = axios.create({ baseURL: 'https..

IT/기초 지식 2023.06.10

[AWS] SQS의 특징과 SNS와의 차이점

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. AWS SQS이란? AWS에서 제공하는 풀 매니지드형 메시지 큐잉 서비스이다. 큐잉 서비스이란 다른 소프트웨어 간의 데이터(메시지) 송수신하는 서비스를 의미한다. 소프트웨어에 직접 데이터를 전달하는 것이 아닌, SQS 경유로 데이터를 전달하는 것으로 송신측 혹은 수식측이 원하는 타이밍에 따라 처리를 실행할 수 있다. SQS의 각 용어를 간단히 설명하자면 다음과 같다. 메시지 : 송수신하는 데이터 프로듀서 : 메시지를 송신하는 측의 어플리케이션 컨슈머 : 메시지를 수신하는 측(받으러 가는 쪽)의 어플리케이션 큐란? 큐는 메시지를 관리하기 위한 수납 역할을 한다. 이용 시작시에 생..

IT/기초 지식 2023.05.29

[DDD] Entity, ValueObject에 대해서

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. DDD의 구현 패턴으로 Entity와 ValueObject이라는 것이 있다. 이번 포스트에서는 각각의 개념과 사용법에 대해서 소개하려고 한다. 아래의 이미지를 이용해서 설명할 예정이다. 어떤 목적으로 만는가? DDD의 접근법은 아래의 두 가지 스텝이 있다. 도메인(소프트웨어화 대상의 세계)에 대해, 시스템으로 사용하기 위한 모델을 작성한다. 모델을 소프트웨어(코드)로 만들어간다. DDD에서는 이 두 번째 스텝을 위해 아래의 네 가지를 정의하고 있다. Entity Value Object Domain Service Domain Event 이 중에서 모델을 "오브젝트(값과 행동을 가..

IT/기초 지식 2023.05.26

[DDD] 바운디드 컨텍스트(bounded context) - 실전편

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 바운디드 컨텍스트 구현의 기본 이미지 결론부터 말하자면, 기본적으로는 "1컨텍스트 = 1어플리케이션 " 이라고 생각하면 된다. 이것을 바탕으로 용도나 구현 코스트등을 고려하면서 조금씩 설계를 바꾸는 것도 검토할 수 있다. 이전 포스트에서 소개했던 아래의 두 개 컨텍스트를 이용해서 설명하자면 이렇게 두개의 어플리케이션을 만들게 된다는 것이다. 도메인층을 외부 경계와 격리하고 외부에 공개하는 작업을 주변 층에서 정의하며, 최종적으로 마이크로 서비스 2개를 만들어진다고 생각하면 된다. 이렇게 된다면 DB를 다루는 방법이나 통신을 어떻게 할지에 대해서도 자연스럽게 생각하게 될 것이다...

IT/기초 지식 2023.05.22

[DDD] 바운디드 컨텍스트(bounded context) - 개념편

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 바운디드 컨텍스트란? 공식 DDD Reference의 정의는 다음과 같다. 바운디드 컨텍스트(Bounded Context) 특정 모델의 정의, 적용하는 경계를 명시적으로 나타내는 것. 대표적인 예는 서브 시스템이나 팀등이 있다. 바운디드 컨텍스트는 두 가지 시점에서 해설이 필요하다. 개념으로서의 바운디드 컨텍스트 바운디드 컨텍스트의 구현 방법 개념으로서의 바운디드 컨텍스트 모델의 공유 DDD에서는 모든 사람 (소프트웨어 개발자, 도메인 전문가)가 동일한 의미로 말을 사용하는 것을 목적으로 한다. 예를 들어, EC 사이트 상품을 판매하는 시스템을 생각해보자. 여기에서는 엔지니어와..

IT/기초 지식 2023.05.18

[DDD] CQRS 입문

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. DDD의 참조 처리에서 발생하는 과제 DDD에서 정의되어 있는 구현 패턴을 사용하고 있다면, 기본적으로는 영속화층마다의 입출력은 Repository를 사용할 것이다. 갱신계의 처리에서는 Entity나 ValuObject로 도메인의 지식을 표현하고, Repository를 사용하여 집약 단위로 영속화한다는 구성하게 되면 매우 유지/보수가 편리해진다. 한편, 참조 처리 특히 리스트 화면과 같은 처리에서는 여러 개의 집약 값을 엮거나 합쳐서 화면에 나타내는 경우가 많다. 예를 들어, 태스크, 유저, 라벨이라는 세 개의 집약이 있으며, 각각 Repository가 있다고 하자. 이 세 가..

IT/기초 지식 2023.05.17

[CSS] CSS로 긴 문자를 생략형(...)으로 바꾸는 방법

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재하며 틀린 내용은 지적해주시면 감사하겠습니다. CSS로 규정의 폭보다 문자 수가 많아지는 경우에 텍스트를 생략형으로 바꾸는 방법에 대해서 설명하고자한다. 그리고 한 줄의 텍스트뿐만 아니라 2줄 이상의 텍스트도 적용가능하다. 한 줄 텍스트의 경우 text-overflow를 사용한다. 사용할 때는 두 가지 규칙이 있다. overflow: hidden; 및 white-space: nowrap; 과 함께 사용해야한다. text-overflow는 Block요소에 대해 inline(옆 방향)으로 튀어 나온 텍스트에 효과가 있다. Block 요소 샘플 코드 // HTML CSS로 텍스트를 생략하는 테스트입니다. // CSS .text-over..

IT/기초 지식 2023.05.10
728x90