본문 바로가기

프론트엔드로 가는 길121

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.
DOM 트리 렌더 트리 Q1. 브라우저에서 DOM 트리와 렌더 트리의 차이는 무엇인가요? A. DOM은 html 파일이 파싱되어 생성된 트리입니다. 렌더트리의 경우 DOM과 CSSOM이 결합된 트리를 칭하는 말입니다. 답변에 대한 평가 : 90점 평가 이유 : DOM과 렌더 트리에 대한 개념에 대해 명확하게 설명했습니다. 하지만 DOM과 CSSOM이 결합된 트리를 렌더 트리라고 하는 부분이 조금 애매합니다. 이에 대해 좀 더 자세히 알아보는 것이 좋을 것입니다. 검색 키워드 : Render tree, DOM, CSSOM, rendering process 2023. 8. 28.

티스토리툴바