최근 토스에서 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; /* 기본값 */}..
요소 수평 / 수직 정렬 방법1. 수평 정렬a) Flexbox 사용: Centered Element.flex-center { display: flex; justify-content: center;}b) Grid 사용: Centered Element.grid-center { display: grid; justify-content: center;}c) Position 사용: Centered Element.position-center { position: relative;}.position-center .element { position: absolute; left: 50%; transform: translateX(-50%);}d) Table 레이아웃 사용: Centered Element..
RORO 패턴이란?RORO는 "Receive an Object, Return an Object"의 약자로, 함수의 매개변수와 반환값을 모두 객체로 사용하는 JavaScript 패턴이다.이 패턴은 TypeScript와 함께 사용할 때 특히 유용하다고 한다. RORO 패턴의 주요 이점은 다음과 같다:매개변수의 순서에 구애받지 않음선택적 매개변수를 쉽게 처리함수 시그니처의 변경이 용이코드의 가독성과 유지보수성 향상TypeScript와 함께 사용 시 타입 안정성 강화RORO 패턴 예시예시1기존의 함수:function createUser(name: string, age: number, email: string, isAdmin: boolean = false) { // 사용자 생성 로직}createUser("Joh..
React에서 폼 처리는 사용자 입력을 관리하고 상호작용하는 중요한 부분이다.폼 처리의 접근 방식에는 제어 컴포넌트와 비제어 컴포넌트가 있는데 오늘은 이 둘의 차이를 알아보려한다.제어 컴포넌트 vs 비제어 컴포넌트제어 컴포넌트 (Controlled Components)제어 컴포넌트는 React의 useState를 통해 폼 데이터를 관리한다.각 폼 요소의 값은 컴포넌트의 state에 저장되고, 변경 이벤트를 통해 업데이트된다.특징상태 관리: React의 state로 폼 데이터를 관리한다.실시간 유효성 검사: 입력값이 변경될 때마다 즉시 검증할 수 있다.조건부 렌더링: 입력값에 따라 UI를 동적으로 변경할 수 있다.중앙화된 데이터 흐름: 단일 소스의 진실(Single Source of Truth)를 유지한다..
