전체 글

리뷰를 작성하면 파이어스토어 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..

⭐️ JadenCase 문자열 변환 함수 function solution(s) { // 문자열 s를 모두 소문자로 변환합니다. s = s.toLowerCase(); // 문자열 s를 단어 단위로 쪼개어 배열로 만듭니다. const words = s.split(" "); // 배열의 각 요소를 순회하며, 각 요소의 첫 번째 문자를 대문자로 변경하고, 나머지 문자는 소문자로 변경합니다. const convertedWords = words.map((word) => { // 각 요소의 첫 번째 문자를 대문자로 변경합니다. const firstChar = word.substring(0, 1).toUpperCase(); // 나머지 문자는 소문자로 변경합니다. const restChars = word.slice(1..

🧐 map() 함수와 Number 함수를 사용한 배열 변환 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. Number는 내장 객체로, 숫자형으로 변환하는 함수입니다. // 예를 들어, 아래와 같은 문자열 배열이 있다고 가정 const strArr = ['1', '2', '3']; // 이 문자열 배열을 숫자형 배열로 변환하려면, map() 함수와 Number 함수를 사용할 수 있습니다. const numArr = strArr.map(Number); // [1, 2, 3] map() 함수는 배열의 각 요소를 순회하며, 각 요소를 Number() 함수로 변환하여 새로운 배열을 반환합니다. 이렇게 함으로써, 문자열로 이루어진 배열을 숫자로 ..

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