모두를 위한 웹을 만든다는 것, Accessibility 접근성은 별도의 기능을 추가하는 일이 아니라, HTML을 작성하고 UI를 구현하는 과정에서 함께 지켜야 하는 기본 조건에 가깝다.개발자 입장에선 조금 번거롭고 실제 인터페이스의 겉면만 볼 땐 달라보이는게 없을 수 있어도, 누군가의 사용성을 크게 바꾼다. 인턴으로 일할 때도 접근성 요소들이 잘 지켜지지 않던 기존 코드를 발견을 종종했어서 이슈를 올려 한번 쭉 검토를 해보기도 했는데, 사실 아래 내용을 정리하면서 생각지도 못한 부분 (예를 들면 버튼만 탐색해야할 경우를 대비하여 삭제가 아닌 프로젝트 삭제로 라벨을 설정해야한다는 점)도 고려대상이라는 점을 새롭게 배웠다. 이 글에서는 MDN의 「HTML: 접근성의 좋은 기반」 문서를 바탕으로, 웹 개발 중 최소한으로 점검하면 좋은 접근성 항목들을 정리해보려고..
useState는 어떻게 값을 기억하는가 (리액트 코드로 Fiber 구조와 렌더링 살펴보기) TMI) 네이버랩스 인턴을 마치고 10일간 미국에서 쉬다왔다. 요즈음엔 개발 공부하는 것에 재미를 다시 붙이고 있다. 어쩌다보니 리액트 소스코드를 뜯어보는데에 재미를 붙여서, 동시에 이것저것 찾아보다보니 정보의 레이어가 쌓이는 장점도 있지만 그만큼 더 헷깔리는 것들이 생기는 것 같기도 하다. (특히 다양한 자료에서 용어를 혼용하는 경우가 많다..) 정보의 홍수와 AI로 인한 FOMO 속에서 혼란스러운 개발자 생태계 안에서 다음 스텝을 준비하는 입장에서, 리액트 소스코드를 뜯어본 경험은 안티프래질하다고 볼 수 있지 않을까 ..? 라는 생각이다. FiberReact는 컴포넌트 하나마다 Fiber 객체를 만든다. state는 React 내부의 Fiber 객체에 저장되는데, state와 관련된 필드만 보면Fib..
자바스크립트 효율적으로 처리하기 (requestAnimationFrame, requestIdleCallback, Web Workers) 브라우저 성능 최적화의 핵심은 단순히 코드를 “빠르게” 만드는 것이 아니라,언제 실행할지와 어디서 실행할지를 적절히 나누는 데 있다. 브라우저의 메인 스레드는 하나다. 개발자가 작성한 JavaScript 실행뿐 아니라 이벤트 처리, 스타일 계산, 레이아웃, 페인트, 컴포지팅까지 대부분의 주요 작업이 같은 스레드에서 처리된다.따라서 JavaScript가 메인 스레드를 오래 점유하면 브라우저는 화면을 갱신하지 못한다. 사용자는 이를 스크롤 버벅임, 클릭 지연, 입력 랙, 애니메이션 끊김 같은 형태로 체감한다.브라우저가 일반적으로 목표로 하는 60fps 환경에서는 한 프레임에 사용할 수 있는 시간은 약 16.6ms뿐이다.이 짧은 시간 안에 JavaScript 실행, 스타일 계산, 레이아웃, 페인트까지 끝나야 ..
getElementsByClassName 함수 구현하기 (+자바스크립트에서 유사배열과 배열, 변환 방법) 프론트엔드 라이브 코딩이나 화이트보드 테스트에서 자주 나오는 과제 중 하나가 DOM API를 직접 구현해보는 문제입니다. 그중 대표적인 것이 document.getElementsByClassName을 직접 만들어보라는 과제입니다. 이번 글에서는 이 문제를 어떻게 접근하면 좋을지 베이스케이스 → 엣지케이스 → 효율성 → 가독성 순서로 풀어봅니다. 문제 이해목표는 주어진 className을 가진 모든 요소를 찾아 배열로 반환하는 함수입니다.기본적으로는 DOM 트리를 순회하면서 조건에 맞는 요소를 모으면 됩니다.function getElementsByClassName(className) { const bodyChildrenEls = document.body.children; const result = [..
메모이제이션(Memoization)의 원리와 함수 구현해보기, 적용 프로그래밍을 하다 보면, 같은 연산을 반복해서 수행하는 상황을 자주 만납니다. 이런 경우, 이미 계산한 결과를 저장해 두었다가 재활용하면 성능을 크게 개선할 수 있는데요. 이 기법이 바로 메모이제이션(Memoization) 입니다.리액트에서의 useMemo 말고 직접 함수 구현은 처음이라 하나씩 공부하면서 정리해둔 내용입니다. 단순히 갖다 쓰기만 할줄 알았는데, 내부 로직을 직접 짜보니 흥미롭네요. 이번 글에서는 메모이제이션의 원리에서 시작하여 구현하며 비교해본 다양한 방법들, 그리고 적용까지 정리해 보겠습니다.1. 메모이제이션의 기본 원리메모이제이션은 간단히 말해 “입력 → 출력 결과”를 캐시에 저장해 두고, 같은 입력이 다시 들어왔을 때는 계산하지 않고 캐시에서 꺼내 쓰는 방식입니다.ex, 피보나치..
CursorAI + MCP 로 생산성 100배 부스트하기 (Sequential Thinking과 TalkToFigma) CursorAI와 MCP(Model Context Protocol)는 개발자에게 강력한 도구로 세상이 시끄럽다. CursorAI 에 크게 놀랐는데, MCP 를 결합하면 더 엄청나다는 이야기를 유튜브에서 보고 몇가지 활용해보았다. CursorAI와 MCP의 소개CursorAI는 인공지능을 활용하여 코드 작성, 디버깅, 최적화 등을 지원하는 도구로, 개발자의 생산성을 크게 향상시킨다. MCP는 다양한 플랫폼과의 통합을 가능하게 하여, 개발자가 여러 도구를 유기적으로 활용할 수 있도록 돕는다.내가 사용해본 MCP 1 -  Sequential Thinking 🧠Sequential Thinking은 복잡한 문제를 단계별로 접근하여 해결하는 방법론으로, 개발 과정에서의 논리적 사고를 강화한다. 단계별로 명확하게 ..
Cursor AI 등 .. 코딩할 때 AI 툴을 사용하며 느낀 개인적인 생각, 부작용 AI 코딩의 위험성오늘 실제 프로젝트 마이그레이션을 진행하면서 깨달은 중요한 점이 있다.코드에 대한 깊은 이해 없이 AI를 사용하는 것은 매우 위험할 수 있다는 사실이다.기존 코드는 제가 직접 기능을 구상하고, 하나씩 함수를 작성한, '이해도가 높은 코드' 였다. 오늘 cursorAI 를 사용하여 타입스크립트로 마이그레이션하고, 기존의 Redux 적용 범위를 확장하면서 주의하고, 다음부턴 어떻게 해야할 지 회고가 필요할 것 같아서 이 글을 작성하게 되었다. 1. 왜 위험한가?첫번째로 기능 손상의 위험이 크다. AI가 코드의 전체적인 맥락을 완벽히 이해하지 못하는 경우가 생각보다 많았다. 그래서 기존 기능의 의도나 로직을 보존하지 못한 것을 뒤늦게 발견하기도 했다. 두번째로 손상된 기능을 알아채는 것이 ..
🌗 Styled Components로 라이트/다크 모드 전환하기 실제 프로젝트에서는 사용자에게 다크 모드와 라이트 모드를 제공하는 것이 중요한 UX 요소 중 하나이다.styled-components와 ThemeProvider를 활용하면 전역 테마 전환을 매우 간단하게 구현할 수 있다.✅ 1. 테마 객체 정의하기// themes.jsexport const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke",};export const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111",};✅ 2. App에서 테마 상태 관리여러개의 property를 가진 객체를 두개 (다크/라이트) 설정함으로써 간편하게 theme을 바꿀 수 있다.  // Ap..
Styled Components - 애니메이션, 컴포넌트 선택자, 중첩 스타일링 이번에 더듬어볼 기억은 ..  keyframes 도 const 로 따로 빼서 관리하는 거 + styled component 조건문처럼 쓰기 !! ✅ 회전 애니메이션 만들기먼저 keyframes를 사용해 회전하는 애니메이션을 정의한다.import styled, { keyframes } from "styled-components"; const rotationAnimation = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { border-radius: 100px; } 100% { transform: rotate(360deg); border-radiu..

티스토리툴바