boolean number string 배열 tuple enum readonly any unknown union 타입 명시해 주는 방법함수명 = (인자 : 인자 타입) : 리턴값 타입 => 실행 내용함수의 리턴값이 없는 경우 void로 넣어주면 된다const calculateArea = (radius: number): number => Math.PI * radius * radius;const radius = 5;const area = calculateArea(radius);console.log(`반지름이 ${radius}인 원의 넓이: ${area}`);boolean function isValidPassword(password: string): boolean { return password.lengt..
컴파일러(TypeScript Compiler 또는 tsc)프로그래밍 언어로 작성된 소스코드를 다른 프로그래밍 언어로 변환해 주는 도구이다 (TypeScript 코드를 => JavaScript 코드로 변환)컴파일러는 변환 과정에서 소스 코드의 구문과 구조를 검사해 문제가 없는지 확인하며 문제 발견 시 바로 에러 메시지를 출력해 주기 때문에 개발자가 런타임 오류를 방지하고 코드의 안정성을 높일 수 있다타입을 명시적으로 선언하지 않아도 코드를 분석하여 변수 및 함수의 타입을 추론할 수 있으며 코드를 더 간결하게 작성할 수 있도록 돕고, 타입 안정성을 유지할 수 있게 해 준다개발자가 타입을 명시적으로 선언할 수 있도록 타입 어노테이션을 지원한다, 타입을 명시함으로 가독성을 높이고, 코드의 의도를 명확히 전달할 ..
TypescriptJavascript 기반으로 정적 타입 문법을 추가한 프로그래밍 언어Typescript JavaScript 정적 타입의 컴파일 언어동적 타입의 인터프리터 언어변수의 타입을 명시적으로 선언해줘야한다변수의 타입을 실행 시간에 결정하기때문에 별도로 선언해 주지 않아도 된다 타입스크립트 첫날이라 아직 잘 모르겠지만 자바스크립트의 유연함으로 인해 생기는 오류 때문에(타입오류, 등) 동적 타입언어인 자바스크립트를 정적 타입인 자바처럼 사용하기 위해 타입스크립트를 쓰는 건가?라는 생각이 많이 든다 많이 낯설지 않아서 다행이야
[깃허브 Github] 이슈 생성, 작성 (Issue)
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함수를 실행(클로저 함수)..