티스토리

myinfo7091 님의 블로그

검색하기

블로그 홈

myinfo7091 님의 블로그

myinfo7091.tistory.com/m

myinfo7091 님의 블로그 입니다.

구독자: 1

방명록 방문하기

주요 글 목록

채팅 시스템 기록 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.
[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.
메인페이지, 레이아웃 구성 3. 메인페이지, 레이아웃 구성 및 네비게이션 추가페이지 설정 및 메인 페이지 구현경로: /기능: 앱의 홈 페이지로, 주요 링크와 간단한 소개를 제공합니다.렌더링 방식: Static Site Generation (SSG)빌드 시점에 페이지를 정적으로 생성합니다.요구사항:글로벌 레이아웃을 설정하고 네비게이션 메뉴를 추가하여 페이지 간 이동이 가능하도록 합니다.챔피언 목록, 아이템 목록, 로테이션 정보 페이지로 이동할 수 있는 링크를 제공합니다.힌트:Next.js의 App Router를 사용하여 레이아웃과 페이지를 구성합니다.layout.tsx 파일에서 글로벌 네비게이션을 설정하고, 공통 레이아웃을 정의합니다.Tailwind CSS를 활용하여 스타일링을 적용합니다.정적 콘텐츠이므로 SSG를 사용하여 빠른 로.. 공감수 3 댓글수 2 2024. 12. 18.
[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.
[React 아웃소싱 프로젝트] 지도에 커스텀 오버레이 생성하기 지도에 커스텀 오버레이 생성하기 카카오맵 api 공식 문서를 참고해서 지도에 자유롭게 컨텐츠를 표시할 수 있는 커스텀 오버레이를 생성한다. 마커를 클릭할 시 식당의 상호명과 주소를 적당한 ui 안에 나타내기로 했다. ◆ Custom Hook으로 분리하기 그 전에 점점 길어지고 있는 코드를 정리할 필요가 있었다. supabase에서 식당의 위도와 경도 정보를 가져와서 해당 좌표에 마커를 생성하는 지도 컴포넌트인데, 기능을 추가하다 보니 뭐가 참 많다(...) supabase에서 restaurants 테이블의 정보를 가져오는 부분은 다른 팀원들도 활용할 가능성이 있어서 따로 커스텀 훅을 만들면 좋을 것 같다. import { useEffect, useState } from 'react';import .. 공감수 2 댓글수 1 2024. 12. 2.
[뉴스피드 프로젝트] 게시글 작성 페이지_이미지 업로드 게시글 작성 페이지_기능_이미지 업로드하기사용자가 로컬 시스템에서 이미지를 선택하고 업로드 전에 미리 볼 수 있는 이미지 업로더를 만들게 되었다. 목표 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 숙련] 1주차_React Router Dom 오늘의 학습내용 : React Router Dom ◆ Router Dom 리액트 라우터 돔을 통해 여러 페이지를 가진 웹을 만들어 볼 수 있다. 일반적으로 웹페이지를 이용할 때 여러 페이지를 오가며 이동할 수 있는 것처럼, react-router-dom은 페이지 이동 기능을 처리할 수 있게 해 준다. 라우팅(Routing)이란?웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 맞는 페이지를 보여주는 것을 의미한다. 다양한 주소에 대해 요청이 들어오고, 네트워크에서 각각에 맞는 경로를 선택해서 해당 컨텐츠로 이동시켜 주는 작업이다. React Router 라이브러리를 통해 리액트에서 컴포넌트 기반의 라우팅 시스템을 구축할 수 있다. '평소처럼 a 태그를 사용해도 되는 게 아닐까?' 라고 생각할 .. 공감수 2 댓글수 1 2024. 11. 8.
[React 개인과제_입문 주차] (기록용) useState, 제출 - 삭제 기능 구현 ◆ useState App.jsx에 국가별로 메달 집계를 표시하는 리스트를 추가한다. useState를 활용해서 데이터를 저장하고 출력하는 React hook에 익숙해질 필요가 있었다.function App() { const [country, setCountry] = useState(''); const [gold, setGold] = useState(0); const [silver, setSilver] = useState(0); const [bronze, setBronze] = useState(0); const [medalList, setMedalList] = useState([]); const handleSubmit = (event) => { .. 공감수 0 댓글수 0 2024. 11. 1.
[React 개인과제_입문 주차] (기록용) react 프로젝트 셋업, 폼 ui 구현 이번 개인 프로젝트로는 올림픽 메달 집계를 관리해 보는 Olympic Medal Tracker를 제작한다. 강의에서 배운 리액트 컴포넌트와 이벤트 관리, state 관리를 통해 필요한 기능을 구현할 수 있다. 과제를 수행하면서 리액트 컴포넌트 useState 관리에 익숙해질 것으로 기대된다. 이번 개인과제에서도 1~3일차에 해당하는 로드맵이 있는데, 제작하다 보니 순서를 거의 지키지 않게 되었다... 이번에도 필수 구현사항들을 먼저 만들어보고, TMDB 영화 검색 사이트처럼 나중에 추가 목표들을 하나씩 도전해볼 계획이다. 터미널을 열고 Vite로 리액트 프로젝트를 셋업한다. 이제 브라우저에서 React 앱을 열어볼 수 있다.yarn create vite my-m.. 공감수 1 댓글수 0 2024. 10. 30.
[JavaScript 개인과제_기초 주차] 4일차: 영화 상세 페이지 구현 오늘의 학습내용 : 영화 상세 페이지 구현하기, 모달, 이벤트 버블링4일차 목표클릭된 영화의 ID를 활용해서 TMDB API로부터 영화 정보 요청하기영화 상세 정보를 모달 창으로 표시하기 모달에서 메인 페이지로 돌아가는 닫기 버튼 구현하기 ◆ HTML, CSS 사용하여 모달창 만들기각각의 영화 카드를 클릭했을 때 영화의 상세 정보가 화면에 표시되도록 모달을 이용해 구현한다. 영화 이미지, 제목, 줄거리 요약과 개봉일을 modal-content 에 넣어서 HTML과 CSS로 간단하게 모달창을 만들었다. 모달창 닫기 버튼도 미리 만들었는데, 구글링을 통해 &times 로 가위표 모양을 보기 좋게 표현할 수 있다는 조언을 얻었다. × .moda.. 공감수 1 댓글수 1 2024. 10. 21.
[JavaScript 개인과제_기초 주차] 3일차: 영화 검색 기능 구현 오늘의 학습내용 : 영화 검색 기능 구현하기 3일차 목표HTML, CSS 사용하여 검색창 만들기실시간으로 검색창에 입력한 영화 검색기능 만들기 ◆ HTML, CSS 사용하여 검색창 만들기 사용자가 입력한 검색어로 영화 목록을 필터링하는 검색 기능을 구현한다. 우선 검색을 위한 Search bar를 html로 header 영역에 만들었다. CSS는 매번 원하는 이펙트를 구현할 수 있는 방법을 일일이 구글링하는데, 내 디자인 감각이 그다지 좋은 편이 아님을 다시금 깨닫는다. header { display: flex; align-items: center; position: relative; background-co.. 공감수 1 댓글수 0 2024. 10. 18.
[JavaScript 개인과제_기초 주차] 2일차: 오늘의 학습내용 : async / await, forEach 2일차 목표HTML, CSS 사용하여 영화 카드 UI 만들기API에서 받아온 데이터를 카드 형태로 화면에 출력하기 ◆ 영화 카드 UI 만들기 1일차에 TMDB 오픈 API를 사용하여 데이터를 가져왔고, 이를 바탕으로 인기 영화 정보를 나열해 보여주는 카드를 만들어 페이지에 출력한다. 주의할 점은 브라우저의 크기가 변해도 자연스럽게 보일 수 있도록 스타일링을 적용하는 것이다. 카드를 생성하는 자바스크립트 코드를 작성하기 전에 HTML과 CSS를 사용하여 영화 카드를 먼저 한 장 만들어보았다. 디자인을 어떻게 할 지 감을 잡기 어려워서, 우선 예시 웹페이지의 CSS를 참고했다. 카드에는 당연히 영화 포스터 이미지가 보여야 하고, 영화 제목과 평점.. 공감수 3 댓글수 2 2024. 10. 17.
[JavaScript 개인과제_기초 주차] 1일차: TMDB API 연동 및 데이터 가져오기 캠프 기초 주차 개인 과제로 영화 검색 사이트 제작이 제시되었다. 세계적인 영화 DB인 TMDB의 오픈 API를 사용하여 영화 검색 사이트를 만들어 볼 것이다.개발 환경 / 기술Visual Studio Code / HTML, CSS, JS외부 APITMDB API주요 기능영화 검색, 영화 정보 조회 오늘의 학습내용 : 실시간 데이터를 사용하는 법 1일차 목표TMDB API에서 인기 영화 데이터 가져오기가져온 데이터를 콘솔에 출력하여 확인하기 ◆ TMDB 알아보기 데이터를 가져올 사이트가 어떤 곳인지부터 알아보았다. TMDB는 영화와 각종 TV프로그램을 수집하여 데이터베이스화하고 영상물에 대한 각종 정보를 제공한다. 포스터 이미지와 함께 인기 영화, 상영 중인 영화, 개봉 예정작, 각종 애니메이션 정보.. 공감수 6 댓글수 0 2024. 10. 15.

문의안내

티스토리
로그인
고객센터

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