본문 바로가기

전체 글93

[react + typescript] typescript 를 하면서 지정하게 된 타입들 useRef useRef에 값과 같은 데이터가 아닌 input을 담을 때는 HTMLInputElement 타입을 지정해야한다. const titleRef = useRef(null); const contentRef = useRef(null); form submit form submit의 매개변수 event 를 사용하기 위해서는 e: React.FormEvent 타입을 지정해야 한다. const form = e.target as HTMLFormElement; todo 추가 완료 후 form reset 하기 위해 선언. titleRef.current?.focus(); titleRef 와 contentRef 의 초기값이 null 이기 때문에 옵셔널 체이닝을 사용하여 에러 방지. const titleRef = u.. 2024. 3. 7.
유틸리티 타입 Partial 일부만 만족하면 되는 타입 Required 모든 속성을 필수로 제공해야 하는 타입 Readonly 읽기 전용으로 값을 변경할 수 없는 객체로 만드는 타입 재할당 불가 Pick 타입 T에서 지정한 K 속성들로 새로운 타입을 만드는 타입 type Person = { id: string; name: string; age: number; phone: string; } type PickType = Omit; const Component = ({name, age} : PickType) => { return ... } Omit 타입 T에서 K 속성을 제외한 속성으로 새로운 타입을 만드는 타입 (Pick의 반대) type Person = { id: string; name: string; age: numb.. 2024. 3. 5.
typescript 기본 타입 1. boolean true / false 를 나타낸다. 주로 조건문, 비교 연산 등에서 사용된다. 2. number 다른 프로그래밍 언어와 다르게 모든 숫자 타입을 number로 나타낸다. 3. string 텍스트 데이터를 나타낸다. 4. array 값을 배열의 형태로 나타낸다. 나타내는 방법에는 2가지가 있으며 배열 요소들을 나타내는 타입 뒤에 [] 를 사용하는 방법과 제네릭 배열 타입이 있다. let numArr: number[] = [1, 2, 3]; let numArr: Array = [1, 2, 3]; 5. tuple 배열과 비슷하지만, 고정된 타입과 고정된 수를 가진다. (배열은 한가지 타입만 가질 수 있다) 선언된 순서에 맞는 타입을 가진 데이터를 넣지 않으면 에러가 난다. tuple은 아.. 2024. 3. 4.
유튜브 api를 활용한 팀 프로젝트 📢 프로젝트 소개 프로젝트 명 : reactube 프로젝트 일정 : 2024.02.23 - 2024.02.28 깃 허브 링크 : 바로가기 배포 링크 : 바로가기 협업툴 : notion, slack, figma, github 기술스택 redux rtk react query supabase DB / auth youtube api resend api ✏️ 프로젝트 설명 유튜브 API를 활용한 리액트 추천 영상을 공유하는 커뮤니티 프로젝트입니다. 💻 프로젝트 구현 기능 로그인/회원가입 (supabase auth), 가입 확인 메일(resend api) 추천 영상 게시물 crud (supabase DB) 댓글 crud (supabase DB) 등록한 추천 영상 자체 검색 기능 (supabase DB) 유튜브 ap.. 2024. 2. 28.
[react] Intersection Observer API 스크롤에 도달했을 때 이미지 로딩하기 lazy load 이번 프로젝트는 유튜브 api를 사용하여 추천 영상을 등록하고, 검색하는 프로젝트를 진행하였다. 한 페이지에 이미지가 많이 배치될 예정이라 이미지 렌더링을 한 번에 하지 않는 방법을 찾던 중 IntersectionObserver 를 알게 되었다. 먼저 useState와 useRef를 추가한다. 렌더링 될 이미지가 여러 개이기 때문에 배열로 useRef에 담는다. const [visibleIndices, setVisibleIndices] = useState([]); const imageRefs = useRef([]); useEffect로 data가 변경될 때마다 실행시킨다. data : supabase에서 검색해 온 데이터 IntersectionObserver(callback[, options]) : 대상.. 2024. 2. 27.
supabase database 정책 설정 이번 팀프로젝트에서 우리 팀은 supabase를 사용하기로 했다. 테스트를 위해 아래와 같이 설정 후 코드를 작성하였다. supabase url 과 key는 settings -> API에서 가져와서 env 파일에 넣었다. import React, { useEffect, useState } from 'react'; import { createClient } from '@supabase/supabase-js'; function Search() { const [data, setData] = useState(); const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_KEY); useEffect.. 2024. 2. 23.
[Glitch / vercel] json-server 배포하기 json-server 레포 생성 먼저 깃헙에서 json-server를 배포할 레포지토리를 생성한다. 이름은 auth-json-server라고 지었다. 그러고 레포를 vscode로 열고 아래와 같이 셋팅을 시작한다. json-server 셋팅 nodejs 프로젝트로 만들어지고, package.json 파일이 생성된다. npm init -y 루트 경로에 server.js 파일을 생성한 후 아래의 내용을 넣는다. // server.js const jsonServer = require("json-server"); const server = jsonServer.create(); const router = jsonServer.router("db.json"); const middlewares = jsonServer... 2024. 2. 22.
로그인 기능 작업을 하면서 UI 작업 로그인과 회원가입은 login.jsx 에 구현되어 있으며, isJoin state로 회원가입 상태인지 관리하여, true 일 경우 회원 가입 상태로 보고 회원가입 폼이 나오도록 만들었다. [login.jsx] import React, { useRef, useState } from "react"; import { InputName, InputStyle, LoginWrap, PageTitle, BtnBlackBg, BtnBlackText, ColorError, BtnArea } from "./LoginStyles"; import api from "../../axios/api"; import { useDispatch } from "react-redux"; import { setIsLogin, set.. 2024. 2. 21.

티스토리툴바