티스토리

지공

검색하기

블로그 홈

지공

jee0.tistory.com/m

두 번 찾을 시간에 한 번 기록하고 내꺼 만들기

구독자: 0

방명록 방문하기

주요 글 목록

[styled-components/React] styled-components: it looks like an unknown prop "X" is being sent through to the DOM... 경고 메시지 해결하기 어떤 에러일까?styled.div, styled.header 등으로 만든 컴포넌트에React DOM 요소(HTML)에 원래 없는 prop (나의 경우, isLoaded) 이 전달됐다는 뜻이다.React는 HTML 태그에 정의되지 않은 속성(prop)을 넘기면 콘솔에 해당 경고를 띄운다(불필요한 속성 전달 = 성능/표준상 문제) 아래 경고 메시지랑 같은 의미이고, 해결하는 방법도 똑같다.다만, 이 메시지는 styled-components에서, 아래 메시지는 react에서 보내는 차이가 있다.이번에는 좀 더 쉬운 해결방법을 작성해본다.React does not recognize the X prop on a DOM element 경고 메시지 해결하기 [styled-components/React] React d.. 공감수 0 댓글수 0 2025. 3. 27.
[Study] '--save-dev' 왜, 언제 쓰는지 아시나요? 패키지 설치 때 아무 생각 없이 설치하던 이번에 타입스크립트 rtk를 설치하면서 --save-dev를 왜 쓰는지 궁금해졌다.--save-dev는 개발 의존성(development dependency) 으로 설치하겠다는 의미다. 사용하는 기준npm install some-package → 실행에 필요한 의존성앱이 동작할 때 꼭 필요한 패키지들 (예: react, redux, @reduxjs/toolkit 등)npm install --save-dev some-package → 개발할 때만 필요한 의존성빌드, 타입 검사, 테스트 등에만 필요한 것 (예: @types/react-redux, eslint, typescript 등)앱이 실행되기 위해 꼭 필요한 패키지react, react-dom, react-rou.. 공감수 0 댓글수 0 2025. 3. 25.
[Study] 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 SSR (Server-Side Rendering)서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 장점: 서버에서 미리 그려서 브라우저로 보내주기 때문에 초기 렌더링 속도가 빠릅니다. 단점: 이후 매 요청마다 서버에서 새로운 화면을 만들어 제공해주기 때문에 부하가 큽니다.CSR (Client-Side Rendering)서버에서 받은 데이터를 클라이언트인 브라우저에서 렌더링을 해주는 방식입니다. 장점: 사용자 행동에 따라 필요 부분만 다시 읽어들이기 때문에, 빠른 인터렉션을 기대할 수 있습니다. 단점: 초기 구동 속도가 느립니다. 공감수 0 댓글수 0 2025. 3. 24.
[Interview] 질문 모음(업데이트 중) 브라우저의 렌더링 과정CORS크로스 브라우징크로스 브라우징은 웹 표준에 따라 서로 다른 OS 나 플랫폼에 대응하는 것을 말합니다.브라우저별 렌더링 엔진이 다른 상황에서도 문제없이 동작하게하는 것을 목표로 합니다.서버 사이드 렌더링 vs 클라이언트 사이드 렌더링SSR (Server-Side Rendering)서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 장점: 서버에서 미리 그려서 브라우저로 보내주기 때문에 초기 렌더링 속도가 빠릅니다. 단점: 이후 매 요청마다 서버에서 새로운 화면을 만들어 제공해주기 때문에 부하가 큽니다.CSR (Client-Side Rendering)서버에서 받은 데이터를 클라이언트인 브라우저에서 렌더링을 해주는 방식입니다. 장점: 사.. 공감수 0 댓글수 0 2025. 3. 24.
[알고리즘] 공부(reduce, parseInt 대체) 1. reduce 함수의 기본 구조for문, forEach 그만 쓰고 3, 4번째 인자도 활용해보자.array.reduce(function(accumulator, currentValue, currentIndex, array) { // 계산 로직}, initialValue); accumulator: 초기값 또는 이전 콜백 호출의 결과값currentValue: 현재 처리 중인 배열 요소currentIndex: 현재 요소의 인덱스array: 메소드가 호출된 배열2. 단항 플러스 연산자 (+)문자열을 계산식으로 바꾸는 문제에서 parseInt가 반복되는게 싫어서 알아본 방법단항 플러스 연산자는 문자열을 숫자로 쉽게 변환할 수 있다.이 방법은 parseFloat과 유사하게 작동하여 실수도 처리할 수 있다.l.. 공감수 0 댓글수 0 2025. 3. 20.
[Vanilla-JS] 고양이 사진 검색 사이트😺: 상세 기능 구현 시작 전, 문제를 보고 기능 요구사항을 정리해보자 1. HTML, CSS더보기시맨틱 태그 사용반응형 2. 다크모드 더보기체크박스OS 반영3. 이미지 모달더보기[필수] 닫기 기능/api/cats/:id반응형[추가] fade in/out4. 검색더보기[필수] 검색 결과가 없을 때 예외사항 UI[필수] 랜덤 버튼 추가(/api/cats/random50)[필수] 로딩 UI 추가input el 수정최근 검색 키워드새로고침 시 마지막 검색 결과 유지lazy load스크롤 페이징각 아이템 클릭 이벤트를 Event Delegation 기법 사용하여 수정[추가] 마우스 오버 시 고양이 이름5. 랜덤 고양이 배너 섹션 추가 더보기/api/cats/random505개만 노출하며 좌, 우 슬라이드 버튼[선택] 트랜지션6... 공감수 1 댓글수 0 2025. 3. 13.
[Vanilla-JS] 고양이 사진 검색 사이트😺 프로그래머스 과제 테스트 2020 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 고양이 사진 검색 사이트 과제를 직접 풀어보았습니다.본 과제는 라이브러리나 프레임워크 없이 Vanilla JS(ES6)로만 구현하였으며, 기능 요구 사항의 풀이 과정을 기록하였습니다.저장소: https://github.com/petitesize/search-cat 본 포스팅에서는 과제 문제를 풀이하기 위해 추가적인 공부가 필요한 큰 개념 위주로 정리하였습니다. 세부 문제 풀이는 복기를 목적으로 다음 포스팅에 정리하기로 하고,시작! 1. 시맨틱한 태그 이용하기출처:[HTML] 과 의 차이 먼저 시맨틱한 태그를 이용하기 위해, header 태그에 다크모드와 검색창을 넣어주었다.그 외로는, section, article.. 공감수 0 댓글수 0 2025. 3. 10.
자주 사용하는 HTTP 상태 코드 별 에러 메시지 처리하기! 앞으로 개인 프로젝트에서 자주 쓸 것 같아 정리하는 상태 코드 별 에러 메시지를 블로그에 기록해본다!const getErrorMsg = (status) => { switch (status) { case 400: return "🚨 잘못된 요청입니다. 다시 확인해주세요."; case 401: return "🔒 인증이 필요합니다. 로그인 후 시도해주세요."; case 403: return "⛔ 접근이 거부되었습니다."; case 404: return "❌ 찾을 수 없는 데이터입니다."; case 500: return "🔥 서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요."; case 503: return "⚠️ .. 공감수 0 댓글수 0 2025. 3. 4.
[Redux] Redux Thunk를 왜 사용해야 할까 먼저!! Redux Toolkit의 createAsyncThunk를 사용하면 상태 관리가 더 자동화되고 코드가 훨씬 간결해진다.하지만, Toolkit 없이 Thunk의 기본 개념을 먼 익히기 위해 사용해보았다. 1. Redux Thunk란?Redux는 기본적으로 동기적인 액션만 처리할 수 있다. 하지만 네트워크 요청처럼 비동기 로직이 필요한 경우, redux-thunk를 사용하면 비동기 작업을 액션 내부에서 처리할 수 있다.✅ Redux에서 비동기 작업이 필요한 이유기본적으로 Redux는 객체를 반환하는 순수 함수 기반의 상태 관리 시스템이다.const fetchProducts = () => { const res = fetch("https://fakestoreapi.com/products"); // 비.. 공감수 0 댓글수 0 2025. 2. 17.
왜 React 최신 버전에서는 import React가 필요 없을까? 📌 과거에는 import React가 필수였다React를 공부하다 보면 예전 강의나 코드에서 import React from "react"; 구문을 흔히 볼 수 있다. 이는 기존 React 버전에서는 JSX 문법을 사용할 때 React가 필요했기 때문이다.JSX(JavaScript XML)는 JavaScript 안에서 HTML과 유사한 문법을 사용할 수 있도록 해주지만, 실제로는 React.createElement를 호출하는 코드로 변환된다. 예를 들어,const element = Hello, world!;위 코드는 Babel을 통해 다음과 같이 변환되는 것이다.const element = React.createElement("h1", null, "Hello, world!");이 과정에서 React.c.. 공감수 1 댓글수 0 2025. 2. 13.
[React-redux] ToDo List 로컬스토리지로 관리하기 노마드코더 react-redux 강의 챌린지 중 하나인 state를 로컬스토리지로 관리하기강의: https://nomadcoders.co/redux-for-beginners 초보자를 위한 리덕스 101 – 노마드 코더 Nomad CodersVanilla JS, Redux, Reactnomadcoders.co 먼저 기존 코드 중 store.js의 일부이다.여길 고쳐서 state를 localStorage로 관리하여 새로고침해도 state가 초기화되지 않도록 바꿔보자!redux-persist를 사용해도 되는데, 기존 프로젝트에서 recoil-persist를 사용한 적이 있고 직접 코드를 짜보는 김에 사용하지 않았다const reducer = (state = [], action) => { switch (a.. 공감수 0 댓글수 0 2025. 2. 5.
[Study] CORS 1. CORS란,Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고도 부릅니다. CORS는 SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방법입니다. 여기서 SOP란, Same Origin Policy의 약자로 동일 출처 정책을 의미합니다. SOP는 현재 출처와 동일한 출처(Origin)의 리소스만 접근할 수 있도록 하는 정책입니다. 출처(Origin)은 Protocol + Host(Domain) + Port로 구성되며 모두 같은 경우가 동일 출처가 됩니다.이 세 가지 중 하나라도 다르면 다른 출처(Origin)으로 간주되어 CORS 에러가 발생합니다. 애플리케이션의 요구 사항이 복잡해지면서, 다른 도메인의 리소스를 활용하는 경우가 많아졌기 때문.. 공감수 0 댓글수 0 2025. 1. 10.
sort를 사용한 특수 조건 우선 정렬 sort 사용법 관련해서 공부가 필요해서 정리 목표: Post의 특정 조건(예: 북마크)을 가장 우선적으로 비교하고, 그 후 시간 비교(최신순)를 수행한다. 북마크가 최우선 정렬되어야 하며, 북마크끼리도 시간순 정렬이 되어야한다. Q1: new Date에서 getTime()을 해야하는 이유?A1: new Date는 Date 객체로만 바꿔줄 뿐이고 비교는 불가. getTime()을 사용하면 날짜를 숫자 값으로 변환하여, 두 날짜의 차이를 정확하게 비교할 수 있다.type Post = { id: number; title: string; upload_date: string; // 날짜는 ISO 8601 형식의 문자열 bookmark: boolean; // 북마크 여부};// 예제 데이터const p.. 공감수 0 댓글수 0 2025. 1. 3.
[Study] 웹 브라우저 동작 원리 브라우저의 기본 동작 원리사용자가 URL을 통해 1. 웹 페이지에 접속하면, 브라우저는 2. DNS(Domain Name System) 서버를 통해 도메인 이름을 IP 주소를 변환한다. 이 IP 주소를 통해 3. 서버와 연결한다. 브라우저는 설정된 연결을 통해 웹 페이지의 4. HTML 문서 요청하고, 이를 받아온다.그러면 렌더링 엔진은 HTML과 CSS, JavaScript를 파싱(Parsing)하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 한다. HTML, CSS, JavaScript의 브라우저에서의 렌더링 원리1. HTML 파싱 및 DOM(Document Object Model) 생성파싱은 문서의 텍스트를 분석하여 의미 있는 구조로 변환하는 과정이다.브라우저는 HTML의 문자열들을 파싱하여 파.. 공감수 1 댓글수 1 2024. 12. 20.
[React] dangerouslySetInnerHTML: DOM에서 innerHTML 사용하기 아래와 같이 태그가 포함된 문자열 배열을 HTML로 렌더링하면 태그가 그대로 출력된다.details: [ "Recoil 사용하여 전역 상태 관리", "AWS S3 Bucket을 이용한 이미지 URL 생성 및 업로드", "Vite 기반 ESLint와 TypeScript를 적용한 개발 환경 구성"] 이처럼 React는 기본적으로 HTML 태그를 포함한 문자열을 일반 텍스트로 처리한다.따라서 같은 태그가 포함된 문자열을 그대로 전달하면 HTML로 해석되지 않고 단순한 텍스트로 렌더링된다.이를 해결하기 위해 React에서 HTML로 렌더링하도록 명시적으로 지시하는 방법이 dangerouslySetInnerHTML이다. __html: HTML 문자열을 지정하는 속성. 따라서 여기에 문자열을 넣어주면 된.. 공감수 0 댓글수 0 2024. 12. 10.
[React] Lenis로 부드러운 스크롤 효과 추가하기 1. Lenis?일반적인 스크롤 이벤트의 딱딱한 움직임 대신, 부드럽게 감속하거나 가속되는 애니메이션 효과를 추가할 수 있는 라이브러리아래 링크에 사용하는 방법이 기재되어 있다.https://github.com/darkroomengineering/lenis GitHub - darkroomengineering/lenis: How smooth scroll should beHow smooth scroll should be. Contribute to darkroomengineering/lenis development by creating an account on GitHub.github.com 2. 사용하기Git에 기재된 코드에 Lenis 인스턴스를 생성하여 감속 효과를 정의해보았다.Typescript 사용 .. 공감수 0 댓글수 1 2024. 11. 28.
[React] react-copy-to-clipboard: 클립보드 복사 기능 구현하기 react-copy-to-clipboard는 React 에서 클립보드 복사 기능을 간단히 구현할 수 있는 라이브러리이다. 첨부된 사진처럼 이메일 주소를 복사하는 버튼을 구현해보자! 1. 패키지 설치하기npm install react-copy-to-clipboard 2. 구현하기 컴포넌트:text 속성에 복사할 데이터를 전달할 수 있다. onCopy 속성으로 복사 이벤트가 발생할 때 실행할 함수를 지정할 수 있다.구현할 내용!email 변수를 text 속성에 전달해서 이메일을 복사하게 해보자!onCopy에 복사 상태 변경 및 setTimeout 함수를 사용하여 버튼 텍스트를 2초간 Copied ! 로 변경해보자!import React, { useState } from "react";import { Copy.. 공감수 0 댓글수 0 2024. 11. 25.
[React] React Transition Group 사용하기 아래 화면은 필터 종류에 따라 filteredProjects 라는 상태에 프로젝트 배열을 저장하여 보여주고 있다.하지만 React에서는 상태 변화나 DOM 요소의 변화가 발생할 때, 애니메이션이나 transition 효과가 적용되지 않는다.따라서 기존처럼 transition만 적용한다면, 아래와 같이 opacitiy transition 효과가 적용되지 않을 것이다. 이를 위해 컴포넌트가 DOM에 마운팅되고 언마운팅되는 상황에 애니메이션을 적용할 수 있도록 도와주는 React에서 자체적으로 제공하는 라이브러리가 있는데, 그게 바로 react-transition-group 이다. React Transition Group은 다음과 같은 컴포넌트 생애주기를 직접 제어할 수 있는 class를 제공한다.fade-e.. 공감수 0 댓글수 0 2024. 11. 22.
[React] 스크롤에 따라 텍스트가 나타나는 효과 구현하기 스크롤에 따라 텍스트가 나타나는 효과 구현하기(Feat. getBoundingClientRect, useRef) 1. 화면에 보여줄 텍스트 라인을 보여줄 상태 생성하기[ "첫 번째 문장", "두 번째 문장", "세 번째 문장", "네 번째 문장", "다섯 번째 문장", ] - 각 문장들을 배열에 저장한다. // 스크롤 위치에서 보일 텍스트 index를 저장할 배열 const [visibleLines, setVisibleLines] = useState([]); - 현재 스크롤이 위치한 화면에서 보여줄 텍스트의 index를 저장할 number 빈 배열을 만들어 준다.- 예를 들어, 두 번째 문장 까지 보여준다면 [0, 1] 이 저장될 것이다. 2. u.. 공감수 0 댓글수 0 2024. 11. 6.
[React] 모바일에서는 메뉴가 버튼으로 바뀌는 반응형 헤더 만들어보기 여태 반응형 웹 사이트를 제대로 구현해보지 못한게 아쉬워서, 포트폴리오에서는 반응형 웹 사이트를 만들어 보려고 한다! 웹에서는 기본적으로 헤더 메뉴가, 모바일에서는 메뉴 버튼을 누르면 메뉴가 보이도록 하고 디자인에도 차별점을 줘봤다. 1. isNavVisible 상태를 생성하고, toggleNav 함수를 햄버거 메뉴의 onClick에 연결한다.const [isNavVisible, setIsNavVisible] = useState(false); const toggleNav = () => { setIsNavVisible(!isNavVisible); }; 2. 모바일의 햄버거 메뉴 컴포넌트 을 모바일에서만 보이도록 미디어 쿼리를 설정해줬다. - 햄버거 메뉴 컴포넌트인 NavMobile과, 모바일용 N.. 공감수 0 댓글수 0 2024. 11. 4.
styled-components+TS 에서 전역 스타일 변수 설정하기 1. 먼저 패키지를 설치한다// "styled-components" 설치npm i styled-components// "styled-components" 타입 정의 설치npm i -D @types/styled-components//"css reset" 설치npm i styled-reset 2. 아래와 같이 파일을 생성한다. 2-1. GlobalStyles.tscss reset 및 전역적으로 사용할 css를 설정해준다.import { createGlobalStyle } from "styled-components";import reset from "styled-reset"; // styled-reset 가져오기const GlobalStyles = createGlobalStyle` ${reset} // r.. 공감수 0 댓글수 0 2024. 9. 10.
[Vite+TS] alias 설정하기 1. vite.config.ts 파일을 수정하여 경로 별칭(alias)를 설정해주자!내가 통상적으로 쓰는 파일 구조로 alias를 설정아래와 같이 사용 시, './src/utils' 경로 사용 할 때 '@utils'로 사용할 수 있다export default defineConfig({ plugins: [react()], resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), "@assets": fileURLToPath(new URL("./src/assets", import.meta.url)), "@components": fileURLToPath( new URL("./src/com.. 공감수 0 댓글수 0 2024. 9. 6.
[styled-components/React] React does not recognize the X prop on a DOM element 경고 메시지 해결하기 어떤 에러일까? React does not recognize the X prop on a DOM element. styled-componets로 스타일링한 사용자 지정 속성을 DOM 요소로 전달할 때 발생하는 경고 메시지라고 한다. 위 styled-componets 경고문을 해석해보면 buttonSize라는 속성을 styled-components로 래핑된 DOM 요소에 전달되고 있지만, 해당 속성은 HTML 표준 속성이 아니기 때문에 브라우저 콘솔에 오류가 발생할 수 있다는 내용이다. 경고문에 따라 아래에 실제 경고가 발생하고 있다!해결 방법?이를 해결하기 위한 방법이 styled-components 공식 문서에 기재되어 있다.https://styled-components.com/docs/api#shou.. 공감수 0 댓글수 0 2024. 7. 31.
[React/TS] axios-mock-adapter 사용하여 PUT 요청 모킹하기 import MockAdapter from 'axios-mock-adapter';const axiosInstance = axios.create({ baseURL: '/api', // 기본 URL 설정 timeout: 5000, // 타임아웃 설정 (ms)});// PUT 요청 모킹// 1. 가짜 PUT mock 생성// - 업데이트할 객체 생성// - 위 객체로 res 반환 mock.onPut(`/hospitals/${formData._id}`).reply((config) => { // put 요청 중 data만 추출 const recordForm = config.data; // 업데이트된 정보의 객체를 만들어준다. 이 정보로 response를 보내줄 것임! c.. 공감수 0 댓글수 0 2024. 7. 23.
Vercel로 프론트엔드 프로젝트 배포해보기 Vercel은 프론트엔드 호스팅 플랫폼 백엔드는 Heroku, AWS EC2, Google Cloud Platform.. 등 백엔드 호스팅 플랫폼을 이용하여 배포한다.Vercel에서 Node.js + Express 자체 지원을 해주지도 않으므로 백엔드 호스팅의 메리트가 없다버셀 배포시 참고한 블로그버셀 배포 자체는 아주 간단함(빌드 전, 빌드 오류 확인!)API 연결이 되고, 배포가 잘 되는지가 관건배포 시, 오류가 났던 부분: 무언가 잘 안된다면 아래 리스트를 체크API KEY 등 환경 변수 설정 확인(.env): vercel 프로젝트 내에 설정되었는지 확인소셜 로그인 관련하여 추가 설정이 필요한 지 확인이미지 업로드 관련하여 추가 설정이 필요한지 확인: 읽기 및 쓰기 권한API KEY에 대한 HTTP.. 공감수 0 댓글수 0 2024. 6. 28.
mousedown와 click의 차이: 버블링 mousedown 이벤트는 버블링을 지원하지 않아, 상위 요소에서 공통 컴포넌트를 사용 시 클릭 이벤트를 감지할 수 없기 때문에, 버블링을 지원하는 click 이벤트를 사용합니다. (e.g. mousedown 사용 시, 카드 컴포넌트 내에서 ActionButton 컴포넌트를 자식 요소로 사용하는 경우에 카드 컴포넌트가 ActionButton 외부더라도 버블링이 되지 않기 때문에 부모 요소가 div 외부더라도 클릭 시 버튼 div가 닫히지 않는다.) ActionButton.tsx useEffect(() => { document.addEventListener('click', handleClickOutside); return () => { document.removeEventList.. 공감수 0 댓글수 0 2024. 6. 24.
React+TypeScript+Airbnb EsLint 설정하기 Airbnb는 공식적으로 TypeScript 지원을 하지 않음 → eslint-config-airbnb-typescript 사용If you are using React, use eslint-config-airbnb, or if you aren't using React, use eslint-config-airbnb-base. → React 사용 시, eslint-config-airbnb를 사용 1. ESLint, Prettier, TypeScript 설치:npm install eslint prettier typescript --save-dev 2. @typescript-eslint 플러그인 설치:npm install @typescript-eslint/eslint-plugin @typescript-.. 공감수 0 댓글수 0 2024. 6. 18.
AWS EC2 배포 해보기 엘리스 프로젝트 진행 시 배포했던 방식으로 셀프 배포 해보기!엔진엑스 설정에서 너무 많이 고생해서 기록용으로 남긴다.백엔드 cors 설정과 프론트엔드 api url을 바꾸는 것은 잊지 말자참고) 팀 노션 페이지, 엔진엑스 설정은 코치님 메시지 참고 1. EC2 인스턴스 생성리전은 서울로Ubuntu 서버 선택인스턴스 유형은 프리티어 사용 가능한 것으로 선택네트워크 설정 HTTP/HTTPS 트래픽 허용키 페어를 생성해서 저장다운로드 한 키 페어를 프로젝트 루트에 넣고, gitignore에 추가 2. 인스턴스 연결#터미널에서 .pem 파일이 존재하는 디렉토리로 이동cd [디렉토리]cd [디렉토리]#서버 접속 명령어#위에 첨부된 사진) 생성된 인스턴스마다 AWS EC2가 명령어 자동생성해준 것 복붙ssh -i.. 공감수 0 댓글수 1 2024. 6. 7.
[React+Vite/TS] firebase 실시간으로 데이터 업데이트 하기(onSnapshot) https://jee0.tistory.com/35 [React+Vite/TS] Firebase 쿼리와 패치1. 인터페이스 작성사진은 없을 수 있음2. useEffect를 사용하여 fetch 함수(쿼리)를 불러 올 것이다.firebase의 query 함수를 사용query(대상 컬렉션, 쿼리 조건 지정)대상 컬렉션 지정 시 firebase의 collectionjee0.tistory.com위에서는 onDocs 를 사용하여 데이터를 불러왔지만, 실시간으로 데이터를 화면에 반영시키고 싶다. 이럴 때 firebase의 onSnapshot 함수를 사용한다. 1. 한 번만 가져오는 onDocs와 달리, 쿼리에 리스너를 추가하는 onSnapshot 사용즉, 지정한 쿼리(여기에서는 jweetsQuery 라는 쿼리)에 대한.. 공감수 0 댓글수 0 2024. 5. 31.
[React+Vite/TS] Firebase 쿼리와 패치 1. 인터페이스 작성사진은 없을 수 있음2. useEffect를 사용하여 fetch 함수(쿼리)를 불러 올 것이다.firebase의 query 함수를 사용query(대상 컬렉션, 쿼리 조건 지정)대상 컬렉션 지정 시 firebase의 collection 함수 사용collection(firestore 인스턴스, 컬렉션 이름)생성 순으로 내림차순 하기 위해 firebase의 orederBy 함수를 사용3. 쿼리가 생성되었고, 이 쿼리를 사용하여 불러온 데이터를 저장하는 document를 가져올 것이다.firebase의 getDocs 함수를 사용getDocs(작성한 쿼리)이 함수는 쿼리의 결과인 QuerySnapshot를 반환한다.이 결과값으로 사진과 같이 여러 기능을 사용할 수 있다.이 결과값의 docs와 .. 공감수 0 댓글수 0 2024. 5. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.