본문 바로가기

React128

React(71) 마우스 이벤트로 호버시 애니메이션 넣기 메뉴 영역에 마우스 호버시 메시지 박스가 나타나는 기능을 만들어 보려고 한다. 단, css 호버기능을 사용하지 않고, MouseEnter / MouseLeave 이벤트를 사용하여 호버 기능을 구현하였고, Transition / Animation 속성을 이용하여 애니메이션 기능을 구현하였다. 자 그럼 만들러 가보자. 결과화면 미리보기 메뉴 영역에 마우스 오버시 애니메이션과 함께 호버메시지가 등장한다. React(71) 마우스 이벤트로 호버시 이동 애니메이션 넣기 처음에 useState 로 호버의 상태를 알려줄 변수를 선언해준다. const [hover, setHover] = useState(''); 위에서 선언한 변수(hover) 을 가지고 마우스 이벤트를 걸어주자 이때 호버메시지는 변수(hover)의 값.. 2022. 5. 22.
React(70) react-date-range 캘린더 라이브러리 사용하기 유저가 캘린더에서 원하는 날짜를 선택하면 input 창에 자동으로 입력받는 기능을 구현해보려고 한다. 그래서 react-date-range 라는 캘린더 라이브러리를 사용하여 특정 날짜 값을 받는 기능을 구현하여 보았다. ** 설치 및 기본적인 셋업도 간단하다. (공식문서를 참고하세요) react-date-range hypeserver.github.io React(70) react-date-range 캘린더 라이브러리 사용하기 구현에 필요한 3가지 라이브러리를 사용하였다. 얘네들 임포트해주자 캘린더 ui 를 위해 react-date-rang 한국어 기능을 위해 date-fns 날짜 포맷 변환을 위해 moment import { Calendar } from 'react-date-range'; // 얘가 캘린.. 2022. 5. 18.
React(69) TypeScript - 객체 속 객체의 반복문 사용하기 본 포스팅에서는 객체 반복문 사용법을 알아보고, 반복문에서 객체의 키를 매핑할 때 뜨는 아래의 타입스크립트 에러를 살펴볼 것이다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React(69) TypeScript - 객체 안 객체 반복문 사용하기 array 는 반복문을 많이 써봤는데, 객체를 돌려보는 건 처음이다. 특히 객체 안의 객체는 처음이다. 막상 한번 훓고 지나갔던 문법들이 동창회한 느낌이었다. object.keys() 로 준비하기 객체를 배열렌더링을 위해 막연히 구글링하던 도중, 아주 유용한 녀석을 찾았다. 이녀석은 key 값만 쏙 빼서 배열화 시키는 objec.. 2022. 5. 15.
React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 react-cookie 의 활용에 대한 세번째 포스팅이다. 이를 통해 쿠키에 대한 지식과 여러 기능을 구현해보는 좋은 기회가 되었던 것 같다 :) 로그인 / 로그아웃 기능은 모든 웹에서 기초적인 필수기능이라고 생각한다. 그래서 로그아웃 기능은 어려울 줄 알았는데, 프론트에서의 처리는 예상보다 간단....(?) 했다. 그럼 로그아웃을 기능을 구현하러 가보자 결과화면 미리보기 딱히 미리보기라고 할 것도 없지만 어쨋든 이 버튼을 클릭하면 로그아웃이 될 것이다. React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 쿠키 값을 삭제 후, 로그인 페이지로 되돌아가는 로그아웃 버튼을 구현해보았다. 보통은 url을 통해 로그아웃 페이지만 이동하면 거기서 쿠키를 지워주게 되고 메인페이지로 리다이렉트.. 2022. 5. 8.
React - package.json 과 package-lock.json 이란 Updated 08/02/2022 오늘은 내부 라이브러리를 업데이트할 일이 있어, package.json 에서 버전을 올려주고 commit 하였다. build 하는데 자꾸 에러가 나는 것이었다. 알고보니 package-lock.json 도 같이 commit 해줘야 한다는 것을 알았다. package.json 은 프로젝트를 위해 사용되는 npm 프로그램(모듈)들의 버전 관리을 위한 세팅파일 정도로 알고 있었다. (팀원들과 동일한 환경에서 다같이 작업하려면 버전이 모두 똑같아야 하기 때문이다. a.k.a 의존성 ) 또한 요 파일은 한번 세팅 하면 딱히 건드릴 일이 없었기 때문에, 큰 관심을 두지 않았던 것 같다. 이런 일을 겪고 나니 package.json 이랑 package-lock.json 의 정체가 무.. 2022. 5. 3.
React(67) react-cookie 로 저장된 쿠키값 가져오기 웹 사이트 상단에 얇은 띠배너가 있다. 그로인해 레이아웃의 height 가 영향을 받았다. 띠배너를 삭제했을 때 이미 저장된 쿠키값을 가져와서 height 를 동적으로 주려고 한다. 자, 서론은 여기까지 하고 react-cookie 를 사용하여 쿠키값을 불러와보자 React(67) react-cookie 로 저장된 쿠키값 가져오기 Banner.tsx 배너가 들어있는 배너 컴포넌트에서는 쿠키 키가 선언되어 [배너 닫기] 버튼을 누르면 'hiddenBanner' 라는 쿠키값이 저장된다. (쿠키값을 저장하는 과정은 생략하겠다.) const COOKIE_KEY = 'hiddenBanner'; . . . // [배너 닫기] 버튼을 클릭시 위의 쿠키키가 추가됨 ** hoxy 쿠키값 세팅하는 과정이 궁금하시다면? (.. 2022. 4. 17.
React(66) react-cookie 로 1회성 모달 만들기 가끔 웹사이트를 들어가면 1회성 이벤트 팝업이 뜰때가 있다. [ 하루동안 보지않기 / 앞으로 보지않기 ] 등의 옵션도 있다. 이런 팝업은 time range 를 쿠키값을 설정해서 손쉽게 만들 수 있다. 그럼 함께 만들어보자 React(66) 쿠키를 사용해 페이지 진입시 모달창 한 번만 뜨게 만들기 react-cookie 라이브러리를 사용해서, [모달창 닫기] 를 클릭하면 hideModal() 함수가 실행되며 10년 후에 expires 되는 쿠키 값을 주어 당분간(10년동안?) 보이지 않게 하자 일단 기본세팅해주자. 임포트도 해주고, 쿠키값을 담을 변수를 만들어주자. import { useCookies } from 'react-cookie'; // 리액트 쿠-키 임포트 해오고 import moment fr.. 2022. 4. 8.
React (65) 게시글 더보기 토글 버튼 만들기 게시글을 길게 작성한 경우 [더보기] 버튼을 누르면 나머지 글들이 보이는 기능을 만들어보자 결과화면 미리보기 아래 내용처럼 글을 일정 글자수 이상 길게 쓰게되면 [더보기] 버튼이 생기면서 게시글의 일부분만 보이게 된다. [더보기] 버튼을 누르면 전체 글이 보이고, [닫기] 버튼으로 다시 생략된 부분이 보여진다. React (65) 게시글 더보기 토글 버튼 만들기 토글기능은 useState를 통해 boolean 값으로 스위치처럼 사용할 것이고, 또한 글자수 제한 조건이 걸려있으므로 useRef 를 통해 글자수를 제한할 것이다. const [isShowMore, setIsShowMore] = useState(false); // 더보기 열고 닫는 스위치 const textLimit = useRef(170); .. 2022. 3. 21.
React(64) React-color 컬러피커 라이브러리 사용하기 원하는 색상을 고를 수 있는 컬러피커 라이브러리를 사용해보자 React-color 라는 라이브러리를 발견하였다. 커스텀이 가능하여 추후에도 사용성이 높을 것 같아서 선택을 하였다. 설치 및 셋업 방법은 아래의 공식문서를 참고해보자 React Color casesandberg.github.io 결과화면 미리보기 나의 경우 컬러 피커에서 컬러를 선택하면 input 창에서 선택한 Hex 값을 받아오는 기능을 구현하는 중이었다. 그 기능의 셋업을 위해 우선 컬러 파레트를 선택했을 때, 컬러피커 하단의 내장된 인풋으로 Hex 값이 텍스트로 들어오는 기초적인 셋업을 구현한 내용을 담고 있다. React(64) React-color 컬러피커 라이브러리 사용하기 구조는 간단하다. React-color 컬러피커는 여러 .. 2022. 3. 13.
반응형

티스토리툴바