본문 바로가기

react

 (36)
input 자동 완성 기능 style 자동 변형 문제 사용자의 입력을 받는 input 항목을 입력하다보면, 특정 input의 경우 사용자가 기존에 입력했던 값을 기반으로 자동완성이 제공되는 경우가 있습니다. 이것은 보통 브라우저가 자동으로 해주는데, input의 name 속성이나 id 속성이 같을 경우 자동완성 기능이 제공됩니다. 그 때, 위와 같이 설정한 input의 style이 변하는 현상이 생길 수 있다. CSS를 활용하는 경우 :autofill 을 활용하여 문제를 해결할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill :autofill - CSS: Cascading Style Sheets | MDN The :autofill CSS pseudo-class matches when a..
세션 스토리지를 활용하여 이전페이지로 이동 구현하기 제가 오늘 구현할 기능은 로그인 했을 때, 또는 회원가입 후 자동로그인이 되었을 때 이전페이지로 이동하는 기능입니다. 저희 프로젝트의 페이지의 깊이가 얕지 않고, 카테고리가 나누어져 있어 로그인, 회원가입을 하였을 때 메인페이지로 이동하면 다시 원하는 컨텐츠의 페이지로 오는 것이 ux적으로 좋지 않다고 생각하였고, 특정 페이지로 이동시키기에는 카테고리가 있어 유저가 원하는 페이지를 특정하기가 쉽지 않았습니다. 그래서 유저가 로그인, 회원가입을 하기 전에 보고 있던 페이지로 이동시켜주는 기능이 필요했습니다. 특히, 유저가 헤더의 회원가입, 로그인을 눌러서 들어온 것이 아닌 다른 컨텐츠를 이용하다가 회원전용 컨텐츠를 이용하려고 하면 로그인 유도페이지로 이동되고 이를 통해 로그인을 하게 되었을 때 이 기능의 ..
firebase를 이용한 아이디 찾기, 비밀번호 재설정 구현하기 오늘은 firebase의 Authentication과 firestore Database를 활용하여 아이디 찾기, 비밀번호 재설정을 구현하는 방법에 대해 정리해보겠습니다. 우선 각각 구현 방향은 다음과 같습니다. 처음에는 본인인증 기능을 구현하여 본인인증을 바탕으로 아이디 찾기, 비밀번호 재설정을 구현하는 것이 목표였지만, 시간적인 한계로 다운 그레이드한 방법으로 구현했습니다. 아이디 찾기 이름, 연락처 입력받기 입력 안했을 시 오류메시지 이름, 연락처에 해당하는 데이터 불러오기 일치하는 데이터가 없을 때는 일치하는 데이터가 없습니다. 데이터가 있을 때는 해당하는 이름, 이메일 띄워주기 비밀번호 재설정 이름, 아이디, 연락처 입력받기 입력 안했을 시 오류메시지 이름, 아이디, 연락처에 해당하는 데이터 불러..
React Query Key 관리 오늘은 useQuery를 통해 데이터를 관리하다가 발생한 문제와 그 원인이었던 React Query Key에 대해서 정리해보려고 합니다. 우선 발생한 문제에 대해 설명해 보겠습니다. 문제가 발생한 코드는 const fetchPosts = async () => { const postsCollection = query( collection(db, "posts"), where("nation", "==", nation), where("category", "==", category) ); const querySnapshot = await getDocs(postsCollection); const postsData = []; querySnapshot.forEach((doc) => { postsData.push({ ...
React-Slick을 이용한 슬라이드 구현하기 오늘은 react의 React-slick 라이브러리를 통해 슬라이드(캐러셀)을 구현하는 방법에 대해 정리해보겠습니다. 우선 제가 구현해야할 슬라이드는 메인페이지의 이미지 슬라이드, 상세페이지의 유저가 업로드한 이미지를 받아와 보여주는 슬라이드 이렇게 2개 입니다. 우선 메인페이지의 슬라이드는 좌우로 넘기는 화살표 버튼 제거 자동으로 일정 시간마다 슬라이드가 넘어가도록 구현 현재 이미지 위치와 원하는 이미지로 이동할 수 있는 dot 버튼 이렇게 3가지 조건이 필요했고, 상세페이지의 슬라이드는 아직 구체적인 디자인이 나오지 않아 기본적인 슬라이드로 구현했습니다. 이제 react-slick을 이용하여 슬라이드를 구현해보겠습니다. 1. React-slick 설치하기 npm i react-slick yarn ad..
google-maps/api, Places API를 통해 주소 검색 기능 구현하기 오늘은 google의 Places API와 google-maps/api 패키지를 활용하여 주소 검색 기능을 구현하는 방법에 대해 정리해보겠습니다. 우선 제가 목표로 한 구현은 장소명을 입력받는다. 장소명에 해당하는 주소 목록을 보여준다. 주소를 클릭한다, 선택한 주소와 주소에 해당하는 장소명을 보여준다. 주소와 장소명을 post에 추가한다. 이렇게 4단계 입니다. 우선 Places api를 활용하기 위해 구글 api key를 발급받는 방법은 Google Map API를 활용하여 지도 불러오기 (yoongeons.com) Google Map API를 활용하여 지도 불러오기 오늘은 Google Maps API를 활용하여 지도를 불러오는 방법과, Geocoding API를 통해 주소를 위도, 경도(위치정보)로..
firebase Storage를 활용한 이미지 업로드 하기 오늘은 firebase Storage를 활용하여 이미지를 업로드하고 해당 이미지 링크를 데이터베이스에 저장하는 방법에 대해서 정리해보겠습니다. 이 포스트에서는 firebase Storage 콘솔 설정에 대한 부분은 생략하고, 코드를 작성하는 부분에 대해서만 정리할 예정입니다. 우선 구현하려고 했던 이미지 업로드 방식은 한 개 이상의 이미지를 선택한다. 선택한 이미지 목록을 보여준다. 선택한 이미지 목록에 삭제 기능을 통해 목록에서 삭제를 가능하게 한다. 파일을 업로드하고 다운로드 url을 받는다. 다운로드 url을 해당 post의 database에 넣는다. 위의 5개의 과정입니다. 우선 기능을 구현하기 전에 Firestore SDK를 추가해야 합니다. import { initializeApp } from..
Jotai로 post 상태 관리하기 기본적으로 Jotai 는 React 내의 state, useState 와 유사한 모양이기 때문에 redux, redux-toolkit에 비해 쉽게 입문할 수 있습니다. 전역 관리 atom을 생성하고, 생성된 atom을 컴포넌트 내에 불러와 사용하는 형태입니다. 1. 패키지설치 우선 jotai 패키지를 설치합니다. yarn add jotai 2. atom 생성 그리고 atom을 생성하고, 괄호 안에 초기값을 넣습니다. import { atom } from "jotai"; export const postAtom = atom({ nation: "", category: "", placeName: "", placeLocation: "", postContent: "", date: null, author: null,..

티스토리툴바