REACT 16

으아 이놈의 next.js

아으으아으악 하라고 하는거 다 햇는데.... ㅠㅠㅠ 일단 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: ..

REACT 2024.12.11

REACT_PROJECT_1_TROBLE_SHOOTING

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

REACT 2024.11.25

리액트 심화주차 정리

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..

REACT 2024.11.22

뉴스피드 팀프 _ 최종

참고로 내일도 수정해야하므로 최최종까지 있을 예정 대략 6시간동안 올라간 깃 commit의 양...🥲 이것만 봐도 팀원들의 노고가 보인다 여기까지 구현완료😊 2일동안 왜 이러지 하고 고민햇던 코드가 네비게이션 안에 /ListDetailPage에서 /List로 수정하니까 되어버려딴..🫠 눈이 침침한가봐.... 아픈 팀장뫼시느라 초보팀장 뫼시느라 고생한 울 팀원들 러뷰...❤️간단하게 내일할내용?코드 merge 후 메인브랜치를 dev -> main 으로 변경ReadMe 작성Vercel로 배포하기PPT 완성🤭 발표자료도 완성♡ 뿌듯하다

REACT 2024.11.21

뉴스피드 팀프

1. 프로젝트프로젝트 명 : 아재슐랭소개한 줄 정리 : 아재개그를 평가하는 페이지포함할 내용:글 작성 및 수정 페이지담당 기능:새로운 글 작성기존 글 수정 (수정 시 input 필드에 데이터 채움)컴포넌트:Input 폼Submit/Save 버튼DB 연결: Create, Update 요청 처리.로그인/회원가입 및 홈 페이지담당 기능:회원가입: 사용자 데이터 저장로그인: 인증 처리홈 버튼: 로그인/회원가입 완료 후 홈으로 이동DB 연결: 사용자 테이블 연결.글 목록 페이지담당 기능:전체 글 목록 표시페이지/카테고리별 분류DB 연결: Read 요청으로 글 데이터 가져오기.글 디테일 페이지담당 기능:글 세부 내용 표시댓글 목록 표시댓글 작성, 수정, 삭제DB 연결: Read (글 내용, 댓글 데이터 가져오기),..

REACT 2024.11.15

24.11.12

onAddPokemon이 함수가 아니라는 오류가 발생. 이건 onAddPokemon 함수가 PokemonList 컴포넌트로 올바르게 전달되지 않았거나, 함수가 누락되었을 때 발생 가능.이 문제를 해결하기 위해 PokemonContext를 이용하여 addPokemon 함수를 전달하는 방식으로 수정하기. ```pokemonContext.jsx```import React, { createContext, useContext, useState } from 'react'; const PokemonContext = createContext(); export function PokemonProvider({ children }) {   const [selectedPokemon, setSelectedPokemon] = u..

REACT 2024.11.13