웹 개발에서 살아남기

반응형 웹을 개발할 때 CSS만으로는 해결되지 않는 순간이 있다. 예를 들어 모바일에서는 '모달'을 띄우고 데스크톱에서는 '드롭다운'을 띄워야 한다면? window.matchMedia API를 활용해 자바스크립트 단에서 화면 크기를 감지하고, React 커스텀 훅으로 우아하게 구현하는 실무 테크닉을 정리한다. CSS 미디어 쿼리를 자바스크립트에서 제어하는 방법: window.matchMedia와 React 커스텀 훅 활용보통 반응형 스타일링은 CSS의 @media 쿼리나 TailwindCSS의 md:, lg: 클래스로 처리한다. 하지만 개발을 하다 보면 "화면 크기에 따라 스타일이 아니라, 기능(로직) 자체가 달라져야 하는 경우"가 반드시 생긴다.이때 브라우저 창 크기를 resize 이벤트로 감지하는 ..

자바스크립트 코드를 보다 보면 func(a)(b)(c) 처럼 괄호가 연속해서 이어지는 기이한 형태를 마주할 때가 있다. 이를 커링(Currying)이라고 한다. 함수형 프로그래밍의 핵심 기법인 커링이 어떻게 함수의 재사용성을 극대화하고, 복잡한 로직을 깔끔하게 모듈화하는지 실무 예제를 통해 알아본다. 자바스크립트 커링(Currying): 함수 인자를 나누어 재사용성과 가독성을 높이는 기법리덕스(Redux)의 미들웨어나 고차 컴포넌트(HOC) 코드를 분석하다 보면 화살표 함수가 꼬리에 꼬리를 무는 코드를 발견하게 된다.const logger = store => next => action => { ... }초심자에게는 암호처럼 보이는 이 코드가 바로 커링(Currying) 패턴이다. 커링은 단순히 멋을 부..

함수를 호출할 때 doSomething(true, false, null, 10) 처럼 알 수 없는 값들을 나열해 본 적이 있는가? RORO(Receive an Object, Return an Object) 패턴은 객체 구조 분해 할당을 활용해 함수의 가독성과 확장성을 획기적으로 높이는 패턴이다. RORO 패턴의 핵심 원리와 장단점, 그리고 굳이 쓰지 않아도 되는 상황을 명확히 정리한다. 자바스크립트 함수에서 파라미터가 과하게 많을 때 : RORO 패턴 완벽 가이드개발을 하다 보면 동료가 짜놓은(혹은 과거의 내가 짠) 함수를 보고 당황할 때가 있다.createUser('John', true, false, null, 20);도대체 저 true는 무엇이고, false는 무엇이며, 중간에 있는 null은 왜 ..

"내일 날짜를 구하려면 어떻게 해야 하지?", "두 날짜 사이의 D-Day는?" 자바스크립트 Date 객체의 자동 보정 기능을 이용하면 라이브러리 없이도 날짜 연산이 가능하다. 하지만 1월 31일에 한 달을 더하면 2월 28일이 아니라 3월 3일이 되는 함정과 객체 가변성(Mutability)으로 인한 버그를 주의해야 한다. 실무에서 안전하게 날짜를 조작하는 방법을 정리한다. 자바스크립트 날짜 계산과 조작: D-Day 구하기부터 달(Month) 더하기의 함정까지 (3편)간단한 날짜 더하기나 빼기 기능을 구현하기 위해 day.js나 date-fns 같은 무거운 라이브러리를 설치하는 것은 낭비일 수 있다. 자바스크립트의 내장 Date 객체는 생각보다 똑똑한 자동 보정(Overflow Correction) ..

서버에 날짜를 보냈더니 9시간이 밀리거나, 사용자에게 이상한 포맷으로 날짜가 보여 당황한 적이 있는가? JavaScript에서 날짜 데이터를 서버 전송용(ISO 8601)과 사용자 표시용(Intl)으로 정확하게 구분하여 포맷팅하는 방법과, toLocaleString 대신 Intl.DateTimeFormat을 써야 하는 성능적 이유를 알아본다. 자바스크립트 날짜가 이상하게 나오는 이유와 올바른 포맷팅/타임존 변환 방법 (2편)프론트엔드 개발자가 가장 자주 겪는 버그 중 하나는 "내 로컬에서는 잘 나오는데, 배포 서버나 다른 나라 유저에게는 시간이 다르게 나오는 문제"다. 대부분은 Date 객체를 문자열로 변환(Formatting)하는 과정에서 타임존(Timezone)을 고려하지 않았기 때문에 발생한다.단..

