제인의 블로그

1. Hydration Error이유:React의 Hydration 과정에서 서버와 클라이언트의 렌더링 결과가 일치하지 않을 때 발생.주요 원인:서버에서 생성된 HTML과 클라이언트에서 생성된 DOM이 다름.클라이언트에서 동적 데이터가 렌더링 결과를 변경.useEffect, useState와 같은 클라이언트 전용 로직이 서버와 클라이언트의 초기 결과를 다르게 만듦.해결 방안:조건부 렌더링에 주의:클라이언트 전용 코드(window, document)는 서버 렌더링에서 동작하지 않으므로 useEffect 안에서 처리.예:import { useEffect, useState } from "react";function ExampleComponent() { const [isClient, setIsClient] =..

아으으아으악 하라고 하는거 다 햇는데.... ㅠㅠㅠ 일단 1주차  import React, { useState } from 'react';import styled from 'styled-components';type Todo = {  id: string;  text: string;  completed: boolean;};const TodoApp = () => {  const [todos, setTodos] = useState([]);  const [inputValue, setInputValue] = useState('');  const addTodo = () => {    if (inputValue.trim() === '') return;    const newTodo: Todo = {      id: ..

오늘이 체크리스트 마지막날...나 진짜 아품...마이아품.. 지..진짜 아품다.....나름 열심히 하지만 남들보단 뒤쳐지는것같은게 더 많이 느껴지는 하루....ㅠ 그래도 화이팅!아 그리고 귀찮다..누워서 물먹는 내 모습 보는거같당 ㅎㅎㅎ...... 마지막 체크리스트 시작해보자구요.사실 요즘 노트정리 중이라과거내용 복기중....쓸게 없는게 이미 다 썻단말이죠..ㅎQ1. 로그인 후 받은 acessToken을 저장하고 관리하는 방법에 대해 작성해보세요.(단순히 useState가 아니고 어떤 방법들이 더 있을지 생각해보시면 좋겠습니다.) A :로그인 후 accessToken을 저장하고 관리하는 다양한 방법accessToken은 사용자 인증 및 API 요청 시 중요한 역할을 하며, 이를 안전하고 효율적으로 관리하..

자 오늘도 코드 체크리스트 분석해보기짧게 쓰는 이유는 앉질 못해서 누워서 배위에서 써야하기때문....  Q1. axios를 사용하여 회원가입과 로그인 요청을 보내는 함수를 간단히 작성해보세요. A :회원가입 요청 함수import axios from 'axios';const signUp = async (email, password) => { try { const response = await axios.post('https://example.com/api/signup', { email, password, }); console.log('회원가입 성공:', response.data); alert('회원가입이 완료되었습니다.'); } catch (error) { ..

희힁 오늘은 체크리스트 정리 ★ 1일차Q1. JWT 인증 서버JWT 인증서버 (회원가입.로그인,프로필 수정만 제공하고 accessToken만 발급)를 이용해 회원가입,로그인,프로필 수정 기능을 구현하고, 로그인된 상태 관리를 할 수 있다.[설명]  1. 상태 관리const [user, setUser] = useState(null); const [accessToken, setAccessToken] = useState('');const [email, setEmail] = useState('');const [password, setPassword] = useState('');user: 현재 로그인된 사용자의 정보를 저장.accessToken: 로그인 성공 시 서버로부터 받은 인증 토큰.email과 passwo..

뼈에 구멍내고 연골 및 전 후방 십자인대 재건을 하다보니앉아있을수가없는 상태가 됬다.이상태면 팀프에서 민폐만 끼칠거같은느낌...일단 난 병원이고🥲마약성진통제가 없이는 누워만있는것도 불가능하고...혼자 화장실도 못가 그냥 혼자 할수잇는거? 물마시기..조갈나서 미칠거같다밥도 못먹고잇고 에휴에휴에휴여튼 그래서 최최최종으로 낫는데 3년걸린다고 하는데자신도없고 민폐끼치는게 세상에서 젤싫은 나는 자습으로 빠지기로햇다....진통제를 하도 맞아서 자꾸 졸리지만 그래도 그래도 그래도 최종 프로젝트는 같이 하고싶으니까 이악물고 재활해야게찡🤔오늘은 그냥저냥구냥 스탠다드반 강의 다시보면서 또또 정리노트 만드는중ㅎㅇㅌ..ㅎㅇㅌ..!

where is ..my code..🥲나머지는 어디갓을꽈....다햇는데..거의 다햇는데..?...ㅎ...ㅎ..ㅎㅎㅎ 다시해야지뭐 화이팅

1. 배경: 어떤 현상을 발견해서어느 날 사용자가 대규모 이벤트가 진행되는 웹사이트에 접속할 때, 페이지 로드 시간이 평소보다 급격히 느려지는 현상이 발생했습니다. 특히, API 요청 대기 시간이 길어지면서 사용자 경험이 크게 저하되었습니다.2. 발단: 이런 장애가 생길 수 있다는 것을 인지했고장애 분석 중, 특정 API 서버에서 처리 속도가 비정상적으로 느려지는 문제가 발견되었습니다. 트래픽 급증으로 인해 데이터베이스 쿼리 처리 시간이 증가하고, 일부 요청이 타임아웃되는 상황이 발생했습니다. 서버 로그를 확인한 결과, 특정 쿼리가 자주 호출되며 병목 현상이 발생하는 것을 확인했습니다.3. 전개: 장애를 대응, 해결하던 와중에우선 문제를 완화하기 위해 다음과 같은 긴급 대응을 수행했습니다:트래픽을 분산하..

1. 비동기 처리1.1 PromisePromise는 비동기 작업을 처리할 때 사용되는 JavaScript 객체입니다.상태: pending, fulfilled, rejected사용법:const promise = new Promise((resolve, reject) => { if (success) resolve('Success!'); else reject('Error!');});promise.then(result => console.log(result)).catch(error => console.error(error));1.2 Promise.all여러 Promise를 병렬로 처리하고 모두 완료될 때까지 기다립니다.const promise1 = Promise.resolve(10);const prom..

https://ajae-gag-final.vercel.app/ 아재슐랭ajae-gag-final.vercel.app배포한 사이트!이제 팀프 끝! 갠프 시작!