전체 글65 AWS ElasticCache Valkey와 RedisOSS AWS 리소스를 활용해서 Redis를 활용하는 것은 꽤나 많은 레퍼런스가 존재합니다. 리소스 중에서도 AWS ElasticCache는 Redis를 비롯해, Memcached 등 대표적인 cache 시스템을 서비스로 제공하고있습니다. 24년 12월 기준 AWS ElasticCache에서 제공하는 Cache 리소스는 Valkey 캐시, Redis OSS 캐시, Memcached 캐시 등이 있습니다. 그 중에서도 Valkey 캐시는 이번 24년 10월에 출시된 신규 기능으로 이번에 알게되어, 각 Cache System 의 ( Memcached 생략) 레퍼런스 링크를 기록합니다. 목차Valkey Valkey는 AWS ElastiCache에서 2024년 10월에 새롭게 도입된 캐시 엔.. 2024. 12. 17. React component life cycle 리액트에서 컴포넌트는 마치 생명체처럼 몇가지 단계를 거쳐서 생성되고 사라지기도 합니다.이런 표현을 보통 생명주기(Lifecycle)라고 부르며, 이번에는 세 가지 주요 단계 생명주기 내용을 기록합니다. 목차 마운트(Mount) 컴포넌트가 처음 화면에 나타나는 순간을 말합니다.이때 초기 렌더링이 일어나고, 초기 설정이 이루어집니다.function Welcome() { useEffect(() => { // 컴포넌트가 처음 나타날 때 실행됩니다. console.log('컴포넌트가 태어났어요!'); }, []); // 빈 의존성 배열 return 안녕하세요!;} 업데이트(Update) 상태나 props가 변경되어 컴포넌트가 다시 그려지는 단계입니다. function Counter(.. 2024. 12. 15. React Hook React에서 Hook은 함수 컴포넌트 안에서 React의 상태와 생명주기 기능을 "연결(hook into)" 할 수 있도록 도와주는 함수입니다.React Hook 을 통해서 React는 상태관리와 생명주기 메서드를 함수 컴포넌트에서 사용할 수 있도록 연결하며, 렌더링이나 상태가 변경되는 시점에 실행되도록 예약된 로직을 정의합니다. React Hook에 대한 이해를 위해 간단하게 기록합니다. 목차 useEffect React는 상태나 props가 변화하면 DOM 을 업데이트 하는 작업을 담당하며, 그 외에 실행되는 작업이 있다면 모두 Side Effect라고 가정합니다. 예를 들면 데이터를 가져오는 작업이나, React 가 아닌 방식으로 DOM에 접근해서 .. 2024. 12. 15. tailwindCSS safelist와 동적클래스 classname TailwindCSS를 사용할 때 클래스를 동적으로 적용해야 하는 상황이 종종 발생합니다.하지만 동적 클래스를 잘못 작성하거나 TailwindCSS의 빌드 과정과 호환되지 않는 방식으로 구성하면 스타일이 적용되지 않을 수 있습니다. 목차 동적 클래스 지정 속성에 따라 버튼 색상을 동적으로 변경하려는 방식으로 클래스를 동적으로 사용하려면, 단순한 리터럴 대입으로는 변경되지 않습니다.이 방식은 Tailwind(의 빌드 과정에서) 클래스가 제대로 적용되지 않습니다.interface ButtonProps { label: string; onClick: () => void; color?: string; // 색상 조절을 위한 선택적 prop}const Button: React.FC = ({ label, .. 2024. 12. 8. 이전 1 2 3 4 ··· 17 다음
