본문 바로가기

분류 전체보기84

[React] Day_59 데일리 정리 챌린지 방탈출, 당당하게 실패!문제해결 과정에서 .next 문제로 404발생!4주차 과제.. 하고 잘 수 있을까? 어헝헝일단 강의 정리 후다닥 할게욧   Next.js 강의 정리 - 렌더링 패턴과 Next.js 기능 활용라우팅의 종류는 생각보다 많다! ㅇ0ㅇ   서버 컴포넌트/ 클라이언트 컴포넌트app 폴더 하위의 모든 컴포넌트 = 서버 컴포넌트가 디폴트!  서버 컴포넌트- 서버에서 실행되는 컴포넌트서버에서 실행된다? → 해당 컴포넌트의 로직이 서버(Node.js 환경)에 처리 [실행 환경 테스트] 1. console.log 확인// src/app/page.tsx// 결과: 터미널에 console.log 출력.export default function Home() { console.log("여기는 어.. 2024. 12. 11.
[React] Day_58 데일리 정리 3주차 갑자기 라이브러리 이슈로 안되어가지고이게뭐지 하면서 2시간 냅다 시간 소비했더니..너덜너덜해진 림졍.오늘도 강의정리 빠르게 가보겠습니다.가시죠 ㅇㅅㅇ)/   Next.js 강의 정리 - Next.js 소개 및 활용 가이드이젠, Next.js의 시대야.  Next.jsReact의 기능을 확장한 웹을 위한 React 프레임워크SSR, 라우팅, 최적화 등 많은 개발자 친화적인 기능을 제공→ 고품질, 고성능 웹 애플리케이션 개발에 용이  Next.js = 고품질?  1. 성능(Performance)SSR(Server-Side Rendering) 및 SSG(Static Site Generation) 지원 → 초기 로드 시간 감소코드 스플리팅, 이미지 최적화 등 런타임 성능 향상 2. SEO(Search E.. 2024. 12. 10.
[React] Day_57 데일리 정리 롤알못은 과제발제듣고아... 게임... 아하하.... (오열ing)강의 호도독 듣고 빠르게 작업해보도록 하죠.레고.  Next.js 강의 정리 - React(리액트)와 TypeScript (타입스크립트)반갑다, 따입스끄립뜨.   TypeScript (타입스크립트)자바스크립트의 모든 기능을 포함한 상위 집합 언어추가로 정적 타입 시스템을 제공 → 코드의 안정성 향상 및 런타임 오류를 줄이는 데 도움 cf. 정적 타입 시스템이란?정적 타입: 코드 작성 시 변수와 표현식의 타입을 컴파일 타임에 확인하여 오류를 사전에 방지.타입 시스템은 데이터의 형태와 구조를 이해하고 해석하는 규칙 집합입니다. +) TypeScript 프로젝트 설정npm create vite@latest my-react-ts-app -- --.. 2024. 12. 9.
[React] Day_56 데일리 정리 ..TIL 파일 날라가서...결국 나중에서야 다시 정리한 me의 TIL..작성.. 해야겠지?가보자고.  챌린지반 강의정리 - 퍼널(Funnel) 패턴 알아보기깔끔한 UX 설계하기 (like 토스!)   퍼널 패턴(Funnel Pattern)퍼널(Funnel) = 깔대기사용자가 단계를 거쳐 정보를 입력하도록 설계한 UI 패턴각 단계에서 하나의 정보를 입력 후, 다음 단계로 자연스럽게 이동하는 구조UI/UX와 코드 품질 모두를 향상시킬 수 있는 강력한 설계 방식  - 특징단계별 UI 분리: 한 번에 하나의 정보만 입력시각적인 단순함: 간결한 화면으로 사용자 스트레스 감소유연한 데이터 관리: 각 단계의 데이터를 독립적으로 처리 - 기존 방식(다단계 폼)의 문제점흩어진 페이지 흐름: 각 단계가 별도의 컴포넌트에.. 2024. 12. 6.
[React] Day_55 팀 프로젝트 후기 말도많고 탈도많은(?) 아웃소싱 뿌로작뜨.그래도 계획했던 기능구현들은 다 해따고 한돠..그래서 말인데 나는 내 UI가 고쳐진... 친구를 PR하고 싶다...(PR 하게 해주라. . . 나 진짜 CSS만 고쳤단 말임 ㅠ)여튼 오늘은 프로젝트 정리로 TIL를 작성하겠읍니다. 가보자고.(이미지 하나하나가 오늘만큼은 쌈뽕하고 좋으니 많이들 퍼가3)  팀 프로젝트 - 아웃소싱 프로젝트 ( Mountain-Due Project)줄여서 마듀. 다들 아시죠? ^-^)b  아웃소싱 프로젝트 (1) - 프로젝트 개요추운 날씨에도 실내에서 즐길 수 있는 클라이밍!하지만 관련 정보를 찾기 어렵다는 점에 착안하여,“Mountain-Due (줄여서 마-듀.)”라는 클라이밍 정보 플랫폼을 제작했다  목표사용자 위치 기반으로 주변 .. 2024. 12. 5.
[React] Day_54 팀 프로젝트 작업 관련 트러블슈팅 (2) 오늘 한거 암것도 없는데... 왜 나는 지친거지?여튼 오늘도 정리 좀 할게요레츠고 Mypage - 마이페이지 이미지 URL 생성 및 닉네임 업데이트 오류 관련 뜨라블 슈팅 문제 상황 1. 이미지 URL 생성 오류- Supabase를 통해 프로필 이미지 업로드 후, Auth 테이블에 업데이트하려고 했지만..   잘못된 테이블 이름을 사용하여 오류가 발생 기존 코드// MyPage.jsx 내부 코오드 발췌 const { error } = await supabase .from("images") // 잘못된 테이블 이름 .update({ img_url: newImageUrl }) .eq("id", userId);  2. 닉네임 업데이트 핸들러 오류- 닉네임 업데이트 핸들러에서 data를 제대로 처리하지 .. 2024. 12. 4.

티스토리툴바