전체 글143 2023-12-04 본캠프 43일차 / 62일차 TIL 2023-12-04 본캠프 43일차 / 62일차 TIL 주요 진행사항 - React 강의 듣기 React 강의 듣기 (throttling & debouncing) React에서 불필요한 state의 변경을 최소화 하기 위한 기법으로, 각 방식은 다음과 같은 특징이 있다. - Throttling : 빈도를 제어하는 방식 - Debouncing : 마지막 이벤트만 처리하는 기술 두가지 방식은 상황에 따라서 사용할 수 있으며, 이를 설명하기 위한 예시코드는 다음과 같다. Throttling const throttle = (delay) => { if (timerId) { return; } console.log(`API 요청 실행 : ${delay}ms 동안 추가요청은 안받습니다`); timerId = setTi.. 2023. 12. 6. 2023-12-01 본캠프 42일차 / 61일차 TIL 2023-12-01 본캠프 42일차 / 61일차 TIL 주요 진행사항 - 내일배움캠프 리액트 심화과정 개인과제 완성 내일배움캠프 개인과제 - 팬레터 페이지 리펙토링 1. 프로젝트 정보 - 주제 : 프로야구 10개 구단 응원페이지 (기존 Redux 버전 Redux-toolkit 리펙토링) - DEMO : https://baseball-team-page-v2.vercel.app/ 프로야구 Talk baseball-team-page-v2.vercel.app 2. 사용기술 - language : JavaScript - FrameWork : React - Library : redux-toolkit uuid styled-components axios json-server react-router-dom react-s.. 2023. 12. 4. 2023-11-30 본 캠프 41일차 / 60일차 TIL 2023-11-30 본 캠프 41일차 / 60일차 TIL 주요 진행사항 - 내일배움캠프 리액트 심화과정 개인과제 수행 개인과제 진행사항 1. 현재 진행도 - json-server와 redux-thunk 이용한 게시물 CRUD 구현 - 개인 프로필 업데이트 2. 어려웠던 점 & 해결한 부분 - 로그인 시 프로필 이미지가 없을 때 기본이미지 등록 최초 회원가입을 할 때 프로필 이미지를 등록할 수 없는 구조이다. 따라서 내정보의 avatar 데이터를 이미지로 보여줄 때 페이지에서 default로 보여줄 수는 있지만, 회원 정보에 등록된 avatar 정보는 없는 것이다. 이 문제를 해결하기 위해 로그인 시 회원정보의 avatar 값이 없다면 profile update(patch)를 통해서 기본 이미지를 업데이트.. 2023. 12. 1. 2023-11-29 본 캠프 40일차 / 59일차 TIL 2023-11-29 본 캠프 40일차 / 59일차 TIL 주요 진행사항 - 내일배움캠프 리액트 심화과정 개인과제 수행 - 클린코드 책 스터디 개인과제 진행사항 1. 과제 정보 과제 내용: 팬레터 프로젝트를 redux toolkit과 axios 등을 통해서 리펙토링 과제 기간 : 11/29 ~ 12/4 2. 진행사항 1) 기존 코드 리펙토링 기존에 작성했던 코드를 보니 정말 마음에 들지 않았다. 제일 먼저 마음에 들지 않는 부분을 간단하게 리펙토링을 하였다. - themeprovider 개선 기존에 mainColor와 subColor 두가지로 되어있던 theme.js를 팀별 theme로 묶이도록 리펙토링하였다. 좌측코드의 문제점은 각 css 요소 별로 따로 객체로 묶어야한다는 점이다. 현재 나의 프로젝트는.. 2023. 11. 30. 2023-11-28 본 캠프 39일차 / 58일차 TIL 2023-11-28 본 캠프 39일차 / 58일차 TIL 주요 진행사항 - 내일배움캠프 리액트 심화과정 강의 수강 강의 내용 정리 1. 리덕스 toolkit 리덕스 toolkit은 리덕스의 어려운 세팅들을 더욱 효율적이고 쉽게 개선한 라이브러리이다. 즉, 리덕스를 개선한 것이기에 오리지날 리덕스와 같은 개념을 가지고 있다. 설치는 다음과 같다 npm install @reduxjs/toolkit / yarn add @reduxjs/toolkit 사용법 기존 리덕스와 구분되는 부분은 크게 두가지 부분으로 나뉜다 1. config 기존 리덕스는 combineReducers, createStore 두가지 메서드를 통해서 store를 생성했다. 리덕스 toolkit은 이 두가지 메서드를 하나의 메서드로 통합시켜 .. 2023. 11. 30. 2023-11-24 본 캠프 37일차 / 56일차 TIL 2023-11-24 본 캠프 37일차 / 56일차 TIL 주요 진행사항 - 팀프로젝트 진행 이전 글과 이어서 google Authentication 소셜로그인 활성화 방법을 정리하고자 한다. google Authentication 소셜로그인 기본적으로 코드상에서 OAuth를 활성화 시키는 코드는 공통적인 모습을 보인다. import {initializeApp} from 'firebase/app' import { getAuth, FacebookAuthProvider, GithubAuthProvider, GoogleAuthProvider, signInWithPopup, } from 'firebase/auth' const firebaseConfig = { // config } const app = initia.. 2023. 11. 27. 이전 1 ··· 4 5 6 7 8 9 10 ··· 24 다음
