들어가며 바텀시트를 만들다가, 시트는 올라왔는데 뒤 배경이 같이 스크롤되는 걸 봤다. 처음엔 "그냥 body 에 overflow:hidden 하면 되겠지" 싶었는데, 막상 해보니 화면이 맨 위로 튕겨버렸다. 그럼 body 를 fixed 로 바꾸면 되겠다 싶어 해봤더

토스트(스낵바) 직접 만들기 들어가며 어떤 화면을 만드는데 디자인 시안에 'snackbar(스낵바)'라는 게 계속 나왔다. 화면 아래에 잠깐 떴다 사라지는 안내 띠인데, 솔직히 처음 보는 단어였다. '토스트'는 들어봤어도 직접 만들어본 적은 없었고, "토스트랑 스낵

목록에서 항목을 하나 삭제했더니, 새로고침된 화면에서 남아있던 다른 항목에체크가 들어가 있었다. "어 이미 선택돼 있네?" 하고 그대로 삭제 버튼을 눌렀더니오히려 "삭제할 항목을 선택해 주세요"라는 안내가 떴다.분명 체크는 보이는데, 시스템은 아무것도 선택 안 됐다고

label과 input을 연결하는 방식엔 두 가지가 있다. 둘 다 알고 있었지만 정확히 어떤 차이가 있는지 몰라서 이번에 제대로 정리해보았다. 나는 주로 명시적 연결로만 사용해왔었는데, 상황에 따라 골라쓰면 될거 같다. 두 가지 방식 암묵적 연결 (Implicit

옛날엔 a 안에 button 넣고 JS 로 stopPropagation 했는데, HTML 표준 위반이라는 걸 알게 됐고 모던 표준 (Stretched Link) 으로 정리해 둠. 카드나 영역 전체를 클릭 가능하게 만들 때, a/button 으로 컨텐츠를 감싸지 않고

퍼블리셔로 일하다가 처음으로 백엔드 코드를 들여다볼 일이 생겼는데, URL 에서 값 받는 패턴이 계속 나와서 이번에 제대로 정리해봤다.PHP 가 URL 의 정보를 받아서 변수에 담는 패턴 정리? 뒤부터 = 쿼리스트링 (query string)& 로 여러 파라미터 구분형

토글 스위치 구현 방법 찾다가 :checked 해킹을 알게 됐는데, 토글뿐 아니라 탭·모달·아코디언까지 같은 원리로 만들 수 있길래 정리해보았다.input의 :checked 상태랑 CSS 형제 선택자(+, ~)만으로 JS 없이 토글, 탭, 모달, 아코디언을 만들 수 있

파일명의 대소문자만 변경했을 때 Git이 변경사항을 감지하지 못하는 경우가 있다. 원인과 해결 방법을 정리한다. 문제 상황 CSS 파일명이 Main.css로 되어 있어 소문자 main.css로 바꾸려고 했다. 에디터나 탐색기에서 이름만 바꾼 뒤 Git 상태를 확인했

사실 평소엔 <form> 태그를 잘 안 썼다. 로그인이든 검색이든 그냥 <div>로 감싸고 버튼에 이벤트 걸어서 JS로 값 긁어 보내는 식이었고, 동작은 잘 되니까 굳이 form을 써야 할 이유를 못 느꼈다.그러다 최근에 레거시 페이지 리뉴얼 작업을 하면서

댓글, 채팅, 리뷰처럼 사용자가 입력한 텍스트를 고정폭 박스 안에 보여줘야 할 때, 띄어쓰기 없이 길게 붙여 쓴 문자열(예: URL, 연속된 영문/숫자)이 레이아웃을 밀어내는 문제가 생긴다.이걸 해결하려고 검색하면 word-break, overflow-wrap, wor

Laravel에서 HTML을 만들어주는 템플릿 엔진.파일 확장자는 .blade.phpHTML 안에서 @문법, {{ }}를 사용해 서버 데이터를 화면에 출력한다. 퍼블리셔 입장에서는"하드코딩 HTML → 데이터 기반 UI로 바꾸는 과정"이라고 보면 이해가 쉽다.예시:

iframe은 생각보다 자주 보이지만,막상 직접 다루려고 하면 높이 문제나 도메인 제약 때문에 꽤 까다로운 태그다.특히 그냥 붙여 넣기만 하면 되는 줄 알았다가높이가 안 맞거나, 내부 페이지에 접근이 안 되거나, 반응형 대응이 꼬이는 경우가 많다.이번 글은 실무에서 i

모바일 검색 페이지에서 검색창이 아닌 다른 영역(스와이퍼, 빈 공간 등)을 터치해도 키보드가 올라왔다.document 전체에 touchstart 이벤트를 걸어서 검색창에 .focus()를 주고 있었다.의도는 iOS 대응이었다. iOS에서는 사용자 제스처 없이 호출한 .

목록 UI를 구현하다 보면 데이터 로딩 동안 화면이 비거나 레이아웃이 밀리는 상황을 자주 마주친다.스켈레톤 UI(Skeleton UI)는 그 순간을 채우기 위한 로딩 패턴으로, 실제 콘텐츠와 비슷한 형태의 회색 블록을 먼저 보여준다.뼈대(skeleton)만 먼저 그려두

오늘 공부한것 & 기억하고 싶은 내용 typescript와 next.js를 접목시켜서 코드를 짜고 있는데, 가끔씩 느낌표가 나왔다. 내가 아는 느낌표는 부등호와 함께 앞에 사용하는 not의 의미밖에 몰랐는데, 드문드문 뒤에 느낌표가 찍히는 것이다. 저게 뭘까 저게 뭘

오늘 공부한것 & 기억하고 싶은 내용 createObjectURL URL.createObjectURL은 브라우저에서 로컬 파일을 로드하여 미리보기를 제공하는 간단한 방법이다. 브라우저에서 로컬 파일을 간단히 로드 가능 이미지 파일을 업로드하기 전에 사용자에게

오늘 공부한것 & 기억하고 싶은 내용 .superRefine ctx.addIssue를 통해 원하는 만큼 이슈를 추가할 수 있다. 함수 실행 중에 ctx.addIssue가 호출되지 않으면 유효성 검사가 통과 fatal: true 설정 시, 그 다음 refine이 실행

오늘 공부한것 & 기억하고 싶은 내용 Image 컴포넌트 기본 jsx img가 지원하지 않는 여러가지 강력한기능을 지원한다. 로딩 전후로 컴포넌트 위치가 밀리는 content shift를 방지한다. 압축률이나, 화면 크기별 압축 옵션을 제공한다. 필수 prop으로

말 그대로 중간에서 동작하는 일종의 소트프웨어를 뜻한다. 어떤 것과 다른것 사이에서 실행되는 코드.미들웨어를 사용하면 request가 완료되기 전에 코드를 실행할 수 있다.이미지, CSS, JS, Favicon 요청 등 웹 사이트의 모든 단일 request 하나하나 마

오늘 공부한것 & 기억하고 싶은 내용 bcrypt 비밀번호를 해시할 때 사용하는 라이브러리 해시함수는 단방향 멱등성 함수 데이터베이스에 비밀번호를 그대로 저장하지 않는다.(해킹의 위험성) 정해진 입력에 따라 정해진 난수를 출력함 bcrypt하는 이유 보안상 데이터가