[CSS] keyframes animation: usage in React : 리액트에서 키프레임/애니메이션을 이용한 동적인 이미지/컨텐츠 구현하기

사이트의 Footer에 위치한 특정 이미지에 키프렘을 이용해서 사이트에 적용한 예제입니다. 사이트가 정적이고 지루한듯해서 과하지 않은 애니메이션을 넣으려고 찾았으나,보통 HTML에 CSS로만 적용을 하는 예제가 많더라구요. 저는 React로 페이지를 작성하다보니, animation에 대한 이해가 적은 지금으로써는React로 코드를 변형해 오는게 쉽지 않았습니다. (지금 작성한 코드도 정리가 조금 들된 느낌이네요.) 우선, 제가 적용한 애니메이션은 3가지로…

더보기

[React] 이중검색을 통한 학생관리 – 사이드 프로젝트 개발일지

완성된 기능 실행해보기 1. Axios를 사용하여 HTTP요청하기 기본DB정보는 axios를 이용해서 OpenAPI에서 받아왔습니다. axios의 기본 사용방법은 검색을 통해 쉽게 얻을 수 있었으며, 저의 경우, 벨로퍼트님의 레퍼런스를 참조 했습니다.1. API 연동의 기본 2. Context API 를 사용한 전역 상태 관리 리덕스의 사용과 Context API 사용, 이 두가지를 놓고 고민을 많이 했습니다. 물론,…

더보기

Dynamic style – manipulating CSS with JavaScript – 자바스크립트 반응형 레이아웃 구현 방법 – How to dynamically create CSS class in JavaScript and apply?

최근 학습한 내용의 복습과 향후 참조할 레퍼런스 용도로 제작된 내용입니다. 내용에 실수가 있거나 오탈자가 발견되실 경우, 상단의 컨텍폼을 통해 연락주시면 감사하겠습니다. 위와 같은 컨텍폼을 작성했다고 가정합니다. (하단 폼소스-1) 사용자가 입력창에 값을 입력하고 버튼을 누르면, 하단에 해당 내용이 표시되는 간단한 예제입니다. 이때, 사용자가 빈값으로 버튼을 누르면, 입력창이 빨간색으로 변하게됩니다. 여기서, css…

더보기