TypescriptJavascript 기반으로 정적 타입 문법을 추가한 프로그래밍 언어Typescript JavaScript 정적 타입의 컴파일 언어동적 타입의 인터프리터 언어변수의 타입을 명시적으로 선언해줘야한다변수의 타입을 실행 시간에 결정하기때문에 별도로 선언해 주지 않아도 된다 타입스크립트 첫날이라 아직 잘 모르겠지만 자바스크립트의 유연함으로 인해 생기는 오류 때문에(타입오류, 등) 동적 타입언어인 자바스크립트를 정적 타입인 자바처럼 사용하기 위해 타입스크립트를 쓰는 건가?라는 생각이 많이 든다 많이 낯설지 않아서 다행이야
Github_issue프로젝트의 작업, 개선 사항 및 버그를 추적하는 방법으로 사용되며, 프로젝트 기획, 새롭게 추가될 기능, 버그와 수정사항 모든 것을 이슈라고 할 수 있다. 모든 활동 내역에 대해서 이슈를 등록하고 등록한 이슈를 기반으로 작업을 진행할 수 있다. issue template 생성issue 작성Milestone 확인하는 방법Pull requests template 생성Pull requests 작성Reviewissue template 생성 프로젝트 Settings Features > set up templates Add templates select > Custom templates Preview and edit Issue: Custom issue template 옆에 연필모양으로 수정..
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으로 컴포넌트가 마운트 ..