2024/11 23

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

팀프로젝트 뉴스피드 _ 3

나 메인페이지 담당 :) 메인 페이지  + AI API 불러오는게 목표!목표 완성!부족한점 : 답이 보인다(머지하면서 뭔가 충돌생긴듯) / 자세히 보기를 누르면 디테일 페이지로 향해야 하지만 답이나옴../개그 작성하기 밑에 여백이 없...눼? 여백 주기 ^_^...내일 반드시 완성해야해 나.... PPT 만들고, 노션정리, 대본만들기 등등이 날 기다리구 있다굿..? 로그인 브랜치랑....... 머지하다가 말아먹었다.....ㅎ....ㅎ.......ㅎ아 관두고싶당...1. 프로젝트 소개React와 Supabase를 활용한 유머 공유 웹 애플리케이션 개발을 진행했습니다. 주요 기능으로는 유머 추천, 사용자 리뷰 카드, 그리고 Supabase와 연동된 데이터 관리 기능이 포함되었습니다. --- 2. 주요 개발 ..

프론트엔드 2024.11.20

뉴스피드 팀프 _ 2

# Styled-Components를 활용한 반응형 React 홈페이지이 프로젝트는 `styled-components`를 사용하여 디자인한 반응형 React 홈페이지입니다. 주제는 "아재슐랭"이라는 리뷰 플랫폼이며, 글로벌 스타일, Hero 섹션, 리뷰 카드 레이아웃, 그리고 푸터까지 모두 `styled-components`로 구현했습니다. 아래에서 주요 구성 요소와 코드를 살펴보겠습니다. 1. 글로벌 스타일 정의`createGlobalStyle`을 활용하여 프로젝트 전반에 적용될 글로벌 스타일을 정의했습니다. 기본 스타일 초기화와 폰트, 색상 등을 설정합니다. ```javascriptimport styled, { createGlobalStyle } from 'styled-components';const..

프론트엔드 2024.11.19

뉴스피드 팀프

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

REACT 2024.11.15

24.11.14

1. 초보 필수, 창 관리 단축키   - 명령 팔레트 열기 : `Ctrl + Shift + P`      - 파일명으로 열기 : `Ctrl + P`      - 터미널 열기/닫기 : `Ctrl + ``      - 사이드바 토글 : `Ctrl + B`      - 닫은 탭 다시 열기 : `Ctrl + Shift + T`   2. 코드 편집 가속화      - 코드를 위/아래로 이동 : `Alt + ↑ / ↓`      - 주석 처리 : `Ctrl + /`      - 라인 삭제 : `Ctrl + X`      - 한 줄 선택 : `Ctrl + L` (반복 가능) 3. 다중 커서 사용으로 동시 작업   - 동일 단어 연속 선택 : `Ctrl + D`      - 동일 단어 전체 선택 : `Ctrl + Sh..

DIARY 2024.11.14