티스토리

myinfo7091 님의 블로그

검색하기

블로그 홈

myinfo7091 님의 블로그

myinfo7091.tistory.com/m

myinfo7091 님의 블로그 입니다.

구독자: 1

방명록 방문하기

주요 글 목록

채팅방-갤러리 탭 분리하기 이중 탭으로 구성된 채팅방 UI가 필요하다.현재 구조에서 채팅방을 두 개의 탭으로 나누고, 각 탭에서 서로 다른 콘텐츠(채팅 메시지 + 입력창 / 채팅방 갤러리)를 표시하려면 탭 컴포넌트를 별도로 분리하는 것이 유지보수성과 재사용성을 높이는 데 유리하다.탭 컴포넌트 분리하기탭의 전환을 관리하는 상태와 UI를 캡슐화한 Tabs 컴포넌트를 생성하자. 각 탭의 콘텐츠는 props.children 또는 특정 컴포넌트를 렌더링하도록 설계할 수 있다.ChatRoomPage 컴포넌트에서는 탭 컴포넌트를 사용해 두 개의 탭을 표시할 것이다.탭 1: 채팅 메시지, 채팅 입력창탭 2: 갤러리Tabs 컴포넌트 만들기import { useState } from "react";interface TabProps { labels.. 공감수 0 댓글수 0 2025. 1. 14.
채팅방 테이블 수정 / 멤버 수 제한 채팅방 데이터 테이블 스키마 수정chat_roomsroom_id(PK) user_id(FK) room_title room_subtitle room_description room_thumbnail_url room_hashtags isActive created_attypeuuiduuid(users table)texttexttexttexttext[]booltimestampzchat_members (복합 고유 키)member_id(PK) room_id(PK) isAdmin isActivetypeuuid(usres table)uuid(chat_rooms table)boolbool복합 고유 키 설정고민 과정: member_id와 room_id 의 조합이 고유해야 하므로, 중복 데이터를 방지하기 위한 방법이 필요했다.. 공감수 0 댓글수 0 2025. 1. 10.
Funnel 패턴 공부하기 퍼널 패턴이란?퍼널 패턴은 단계별로 사용자 데이터를 입력받고 처리하는 과정을 설계하는 방법이다. 퍼널이라는 단어에서 유추할 수 있듯이, 여러 단계를 거치며 데이터를 점진적으로 모으고 필터링한다. 특히, 사용자 경험이 중요한 멀티스텝 폼이나 단계별 입력이 필요한 서비스(예: 회원가입, 예약 시스템)에서 유용하다.퍼널 패턴의 주요 특징단계적 데이터 관리:여러 단계를 나누어 데이터를 입력받고 처리한다.각 단계에서 입력된 데이터는 별도로 저장되고, 최종적으로 전체 데이터를 하나로 합친다.사용자 경험 최적화:한 번에 모든 데이터를 입력받기보다 단계를 나눠 부담을 줄인다.단계별로 사용자의 진행 상황을 보여줄 수 있다.유지보수성 향상:각 단계를 컴포넌트로 분리하여 독립적으로 관리 가능하다.비즈니스 로직과 UI를 명확.. 공감수 0 댓글수 0 2025. 1. 8.
[최종 프로젝트] supabase realtime(1) Broadcast Supabase RealtimeSupabase Realtime은 클라이언트와 데이터베이스 간에 실시간 동기화를 지원합니다. 이를 통해 사용자는 데이터가 변경된 부분을 즉시 반영할 수 있습니다. Realtime에는 세 가지 주요 작동 방식이 있습니다. Broadcast클라이언트 간에 메시지를 주고받는 기본 방식입니다.데이터베이스와 관계없이 클라이언트 간에 실시간 이벤트를 공유할 수 있습니다.채팅에서 실시간으로 메시지를 전송, 다수의 사용자에게 동시에 알림 보내기 가능// 채널이 특정 이벤트를 구독하도록 활성화하기// room/topic을 구독합니다. 채널은 'realtime'을 제외한 어떤 이름이든 사용 가능!const channelA = supabase.channel('room-1')// 수신한 메시지를.. 공감수 0 댓글수 0 2025. 1. 7.
[최종 프로젝트] 기획 단계(3) 튜터님 피드백- 룩북에 대한 게시글을 작성하면서 사용자가 직접 상품에 대한 구매처까지 등록하는 것은 번거로움을 유발할 수 있을 듯 합니다. - 데이터가 필요하다면 크롤링을 시도해도 좋지만 기술적으로 구현이 어려울 수 있습니다. - 오픈 api를 활용한 룩북 가상 시착 시스템 커뮤니티로서의 속성을 강화해서 유저 중심의 기능이 추가되면 좋을 것 같습니다. [Next.js] Puppeteer로 CSR 페이지 크롤링하기Chrome Headless 모드로 CSR 페이지 크롤링하기🤖velog.io Puppeteer란? Puppeteer는 Chrome DevTools 프로토콜을 이용해 Chrome/Chromium을 제어할 수 있는 Node.js 라이브러리로, 기본적으로 헤드리스 모드(백그라운드에서 UI 없이 브.. 공감수 1 댓글수 1 2025. 1. 3.
[최종 프로젝트] 기획 단계(2) 오전 피드백- 검색 기능은 query parameter를 활용하기- 홈 페이지에서 너무 많은 기능을 처리하지 않도록 하기 위해 따로 페이지를 생성하는 방향 고려하기- npm 라이브러리(예시: 웹 에디터) 선정은 패키지 비교를 활용해서 선정하기- 개발자는 이전에 구현해봤던 기능 반, 해보지 않은 기능 반 정도를 도전해보기- 수정 사항은 회의를 거친 후 확정이 되었을때 진행하기 - 회의를 거치지 않고 수정한 기능/디자인은 갈등으로 이어질 수 있으므로 꼭 사전에 팀원들과 공유하기오후 피드백- 기능 개발 방식에 대한 논의- 필터링 구현 방식 2가지1. supabase query 날리기2. 모든 데이터 받아와서 필터링 - query parameter 구현할때 검색 페이지가 있는 것이 선호 마이 페이지-> pral.. 공감수 0 댓글수 0 2025. 1. 2.
[최종 프로젝트] 기획 단계 (1) 프로젝트 명 : 피버러소개한 줄 정리 : 나의 스타일을 등록하고 다른 사람의 스타일 구매처를 확인하는 사이트내용 : 사용자들이 직접 코디한 룩을 등록하는프로젝트 핵심 기술룩북 형태로 스타일 사진을 업로드하고,오늘의 집 처럼 룩북 구매처를 연계시켜주는 어플리케이션, (상세 페이지 아래 부분에 작성자가 직접 등록하는 방식)커뮤니케이션 형성을 어플의 중심 기능으로 개발 예정CRUD 기능C: 자신만의 룩북 등록R: 다른 사람의 룩북 조회U: 룩 수정 및 코멘트 추가D: 룩북 삭제C: 자신만의 룩북 등록R: 다른 사람의 룩북 조회U: 룩 수정 및 코멘트 추가D: 룩북 삭제도전 개발 요소룩북별 스타일 점수 부여특정 룩북은 구매 가능 (즉시 거래)사용자 레벨업 시스템 (룩북 많이 교환할수록 상위 랭크)유튜브 룩북 큐.. 공감수 1 댓글수 1 2024. 12. 31.
채팅 시스템 기록 Supabase 실시간 데이터 타입 불일치 문제문제: payload.new의 타입이 Message와 맞지 않아 TypeScript 에러 발생.원인: Supabase의 실시간 이벤트에서 반환된 데이터(payload.new)는 기본적으로 any 타입으로 처리되며, 정의된 Message 타입과 불일치. Supabase에서 반환된 데이터 타입을 명시적으로 캐스팅해줌.const message = payload.new as Message; Supabase-React 채팅 메시지 순서 문제 해결문제: 채팅 모달을 닫았다가 다시 열면 메시지 순서가 뒤섞임. Supabase에서 메시지를 가져오는 과정과 실시간 업데이트 로직에서 발생한 문제로 생각됨.원인: fetchMessages 함수에서 Supabase 쿼리에 명시적.. 공감수 0 댓글수 0 2024. 12. 30.
postgres_changes로 전달된 데이터 타입 '(prev: { chatroom_id: string; content: string; created_at: string; id: string; sender_id: string; }[]) => ({ chatroom_id: string; content: string; created_at: string; id: string; sender_id: string; } | { ...; })[]' 형식의 인수는 'SetStateAction' 형식의 매개 변수에 할당될 수 없습니다. payload.new의 타입이 정확히 지정되지 않았기 때문에 에러가 발생한다. payload.new가 Supabase의 postgres_changes 이벤트로 전달된 데이터인데, 타입 추론이 제대로 이루어지지 않았다. payload.new에.. 공감수 0 댓글수 0 2024. 12. 27.
Zustand 모달 open/close Zustand를 사용해서 모달 상태를 간단하고 효율적으로 관리할 수 있다. Zustand는 경량 상태 관리 라이브러리로, 전역 상태와 모달의 열림/닫힘 상태 관리에 적합하다. 1. Zustand 스토어를 설정해서 모달의 상태와 상태 변경 함수를 정의한다.import create from 'zustand';interface ModalState { isOpen: boolean; openModal: () => void; closeModal: () => void;}const useModalStore = create((set) => ({ isOpen: false, openModal: () => set({ isOpen: true }), closeModal: () => set({ isOpen: false.. 공감수 0 댓글수 0 2024. 12. 27.
[supabase realtime을 이용한 채팅 구현하기] 채팅 ui 모달 Parallel RoutesParallel Routes는 Next.js 13(App Router)에서 병렬적으로 여러 UI를 렌더링하는 기능이다. URL 상태를 기반으로 모달과 페이지 콘텐츠를 분리하면서도 독립적으로 관리할 수 있다. 채팅 UI 구현을 위한 Parallel Routes 구성app/ layout.tsx // 전체 레이아웃 page.tsx // 기본 페이지 (대화 목록) @chat/ // 병렬 라우트 layout.tsx // 채팅 모달 레이아웃 [userId]/page.tsx // 특정 사용자와의 채팅 모달 1. 기본 레이아웃 (app/layout.tsx)import .. 공감수 0 댓글수 0 2024. 12. 23.
[React 심화 주차] 팀 프로젝트_개발 멘토링 플랫폼 회원가입회원가입 입력 폼입력정보에 대한 유효성 검사정규식을 포함한 유효성 검사입력 받았으면 supabase 회원가입 로직 작성UI 꾸미기로그인 로그인 입력 폼 입력정보에 대한 유효성 검사멘토 등록자기소개 입력 필드멘토취소커리큘럼 선택프로필 사진 업로드(supabase storage 연동)회원용, 멘토용 사 진 따로 두되 멘토 사진 등록 폼에서 회원용 사진도 불러올 수 있게 버튼 추가?분야 해시태그최대 3-5개 등록카테고리 역할일단 글자수 제한 ( 10 글자 )PDF 파일 업로드 (이력서) (도전)경력 폼 어떻게 구성할지?경력 입력을 위한 양식이 존재사용자가 추가하기? 버튼을 누르면 추가 경력을 입력하기 위한 양식 노출회사 이름, 직책, 근무기간 (날짜 인풋), 맡은 업무홈페이지헤더 푸터 공용 컴포넌트로 .. 공감수 1 댓글수 1 2024. 12. 20.
[Next.js/Typescript] LOL_Dex: NextJS에서 환경변수 사용하기 구현 목표환경변수를 설정해서 API key를 사용한다. 문제점: Next.js 환경변수 설정 오류Next.js 환경변수를 설정했지만 undefined로 표시되거나 제대로 읽히지 않았다. 클라이언트 측 코드에서 환경변수를 접근하려 할 때 값이 설정되지 않는 문제라도 있는 것일까? NextJS에서 환경변수 .env 사용하는 방법NextJS는 기본적으로 환경 변수를 지원하고 있으며, 사용하기가 매우 쉽습니다. 환경 변수가 필요한 이유 환경 변수가 필요한 이유는 우리가 웹 애플리케이션을 만들 때 개발 모드(development mode)와cpro95.tistory.com 원인 파악: 환경변수 접두사클라이언트에서 접근하려면 환경변수 이름에 NEXT_PUBLIC_ 접두사가 꼭 필요하다고 한다. 슬랙 공지를 통.. 공감수 0 댓글수 0 2024. 12. 19.
[Next.js/Typescript] LOL_Dex: 컴포넌트에서 버전 정보 전달하기 구현 목표리그 오브 레전드 아이템 정보 페이지에 사용될 아이템 카드 컴포넌트를 만들고 알맞은 이미지를 가져와서 사용한다. 문제점: 컴포넌트에서 버전 정보 전달 오류각종 이미지와 기본 URL 사용을 위해 constants.ts에 필요한 URL과 생성 함수를 정리했는데, ItemCards 컴포넌트에서 각 아이템에 해당하는 이미지가 로드되지 않았다. 확인한 내용은 아이템 이미지를 가져오기 위해 URL을 생성하는 getItemImgUrl 함수가 버전 정보를 필요로 한다는 것이다.// constants.ts 예시// Data Dragon API 기본 URLexport const API_URL = "https://ddragon.leagueoflegends.com";// 챔피언 스퀘어 이미지 URLexport co.. 공감수 0 댓글수 0 2024. 12. 19.
챔피언 목록 페이지 import ChampionCards from "@/components/ChampionCards";import { Champion } from "@/types/Champion";import { fetchChampionList, fetchVersion } from "@/utils/serverApi";export default async function ChampionsPage() { const version = await fetchVersion(); const championList: Champion[] = await fetchChampionList(); return ( 챔피언 목록 {championList.map((champion) =.. 공감수 0 댓글수 0 2024. 12. 18.
라우트 핸들러&서버액션 import { ChampionRotation } from "@/types/ChampionRotation";import { NextResponse } from "next/server";export async function GET() { const apiKey = process.env.NEXT_PUBLIC_RIOT_API_KEY as string; if (!apiKey) { return NextResponse.json( { error: "API KEY를 찾을 수 없습니다." }, { status: 500, } ); } try { const response = await fetch( "https://kr.api.riotgames.com.. 공감수 0 댓글수 0 2024. 12. 18.
메인페이지, 레이아웃 구성 3. 메인페이지, 레이아웃 구성 및 네비게이션 추가페이지 설정 및 메인 페이지 구현경로: /기능: 앱의 홈 페이지로, 주요 링크와 간단한 소개를 제공합니다.렌더링 방식: Static Site Generation (SSG)빌드 시점에 페이지를 정적으로 생성합니다.요구사항:글로벌 레이아웃을 설정하고 네비게이션 메뉴를 추가하여 페이지 간 이동이 가능하도록 합니다.챔피언 목록, 아이템 목록, 로테이션 정보 페이지로 이동할 수 있는 링크를 제공합니다.힌트:Next.js의 App Router를 사용하여 레이아웃과 페이지를 구성합니다.layout.tsx 파일에서 글로벌 네비게이션을 설정하고, 공통 레이아웃을 정의합니다.Tailwind CSS를 활용하여 스타일링을 적용합니다.정적 콘텐츠이므로 SSG를 사용하여 빠른 로.. 공감수 3 댓글수 2 2024. 12. 18.
렌더링 패턴 /* eslint-disable @next/next/no-img-element */// SSG// 서버 컴포넌트에서는 fetch API를 통해 데이터를 직접 불러올 수 있다.// build 시점에 데이터를 불러오기 때문에 터미널에 console.log로 데이터를 출력해볼 수 있다.export default async function HomePage() { const response = await fetch("http://localhost:4000/products"); const data: Product[] = await response.json(); console.log(data); return ( Hello! Next.js HomePage .. 공감수 0 댓글수 0 2024. 12. 17.
[Next.js] Route Handlers Route HandlersNext.js 13부터는 app 디렉토리에서 API 엔드포인트를 직접 정의할 수 있는 Route Handlers 기능이 추가되었다. 별도의 api 폴더를 사용하지 않고도 서버 측의 기능을 구현할 수 있다. Route Handlers는 웹 개발에서 동적인 사용자 경험을 제공하기 위한 서버 측 로직이 요구될 때 쓰일 수 있다. 사용자가 입력한 내용을 검증, 처리하는 API, 데이터 조회와 수정 등 서버 측에서 작업을 수행할 때 장점을 갖는다.컴포넌트와 API 라우트를 같은 위치에 배치하여 유지 보수성을 높일 수 있다.Next.js의 서버 사이드 기능을 쉽게 구현할 수 있다. Route Handlers의 위치 Route handler 파일은 app 디렉토리 아래, 라우트 이름에 .. 공감수 1 댓글수 1 2024. 12. 13.
[Typescript] 타입스크립트를 사용하는 이유 웹 사이트를 운영하는 데 있어 높은 코드 품질로 버그 없이 사용자에게 안정감 있는 경험을 제공하는 것이 중요해졌다. TypeScript는 동적 타입 언어인 JavaScript를 보완해 주면서 활용도가 늘어나고 있다. TypeScript는 JavaScript의 상위 확장자로, 원하는 변수 타입을 정의하고 JS로 변환하여 브라우저에서 실행할 수 있다. 타입스크립트를 사용하는 가장 큰 이유는 버그를 예방할 수 잇는 타입 시스템이다. 타입(자료형)은 어떠한 변수가 문자열인지, 숫자인지, boolean인지 등 값의 형태에 따라 자료의 유형을 지정해주는 것이다. 만약 컴파일 과정에서 지정한 타입에 맞지 않는 값이 들어가면 에러가 발생하는데, 이를 통해 디버깅을 좀 더 편하게 할 수 있다.. 공감수 1 댓글수 1 2024. 12. 12.
[Next.js + TypeScript] 리그 오브 레전드 정보 도감 만들기 프로젝트 개요Next.js와 TypeScript를 사용하여 리그 오브 레전드 캐릭터&아이템 정보 도감 만들기 주요 기능챔피언 정보 조회아이템 정보 조회금주의 챔피언 로테이션 정보 조회 프로젝트 셋업npx create-next-app@14 // 14버전 설치하기What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? NoWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to.. 공감수 0 댓글수 0 2024. 12. 11.
[Next.js] 주요 렌더링 패턴 Next.js에서 주요 렌더링 방식은 4가지로 나눌 수 있다. 각 패턴별로 프로젝트의 성능이나 데이터, 사용자 경험 최적화를 위해 고려해야 할 부분들이 있는데, 자신이 진행할 프로젝트에서 요구되는 사항에 따라 적절한 방식을 선택하면 된다. 렌더링 시점속도데이터활용SSG빌드타임빠름고정형 데이터마케팅 페이지SSR요청 시느림(서버 요청)최신 데이터실시간 데이터CSR클라이언트 실행 시느림(초기에)클라이언트에서 처리검색 결과ISR빌드 타임,주기적인 재생성빠름조정 가능뉴스, 전자상거래 등 SSG(Static Site Generation)export async function getStaticProps() { const res = await fetch("https://example.com/data"); cons.. 공감수 0 댓글수 1 2024. 12. 10.
[React 아웃소싱 프로젝트] 지도에 커스텀 오버레이 생성하기 지도에 커스텀 오버레이 생성하기 카카오맵 api 공식 문서를 참고해서 지도에 자유롭게 컨텐츠를 표시할 수 있는 커스텀 오버레이를 생성한다. 마커를 클릭할 시 식당의 상호명과 주소를 적당한 ui 안에 나타내기로 했다. ◆ Custom Hook으로 분리하기 그 전에 점점 길어지고 있는 코드를 정리할 필요가 있었다. supabase에서 식당의 위도와 경도 정보를 가져와서 해당 좌표에 마커를 생성하는 지도 컴포넌트인데, 기능을 추가하다 보니 뭐가 참 많다(...) supabase에서 restaurants 테이블의 정보를 가져오는 부분은 다른 팀원들도 활용할 가능성이 있어서 따로 커스텀 훅을 만들면 좋을 것 같다. import { useEffect, useState } from 'react';import .. 공감수 2 댓글수 1 2024. 12. 2.
[React] 필터링 및 결과 리스트 렌더링 목표 _ React에서 사용자의 특정 결과값을 필터링하는 기능 구현하기공개 설정한 결과값만 리스트 페이지에 표시하기현재 로그인한 사용자의 결과값은 공개 여부와 관계없이 항상 화면에 표시하기 구현 과정 _ 테스트 결과 렌더링하기 필터링된 결과를 map 메서드로 TestResultItem 컴포넌트에 렌더링한다. visibleResults.map((result) => ( )); 구현 과정 _ 어려웠던 부분 개발자 도구에서 네트워크 탭을 확인해 보면 비공개 / 공개 전환에 대한 요청이 정상적으로 진행되고 있다. 그런데 다른 아이디로 로그인했을 때 비공개 설정이 적용되지 않거나, 현재 로그인한 사용자의 테스트 결과가 전부 표시되지 않는 문제가 있었다. 튜터링 과정에서 네트워크 헤더, 페이로드 부분을 확인하.. 공감수 0 댓글수 0 2024. 11. 28.
[React] 로그인 여부에 따른 nav React에서 로그인 상태에 따라 내비게이션 바 관리하기 React에서 사용자 로그인 여부에 맞춰 다른 내비게이션을 보여주고 싶었다. 로컬 스토리지를 이용해 로그인 여부를 확인하고, 로그인/아웃 상태에 따라 내비게이션 컴포넌트를 조건부 렌더링하는 방법을 고려해볼 수 있다. ◆ 로그인 상태에 따른 조건부 내비게이션 컴포넌트에서 로그인에 따라 LoginNav, LogoutNav 컴포넌트를 조건부로 보여주기 위해 localStorage에서 사용자 정보를 확인하고, 로그인된 상태면 LoginNav, 로그아웃된 상태면 LogoutNav를 렌더링하도록 설정하면 된다. const Header = () => { const user = JSON.parse(localStorage.getItem("user")); c.. 공감수 0 댓글수 0 2024. 11. 26.
[React] React Toast를 활용한 알림 메세지 구현 React Toast는 사용자 알림을 간편하게 구현할 수 있는 라이브러리이다. React Toastify를 통해 손쉽게 사용자에게 피드백을 전달할 수 있다. 알림은 사용자의 경험을 강화하는 중요한 요소이기 때문에 적절한 위치와 타이밍에 사용해야 한다. ◆ 설치 및 적용 react-toastify 패키지를 추가한다.yarn add react-toastify 설치 후에는, ToastContainer 컴포넌트를 애플리케이션에 추가하고, toast 함수를 사용해 알림을 띄울 수 있다. import React from 'react';import { ToastContainer, toast } from 'react-toastify';import 'react-toastify/dist/ReactToastify.css'.. 공감수 0 댓글수 0 2024. 11. 26.
[뉴스피드 프로젝트] 게시글 작성 페이지_이미지 업로드 게시글 작성 페이지_기능_이미지 업로드하기사용자가 로컬 시스템에서 이미지를 선택하고 업로드 전에 미리 볼 수 있는 이미지 업로더를 만들게 되었다. 목표 FileReader로 이미지 미리보기 생성하기이미지 입력을 사용자 친화적으로 만들기useState Hook로 이미지 상태 관리하기 const [imgPath, setImgPath] = useState(null); useState Hook를 통해 업로드된 이미지의 상태를 관리한다. 브라우저에서 이미지를 바로 렌더링해 미리보기하는 기능을 어떻게 구현할지 고민했는데, 비슷한 기능을 구현한 사례에서 FileReader를 사용해 base64 형식으로 변환하는 방법을 알게 되었다. JavaScript FileReaderIn this tutorial, you'l.. 공감수 1 댓글수 1 2024. 11. 18.
[뉴스피드 프로젝트] 1일차 - 기획 단계 팀 프로젝트: 뉴스피드 프로젝트 - 뉴스피드란?내 게시물을 포함한 모든 게시물을 볼 수 있는 공간실시간 정보 업데이트 기능 뉴스피드 프로젝트는 실시간으로 새로운 게시물이 올라오고 사용자가 쉽게 최신 정보를 확인할 수 있는 구조를 가진다. 데이터베이스와의 연동을 통해 정보 갱신 기능을 추가할 수 있다.사용자 맞춤형 피드 사용자의 관심사를 바탕으로 피드가 제공된다. ‘운동’에 관심이 많은 사용자에게는 관련된 게시물을 우선적으로 표시해줄 수 있다.소셜 상호작용 게시물에 댓글을 달고, 좋아요를 누르고, 공유하는 등 다양한 상호작용이 가능하다. 사용자 간의 관계 형성과 피드에 대한 활발한 참여를 유도할 수 있다.UI/UX의 중요성 사용자가 시각적으로 정보를 얻을 수 있어야 하므로 깔끔하고 효율적인 설계가 필요하다.. 공감수 2 댓글수 1 2024. 11. 15.
[React] React Hook - useState Hook 호출의 규칙?반복문, 조건문, 중첩되는 함수 내에서 Hook를 호출할 수 없다. return이 실행되기 전 react 함수의 최상위 레벨에서 Hook를 사용해야 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장한다. 이를 통해 useState, useEffect와 같은 Hook이 여러 번 호출되는 중에도 그 상태를 올바르게 유지할 수 있다. // React의 함수 컴포넌트는 어떻게 생겼을까?// 1)const App = (props) => {// 여기에 react hook를 사용하면 된다. 아래도 마찬가지 return ;};// 2) function App(props) { return ; } 응 단축키 딸깍 할거야 rafce rfce Hook는 react sta.. 공감수 0 댓글수 0 2024. 11. 14.
[React 숙련] 1주차_Supabase 오늘의 학습내용 : Supabase ◆ Baas 모바일, 웹 애플리케이션을 제작할 때에는 백엔드 서버 개발도 함께 진행하게 된다. 백엔드 이야기를 하자면, 서버 개발을 할 때 고려해야 할 사항들이 있다. 만약 유저가 늘어난다면 서버를 확장해야 하고, 보안도 주의해야 한다. 이러한 웹, 모바일 앱 개발을 더 쉽고 빠르게 할 수 있도록 돕는 클라우드 기반의 백엔드 서비스가 Baas 이다. 복잡한 백엔드 시스템을 직접 관리할 필요가 없기 때문에 프론트엔드에 집중하는 것이 가능해진다! (참고: https://velog.io/@ki5970) 대표적인 BaaS 플랫폼에는 Firebase(Google 운영), Parse, AWS Amplify 등이 있다. 이러한 서비스들은 데이터베이스, 소셜 미디어 서비스와의 연.. 공감수 0 댓글수 1 2024. 11. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.