개발일지

설치 명령어npm install @reduxjs/toolkit ReduxToolkitRedux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식 제공하는 개발도구이다.Redux Toolkit은 Redux의 문제점을 보완하기 위해 만들어졌다 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다 Redux 사용 시 문제점구성의 복잡성많은 패키지 필요성(의존성)한 작업 시 많은 코드 양 Storeconst store = configureStore({ // 리듀서를 넣음 reducer: { counter, },});export default sto..

설치 명령어npm install redux npm install react-redux ReduxRedux는 전역 상태를 관리하는 컨테이너이다state를 전역 상태로 만들어 모든 컴포넌트에서 접근이 가능해지기 때문에 state의 유지 보수가 용이하다  Store중앙 데이터 관리소, Reducer를 하나로 묶어 관리하는 곳src폴더 내부에 config폴더를 만들고 configStore.js 파일을 생성한다combineReducers에 객체형태로 Reducer를 하나로 묶어 rootReducer에 담아준다store에 createStore로 Reducer를 모아 놓은 rootReducer를 담아준다 그럼 모든 Reducer는 store에 들어가게 된다Reducer의 묶음인 store를 외부에서 사용할 수 있게 ..

throttling & debouncing_1에 화면 렌더링을 위해 state를 넣으면 setTimeout 이벤트가 2초 뒤 실행이 아닌 계속 실행된다 이것을 해결하기 위해 Lodash를 이용해야한다. lodash : _.debounce(함수, ms가 인자로 들어간다)*클로저 함수에 대한 이해가 필요하다input에 값을 입력하면 handleChange에서 handleSearchText 함수가 실행됨debounce 함수를 호출함 useCallback과 함수와 2000을 매개변수로 보냄debounce함수의 초기 timerId 값은 null로 설정...args 이전값(callback, delay)을 매개변수로받아 timerId값이 있으면 지워주고 timerId 값이 없으면 setTimeout함수를 실행(클로저..

Throttling짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것. 최초, 마지막 이벤트만 실행1. timerId의 초기값은 null 이다.2. 버튼 클릭 시 throttle함수 내부로 들어가 timerId값이 있으면 함수 종료3. 할당된 값이 없으면 setTimeout함수로 들어가 delay(버튼 클릭 시 인자로 전달되는 2초) 이후 내부 로직이 실행된다(추가요청 안 받아요 콘솔)4. 버튼을 여러 번 클릭해도 첫 이벤트 실행 시 바로 종료되어 버리기 때문에 클릭 종료 후 2초 뒤 로직이 실행된다(추가요청받아요 콘솔) let timerId = null; const throttle = (delay) => { ..

설치 명령어npm install json-server포트 변경npx json-server db.json --port 4000서버 접속http://localhost:4000/ axios와 json-server로 CRUD 만들기.envGetPostDeletePatchInterceptor.env외부로 알려지면 안 되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들을 보안이나 유지 보수를 용이하게 하기 위해 환경변수로 만들어 변수를 꺼내와 사용하는 것서버 주소 값을 REACT_APP_SERVER_URL 변수에 담아 프로젝트 전반에서 변수명으로 주소에 모두 접근이 가능하다.env 파일REACT_APP_SERVER_URL=http://localhost:4000 GetuseEffect으로 컴포넌트가 마운트 ..

ReadMe프로젝트에 대한 간단 설명을 담은 문서 마크다운으로 작성한다 마크다운태그 등을 이용하여 문서나 데이터의 구조 등을 명기하는 언어의 한 가지로 텍스트 문서들을 작성할 때 자주 사용되며, 다른 마크업 언어들에 비해 문법이 쉽고 간단한 것이 특징이다. HTML 등의 서식 문서들로 쉽게 변환되기 때문에 README 파일이나 온라인 게시물 등에 사용된다. 장점1. 간결하다.2. 별도의 도구없이 작성가능하다.3. 다양한 형태로 변환이 가능하다.4. 텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.5. 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.6. 지원하는 프로그램과 플랫폼이 다양하다.단점1. 표준이 없다.2. 표준이 없기 때문에 도구에 따라서 변환방식이나 ..

필수 구현 기능로그인, 회원 가입Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해 보세요.아이디(이메일), 패스워드소셜 로그인 (구글, 깃헙)CRUDFirestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링을 구현해 보세요.CUD(등록, 수정, 삭제)가 일어날 때마다 R(조회)해서 자연스럽게 화면 변경을 해보세요.마이 페이지내 게시물 보기Authentication 에서 제공하는 uid를 이용해서 내 게시물들이 모일 수 있게 해 보세요.프로필 수정 기능Storage 에서 제공하는 api를 이용하여 이미지 업로드와 다운로드 url 을 받아서 이미지 핸들링을 해보세요.배포하기Vercel 이라는 호스팅플랫폼을 이용해 배포합니다.배포에 적용될 브랜치는..

Firebase 환경 설정npm 설치 명령어npm install firebase공식 문서https://firebase.google.com/docs/web/setup?hl=ko  1. 회원가입, 로그인 후 시작하기 클릭  2. 프로젝트 추가 클릭  3. 프로젝트에 맞는 이름 설정 4. 구글 애널리틱스 사용여부 확인 (뉴스피드 프로젝트의 경우, 체크 해제함)   5. [웹 앱에 Firebase 추가] → [앱 등록] 클릭 6. 아래 를 클릭하면 웹 앱을 만들 수 있다 (Firebase 호스팅은 체크하지 않음 ) 7. 이후 api인증키를 받아서 사용하면된다 (인증키 확인하는 방법)  8. Firebase 연결 확인 방법8 - 1. src 폴더에 firebase.js 파일을 만들고 초기 설정 만들기// Imp..

Firebase 구글이 제공하는 클라우드 기반의 백엔드 서비스를 제공한다데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등의 다양한 서비스를 제공한다  Firebase 사이트https://console.firebase.google.com/ Firebase 장점 다양한 기능을 제공하여 애플리케이션 개발을 간편화하여 빠르게 개발할 수 있다데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등 다양한 백엔드 서비스를 통합하여 제공한다. 이를 통해 개발자들은 서비스를 별도로 구축하거나 연동하는 데 드는 비용과 시간을 절약할 수 있다.실시간으로 데이터가 업데이트되는 애플리케이션에 적합한 기능을 제공한다. 이를 통해 개발자들은 데이터 업데이트에 대한 빠른 응답성과 실시간 데이터 동기화를 구현할 수 있다.다양한 ..

설치 명령어 npm install react-router-dom Router Hook 종류useNavigateuseParamsLinkuseLocation기타 사용 방법 1. Router.js 설정 import import { BrowserRouter, Route, Routes } from "react-router-dom"; 2. 연결 페이지 import Work는 Works의 하위 페이지이다.{} : id를 파라미터로 보내 조건에 맞는 페이지를 로딩할 것} /> path에 지정된 url  외 다른 경로를 입력했을 경우 홈 화면으로 보내준다replace가 없을 경우 ex.works/aaa 로 입력 할 경우 홈 화면으로 들어가는데 뒤로가기를 누르면 다시 잘못된 경로로 들어가 홈 화면을 반복하게된다replac..