전체 글83 [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. [React] Day_68 데일리 정리 PR... 하고나니 갑자기 불어난 내.. 과제덜...마이페이지.. 우당탕.. 해야겠다 아하하하하 ^-^;;;오늘도 챌린지 정리 가보자구yole go. 챌린지반 강의정리 - 패키지매니저 & 모노레포npm, yarn 말고 더 있다구요???? 패키지 매니저 소프트웨어 개발에서 라이브러리(패키지)를 설치, 업데이트, 관리하는 도구 - 필요한 이유의존성 관리 – 프로젝트에서 필요한 외부 라이브러리를 쉽게 설치 및 관리 가능버전 제어 – 특정 라이브러리 버전을 고정, 팀원 모두가 동일한 환경에서 개발 가능프로젝트 초기화 – 빠르게 필요한 환경을 구성 및 복잡한 설치 과정을 단순화 JS 패키지 매니저의 역사 - 주요 패키지 매니저npm (Node Package Manager)yarnPnpm (오, 이건 처음들.. 2024. 12. 24. [React] Day_67 데일리 정리 오늘은 수빠베이스랑 싸우는날~.~내일은.. 이브인데.. 코딩 하겠지? ㅠㅡㅠTIL 가보자구요 ㅠㅡㅠ 어헝헝 챌린지반 강의정리 - Progressive Web Applications (PWA) 가이드 리액뚜, 드디어 어플로도 넘어가지다(?) PWA - 등장 배경 앱을 설치하는 과정이 번거롭다는 사용자들의 피로감을 해소하고자 Google이 2015년에 발표한 기술앱 설치 부담을 줄이고 웹의 보편성과 접근성을 극대화하기 위해 탄생기존 모바일 웹과 네이티브 앱의 단점(속도, 설치 과정, 유지보수 비용)을 보완함! 특성기존 웹사이트네이티브 앱PWA설치 필요 여부필요 없음필요필요 없음플랫폼 의존성없음있음없음오프라인 지원제한적가능가능배포 방법즉시 배포 가능앱스토어 필요즉시 배포 가능푸시 알림불가가능가능 .. 2024. 12. 23. [React] Day_66 데일리 정리 역대급 화력의 조원들과 함께하는 이번 팀플..아이디어부터 심상치않다.. (이거 맞는거지 얘들아?)오늘 한 일은 정말 기획밖에 없으므로.. 이거라도 정리해보고자 한다. 심화 프로젝트 기획정리 - 듀오딩코 프로젝트니 실력에 잠이 wa-yo? 프로젝트에 대한 간단한(?) 소개 우리가 이번에 만들어볼 프로젝트는 바아로..낱말카드로 코딩내용을 쉽게 배울 수 있는 사이트, 듀오딩코이다.이름의 유래는... 알다시피... 듀오링고에 코딩을 뒤집에서 만들었고사이트 레퍼런스는 Quizlet(퀴즐렛)을 따라갔다. 퀴즐렛에 대해 간단하게 설명하자면..낱말카드를 사용자가 직접 만들어서 학습과 함께 퀴즈까지 가능한 사이트로,미국에서는 유명한데, 한국에서는 그렇게 유명하지도 않은 것 같다. 내가 모르기 때문이ㅈ최종 들어가기 전의.. 2024. 12. 20. [React] Day_65 데일리 정리 과제 제출 새벽에 끝-!오늘은 일찍 자기위해서 TIL 빠르게 정리해따 히히 ^0^바아로 시작해보도록 하죠. 레고. 챌린지반 강의정리 - Next.js 심화: 기능 구현과 문제 해결으아아 어지러워요오 @.@.... React vs Next.js (= 단순한 UI 설계 도구 vs 전체 애플리케이션 개발 환경을 제공하는 프레임워크) - ReactUI 구성 요소를 작성하기 위한 라이브러리컴포넌트 기반 설계를 통해 재사용 가능한 UI를 쉽게 구현 가능상태 관리, 라우팅, 빌드 최적화 등의 기능은 별도의 라이브러리나 설정이 필요함 (한계점) - Next.jsReact를 기반으로 하는 프레임워크 [Next.js의 특징]파일 기반 라우팅: 폴더 구조에 따라 자동으로 라우트를 생성SSR/SSG/ISR 지원: 다양.. 2024. 12. 19. 이전 1 2 3 4 5 ··· 10 다음
