프론트엔드로 가는 길/portfolio 제작 여정기 👩🏻💻16 07. 자살예방웹사이트 - Received `true` for a non-boolean attribute `--`. 문제 : boolean 형태가 아닌 문자열 형태로 값을 전달해라 export const HighlightText = styled.span` font-size: 1.3rem; font-weight: 600; text-decoration: ${(props) => (props.$showunderline ? "underline" : "none")}; cursor: pointer; `; 파일 첨부 Why? 불리언(Boolean) 타입이 아닌 속성(attribute)에 true 값이 전달되었을 때 발생하는 오류를 나타냅니다. 이런 종류의 오류는 주로 데이터 형식이나 속성의 예상된 형식과 일치하지 않을 때 발생합니다. 실제 DOM 엘리먼트에 전달하기 전에, styled-components 내부에서 비표준 속성을 자동.. 2023. 9. 9. 05. 자살예방웹사이트 - 로그인 문제 문제 상황: 액세스 토큰은 저장 및 삭제에는 문제가 없지만, 로그인 후 로그아웃을 하더라도 로그인 텍스트가 즉시 변경되지 않는다는 문제가 발생했다. 로그인 기능을 구현하기 위해 액세스 토큰을 변수에 저장하는 방식을 선택했다. 이렇게 토큰을 저장하고 사용하려고 했지만, 실제로 이 방식은 내부적으로 클로저를 사용하는 것과 같다는 것을 깨달았다. 저것이 문제였다. 데이터 내용이 바뀌어도 업데이트를 감지를 하지못한다. 즉, 상태를 직접 관리하는 방식은 컴포넌트 간의 상태 공유를 어렵게 만들고, 상태 업데이트를 추적하고 디버깅하기 어렵다. 그래서 리덕스를 사용했다. 리덕스를 사용하면 상태 업데이트와 상태 관리를 예측 가능하게 만들어준다. 또한 컴포넌트 간의 상태 공유를 용이하게 하며, 상태 변경 사항을 추적하고 .. 2023. 9. 4. 04. 자살예방웹사이트 - Authentication로 로그인 제작 로그인 제공 1) Authentication -> 빌드 -> 로그인 제공업체 2) 로그인 제공업체의 이메일/비밀번호 설정 자 그럼 이제 코드를 짜봅시다 1. 기본 설정 1) 로그인 기능을 위한 라이브러리 import 2. 회원가입 import { createUserWithEmailAndPassword, getAuth } from "firebase/auth"; import { getFirestore, doc, setDoc } from "firebase/firestore"; import React, { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import styled from "styled-components.. 2023. 9. 1. 01. 자살예방웹사이트 - Firebase로 hosting하기 1. 프로젝트 추가 1) 프로젝트 이름 설정 2) 애널리틱스 사용 설정 3) 프로젝트 생성 2. 앱추가 1) 웹 앱에 Firebase 추가 2) Firebase SDK 추가 - 자신의 프로젝트에 SDK설치 - SDK를 사용 3. Hosting 1) firebase 호스팅 사이트에 연결 2) firebase CLI 설치 npm install -g firebase-tools 3) 프로젝트 초기화 - Google에 로그인 firebase login - 프로젝트 시작 firebase init 여기서 나는 public이 아닌 build로 작성 4) firebase 호스팅 배포 firebase deploy 4. 문제 *평생 여기서 넘어가지 않음* firebase deploy하기전에 npm build를 해주니 내 소.. 2023. 8. 20. 이전 1 2 3 4 다음
