Project

🧐 배포시 일부 이미지가 들어오지 않는 문제 프로젝트를 하던 도중에 localhost 주소 에서는 잘 들어오더 이미지가 배포시에는 들어오지 않는 문제가 발생했다. background: url(/public/assets/SignInBg.png) no-repeat; 해결방법 : process.env.PUBLIC_URL 환경 변수 사용 background: url(${process.env.PUBLIC_URL}/assets/SignInBg.png) no-repeat; 프로덕션 환경에서는 애플리케이션의 경로가 변경될 수 있기 때문에, 정적 파일의 경로를 하드코딩하는 것은 좋지 않습니다. 이를 해결하기 위해 process.env.PUBLIC_URL을 사용하는 것입니다. process.env.PUBLIC_URL은 애..

🧐 파이어베이스로 좋아요 기능 구현 1. 찜을 누르는순간 likedby 필드 가 생기고 "내가 로그인한 uid : Boolean" 형식으로 추가 됩니다 . 🔽 깃헙으로 로그인한 내 uid 2. meetups collection에서 likedBy 필드 중 현재 사용자가 좋아요를 누른 Meetup을 검색 const likedMeetupsQuery = query( collection(db, 'meetups'), where('likedBy.' + currentUser.uid, '==', true) ); 3. getDocs 함수를 사용하여 쿼리의 결과를 가져옵니다. const likedMeetupsSnapshot = await getDocs(likedMeetupsQuery); 4. 가져온 데이터의 배열에서 각 문..

리뷰를 작성하면 파이어스토어 meetups collection 에 연결 Review page import { NewMeetupForm } from '@/components/NewMeetupForm/NewMeetupForm'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; function Review() { useDocumentTitle('여행 리뷰 작성'); function addMeetupHandler(enteredMeetupData) { console.log(enteredMeetupData); } return ; } export default Review; - NewMeetupForm component import { Button, For..

1. slick-carousel이란? slick-carousel은 반응형 웹 사이트에서 사용할 수 있는 jQuery 기반의 이미지 슬라이드 쇼 라이브러리입니다. 이 라이브러리를 사용하면 사용자 친화적인 화살표 버튼, 터치 제스처, 무한 루프 및 자동 재생과 같은 다양한 기능을 구현할 수 있습니다. slick-carousel the last carousel you'll ever need. Latest version: 1.8.1, last published: 6 years ago. Start using slick-carousel in your project by running `npm i slick-carousel`. There are 1101 other projects in the npm registry ..

📌 깃헙 로그인 진행 과정 1. github settings -> Developer settings로 이동합니다. 2. New Github App을 클릭하여 새로운 Github App을 만듭니다. 3. 파이어베이스에 Authentication에 깃허브를 추가해줍니다. 4. App설정을 진행합니다. 5. App설정을 완료 후 사용자 정보 가져와서 파이어베이스에 설정해주기 6. 설정을 완료하려면 승인 콜백 URL을 GitHub 앱 구성에 추가 7. 모든 구성 설정을 완료후 깃헙 로그인 코드 적용 import { useNavigate } from 'react-router-dom'; import githubLogo from '/public/assets/githubLogo.svg'; import { getAuth..

⭐️ 코드 스플리팅 각각의 페이지, 컴포넌트,라이브러리를 쪼개줌 ➡️ 500kb이하의 작은 청크파일로 유지하고있기 때문에 효과적으로 렌딩속도 개선! [ vite.config.ts ] import path from 'path'; import { defineConfig } from 'vite'; import svgr from 'vite-plugin-svgr'; import imageminSvgo from 'imagemin-svgo'; import imageminWebp from 'imagemin-webp'; import react from '@vitejs/plugin-react-swc'; import imageminMozjpeg from 'imagemin-mozjpeg'; import imageminPngQ..

⭐️ vite 이미지 최적화 [ 최적화 결과 ] [package.json] { "name": "react-project-lab5", "private": true, "version": "0.0.0", "description": "비트와 타입스크립트 등 리액트 프로젝트 개발에 필요한 환경을 직접 구성합니다.", "engines": { "node": "v19.0.0", "vscode": "1.76.0" }, "type": "module", "scripts": { "start": "npm run dev -- --open", "dev": "vite", "build": "tsc && vite build", "preview": "vite preview --port 3000" }, "dependencies": { "a..

📌 채팅 구현시 카카오로 로그인 된 정보값을 가져오지 못하는 문제 [카카오 로그인시] 채팅 프로필에 카카오 로그인시에 그냥 디폴트이미지만 불러오고 이름은 불러와지지않는 이슈가 발생했다. 🥹 [이메일로 회원가입시] 이메일로 회원가입시에는 마이페이지에서 변경한 이미지가 실시간으로 잘 들어오지만 카카오 로그인은 정보값을 가져오지 못했다. 알고보니 카카오 로그인시 firestore 의 users collection에 정보가 들어가지 않고있었던걸 확인할 수 있었다. 🧐 해결과정 export function ButtonKakao({ widthValue, maxWidthValue, heightValue, className, }: Props) { const buttonStyle = { width: widthValue,..