이전에 만들어둔 오늘 뭐 먹지? 사이트를 계속 필터추가해서 리뉴얼 해야지~~ 해야지~~ 하다가이제서야 UI를 어느정도 잡아서 리뉴얼을 시작해볼까 한다.현재 소스에 리뉴얼 하려 했는데 최근 React공식문서에서도 CRA보다는 Vite나 Next로의 이전을 권장한다는 내용이 있어,Next를 진행하려다 아래와 같은 이유로 Vite로 마이그레이션 해보기로 하였다. SSR(검색엔진최적화)·동적 라우팅 필요 없음 -> 원페이지 사이트임작은~중간 규모 앱(스타트업, 개인 서비스 등)간결한 개발 환경, 빠른 빌드/런타임 중시할 때 Vite란?Vite는 네이티브 ESM(ES Modules)을 기반으로 빠른 개발 환경을 제공하는 차세대 빌드 툴이다. CRA(Create React App)보다 빠른 시작 속도와 HMR(..

패스트캠퍼스에서 React Native를 활용한 빠르고 완성도 높은 앱 개발 강의를 듣던중 ScrollView와 FlatList의 차이가 조금 아리쏭해서공식 문서를 기준으로 두 컴포넌트의 차이점과 사용 시점에 대해 정리해봤다. ScrollView란?ScrollView는 자식 컴포넌트를 한 번에 모두 렌더링하는 스크롤 컨테이너다.콘텐츠가 많으면 메모리 사용량이 늘어나 성능 저하 발생스크롤 가능한 정적 화면에 적합 (예: 약관, 설정 화면)ScrollView 주요 Props속성타입설명horizontalboolean가로 방향 스크롤 여부 (기본값: false)showsVerticalScrollIndicatorboolean세로 스크롤바를 표시할지 여부contentContainerStyleViewStyle스크롤 ..

*현재 expo로 공부중이라 예문 구조는 기본 expo cli의 최신버전을 바탕으로 작성하였습니다 무작정 코딩하며 공부하고있다보니 React Native로 화면 전환 구조를 어떻게 짜야 할 지 모르겠어서 정리해봤다. 특히 expo-router를 쓰면 기존 react-navigation이랑 방식이 달라서 처음엔 헷갈릴 수도 있다.그래서 이번 글에서는 Stack, Tabs, Layout, 그리고 expo-router 기준으로내비게이션 구조를 어떻게 설계하면 좋을지 간단하게 정리해봤다. Navigation 이란?!화면을 이동하는 구조를 말한다.웹으로 치면 링크 클릭해서 다른 페이지로 가는 거랑 비슷하고,모바일 앱에서는 Stack이나 Tabs, Drawer 같은 방식으로 화면을 전환하게 된다. React Na..

요즘 React Native를 공부하고있는데 늘 어려운건 세팅이기 때무네미래의 내가 헷갈리지 않기 위해 정리한 expo CLI 기반 개발 환경 세팅법과 최신(2025.06기준) 디렉토리 구조 설명을 공유합니다.📌 이 글은 expo-router v3 기준으로 작성되었습니다.🔧 개발 환경 정보항목내용개발 도구React Native + expo CLI라우팅 expo-router V3코드 편집기VSCode테스트Chrome(web), Ios 시뮬레이터, Aos 시뮬레이터 Expo CLI 설치 및 프로젝트 생성expo CLI 설치npm install -g expo-cli프로젝트 생성npx create-expo-app myProject-Name create-expo-app은 최신 expo-router 구조를 포함..

ReactNative를활용한빠르고완성도높은앱개발with21개프로젝트초격차패키지Online. 강좌를 공부한 내용의 요약입니다.View and MobileView → 모바일 개발에서 UI의 기본 구성요소화면에 표시되는 모든(텍스트, 이미지, 버튼 등) 요소는 뷰의 한 종류뷰는 다른 뷰를 포함 할 수 있음Core Components아래는 core components의 핵심 구성 요소 이다.React NativeAOS ViewIOS ViewWEB AnalogDescriptionA non-scrolling Flexbox, 스타일, 일부 터치 처리 및 접근성 컨트롤을 지원하는 레이아웃을 지원하는 컨테이너텍스트 문자열을 표시, 스타일 지정 및 중첩하고 터치 이벤트 처리다양한 유형의 이미지를 표시여러 구성 요소와 뷰를..

React Native를 활용한 빠르고 완성도 높은 앱 개발 with 21개 프로젝트 초격차 패키지 Online. 강좌를 공부한 내용의 요약입니다.React Native란?cross platform 개발 가능페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크js 하나로 aos, iso, web 대응 가능앱 개발 및 배포 속도 up유지보수를 한 코드로 관리 가능 → 생산성 up동작 원리Bridge자바스크립트 런타임과 네이티브 간의 상호작용을 담당하는 React Native 의 핵심 기능자바스크립트로 작성된 코드를 native코드로 전달native쪽에서 이벤트 발생 시, Bridge를 통해 자바스크립트 엔진으로 전달장점하나의 코드로 관리, 러닝커브 높은 React 사용코드 push로 빠른 업데이트심사..

발생 현상 마우스 오버관련 이벤트가 추가된 를 모바일에서 클릭시 바로 넘어가지 않고 두번 클릭해야 링크되는 현상 발생 PC는 전현 문제 없음 발생 원인 Touch 디바이스에서는 첫 클릭때 onMouseEnter, onMouseOver를 먼저 인식함 터치를 쓰기 위해 이벤트를 옮기거나 없애야함 수정 방법 어찌됐던 PC에서는 마우스 이벤트가 필요한 상황이라 찾아보던 중 비슷한 사례를 발견 react-device-detect를 이용하여 접속 기기가 터치식인지 확인 후 마우스 이벤트에 삼항 연산으로 터치식인 경우 false를 돌려보내 인식하지 못하게 해줌으로 해결 /* 수정 전 */ /* 수정 후 */ import { isMobile, isTablet } from 'react-device-detect'; fa..

노마드 코더의 니콜라스 Next.js 기초 강의를 수강하며 정리한 내용입니다. Style 관련 CSS Modules next.js에서 style을 이용할 때 모듈로서 사용한다. css 파일 생성 시, filename.module.css 로 생성 하여 사용할 파일 내에 import 후 사용한다. 단 사용되는 파일마다 import를 해주어야 하고, 사용하는 태그마다 클래스명을 기억 해야 하는 등의 단점은 존재한다. /* NavBar.module.css */ .nav { background-color : tomato; } .a { color : white; text-decoration : none; } /* NavBar.js */ import styles from "./NavBar.module.css" imp..

Next.js를 사용하는 이유? react공식 문서에 따르면 react는 js기반으로 만들어진 UI를 담당하는 라이브러리이다. 굳이 React를 잘 만들어 놓고 Next.js를 사용하는 이유는 무엇일까? React는 CSR방식으로 사용자에게 화면을 보여준다. Next.js는 pre-reloading 방식으로 화면을 그려 SSR 방식을 이용해 사용자에게 화면을 보여준다. 사용자가 화면을 변화하였을 때 브라우저는 빈 html을 받고 그 위에 그림을 그려나간다. 그렇게되면 사용자는 다 그리기 전까지 화면 하얀 화면을 보고 있어야 하는 단점이 생긴다. SSR 방식은 서버가 html을 미리 로드하여 이미 랜더링된 화면을 브라우저에게 전달하므로 사용자는 흰 화면을 보지 않고 바뀐 화면을 만날 수 있다. 미리 로드된..