JavaScript 개발자라면 누구나 한 번쯤 "서버 시간과 클라이언트 시간이 달라요"라는 문제에 직면한다. 이 시리즈의 첫 번째 글에서는 Date 객체가 내부적으로 시간을 관리하는 원리(Epoch Time)와 UTC, KST, ISO 8601의 정확한 개념 차이를 정리하여 타임존 버그를 예방하는 기초를 다진다. JavaScript Date 객체가 헷갈리는 이유와 UTC, KST 개념 총정리 (1편)우리는 습관적으로 new Date()를 사용하지만, 정작 이 객체가 내부적으로 어떻게 시간을 저장하고 있는지 깊게 고민해 본 적은 드물다. 그래서 "오전 9시"를 저장했는데 "오전 0시"로 조회되거나, 하루가 밀리는 현상을 겪고 당황하곤 한다.JavaScript의 Date 객체는 생각보다 불친절하고 복잡한 ..

리액트 애플리케이션의 초기 로딩 속도가 느리다면 거대해진 자바스크립트 번들 사이즈가 원인일 확률이 높다. React.lazy와 Suspense를 활용한 코드 스플리팅(Code Splitting) 기법을 통해, 당장 필요하지 않은 리소스를 지연 로딩(Lazy Loading)하여 성능을 최적화하는 방법과 실무 적용 시 주의사항을 상세히 알아본다. React 초기 로딩 속도 최적화: React.lazy와 Code Splitting으로 번들 사이즈 줄이기SPA(Single Page Application)로 개발된 웹 서비스의 가장 큰 약점은 초기 로딩 속도다. 사용자가 첫 페이지에 진입할 때, 당장 보지 않을 페이지(예: 설정, 마이페이지, 관리자)의 코드까지 포함된 거대한 자바스크립트 파일을 한 번에 다운로..

웹 표준(Web Standards)은 단순히 유효한 태그를 쓰는 것을 넘어, 구조(HTML), 표현(CSS), 동작(JavaScript)을 명확히 분리하여 웹의 지속 가능성을 확보하는 방법론이다. W3C 권고안을 기반으로 크로스 브라우징, 웹 접근성(A11y), 검색 엔진 최적화(SEO)를 달성하기 위한 구체적인 실무 가이드를 제시한다. 웹 표준: 지속 가능한 웹을 지탱하는 3가지 기둥과 실무 전략신입 시절에는 "화면에 디자인 시안대로 나오기만 하면 되는 것 아닌가?"라고 생각하기 쉽다. 하지만 웹 표준을 무시하고 태그 남발과 인라인 스타일로 범벅된 코드는 브라우저 업데이트, 기기 변경, 유지보수 과정에서 거대한 기술적 부채로 돌아온다.웹 표준은 W3C(World Wide Web Consortium)..

여러 개의 비동기 작업을 병렬로 처리할 때, 하나라도 실패하면 전체를 버릴 것인가(Promise.all), 아니면 실패한 것은 실패한 대로 두고 성공한 결과만이라도 살릴 것인가(Promise.allSettled)? 두 메서드의 동작 원리인 Fail-fast와 Aggregation 패턴의 차이를 분석하고, 실무 시나리오별 적절한 선택 기준을 제시한다. JavaScript 비동기 병렬 처리의 두가지 방법 : Promise.all vs Promise.allSettled프론트엔드 성능 최적화의 핵심 중 하나는 독립적인 비동기 요청을 병렬(Parallel)로 처리하여 워터폴(Waterfall) 현상을 막는 것이다. 이를 위해 우리는 Promise.all을 주로 사용해 왔다.하지만 Promise.all은 치명적인..

JavaScript의 forEach 메서드는 동기적으로 설계되어 있어 async/await를 사용해도 비동기 작업의 완료를 기다려주지 않는다. 이 현상이 발생하는 내부 동작 원리를 분석하고, 상황에 따라 순차 처리(for...of)와 병렬 처리(Promise.all)를 올바르게 선택하는 방법을 정리한다. JavaScript forEach가 비동기(async/await)를 기다리지 않는 원리와 해결법배열의 요소를 순회하며 서버에 API 요청을 보내거나 DB에 데이터를 저장해야 할 때, 가장 먼저 떠오르는 메서드는 익숙한 forEach다. 그래서 우리는 자연스럽게 콜백 함수에 async를 붙이고 내부에서 await를 사용한다.하지만 코드를 실행해 보면 예상과 전혀 다르게 동작한다. 비동기 작업이 끝나기도 ..