React TIL80 [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_73 심화 프로젝트 후기 오늘은 간단하게 작성.. 해보고자 한다..!내 희대의 역작, 듀오딩코 소개 ^-^)bDuo-Dingco기술 면접을 준비하고 퀴즈를 통해 지식을 공유하세요! 🔗 프로젝트 기능 ✅ supabae를 활용한 로그인, 회원가입회원가입: 이메일, 비밀번호, 모든 필드가 채워지지 않으면 회원가입 불가로그인: 구글 소셜로그인 기능 제공으로 사용자 경험 개선✅ 홈페이지로그인이 되지 않으면 다른 페이지로 이동 불가각 페이지로 이동할 수 있는 side bar, nav bar 제공✅ 학습페이지올라온 게시물을 학습할 수 있는 페이지북마크 기능을 통해 마음에 드는 카드를 저장애니매이션 기능 추가로 사용자 경험 개선✅ 퀴즈페이지올라온 게시물에 대해 퀴즈를 풀어볼 수 있는 페이지맞은문제, 틀린문제를 실시간으로 알려주는 기능퀴즈 완.. 2025. 1. 2. [React] Day_72 데일리 정리 2024의 마지막 내용은 최종 플젝 시작 전, 폴더구조 정하기...바로 가볼깝쇼? (후딱 쓰고 잘거임) 챌린지반 강의정리 - 프로젝트 구조 효율적으로 조직하기 (Next.JS)으아아아아 너무 어려워요 Next.js 폴더 구조의 중요성 - 유지보수성 : 체계적인 구조는 코드가 복잡해질수록 유지보수가 쉬워진다.- 협업 효율성 : 팀원 간 작업 분배가 명확 + 코드 탐색 빠르게 Ok!- 재사용성 및 확장성 : 공통 컴포넌트, 기능별 파일 분리 → 프로젝트 확장 시 충돌을 방지 Next.js 폴더 구조 및 라우팅 규칙app/├─ home/│ ├─ page.tsx # /home│ ├─ HomeBanner.tsx # 라우트 안됨 (UI 컴포넌트)├─ about/│ ├─ page.. 2024. 12. 31. [React] Day_71 데일리 정리 최종 전 마지막 프로젝트 드디어 끝-!오늘은 조금 아쉬웠던 auth에 대해 정리해보고자 한다. 챌린지반 강의정리 - Supabase + Next.js 인증 및 데이터 관리 개요나중에 써먹어보고 싶어서 적어보는 Auth에 대한 정리! 디렉토리 구조 및 환경 변수 설정 1. 환경 변수 설정프로젝트 루트에 .env.local 파일 생성NEXT_PUBLIC_SUPABASE_URL=NEXT_PUBLIC_SUPABASE_ANON_KEY= 2. 추천 디렉토리 구조utils/ supabase/ client.ts # 클라이언트용 Supabase 클라이언트 server.ts # 서버용 Supabase 클라이언트 middleware.ts # 인증 상태 관리 미들웨어app/ login/ .. 2024. 12. 30. [React] Day_70 오늘의 정리 공휴일에도, 주말에도 쉬도때도없이 일했던 림졍..빠르게 작업하고 싶지만...골머리를 앓는 PR 인원에 불만을 느끼기 시작하는데... 다행(?)이도 팀원들과의 협의를 통해독자적인 행동은 하지 않을 수 있었다고...어디한번 시작해봅니다. 오늘의 TIL~ Git 정리 - PR 규칙 설정하기만들고 까먹었을 때~ 꺼내먹어요~ (ft. 자이언티) 다른사람들과 협업을 할 때...멋대로 병합해서 코드를 와장창하면 그거슨 협업이 아니겠지요 ^^?그래서 우리는 레포지토리 생성 후에 꼬옥- 브랜치에 PR 규칙을 정해줘야 한다는거~바꾸면서 다시 기억하려고하는거 맞습니다. 절대 맞아요. 자, 가이드라인 시작합니다. 1. GitHub 레포지토리 상단 탭 중 맨 오른쪽에 있는 'Settings'를 클릭한다. 2. 클릭 후, .. 2024. 12. 27. [React] Day_69 팀 프로젝트 작업 관련 트러블슈팅 (1) 모의면접보고...디자인 수정하고...PR 열심히 훑어보고...챌린지 테스트 보오고...오류난거 어떻게 할지 찾아보니.. 시간 다 가버렸죠?빠아르게 뜨라블슈띵 진행해보도록 할게요?레츠고. Layout - 말도 많고 탈도 많았던 hydration error 해결기 문제 상황 src/app에 위치한 전역으로 뿌려주는 layout.tsx에SideNav와 HeadNav라는 컴포넌트를 넣어 페이지를 구성하던 중...해당 컴포넌트가 필요없는 auth 관련 페이지에서 렌더링되는 이슈가 발생했다.. 그래서 auth 폴더 내부에 layout 따로, 컴포넌트가 들어갈 layout인 (dashboard)라는 폴더를 생성하여내부에 layout.tsx를 생성하여 렌더링을 하게끔 구조를 수정한 림졍, 그러나 큰 문제는 따로 .. 2024. 12. 26. 이전 1 2 3 4 5 ··· 14 다음
