전체 글85 [React] Day_81 최종 프로젝트 기능 구현 내용정리 Intro 와이어프레임 제작이 완료되어 해당 디자인에 맞게 기능구현을 시작해야 하는 림졍..(그렇다.. 할 일이 고봉밥급이다… 어헝헝)무엇부터 시작해야 할지 어지럽지만 우리의 림졍은 일단 냅다 스키마를 보며코드를 우당탕탕 작성해나가기 시작하는데… 1. useState, 너무 많이 쓰는 게 맞을까? 작업 진행은 스키마 수정이나 기타 사항이 생길 것 같아우선 위치 및 스케줄링 관련 기능 테스트를 위한 레포지토리에서 코드를 짜고, 이후 메인 레포지토리에 옮기는 방식으로 진행되었다. GitHub - reizvoll/testttContribute to reizvoll/testtt development by creating an account on GitHub.github.com 작성 페이지 렌더링 방식은 CSR로.. 2025. 1. 14. [React] Day_80 최종 프로젝트 기능 구현 내용정리 자, 작업을 진행해보자.Intro 채팅 기능의 어느정도 끝난 지금,잊고 있었던 fever_time 기능을 다시 활성화하고자 한다..!열심히 만들어둔 SQL.. 다시 옾-흔!관련 링크 - Supabase - Scheduling 기능, Next.js에서 활용 가능한지에 대한 테스트 진행 1. 테스트용 SQL 작성 테스트를 위해 스케줄을 2시/6시에서 1분 간격으로 설정하는 SQL은 아래와 같다.-- 1. 스케쥴링 함수 생성 (수정 없음)CREATE OR REPLACE FUNCTION calculate_fever_rooms()RETURNS voidLANGUAGE plpgsqlAS $$BEGIN -- 기존 피버타임 레코드 삭제 DELETE FROM fever_time_rooms WHERE created_a.. 2025. 1. 13. [React] Day_79 최종 프로젝트 1차 코드 리뷰 1차 코드 리뷰코드 리뷰시 보는 항목성능가독성최적화튜터님 피드백공통적 적용할 부분favicon 지우기PR 템플릿 체크리스트 적용 && .github 폴더로 옮겨주기PR 시에 체크리스트 제대로 작성안한 지적supabase gen script 에 고유값 env 파일로 이동에러처리 고민 에러 페이지, 로딩 페이지 디자인 요청하기공통 컴포넌트로 최대한 사용 후 나중에 공용 컴포넌트만 변경하기default 브랜치 dev으로 하지 않는게 좋을 것 같습니다 default 브랜치를 변경하고 PR merge 했을 시에 어디로 합쳐지는지? [최종 전에]html lang=ko로 적용하기개별 피드백"data"라는 변수명은 변경해주세요 → data, error 이렇게 받아올때 맞는 변수명으로 변경 요망import 절대경로로 모.. 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 최종 프로젝트 기획 정리 Next.js의 성능 최적화 방법병렬 라우트(Parallel Route) 활용Next.js의 병렬 라우트를 사용하면 대시보드 UI를 효율적으로 구성할 수 있다.여러 컴포넌트를 동시에 렌더링 가능하며, 이를 통해 로드 시간이 단축되고 사용자 경험이 개선된다.특히, 복잡한 UI를 구성할 때 개별 컴포넌트를 독립적으로 처리할 수 있어 유지보수에도 용이하다.인터셉팅 라우트(Intercepting Route) 활용URL 기반으로 모달을 생성하고 관리할 수 있는 인터셉팅 라우트를 통해 사용자 흐름을 간소화할 수 있다.예를 들어, 페이지 전환 없이 모달을 통해 추가 정보를 제공하거나 작업을 수행할 수 있어 UX 향상에 기여한다.이미지 최적화next/image를 활용하여 이미지를 효율적으로 관리.자동 리사이징, 포맷 .. 2025. 1. 3. [React] Day_73 심화 프로젝트 후기 오늘은 간단하게 작성.. 해보고자 한다..!내 희대의 역작, 듀오링고 소개 ^-^)bDuo-Dingco기술 면접을 준비하고 퀴즈를 통해 지식을 공유하세요! 🔗 프로젝트 기능 ✅ supabae를 활용한 로그인, 회원가입회원가입: 이메일, 비밀번호, 모든 필드가 채워지지 않으면 회원가입 불가로그인: 구글 소셜로그인 기능 제공으로 사용자 경험 개선✅ 홈페이지로그인이 되지 않으면 다른 페이지로 이동 불가각 페이지로 이동할 수 있는 side bar, nav bar 제공✅ 학습페이지올라온 게시물을 학습할 수 있는 페이지북마크 기능을 통해 마음에 드는 카드를 저장애니매이션 기능 추가로 사용자 경험 개선✅ 퀴즈페이지올라온 게시물에 대해 퀴즈를 풀어볼 수 있는 페이지맞은문제, 틀린문제를 실시간으로 알려주는 기능퀴즈 완.. 2025. 1. 2. 이전 1 2 3 4 ··· 10 다음
