수민's 개발 이야기

처음 디자인을 받고 placeholder가 움직이고... 비키는게 현실적으로 가능한가?했는데 불가능은 없다 🤣 이 비현실적인 UI의 진실은 placeholder가 placeholder가 아니라는 것에 있다 😉내가 작성한 코드를 자세히 보면 움직여야할 placeholder가 안보인다.CSS와 React의 useState를 활용하여 상태에 따라 라벨 위치를 변경하는 방식으로 구현을 진행했기 때문이다. 👩🏻‍💻구현 코드  아이디를 입력하세요 setEmployeeId(e.target.value)} onFocus={() => setIsFocused(true)} onBlur={() => setIsFoc..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 3. 5. 02:47

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 Recoil같은 상태 관리 라이브러리를 사용해야 하는 경우1️⃣ 여러 컴포넌트에서 동일한 상태를 공유할 때 ex) 로그인 상태 , 사용자 정보 , 테마 설정 등❌ useState 사용 : 여러 컴포넌트에서 상태 공유 어려움                              : *prop drilling 이 발생할 수 있음 *prop drilling  : React에서 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 때 중간 컴포넌트들이 불필요하게 prop을 전달해야 하는 문제2️⃣ 컴포넌트 간 상태를 동기화해야 할 때 ex) 필터 옵션 , 검색어, 사이드바 상태✅ 페이지 내 여러 섹션에서 동일한 데이터를 참조해야 한다면 Recoil을..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 21. 16:55

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 💻첫 상태관리 라이브러리를 Recoil을 선택한 이유 : react랑 가장 사용법이 비슷해서 러닝커브가 제일 적어서 선택작고 React스러운: recoil이 React의 주요 철학인 선언적 UI, 컴포넌트 중심의 설계, 그리고 훅스를 사용하는 방식을 기반import React from 'react';import { atom, useRecoilState } from 'recoil';const textState = atom({ key: 'textState', default: '', });function TextInput() { const [text, setText] = useRecoilState(textState); const..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 19. 02:53

더보기프론트엔드 개발자로 성장하기 위해서 큐시즘이라는 동아리에서 개발을 달리게 되는데 당장이라도 React-Query 등 안써본 개념들을 써봐야하기에 공부를 시작! 🖌️React-Query란?: fetching , caching, 서버 데이터와의 동기화를 지원해주는 라이브러리 ➡️ *ContextAPI를 기반으로 동작 *ContextAPI란 ?  : 리액트의 내장 API / 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 쉽게 공유할 수 있게 해줌     ➡️ 모든 컴포넌트에서 사용할 수 있는 데이터를 전달하는데 유용 ➡️ React-Query를 활용해 비동기 데이터를 불러오는 과정 중 발생하는 문제들을 해결해줌🖌️Caching : 캐싱React-Query는 캐싱을 통해 동일한 데이터에 대한 ..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 18. 02:02