개발일지

supabase파일 시스템데이터베이스 모델링관계형 데이터베이스파일(file)엔터티(Entity)테이블(table)레코드(record)튜플(Tuple)행(row)키(key)유일값(identifier)기본키(Primary key), unique필드(field)어트리뷰트(attribute)컬럼(column) 등록 supabase storage에 버킷 생성 후 이미지를 담아줄 폴더 생성공식 문서를 참고하여 버킷이름, 폴더 경로, 파일 이름을 넣어 이미지 등록 로직 작성이미지 파일명은 email과 UUID로 생성하여 중복되지 않게 한다이미지 등록 성공 시 반환되는 data.path 변수에 담아준다 (path : 파일 등록 경로)글 등록 시 supabase 테이블에 들어갈 내용을 객체 형태로 만들어주고 이미지가 들..

supaBase Firebase처럼 백엔드 기능을 제공하는 플랫폼 Supabase와 Firebase 차이   데이터베이스PostgresSQL를 제공하며 SQL 쿼리를 사용하여 데이터를 조작 할 수 있다NoSQL Firestore를 기본으로 제공하며 문서 기반 데이터베이스이다인증 및 사용자 관리사용자 인증, OAuth, 소셜 로그인, JWT와 함께 사용자 정의 인증을 쉽게 구현할 수 있다사용자 인증, OAuth, 소셜 로그인 등 다양한 인증 기능을 제공한다실시간 데이터 동기화 PostgreSQL의 LISTEN/NOTIFY 기능을 활용하여 실시간 업데이트실시간 데이터베이스와 실시간 업데이트를 통해 실시간 데이터 동기화서버리스 기능Supabase Functions를 통해 서버리스 함수 제공, 클라우드 함수로 ..

설치 명령어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..