본문 바로가기

전체 글164

12. 자살예방웹사이트 - Objects are not valid as a React child 오류 오류 발생 Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead. 발생위치 const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (message.trim() !== "") { try { // 새로운 메시지를 Firestore에 추가 await addDoc(messagesRef, { text: message, createdAt: new Date(), nickname: userData.nickName.. 2023. 10. 11.
CSR과 SSR CSR vs SSR 클라이언트 사이드 렌더링과 서버사이드 렌더링 what? CSR 특징 - Angular 및 react와 같은 대부분의 웹 프레임워크가 기본적으로 지원 - SPA 단일페이지어플 - 상호작용 (ex-게임) - 양식, 채팅 애플리케이션과 같은 동적인 콘텐츠 - 기본적으로 웹 브라우저는 처음에 빈 html 파일을 로드 -> 로드되는 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링하는 역할함 동적으로 렌더링 한다? 웹 페이지가 사용자와 상호작용하거나 데이터가 변경될 때, 웹 애플리케이션에서 해당 변경사항을 즉시 반영하여 화면을 업데이트하는 것 단점 - 검색엔진 최적화x : 초기 HTML 문서에 페이지 내용이 포함되지 않아 검색 엔진이 페이지를 제대로 색인화하지 못하는.. 2023. 10. 9.
1. 로그인 기능 연결하기 import React, { useState } from "react"; type LoginSuccessMessage = "SUCCESS"; type LoginFailMessage = "FAIL"; interface LoginResponse { message: LoginSuccessMessage | LoginFailMessage; token: string; } interface UserInfo { name: string; } interface User { username: string; password: string; userInfo: UserInfo; } const users: User[] = [ { username: "blue", password: "1234", userInfo: { name: "bl.. 2023. 10. 8.
10. 자살예방웹사이트 - 속성오류 이 경고는 React가 인식하지 못하는 isOpen 속성(또는 prop)이 DOM 요소에 전달되었을 때 발생합니다. React는 커스텀 속성을 자동으로 인식하지 않으며, 컴포넌트에서 사용해야 합니다. const NavWrapper = styled.div` /* 스타일과 위치 설정은 필요에 따라 조절하세요. */ width: 80%; height: 100%; padding: 20px; position: fixed; top: 0; left: ${({ isOpen }) => (isOpen ? "0" : "-80%")}; background-color: ${({ theme }) => theme.color.mainWhite}; transition: left 0.3s ease-in-out; z-index: 1000.. 2023. 10. 4.

티스토리툴바