개발일지

Router MPA , SPA  CSR(Client Side Rendering) SSG(Static Site Generation) ISR(Incremental Static Regeneration) SSR (Server Side Rendering) Pages routerpage 폴더에 원하는 페이지의 파일을 만들어 라우팅 하는 것App routerapp 폴더 안에 폴더를 생성하고 page 파일을 만들어 라우팅 하는 것MPA ( Multi-Page Application )다중페이지 애플리케이션여러 독립적인 HTML페이지로 구성되어 있으며 서버 측 렌더링으로 사용자가 페이지를 요청할 때마다 전체 파일을 서버에서 다시 받아와야 하기 때문에 페이지 이동 및 렌더링 시 깜빡임 등이 있다 SPA ( Single P..

Next.js버셀에서 만든 React 프레임워크 정적사이트 생성과 같은 기능을 제공하여 SPA(Single Page Application)를 쉽게 구축할 수 있도록 한다동적 라우팅, 데이터 미리 가져오기, 코드 분할, 이미지 최적화 등을 지원한다 TypeScript를 포함한 다양한 언어와 함께 사용할 수 있다 CRA 설치 명령어npmyarnnpx create-react-app [프로젝트명]yarn create next-app [프로젝트명] 패키지 설치 명령어npmyarnnpm install next react react-domyarn add next react react-dom 프레임워크애플리케이션 개발을 위해 구조와, 규칙 등을 제공하는 도구모음(ex. ppt)코드의 흐름을 제어하는 것이 원래 개발자의..

React CRA와 TS 한 번에 설치하기Type과 Interface함수에서 TS 사용하기비동기 함수에서 TS 사용하기_1비동기 함수에서 TS 사용하기_2Generic (제네릭)useState에서 사용하기React CRA와 TS 한 번에 설치하기npmyarnnpx create-react-app my-first-ts-app --template typescriptyarn create react-app my-first-ts-app --template typescript  pretty type errorTypeScript 오류를 읽기 쉽게 만들어주는 VSCode 플러그인  Type과 Interface Typetype은 새로운 타입을 정의하는 데 사용된다새로운 타입을 만들거나 타입을 결합하거나 변환할 때 사용된다..

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 코드로 변환)컴파일러는 변환 과정에서 소스 코드의 구문과 구조를 검사해 문제가 없는지 확인하며 문제 발견 시 바로 에러 메시지를 출력해 주기 때문에 개발자가 런타임 오류를 방지하고 코드의 안정성을 높일 수 있다타입을 명시적으로 선언하지 않아도 코드를 분석하여 변수 및 함수의 타입을 추론할 수 있으며 코드를 더 간결하게 작성할 수 있도록 돕고, 타입 안정성을 유지할 수 있게 해 준다개발자가 타입을 명시적으로 선언할 수 있도록 타입 어노테이션을 지원한다, 타입을 명시함으로 가독성을 높이고, 코드의 의도를 명확히 전달할 ..

프로젝트 생성yarn create vite 프로젝트명 --template react-ts 프로젝트 실행yarn dev 계속 cra로만 프로젝트를 생성하다 vite를 사용해 보기로 했다확실히 cra보다 훨~~~씬 빠르니까 신기하기도 했지만 처음 쓰는 거다 보니 자료를 찾고 시도해 보는데 생각보다 오래 걸렸다  솔직히 제대로 설치한 건지 의문...  어쨌든 드디어 Typescript를 이용한 프로젝트 시작!

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를 통해 서버리스 함수 제공, 클라우드 함수로 ..