이 글은 Vercel에서 작성한 React Best Practice와 소스 코드를 보며 톺아보는 글입니다.AI에게 "이 코드를 React Best Practice에 맞게 리팩토링해줘"라고 요청할 수도 있지만,왜 그 코드가 더 나은지, 어떤 원리로 성능이 개선되는지 이해하는 것이 중요합니다.이 시리즈에서는 Vercel이 정의한 8가지 카테고리를 하나씩 깊이 있게 살펴봅니다.각 Best Practice의 이론적 배경, 실제 성능 차이, 적용 시점을 중심으로 분석합니다. 이 글은 sections에서 소개하는 8가지 섹션 중 6번째 섹션인 Rendering Performance를 다룹니다.Vercel React Best Practices 구조Vercel은 React 성능 최적화를 Impact 수준에 따라 8개 ..
웹 개발에서는 다양한 UI 라이브러리와 프레임워크가 존재하지만,때로는 이러한 라이브러리에 과하게 의존하는 경향이 있다.(대표적으로 내가 그런 사람..)하지만 이는 프로젝트의 복잡성을 증가시키고, 추가적인 의존성 관리 및 번들 크기 증가로 이어질 수 있기에,어느 정도 웹에 대해 공부하신 분들은 아시리라 생각이 들지만,기본 HTML 태그와 CSS를 활용하여 간단한 기능들을 구현할 수 있는 기능들을 소개하고자 한다.라이브러리에 과하게 의존하지 않기1. Select box(Select, OptGroup, Option)각종 디자인 라이브러리(antd, 'bootstrap',mui, shadcn/ui 등)의 Select 컴포넌트나 React Select, Downshift 등의 라이브러리를 사용하지 않고,기본 HT..
최근 토스에서 Frontend Accelerator 1기를 모집하여, 신청하여 객관식 시험을 볼 수 있었는데,모두 골라야한다는 점이 확실히 알고 있어야하는 것인데, 100% 확신하는가라고 생각했던 문제가 거의 없었던 것 같다.그 중 텍스트 줄바꿈 속성에 관한 문제도 있었어서, 적어보려고 한다.텍스트 줄바꿈 방법 1. white-space <div class="text-container"> This is a long text that we want to wrap naturally to the next line without breaking words.</div> .text-container { width: 200px; white-space: normal; /* 기본값 */}..
