로고

LOGME - 게시물 목록

최신 글

10개의 게시물을 표시하고 있습니다.

React 라이프사이클 딥다이브: 렌더는 했는데, 왜 Effect는 실행되지 않았을까?

useEffect는 마운트된 뒤 실행된다. 반환한 함수는 언마운트할 때 실행된다. 처음 React를 배울 때는 이렇게 이해해도 큰 문제가 없다. 화면이 나타나면 데이터를 가져오고, 사라지면 이벤트 리스너나 타이머를 정리한다. 작은 예제에서는 설명과 실행 결과도 대...

EffectReact

TypeScript는 10배 빨라졌는데, 우리 빌드는 왜 그대로일까?

개발 서버는 금방 뜬다. 파일을 저장하면 브라우저에도 수정 사항이 바로 반영된다. 그런데 편집기에서는 자동 완성이 늦게 나타나고, 터미널의 타입 검사는 한참 돌아간다. PR을 올리면 CI에서 다시 기다린다. 전부 같은 TypeScript 프로젝트에서 벌어지는 일이...

TypeScript

CSS Grid Lanes로 메이슨리 레이아웃 만들기 — 구현보다 어려운 건 카드의 순서다

프로젝트 카드 열두 개를 세 열로 나열한다고 해보자. 첫 번째 프로젝트는 가로로 긴 화면 캡처를 쓰고, 두 번째는 모바일 화면을 세로로 보여준다. 세 번째 프로젝트에는 설명이 네 줄 붙는다. 이 상태에서 일반적인 CSS Grid를 적용하면 어딘가 허전해진다. 가장...

<select>를 꾸미려고 드롭다운을 새로 만들 필요가 있을까?

디자인 시안의 선택창에는 상태별 색상과 여백, 선택 표시가 들어 있다. 기본 `만으로는 구현하기 어려워 보인다. 그렇다고 `와 JavaScript로 드롭다운을 다시 만들면, 이번에는 키보드 조작과 포커스, 폼 제출까지 직접 챙겨야 한다. 최근 브라우저가 넓히고 있...

CSS

반응형 이미지의 sizes를 매번 계산해야 할까? sizes="auto"가 바꾸는 것

상품 카드가 모바일에서는 한 줄에 하나, 데스크톱에서는 두 개씩 놓인다고 해보자. 이미지는 카드 너비에 맞춰 줄어드는데, 브라우저가 내려받는 파일까지 적절한 크기인지는 별개의 문제다. srcset에 여러 크기의 이미지를 준비해도 sizes가 실제 레이아웃과 맞지...

브라우저반응형모바일Safari+1

버튼 옆 설명창에 JavaScript가 꼭 필요할까? CSS 앵커 포지셔닝 활용법

버튼 옆에 작은 설명창 하나를 띄우는 일은 간단해 보인다. 버튼의 위치를 구하고, 그 아래에 설명창을 배치하면 된다. 문제는 그다음이다. 화면 끝에서는 설명창이 잘리고, 스크롤하면 버튼과 떨어지며, 문장이 길어지면 처음 계산한 위치가 맞지 않는다. 작은 UI에 좌...

UICSS앵커 포지셔닝

SPA 성능 측정이 달라진다: 첫 로딩 이후를 보는 Soft Navigation

상품 목록은 빠르게 열렸다. 그런데 상품을 누르자 화면이 잠시 멈춘다. 뒤로 돌아가는 동작은 괜찮지만, 다른 상품을 선택하면 다시 기다려야 한다. 이런 서비스의 성능을 첫 페이지 로딩 결과만으로 설명하기는 어렵다. 사용자는 사이트에 접속하는 시간뿐 아니라, 그 안...

최적화Soft NavigationLCPINP+1

Meta’s Muse Spark Open Is Here—But Is It Actually Free to Use?

Meta has released the weights for Muse Spark Open. That does not mean it has launched a free, unlimited alternative to ChatGPT. The distinction mat...

sparkaimeta

Gemini 4 Argon Is Rolling Out: Can You Use It With Google AI Pro?

Google’s Gemini 4 Argon rollout comes with an important answer for paying users: according to the Gemini app’s October 13 release notes, the new mo...

ArgonaiGemini

Meta Muse Wonder vs Wonder Full: API Pricing and the Access Catch

Before you compare Meta’s new models with your current coding assistant, check which one you can actually use. Muse Wonder is available through the...

Muse WonderMuseAI agentsMeta