본문 바로가기

전체 글75

react native에 kakao map 연동하기(feat. 현재 위치 띄우기 + 키워드 검색) 🗺️react native에 kakao map 연동하기(feat. 현재 위치 띄우기 + 키워드 검색)1. 아래 카카오 콘솔에 접속해 애플리케이션 추가하기https://developers.kakao.com/console/app2. 카카오맵 ON 해주기3. 앱 키에서 JS 키 저장해두기.env파일에 넣어줄거임!4. 필요 라이브러리 설치하기(웹뷰 & dotenv)전에 아래 명령어로 웹뷰 라이브러리를 설치하자.pnpm add react-native-webview 그리고 Expo가 기본적으로 .env 파일을 지원하지 않기 때문에, react-native-dotenv와 같은 패키지를 사용해야 한다...pnpm add react-native-dotenv 위 명령어 설치후 env파일에 아까 위에서 저장한 JS키를 넣.. 2025. 2. 10.
React Native에 React Query 적용하기 React Native에 React Query 적용하기React Query란?React Query는 서버 상태 관리 라이브러리로 아래와 같은 기능을 제공한다!데이터 페칭, 캐싱, 동기화, 업데이트 관리네트워크 요청 상태(로딩, 에러, 성공) 추적서버 데이터 캐싱 및 리패칭 최적화이번 프로젝트에서 회원가입 기능을 구현하면서, React Query를 도입했는데 연습용으로 사용해봤다. React Query는 서버와의 비동기 통신을 효율적으로 관리하고, 상태 관리가 복잡하지 않게 해주는 도구로 잘 알려져 있다. 기존에는 서버와의 비동기 통신을 처리하기 위해 fetch나 axios를 사용했었지만, React Query는 비동기 상태를 자동으로 관리해줘서 상태 변화에 따른 처리 로직을 더욱 깔끔하게 작성할 수 있었.. 2025. 2. 8.
React Native와 Expo로 간편하게 앱 개발하기 React Native와 Expo로 간편하게 앱 개발하기❓왜 ExpoReact Native를 사용해 모바일 앱을 개발할 때, Expo는 특히 개발 초기 단계에서 많은 장점을 제공하는 툴이다. 내 개발 환경은 Windows이고, 테스트용으로 아이폰을 사용해야 하는 상황이라, 별도의 복잡한 설정 없이 바로 프로젝트를 시작할 수 있는 Expo를 선택했다. Expo는 빠르게 앱을 실행하고 실시간으로 테스트할 수 있어 매우 유용하다. Expo Go 앱을 통해 모바일에서 바로 변화를 확인할 수 있기 때문에, 코드 작성 후 앱을 다시 빌드하거나 재시작하는 번거로운 과정을 크게 줄일 수 있다. 또한, Expo는 파일 기반 라우팅을 지원하는 점에서 Next.js의 App Router와 유사한 구조를 가지고 있어, 처음 .. 2025. 2. 4.
Next.js App Router + PWA + Firebase로 알림 구현하기 Next.js App Router + PWA + Firebase로 알림 구현하기다른 개발자 블로그 보면 푸시 알림 금방 금방 구현했다고 하던데, 나는 계속 오류가 나고, 도대체 왜 알림이 두 번 뜨는지(아직 해결 못 함 ㅎ), 왜 권한 요청이 제대로 안 되는지 도통 알 수가 없었다. 구글링 해보면 다들 쉽게 잘 하는 것 같은데, 나는 뭐가 그렇게 꼬였는지 한 번 해결하면 또 다른 문제가 터지고... 정말 힘들었다. Next.js App Router + PWA + Firebase를 조합해서 푸시 알림을 구현한 과정과 그동안 겪은 문제들, 해결 방법을 정리해보자..❓PWA란PWA(Progressive Web App)는 웹 애플리케이션을 네이티브 앱처럼 사용할 수 있게 해주는 기술이다. 기본적으로는 웹사이트지.. 2025. 1. 26.
페이지네이션 초간단 구현하기 (React) 📄리액트로 페이지네이션 초간단 구현하기1. 기본 설계페이지네이션은- 현재 페이지- 전체 페이지 수- 한 페이지에 표시할 개수가 필요하다!const [currentPage, setCurrentPage] = useState(1);const itemsPerPage = 4; 2. 데이터 필터링const totalPages = Math.ceil(filteredHabits.length / itemsPerPage);const displayedHabits = filteredHabits.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage,);한 페이지 당 4개가 보여야 하기때문에 slice를 해준다!!ex) currentPage가 1일 때, (1.. 2024. 12. 23.
Chart.js 라이브러리로 달성률 시각화 구현하기(feat. Doughnut 차트) 📊Chart.js 라이브러리로 달성률 시각화 구현하기(feat. Doughnut 차트)‼️구현하고자 하는 것전체 수행 날짜 대비 완료된 날짜의 비율을 계산하기Chart.js의 Doughnut 차트를 사용해 완료/미완료 비율을 시각적으로 표현하기전체 수행 날짜 대비 완료된 날짜의 비율을 계산하기HabitCard 컴포넌트 안에 자식인 HabitCardChart 컴포넌트를 넣어준다. const startDate = new Date(habit.startDate) const endDate = new Date(habit.endDate) // frequency에 해당하는 요일을 계산 const frequencySet = new Set(habit.frequency.map((day) => day.toLowerCa.. 2024. 12. 20.
리액트 캘린더와 Firebase로 CRD 구현하기 📆리액트 캘린더와 Firebase로 CRD 구현하기‼️구현하고자 하는 것1. 사용자가 새로운 루틴을 추가할 수 있는 모달 창 제공2. 사용자는 시작 날짜와 종료 날짜를 설정하고, 반복 주기 표시하기3. 사용자가 특정 날짜에 루틴을 완료했다고 표시하기4. react-calendar를 사용하여 날짜별로 루틴을 완료한 여부를 시각적으로 표시하기🔥데이터를 Firestore에 저장할 때 사용할 데이터 구조 정의하기habitName: 루틴 이름startDate: 시작 날짜endDate: 종료 날짜frequency: 루틴을 수행할 요일들type Habit = { id: string name: string startDate: string endDate: string frequency: string[] c.. 2024. 12. 16.
Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie) 🔥Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie)Next.js App Router에서 Layout을 활용해 메인페이지 하위에 공통 레이아웃을 적용해 AuthGuard를 적용해보자.메인페이지 하위 폴더 내에는 무조건 로그인을 해야 접속할 수 있게!!0. 폴더구조1. 로그인 시 토큰 저장로그인 시 Firebase에서 발급된 JWT 토큰을 쿠키에 저장해 인증 상태를 유지한다.npm install cookies-nextconst onSubmit = async (data: FormData) => { try { const userCredential = await signInWithEmailAndPassword( auth, d.. 2024. 12. 1.
[firebase 인증 오류] firebase: error (auth/invalid-credential). 🔥Firebase 인증 오류: "auth/invalid-credential" 문제 해결 방법로그인 오류에서 계속 default 로 설정한 오류 메세지만 나오는 이슈를 발견했다...case에 따라 오류메세지가 다르게 나와야하는데... error를 찍으면 "auth/wrong-password" 또는 "auth/user-not-found" 오류 대신 "auth/invalid-credential"만 나온다.. const onSubmit = async (data: FormData) => { try { await signInWithEmailAndPassword(auth, data.email, data.password) alert('로그인 성공!') router.push('/mai.. 2024. 11. 30.

티스토리툴바