본문 바로가기

전체 글

 (36)
JIT(Just In Time Compilation)와 Javascript의 성능 JIT(Just in Time Compilation) : 인터프리터와 컴파일의 장점을 합친 방식Ignition을 이용해서 Interpretation을 해서 Javascript의 Dynamically Typed 특성을 살리며 컴파일 시간을 짧게 가져갑니다.Turbofan을 이용해서 자주 사용되는 코드를 Machine Code로 최적화해서 컴파일 해준다. 해당 코드는 반복적으로 사용 할 수 있습니다.만약 최적화가 잘못되었거나 더이상 필요가 없어지면 다시 Byte Code로 변환합니다.Machine Code와 Byte CodeMachine Code CPU가 바로 읽고 사용할 수 있는 바이너리로 구성된 코드바이트 코드보다 더욱 Low Level의 코드실행이 매우 빠름컴파일이 느림플랫폼에 종속성이 있다. 하나의..
ACID와 CAP 이론 관계형 데이터베이스의 트랜잭션 관리 핵심 원칙인 ACID이론과 No-SQL 기반의 CAP 이론을 비교하여 설명하기 전에 관계형 DB와 NoSQL DB의 차이점에 대해 먼저 알아보겠습니다.관계형 DB(RDBMS)와 NoSQL DB관계형 DB(RDBMS)NoSQL DB특징데이터 무결성과 일관성 보장, SQL 사용수평 확장성, 빠른 응답 처리, 유연한 구조 지원데이터 형태테이블(행/열) 기반, 고정된 스키마 필요JSON, 키-값, 그래프 등 다양한 형태, 스키마 자유로움주요 활용ERP, 금융 등 정형 데이터 중심의 시스템로그 수집, 사용자 분석, SNS 등 비정형 데이터 처리성능 확장 방식수직 확장 (서버 성능 강화)수평 확장 (서버를 여러 대로 분산)DB 예시MySQL, PostgreSQL, OracleMo..
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을 인식하지 못하지? 소문자로 철자를 맞추라니 무슨 소리지? 오타는 없는데'라는 생각을 하였다. 원인에 대해 찾아보..

티스토리툴바