Howdy의 블로그
One truth. Many vantage points.
872 posts · Started September 29, 2026
아토믹(Atomic) 컴포넌트 디자인 개발 패턴
대형 프로젝트에서는 최적화된 코드 재사용이 필수입니다. 이를 위해서 대두된 코드 디자인 패턴 중 하나는 바로 아토믹(Atomic) 디자인 패턴입니다. 위 패턴은 리액트, 뷰, 앵귤러 등 컴포넌트를 사용하는 라이브러리와 프레임워크에 모두 사용될 수 있습니다. 아토믹 디자인은 이름에서 유…
HTTP 상태 코드는 왜 프런트개발에 중요한가
HTTP 상태 코드란? ============ 상태 코드는 HTTP 요청에 대한 응답(Response)을 숫자로 표현한 값입니다. 대표적인 응답인 200은 정상 결과, 404의 경우 찾을 수 없음(Not Found), 500의 경우 서버 오류(Server Error)를 뜻합니다. 그런…
웹팩은 왜 필요할까
불과 20년 전 인터넷에는 웹 사이트에 자바스크립트가 많이 사용될 일이 적었습니다. 자바스크립트를 HTML에 효과를 더해주는 정도로 사용하는 일이 많았습니다. 축구팀 아약스 아니고 비동기적 자바스크립트와 XML 역사의 분기점은 2006년 구글에서 만든 ajax라 말할 수 있습니다. a…
리액트와 바벨과 JSX의 관계
리액트를 처음 배울 때 바벨과 JSX를 개념적으로 배웁니다. 제 경우엔 이 부분이 쉽게 이해가 가질 않았어요. 그래서 실제적인 예를 보면서 바벨이 왜 필요한지, JSX가 왜 편리한지 하나하나 설명해드리고자 합니다. JSX와 바벨을 사용하지 않은 코드의 모습 위의 코드(코드 링크)는 코…
레디스(Redis)는 언제 어떻게 사용하는 게 좋을까
레디스, redis 레디스는 시스템 메모리를 사용하는 키-값 데이터 스토어입니다. 인메모리 상태에서 데이터를 처리함으로써 흔히 사용하는 관계형 데이터베이스(RDS) 그리고 몽고 DB로 대표되는 문서형(Document) 데이터베이스보다도 빠르고 가볍게 동작합니다. 레디스를 사용할 때 개…
[UX 인사이트] 보기 좋은 서체와 x의 높이
웹에서 가독성이 높은 서체는 어떤 특징이 있을까요? 가독성을 구성하는 여러 변수들이 있지만 오늘은 x의 높이(x-height)에 대해 이야기해보려고 합니다. 서체의 크기는 위와 같은 형태로 크기를 표현합니다. 아센더와 디센더의 차이, x 높이의 차이에 따라 사람은 글을 읽기 쉽거나 어…
리액트(React.js)와 뷰(Vue.js)의 차이점
UI 라이브러리 vs 프레임워크 ================= 먼저 리액트는 UI 라이브러리입니다.(https://reactjs.org/) 다들 아시겠지만 라이브러리는 참조가 쉽고, 라이브러리의 일부분만 가져와서 사용하는 게 편리합니다. 또한 리액트는 UI 라이브러리이기 때문에 리액…
[UX 인사이트] 선택권과 통제권을 주어라
사람들은 '많은 선택권 = 많은 통제권'이라 생각하는 경향이 있다. 예를 들어 카지노에서 한 실험에 따르면 사람들은 하나의 룰렛만 있는 테이블보다 두 가지 룰렛 중 하나를 선택할 수 있는 테이블을 선호했다. 모든 룰렛이 동일함에도 말이다. 카지노에 있는 '룰렛' 이커머스 웹사이트에서도…