웹 애플리케이션에서 버튼 클릭 한 번으로 텍스트를 복사하는 기능을 구현할 때 과거 사용하던 document.execCommand('copy')가 동작하지 않거나 콘솔에 경고 메시지가 출력되는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 대체 기술인 Clipboard API의 비동기 특성이나 보안 권한 조건을 제대로 모른 채 기존 구형 코드를 그대로 ···
사용자가 로그인한 상태에서 나도 모르게 비밀번호가 변경되거나 결제 요청이 승인되는 아찔한 보안 사고를 경험해봤을 것이다. 웹 서비스를 개발하다 보면 인증된 사용자의 권한을 악용하는 CSRF(Cross-Site Request Forgery) 공격을 쉽게 지나치는 경우가 많다. 다만 대부분의 개발자들은 CSRF 공격이 정확히 어떤 원리로 동작하는지 모르거나 단···
문자열 치환 작업은 웹 개발에서 가장 자주 마주치는 작업 중 하나다. 그런데 대부분의 개발자들은 PHP의 str_replace()만 사용하거나, str_ireplace()와의 차이를 제대로 모른 채 상황에 맞지 않는 함수를 쓰고 있다. 특히 사용자 입력값을 처리하거나 동적 콘텐츠에서 특정 단어를 치환해야 할 때, 대소문자 처리 실수로 인해 예기치 않은 결과···
웹 애플리케이션을 운영하다 보면 사용자가 10MB가 넘는 고화질 사진을 그대로 업로드해 서버 메모리가 튀거나 네트워크 대역폭이 순식간에 고갈되는 현상을 경험해봤을까?대부분의 서비스에서는 업로드 용량 제한 알림 팝업을 띄우거나 서버 백엔드에서 GD, ImageMagick 같은 도구로 썸네일을 생성하는 방식을 사용한다. 다만 클라이언트 브라우저 메모리 안에서 ···
긴 텍스트가 박스를 벗어날 때 어떻게 처리할지는 웹 개발에서 자주 만나는 문제다. 카드 레이아웃, 리스트 아이템, 댓글 목록처럼 고정된 너비에 텍스트를 맞춰야 할 때가 많기 때문이다. 다만 많은 개발자들은 CSS의 text-overflow나 JavaScript의 substring()을 막무가내로 섞어서 쓰거나, 불필요한 라이브러리를 끌어오곤 한다. 이번에는···
웹 애플리케이션을 개발하면서 마우스로 요소를 드래그하여 순서를 바꾸거나 파일을 업로드하는 드래그 앤 드롭(Drag and Drop) 기능을 한번쯤 구현해봤을 것이다.다만 대부분의 개발자들은 dragover 이벤트에서 왜 preventDefault()를 호출해야 하는지, 혹은 드롭 존(Drop Zone)에 진입할 때 자식 요소 때문에 이벤트가 튀는 현상을 정···
존재하지 않는 페이지로 접근한 사용자에게 예쁜 디자인의 안내 문구를 보여주거나 자동으로 메인 페이지로 이동시키는 처리를 해보신 적이 있으신가요? 사용자 경험(UX)을 고려한 아주 당연한 개발 방식처럼 보입니다.다만 HTTP 상태 코드를 올바르게 제어하지 않으면 검색엔진 크롤러가 이를 'Soft 404' 에러로 판단하여 웹사이트의 크롤링 예산을 낭비하고 검색···
웹 애플리케이션에서 수만 건의 JSON 데이터를 가공하거나 복잡한 연산을 수행할 때 브라우저 화면이 완전히 얼어붙어 클릭조차 되지 않는 현상을 경험해봤을까? 웹 서비스를 개발하다 보면 한 번쯤 마주치는 대표적인 UI 멈춤(Freezing) 현상이다.다만 대부분의 개발자들은 자바스크립트가 싱글 스레드로 동작한다는 점을 잊고, 단지 setTimeout이나 Pr···
DOM 요소의 클래스를 추가하거나 제거할 때, 대부분의 개발자는 직접 className 문자열을 조작하거나 jQuery의 addClass/removeClass를 써왔을 것이다. 다만 현대 자바스크립트에서 이렇게 하는 것은 번들 크기 낭비이고, 실수하기 쉬운 방식이다. 이번에는 classList API가 정확히 무엇인지, 왜 className 직접 조작보다 ···
웹 애플리케이션을 개발하면서 실시간 검색 입력창이나 창 크기 조절(Resize), 스크롤 이벤트를 구현할 때 매 밀리초마다 이벤트가 수십, 수백 번 폭주하는 현상을 경험해봤을 것이다.다만 이벤트가 과도하게 실행되면서 브라우저가 버벅이거나 서버 API 호출 비용이 낭비되고 있음에도 정확한 원인이나 제어 방법을 모르는 경우가 많다.이번에는 자바스크립트의 대표적···
PHP 개발을 하다가 갑자기 화면에 "Warning: Cannot modify header information - headers already sent by ..."라는 에러 메시지가 출력되며 페이지 이동이나 세션 처리(session_start)가 실패하는 경험을 해봤을 것이다. 다만 대부분의 개발자들은 이 에러가 발생하는 정확한 원인이나 HTTP 프로토···
쇼핑몰이나 블로그를 운영하면서 파라미터(?sort=desc, ?page=1)나 www 여부에 따라 동일한 페이지가 서로 다른 URL로 접속되는 현상을 경험해봤을까?다만 대부분의 개발자들은 이러한 중복 URL이 검색엔진 크롤러의 평가를 분산시키고 색인 누락을 일으키는 정확한 원인이나 해결책을 모르는 경우가 많다.이번에는 Canonical 태그(대표 URL)가···
서비스 출시 전이나 이벤트 오픈을 앞두고 "갑자기 사용자 수천 명이 동시 접속하면 우리 서버가 버틸 수 있을까?" 고민해 본 적이 있을 것이다.다만 실제 트래픽 환경을 사전에 시뮬레이션하지 않고 그저 서버 스펙만 올렸다가, 예상치 못한 병목 현상이나 DB 커넥션 고갈로 서비스가 마비되는 상항을 맞닥뜨리는 경우가 많다.이번에는 Go 기반의 가볍고 강력한 오픈···
블로그나 웹사이트의 글을 SNS(페이스북, 카카오톡, 트위터 등)에 공유할 때, 제목, 이미지, 설명이 제대로 표시되지 않은 경험이 있을까? 또는 내가 설정한 이미지가 아니라 엉뚱한 이미지가 나타난 적은? 이런 문제는 대부분 "Open Graph" 메타 태그가 제대로 설정되지 않아서다. Open Graph는 페이스북이 개발한 프로토콜로, 웹 페이지의 정보를···
웹 개발을 하면서 사용자 로그인을 처리해야 할 때 쿠키, 세션, 토큰이라는 세 가지 방식을 마주치게 된다. 다만 이 세 가지가 정확히 뭐가 다른지, 어떤 상황에서 뭘 써야 하는지 설명할 수 있는 개발자는 생각보다 적다. 많은 사람들이 그냥 "세션을 쓰면 된다더라" 또는 "요즘은 토큰을 쓴다더라" 정도만 알고 있을 뿐이다. 다만 각 방식의 원리를 이해하면, ···
JavaScript를 다루다 보면 async/await를 만나게 된다. 특히 서버 통신, 파일 처리, 데이터베이스 조회 등 시간이 걸리는 작업을 할 때 거의 필수적으로 사용된다. 다만 async/await가 정확히 뭔지, Promise와는 뭐가 다른지, 언제 사용해야 하는지 명확하게 이해하는 개발자는 생각보다 적다. 그냥 "좋다고 해서" 또는 "이 코드를 ···
리눅스 서버를 다루다 보면 chmod 명령어를 자주 사용하게 된다. 특히 파일 업로드 기능, 권한 설정, 디렉토리 접근 제한 등 웹 개발 과정에서 거의 매일 마주친다. 다만 대부분의 개발자들은 chmod 뒤에 붙는 숫자가 정확히 뭔지 모른 채 인터넷에서 가져온 코드를 그냥 복사해 붙인다. "755 권한으로 설정해" 라는 말은 들어봤지만, 왜 755인지, 6···
jQuery는 편리하지만, 잘못 사용하면 웹사이트 성능을 크게 떨어뜨릴 수 있다. 특히 대규모 프로젝트에서 jQuery를 남용하거나 최적화하지 않으면 페이지 로딩 속도, 메모리 사용량 등 여러 문제가 발생한다. 이번에는 jQuery를 사용할 때 자주 하는 실수들과 그 해결책을 정리해서 소개하겠다. 이 글을 읽고 당신의 jQuery 코드를 점검해보면, 분명히···