반응형 FrontEnd26 플러터 앱 로고와 이름 변경하는 방법 Flutter 앱의 로고와 이름을 변경한 과정을 순서대로 자세히 설명해드리겠습니다. 앱 아이콘(로고) 변경 과정:pubspec.yaml 파일에서 flutter_launcher_icons 설정을 확인했습니다.이미지 파일이 assets/images/app_icon_v1.png에 위치해 있는 것을 확인했습니다.다음 명령어를 실행하여 아이콘을 생성했습니다:flutter pub get && flutter pub run flutter_launcher_icons이 명령어는 Android와 iOS 플랫폼 모두에 대해 새로운 아이콘을 생성합니다.앱 이름 변경 과정:android/app/src/main/AndroidManifest.xml 파일을 수정했습니다. 태그 내의 android:label 값을 "FCM_Lunche.. 2025. 5. 14. React Router 중첩 라우팅 실습 React Router 공식 템플릿은 타입스크립트를 기반으로 파일 중심의 라우팅 구성을 제공합니다. 이 글에서는 /about 및 /contact 페이지를 새로 추가하고, 이를 중첩 라우팅 구조로 확장하는 과정을 설명합니다.1. 새 라우트 컴포넌트 생성// app/routes/about.tsxexport default function About() { return 소개 페이지입니다;}// app/routes/contact.tsxexport default function Contact() { return 문의 페이지입니다;}2. routes.ts 설정 확장path() 함수는 실험적 모듈에서 제공되지 않기 때문에 객체 형식으로 작성합니다.import { type RouteConfig, index } fro.. 2025. 4. 25. React Router 공식 템플릿에서 routes.ts가 다르게 보이는 이유 React Router를 학습하며 기본적으로 createBrowserRouter를 사용하는 방식에 익숙한 분들은, 공식 템플릿에서 routes.ts가 다르게 보이는 점에 당황할 수 있습니다.1. 템플릿에서 사용된 코드 예시import { type RouteConfig, index } from "@react-router/dev/routes";export default [index("routes/home.tsx")] satisfies RouteConfig;이 구성은 React Router 팀에서 실험적으로 제공하는 파일 기반 라우팅 설정을 사용하고 있는 방식입니다.2. @react-router/dev/routes란?@react-router/dev/routes는 라우팅을 파일 경로 기반으로 자동 추론할 수 있.. 2025. 4. 24. React 프로젝트에 라우팅 적용하기: React Router v7 기본 사용법 React에서 페이지 이동과 라우팅을 구현하려면 React Router를 사용하는 것이 일반적입니다. 이 글에서는 React Router v7을 기반으로 간단한 라우팅 구조를 만드는 방법을 소개합니다.1. Vite로 React 프로젝트 생성npm create vite@latest my-router-app -- --template reactcd my-router-appnpm install2. React Router 설치npm install react-router-dom@latest3. 페이지 컴포넌트 만들기아래와 같이 두 개의 페이지 컴포넌트를 만듭니다.// src/pages/Home.jsxexport default function Home() { return 홈 페이지입니다}// src/pages/Ab.. 2025. 4. 23. React Router v7 입문부터 실전까지: Next.js 스타일로 배우는 단계별 가이드 1단계: React 프로젝트 및 라우팅 기본프로젝트 생성: create-react-app 또는 vite로 SPA 프로젝트 시작React Router 설치: npm install react-router-dom@^7기본 라우팅 구성: BrowserRouter, Routes, Route를 활용페이지 컴포넌트 구성: /pages/Home.jsx, /pages/About.jsx 형식2단계: 중첩 라우팅과 레이아웃createBrowserRouter 사용으로 중첩 라우트 구성Outlet 컴포넌트로 자식 라우트 삽입Header, Footer 등 공통 레이아웃 구성3단계: 데이터 로딩loader: 라우팅 전에 데이터를 불러옴useLoaderData: 페이지 내부에서 데이터 접근Suspense: 비동기 로딩 처리4단계: .. 2025. 4. 23. Next.js 공통 레이아웃 구성하기: Header, Footer 분리와 적용 1. 공통 레이아웃이 필요한 이유Next.js 프로젝트에서 페이지마다 반복되는 UI(Header, Footer 등)가 있다면, 이를 Layout 컴포넌트로 분리해 재사용할 수 있습니다.이 방식은 유지보수성과 개발 효율성을 크게 향상시켜줍니다.2. 폴더 구조 설계/pages _app.js index.js about.js/components Layout.js Header.js Footer.js3. Layout 컴포넌트 생성// components/Layout.jsimport Header from './Header';import Footer from './Footer';export default function Layout({ children }) { return ( {.. 2025. 4. 21. 이전 1 2 3 4 5 다음 반응형