전체 글 (34) 썸네일형 리스트형 Microservices Architecture, MSA)란? Microservices Architecture, MSA)는 현대 소프트웨어 개발 방법론에서 가장 주목받는 아키텍처 패러다임 중 하나가 되었습니다. 이 아키텍처는 대규모 애플리케이션을 개발하고 운영하는 방식을 근본적으로 변화시켰으며, 클라우드 네이티브 환경에서 서비스의 확장성과 유연성을 향상시키는 데 크게 기여하고 있습니다. 마이크로서비스 아키텍처의 개념과 정의마이크로서비스 아키텍처는 하나의 애플리케이션을 여러 개의 작고 독립적인 서비스로 분할하여 개발하는 소프트웨어 아키텍처 접근 방식입니다. 각 서비스는 특정 비즈니스 기능을 수행하며, API를 통해 다른 서비스와 통신합니다. 이는 기존의 모놀리식(Monolithic) 아키텍처와 대비되는 개념으로, 모놀리식이 모든 기능이 하나의 코드베이스에 통합된 형.. Web Socket & STOMP Web Socket과 STOMP 이해하기실시간 통신의 핵심 기술인 Web Socket과 이를 보완 및 표준화하기 위해 활용되는 STOMP (Simple Text Oriented Messaging Protocol)에 대한 동작 방식과 특징에 대해 알아보자.1. Web Socket 개요Web Socket은 클라이언트와 서버 간에 지속적인 연결을 유지하며 양방향 통신 (Full-Duplex)을 가능하게 하는 프로토콜이다. 2011년 RFC 6455로 표준화되어, 실시간 애플리케이션(예: 채팅, 게임, 주식 거래 등)에서 빠르고 효율적인 데이터 교환 수단으로 자리 잡았다.HTTP와 달리, 한 번의 핸드쉐이크로 지속적인 연결을 유지하며 클라이언트와 서버가 서로 자유롭게 데이터를 주고받을 수 있다.실시간 처리:메시.. React 19 출시 및 내용 React 19 버전이 출시되었다. 변경 점에 대해 알아보자.1. Actions1.1 개념Actions는 React 앱에서 비동기로 데이터를 전송하고, 이에 따른 상태 업데이트를 단순화하기 위한 새 기능이다.요청 대기 상태(loading), 에러 처리, 낙관적 업데이트 등을 자동으로 관리해준다.1.2 예시 코드기존 방식(대기 상태와 에러를 직접 관리)function UpdateName() { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async () => { setI.. [React] 무한스크롤 구현 및 최적화(react-intersection-observer => virtuoso) 기존에 react-intersection-obsever를 사용해 무한스크롤을 구현하였던 코드를 virtuoso를 사용하여 리팩토링 하기로 했다.리팩토링을 하게 된 가장 큰 이유는 성능 최적화에 있다.Virtuoso란? Virtuoso는 무한 스크롤 구현 및 성능 최적화를 위한 라이브러리이다. 특징Virtual List(리스트 가상화)Virtuoso는 데이터를 렌더링 함에 있어서 화면에 보여지는 데이터 리스트들만 DOM 요소에 추가한다. 즉, 스크롤을 통해 데이터를 가져올 때 보이지 않는 요소는 DOM에 추가되지 않기 때문에 메모리 사용을 최적화 할 수 있다.Auto Resizing(자동 리사이징)Virtuoso 구성 요소는 콘텐츠 크기 조정, 이미지 로딩 등으로 인해 항목의 높이가 변경될 경우 이를 자동.. [프로그래밍 언어론] BNF와 EBNF 프로그래밍 언어론: BNF와 EBNF 쉽게 이해하기프로그래밍 언어를 배우거나 새롭게 설계할 때 가장 기본이 되는 작업 중 하나는 바로 '문법 정의'다. 문법을 정의하는 방식 중 대표적으로 쓰이는 것이 바로 **BNF(Backus-Naur Form)**와 **EBNF(Extended Backus-Naur Form)**다. 이번 글에서는 이 두 가지 개념을 쉽게 이해할 수 있도록 설명하고 예시도 함께 살펴보겠다.BNF (Backus-Naur Form)란?BNF는 프로그래밍 언어의 문법을 형식적으로 나타내는 방법이다. 프로그래밍 언어의 문법 구조를 분명하고 간결하게 표현할 때 주로 사용된다. 1950년대 후반에 존 배커스(John Backus)와 피터 나우어(Peter Naur)가 개발한 방법이라 'Backu.. Transient Props를 사용해 styled-component 에러 해결하기 styled-components를 사용해 간단한 버튼을 만들었는데 콘솔에 처음 보는 에러가 찍혔다. styled-components를 자주 사용하지 않은 것도 있었겠지만 한 번도 발생해 본 적이 없는 에러였다. 에러의 내용은 다음과 같다. 해석하자면경고: React는 DOM 요소에서 isSelected prop을 인식하지 못합니다. 만약 이것을 의도적으로 사용자 정의 속성으로 DOM에 표시하고 싶다면, 소문자 isselected로 철자를 맞추세요. 만약 부모 컴포넌트에서 실수로 전달한 것이라면, DOM 요소에서 제거하세요. 라는 뜻의 에러였다.에러의 내용을 보고 조금 의아했다. '왜 prop을 인식하지 못하지? 소문자로 철자를 맞추라니 무슨 소리지? 오타는 없는데'라는 생각을 하였다. 원인에 대해 찾아보.. React + MSW(Mock Service Worker)로 백엔드 API 없이 개발하기 서비스 개발 단계에 있어서 보통 프론트엔드 작업은 후순위일 것이다. 기획을 하고 디자인과 백엔드 API가 나오면서 비로소 프론트에서의 본격적인 개발이 시작된다. 하지만 언제까지나 API 개발만을 기다릴 순 없기에 프론트엔드 개발자가 실제 백엔드 API가 아직 준비되지 않은 상황에서도 MSW를 사용하여 목(mock) 데이터를 생성함으로써, 프론트엔드 개발을 선행적으로 시작할 수 있는 방법에 대해 알아볼 것이다. 본 글은 React + TypeScript + MSW 2.0 이후의 버전에 기반하여 작성했습니다.https://mswjs.io/docs/migrations/1.x-to-2.x/1. MSW(Mock Service Worker) 란?Mock Service Worker (MSW)는 웹 애플리케이션 개발 .. react-datepicker로 생년월일 값 받기 폼에서 생년월일에 대한 정보를 받아야 한다. 폼은 react-hook-form을 이용해 구현하였고 폼 중에 생년월일 입력 필드를 클릭하면 달력에서 연월일을 지정할 수 있도록 만들 것이다. 달력을 직접 구현하기에는 시간이 오래 걸릴 것 같아 react-datepicker를 사용하기로 했다. React-datepicker란 ? 커스터마이징이 가능한 달력을 구현할 수 있는 React 라이브러리이다. 자세한 설명은 공식문서에 잘 나와있다.공식문서 : https://reactdatepicker.com/ date-fns 설치하기date-fns는 로케일 설정 및 날짜 포맷팅을 위해 사용되는 라이브러리이다.react-datepicker는 기본적으로 영어로 달력의 내용을 표시해주기 때문에 이를 한글로 설정하기 위해 .. 이전 1 2 3 4 5 다음
