본문 바로가기

전체 글82

[React] Day_81 최종 프로젝트 기능 구현 내용정리 와이어프레임 제작이 완료되어 해당 디자인에 맞게 기능구현을 시작해야 하는 림졍..(그렇다.. 할 일이 고봉밥급이다… 어헝헝)무엇부터 시작해야 할지 어지럽지만 우리의 림졍은 일단 냅다 스키마를 보며코드를 우당탕탕 작성해나가기 시작하는데… CRUD - 작성 페이지 작업 진행 (+ 너무 많은 useState 사용에 대한 해결안)useState.. 이렇게 남발해도 되는건가?1. useState, 너무 많이 쓰는 게 맞을까? 작업 진행은 스키마 수정이나 기타 사항이 생길 것 같아우선 위치 및 스케줄링 관련 기능 테스트를 위한 레포지토리에서 코드를 짜고, 이후 메인 레포지토리에 옮기는 방식으로 진행되었다. GitHub - reizvoll/testttContribute to reizvoll/testtt develop.. 2025. 1. 14.
[React] Day_80 최종 프로젝트 기능 구현 내용정리 주말에도.. 하얗게 불태웠다..이제 진짜진짜 본격적으로 작업하기에 앞서,이전에 진행했던 피버타임 기능을 활성화해보고자 하는데...바로 가시죠, 렠흐고.  Chat - Fever-time 채팅방 기능 구현 (Supabase 스케쥴링 적용)나의 SQL.. 다시 언-록! (ft. 캐릭캐릭체인지)  [이전 포스팅 참고]Supabase - Scheduling 기능, Next.js에서 활용 가능한지에 대한 테스트 진행  1. 테스트용 SQL 작성 테스트를 위해 스케줄을 2시/6시에서 1분 간격으로 설정하는 SQL은 아래와 같다.-- 1. 스케쥴링 함수 생성 (수정 없음)CREATE OR REPLACE FUNCTION calculate_fever_rooms()RETURNS voidLANGUAGE plpgsqlAS $.. 2025. 1. 13.
[React] Day_79 최종 프로젝트 관련 내용 정리 GeoLocation API랑 카카오맵 API를 활용해서기본 지역 정보 추출 기능 (ㅇㅇ시 ㅇㅇ동)까지 나오게끔 구현을 완료한 림졍. 벗뜨… 카카오맵 API를 이거 하나로만 끝내긴 아쉬워단순 주소 출력 외에도 동 검색 기능을 추가하여보다 세밀한 주소 검색 기능을 제공하도록 확장시키고자 하는데...  CRUD - Kakaomap API를 활용한 주소 검색기능 추가구현자, 작업을 시작해볼까..  1. 프로젝트 작업, 이어서 진행 GitHub - reizvoll/testttContribute to reizvoll/testtt development by creating an account on GitHub.github.com 스케쥴링 테스트를 진행했던 GitHub 레포지토리에 이어서 테스트를 진행  2. 작업 .. 2025. 1. 10.
[React] Day_78 최종 프로젝트 관련 내용정리 디자이너 팀과 와이어뿌레임 컬러도 정하고 (놀랍게도 저렇게 진행했습니다. ye..)모의 면접에 기능관련 추가적인 내용까지 공부했더니 벌써 시간이;;; 오늘도 으쌰으쌰 TIL 작성을 좀 하겠습니다.그럼 가시죠. CRUD - GeoLocation API를 활용한 사용자의 실시간 위치 가져오기지도 API는 처음이라..   Intro게시글 작성 페이지와 실시간 채팅, 이 두가지를 담당하게 된 림졍.작성페이지에 들어가는 Supabase 테이블에 upload_place 을 어떻게 할 것인지 고민중이었다.우선 더미데이터에는 서울, 부산 등 지역별로 나눠져 있었지만..이것을 왠지 위치를 불러와서 업로드하게 하는것도 좋겠다는 생각이 들어GeoLoaction API를 활용해서 주소를 가져와 ㅇㅇ시 ㅇㅇ동까지 나오게끔 구현.. 2025. 1. 9.
[React] Day_77 최종 프로젝트 관련 내용정리 기능 구현이랑 오늘도 싸우고 온 림졍..그래도 새롭게 넣어주어야 할 기능들에 대한 공부는 얼추 완료했다(?)!이제.. 이쁘게 만들면 되겠지..? @.@;;;오늘은 어제에 이은 일지를 적는 것으로 TIL을 적어보겠습니다.가시죠오오.  Supabase - Scheduling 기능, Next.js에서 활용 가능 여부 테스트 일지 - (2)와아- 고봉밥급 뜨라블 슈띵!!!  테스트 과정 (이어서)3. 스케쥴링 기능 추가해보기 스케쥴링 동작 방식calculate_fever_rooms 함수는 채팅방 메시지를 3시간 동안 집계합니다.매일 오후 2시와 6시에 자동으로 실행됩니다.fever_time_rooms 테이블에 상위 5개 채팅방이 기록됩니다.- fever time 스케쥴링 SQL-- 1. 스케쥴링 함수 생성CRE.. 2025. 1. 8.
[React] Day_76 최종 프로젝트 관련 내용정리 기능 구현 우당탕탕 만들고 있는 림졍...우선 작성 페이지보다.. 채팅이 우선순위라 채팅친구를 손보고 있는디채팅 관련 트리거 사용 및 스키마 설정으로 오전에 우다다다 회의하고새로운 방법(?)에 관해 하루쥉일 Supabase랑 동거동락했다 ^-^)7그래도 오늘 팀원들 덕에 빡집중해서 구현 다 했다... (와! SQL 지옥 탈출!)내가 과연 건드리는게 맞긴 하지만..여튼 시작합니다 정리. 레츠고  Supabase - Scheduling 기능, Next.js에서 활용 가능 여부 테스트 일지 - (1)내가 살다살다 SQL에 손을 대다니... 🤦🏻‍♂️  Intro해당 일지를 작성한 이유에 대해 간단하게 적어보자면...채팅(일명 훈수방) 관련 기획이 나왔을 때, 구현하려는 기능 중에인기 채팅방 (우리는 피버타.. 2025. 1. 7.
[React] Day_75 데일리 정리 얼추 기획이 끝나서드디어 기능 구현을 뚱땅뚱땅 거리게 될 림졍..!근데 아직 뭔가 렌더링 방식 관련해서 많이 부족한 거 같아서오늘은 렌더링 방식 정리로 TIL를 적어보고자 한다!그럼 가시죠. 강의정리 - Next.js 렌더링 최적화와 하이브리드 패턴렌더링 패턴 제대로 이해하기 (도전.) 빌드 실패 case - SSG 에서 라우트 핸들러 호출 SSG(Static Site Generation) 환경에서 route handler(API 라우트) 호출 하면 빌드에 실패함. (= 빌드 실패의 원인요소)(∵ SSG는 빌드 시점에 실행되지만, route handler는 빌드 단계에서 활성화되지 않기 때문) - 빌드 실패export default async function Home() { const data = aw.. 2025. 1. 6.
[React] Day_74 데일리 정리 오늘 처음 크롤링이란 것을 해본 림졍..순조롭게(?) 성공 할 줄 알았으나.. 아쉽게도 프로젝트에 적용하기엔 한계점이 많아서 울었다고.. (엉엉)그래서 작성해보는 맨땅에 헤딩마냥 도전해본 크롤링 도전기,가시죠.   최종 프로젝트 기술적 의사결정 - Pyppeteer를 활용한 무신사 크롤링 진행친구들아 미안해!!!   상황은 이랬다.담당 페이지인 게시글 작성 페이지에 착용한 상품에 대한 구매처를직접 링크를 걸어 구매처까지 등록하는 것은 UX적으로 사용자에게 번거로움을 유발하는 사항이라쇼핑몰 데이터를 가져와서 빠르게 연동까지 가능하도록 하는 크롤링에 대해 의견을 받았고,이를 통해서.. 림졍은 크롤링을 진행하게 되는데.. Puppeteer를 이용한 데이터 크롤링 - Puppeteer란?Puppeteer는 Ch.. 2025. 1. 3.
[React] Day_73 심화 프로젝트 후기 오늘은 간단하게 작성.. 해보고자 한다..!내 희대의 역작, 듀오딩코 소개 ^-^)bDuo-Dingco기술 면접을 준비하고 퀴즈를 통해 지식을 공유하세요! 🔗 프로젝트 기능 ✅ supabae를 활용한 로그인, 회원가입회원가입: 이메일, 비밀번호, 모든 필드가 채워지지 않으면 회원가입 불가로그인: 구글 소셜로그인 기능 제공으로 사용자 경험 개선✅ 홈페이지로그인이 되지 않으면 다른 페이지로 이동 불가각 페이지로 이동할 수 있는 side bar, nav bar 제공✅ 학습페이지올라온 게시물을 학습할 수 있는 페이지북마크 기능을 통해 마음에 드는 카드를 저장애니매이션 기능 추가로 사용자 경험 개선✅ 퀴즈페이지올라온 게시물에 대해 퀴즈를 풀어볼 수 있는 페이지맞은문제, 틀린문제를 실시간으로 알려주는 기능퀴즈 완.. 2025. 1. 2.