JSX에 SVG 파일을 직접 import해서 사용하면 편리하지만 JS 번들 크기 늘어나고 불필요한 네트워크 요청 증가한다. Sprite 기법 사용하면 이를 최적화할 수 있다.
React Hook Form과 Zod를 이용하여 form을 효율적으로 관리한다.
복잡한 Modal 설계, Compound Component Pattern으로 해결한다.
기존 폴더 구조 현재 프로젝트의 폴더 구조는 Monolith 구조로, 모든 코드와 기능이 기술적 요소별로 한곳에 모여있다. Monolith 구조는 기능적 역할보다는 코드의 기술적 속성에 중점을 두어 폴더를 구성하기 때문에, 프로젝트 초기에는 코드 탐색이 단순하고 명확하다는 장점이 있다. 그러나 프로젝트 규모가 점차 커질수록 의존성 관리, 확장성, 협업 효...
HTML input의 type이 number일 때, 일부 브라우저에서 한글 입력 시 첫 글자가 입력되는 현상은 브라우저가 한글의 입력 방식을 처리하는 과정에서 발생하는 문제이다.
[번역] Fault Tolerance(장애 허용성) / 원문: https://www.brandondail.com/posts/fault-tolerance-react
Server-Sent Events(SSE)를 활용한 실시간 알림 테스트 코드 및 기능 구현.
리액트 비동기 작업의 선언적 처리: ErrorBoundary 및 Suspsens 그리고 대수적 효과
eslint, prettier 설정
Same-Origin Policy는 웹 보안 메커니즘 중 하나로 실행중인 애플리케이션의 출처와 다른 출처의 리소스를 요청하는 것을 제한하는 정책이다. CORS는 출처가 서로 다른 요청도 가능하게 하면서 보안상의 문제도 해결하기 위해 탄생했다.
AJAX(Asynchronous Javascript And XML)는 자바스크립트를 이용하여 웹 서버와 브라우저가 비동기적으로 통신할 수 있는 개발 기법이다.
OOP(Object-Oriented Programming, 객체 지향 프로그래밍)란 객체 개념에 기반을 둔 프로그래밍 패러다임을 의미한다.
IIFE는 즉시 실행 함수 표현을 의미한다. 즉시 실행하고 바로 사라진다.
함수는 객체의 한 종류이기 때문에 메서드를 가질 수 있다. 객체의 메서드를 할당받은 변수는 this 키워드를 재정의해주기 위해 3가지 메서드를 사용할 수 있다.