'react' 태그의 글 목록

[React.js] react-cookie / 만료시간 설정하기

2023.10.21

관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데 백엔드 없이 로그인 기능을 구현해야하는 상황이었다. 하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면 새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다. 그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다. 나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다. 쿠키란 localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다. 기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다. 브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다. 설치 npm install reac..

Develop/React.js

[React] date picker 로 날짜 선택하기

2023.08.10

개발을 하다가 날짜를 선택하는 기능을 구현할 일이 생겼다. 어떤걸 쓸까 찾아보는데 react-datepicker 라는 게 있었다. 근데... 좀 못생겼다? 물론 커스텀을 할 수는 있지만 지금 당장은 커스텀 없이도 좀 더 예쁜걸 사용하고 싶었다. 그러다 mui x 라는 걸 찾았다. https://mui.com/x/react-date-pickers/date-picker/ React Date Picker component - MUI X The Date Picker component lets the user select a date. mui.com 대충 이런식으로 생겼다. 설치 npm install @mui/x-date-pickers // Install date library (if not already ins..

Develop/React.js

[React][오류] 클릭 이벤트 전파 막기

2023.05.17

문제 채팅 리스트들을 보여주고, 채팅을 삭제할 수 있는 기능을 구현 중이었다. 채팅 리스트를 클릭하면 채팅을 확인하러 상세페이지로 이동하고, 삭제 버튼을 누르면 채팅 기록이 삭제가 되어야한다. {chats.map((chat) => ( handleChatItemClick(chat.chatId)} className="border-2 border-t-gray-300 p-5 flex justify-between text-sm" > {/* 채팅 생성 시간 */} {formatDate(chat.created_date)} handleDeleteOneChat(chat.chatId)} className="px-4 py-2 overflow-hidden" > 삭제 ))} 근데 삭제 버튼을 눌렀을 때 삭제가 되긴하지만 동시에..

Develop/React.js

[React] Swiper로 이미지 슬라이드 구현 / 화살표 색변경

2023.03.06

작은 프로젝트를 개발하다가 사진 슬라이드를 구현해야할 일이 있어 Swiper 를 선택하게 되었다. https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 공식 문서에 들어가서 찬찬히 보면 된다. npm i swiper 일단 터미널에서 설치부터하고, 아래와 같이 사용하면 된다.(공식문서 예제다) // import Swiper core and required modules import { Navigation, Pagination, Scroll..

react

[React.js] react-cookie / 만료시간 설정하기

[React] date picker 로 날짜 선택하기

[React][오류] 클릭 이벤트 전파 막기

[React] Swiper로 이미지 슬라이드 구현 / 화살표 색변경

티스토리툴바

티스토리툴바