본문 바로가기

전체 글164

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.
렌더 트리 Q1. 브라우저에서 렌더 트리를 구축하는 과정은 어떻게 될까요? A.서버에서 받아온 html,css파일을 브라우저가 알기 쉬운 구조로 변환하고 각각 DOM과 CSSOM을 생성하여 결합한 형태가 렌더트리입니다 답변에 대한 평가 : 90점 평가 이유 : 렌더 트리가 서버에서 받아온 HTML, CSS 파일을 가지고 구축되는 것에 대해 정확하게 설명했습니다. 그러나, 조금 더 자세한 내용을 알면 좋을 것 같습니다. 예를 들어, 렌더 트리에는 어떤 요소들이 포함되나요? 그리고 렌더 트리가 생성되면 무엇을 해야 할까요? 검색 키워드 : Render tree, DOM, CSSOM, rendering process 꼬리질문 : 렌더 트리에는 어떤 요소들이 포함되나요? 그리고 렌더 트리가 생성되면 다음에 어떤 과정이 일.. 2023. 8. 26.

티스토리툴바