전체 글85 [React] Day_63 개인 프로젝트 작업 뜨라블슈띵 (2) 이제 짜잘한 오류들이랑.. 디자인만 손보면 과제도 끝난다..!그런의미로 오늘도 적어보는 뜨라블슈팅..레쯔고 뜨라블슈띵 (1) - Next.js Image 작동 오류 문제 Image 태그를 사용해서, 외부 URL에서 이미지를 가져오려 했지만,이미지가 로드되지 않아 화면에 표시가 되지 않는 오류가 발생하였다..!! 원인 Next.js는 보안상 허용되지 않은 외부 도메인의 이미지를 불러올 수 없으므로외부 이미지 호스트를 명시적으로 허용해줘야 한다..! 해결 방법 next.config.js 파일에 remotePatterns 사용 → 허용할 이미지 도메인 명시/** @type {import('next').NextConfig} */const nextConfig = { images: { remotePatte.. 2024. 12. 17. [React] Day_62 개인 프로젝트 작업 뜨라블슈띵 (1) 말도 많고 탈도많은 Next.js..뜨라블슈띵도 하나하나씩 적어보고자 합니둥-!가 보 도 록 하 자 gu-yo. 뜨라블 슈팅 - 파일 이름 대소문자 충돌 문제 문제 상황 .ts와 .tsx 이것저것 쓰다보니... 내다버린 대소문자 구분...막바지에 하다보니 생각나 버렸죠..?그래서 다시 으아아아아 하면서 바꿨는데...띠용... 왠걸 뻘건줄이 뜨더니 위의 이미지처럼 대소문자만 다르다며 인정을 안해준다는 것이었다...!!!! 알고보니 내가 사용하는 맥북과 같은.. macOS의 파일 시스템은기본적으로.. 대소문자를 구분하지 않는돠....!!!!! 그래서 시뻘건 에러로 충돌을 보여준다고... ㅠㅡㅠ 원인 분석 우선 원인을 3가지로 나누어 생각해보았다. 대소문자 혼용 파일 이름이 대소문자를 혼용해버리는.. 2024. 12. 16. [React] Day_61 데일리 정리 오늘 분명 이것저것 뚱땅거렸는데갑자기 수업듣고 왔더니 왜 하루가 다 지나갔지..?여튼 오늘까지 강의정리하고...다음주는 트러블 슈팅으로 우다다다 쓰겠습니다요^-^)v! Next.js 강의 정리 - 고오급 개발배포 그리고 최적화 Shadcn/UI Vercel의 Shadcn이 만든 UI 도구Radix UI(접근성에 최적화된 React 컴포넌트)와 Tailwind CSS(유틸리티 기반 CSS 프레임워크)이 기반임디자인 시스템을 구축하려는 개발자에게 직관적 컴포넌트 라이브러리 제공 - 설치 방법npx shadcn-ui@latest init Supabase Firebase와 유사한 오픈 소스 백엔드 플랫폼, BaaS(Backend-as-a-Service) 제공서버 관리와 같은 복잡한 작업 없이 개발 집중 가.. 2024. 12. 13. [React] Day_60 데일리 정리 오늘은 api랑 싸우는날 ^-^..그래도 리액트때보단 이해는 빠르다(?) 어이없음;여튼 어제 저에게 고통을 준... 4주차 강의 정리 빠르게 가볼게요.레츠고 Next.js 강의 정리 - Next.js 고급 기능과 서드파티 라이브러리실은 아직도 이해 못했움. Next.js Caching 빌드 시점 및 요청 시점에서 캐싱 수행Full Route Cache : 빌드 시 HTML을 생성 및 캐싱 → 빠르게 제공Data Cache : fetch를 이용한 데이터 요청 간 캐싱Request Memoization : 동일한 데이터 요청을 메모이제이션하여 중복 네트워크 요청 방지 - Full Route Cacheconst res = await fetch('https://api.example.com/data', { .. 2024. 12. 12. [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. 이전 1 2 3 4 5 6 ··· 10 다음
