eatthefrog

React 컴포넌트가 실행되는 과정React의 컴포넌트는 크게 두 가지 단계로 실행된다.초기 렌더링 (Mount)컴포넌트가 처음 화면에 나타날 때 실행됨.useState로 선언된 상태가 초기값을 가짐.JSX가 화면에 렌더링됨.useEffect가 실행됨 (조건에 따라 실행될 수도 있고, 실행되지 않을 수도 있음).리렌더링 (Update)상태(state)가 변경될 때마다 컴포넌트가 다시 실행됨. 새로운 state 값을 기반으로 컴포넌트가 다시 실행됨.다시 JSX가 화면에 렌더링됨. : 화면이 바뀌어야 할 때. 전체 페이지가 아닌 필요한 부분만 업데이트한다.useEffect가 실행됨 (조건에 따라 실행될 수도 있고, 실행되지 않을 수도 있음). 리레더링useState로 state를 초기화하면,해당 상태가변할때..

1️⃣ import { useState } from "react";* 설명: useState는 React의 훅중 하나로, 컴포넌트에서 상태(state)를 관리 할 수 있도록 해준다.* 동작 방식: useState를 사용하면서 변수처럼 상태를 저장할 수 있고, 이 값이 변경될 때 리액트가 자동으로 리렌더링을 해준다.//react 예시코드import {useState} from "react";function Counter(){ cosnt [count, setCount] = useState(0); // 현재 상태값, 상태를 변경하는 함수, 초기값을 0으로 설정. return ( CountL {count{ setCount(count + 1)]>Increase ..

...2차시도 [문제 구체화]에 이어서👉🏻 expo에서 확인결과 Android build를 production으로 했다. 1️⃣ Production 빌드와 Expo Go의 충돌 이해하기eas build --profile production은 Standalone APK/ABB를 만들어서 배포용으로 최적화한다.이 프로덕션 빌드는 개발 서버(Metro 번들러)에 연결하지 않는다.대신, 번들 파일을 Android 프로젝트의 assets 폴더에 포함한다..그러나 expo start a는 Expo Go를 사용해 로컬 개발 서버에서 JavaScript 번들을 다운로드하려 한다.👉 결과: Production 빌드가 설치된 상태에서는 Expo Go와의 충돌로 "Reloading..."에서 멈춘다. ✨ Product..

1. React Native에서 WebView 사용하기React Native에서는 react-native-webview 라이브러리를 사용해 웹 콘텐츠를 쉽게 렌더링할 수 있다.👉 이렇게 하면 앱에서 웹 게시판을 바로 표시할 수 있고, 앱의 무거운 업데이트 없이 꾸준히 콘텐츠를 업데이트할 수 있어서 효율적이다.npm install react-native-webview import React from 'react';import { View } from 'react-native';import { WebView } from 'react-native-webview';export default function NoticeBoard() { return ( https://your-website.co..

1차시도: [ npx expo start a 명령어의 동작 원리 ]✅ 1. npx expo start — Expo 개발 서버 실행npx → 로컬에 설치된 npm 패키지를 실행하거나, 없으면 자동으로 다운로드해서 실행한다.expo start → Expo 개발 서버(Metro bundler)를 시작한다.Expo 프로젝트의 App.js (또는 index.js)를 시작 파일로 삼아 자바스크립트를 번들링한다.개발 서버는 보통 localhost:19000 (Metro 번들러)와 localhost:19001 (WebSocket 연결)에 열립니다.✅ 2. a — 안드로이드 에뮬레이터 실행a 플래그는 Android 에뮬레이터에서 앱을 열라는 명령어다.Expo는 adb (Android Debug Bridge)를 사용해서 ..

🔍 1차: 예상한 동작과 실제 동작을 비교하여, 문제 범위 좁히기기대한 결과: 3D 오브젝트가 지도 위에 표시됨실제 결과: 3D 오브젝트가 표시되지 않음 🔍 2차: 주요 함수들 디버깅 1) threeContainer가 map.getContainer() 안에 추가되었는지 확인 2) renderer가 정상적으로 생성되는지 확인 3) animate() 함수가 실행되는지 확인 4) camera와 scene이 제대로 설정되었는지 확인 🔍 3차: 함수는 정상 동작한다? => 렌더링 리스트 체크(1) 요소가 DOM에 추가되었는가? : Elements 탭 document.querySelector("canvas") 실행해 보고 null이 나오면 Three.js가 추가되지 않은 것.(2) Three...

1. 기본적인 구조 파악: 오류 메시지는 npm list 명령어의 결과로 현재 설치된 패키지와 종속성을 나타내는 리스트를 보여준다. 패키지명@버전 설치 경로 ㄴ 의존성 패키지@types/leaflet, leaflet, react, react-dom, react-leaflet 등의 패키지가 설치됨.react-leaflet@5.0.0이 @react-leaflet/core@3.0.0을 사용 중.react@18.3.1이 설치되어 있지만, invalid: "^19.0.0"이라는 경고가 뜸 2. 주요 오류 문구 분석 🔎무슨 뜻? deduped: 중복 설치를 방지하기 위해 같은 버전을 공유한다는 의미 invalid: 버전이 맞지 않다는 의미 예: react@18.3.1 invalid..

React Native사용을 위해 노드를 v16.16.0 버전으로 맞췄더니, vite실행시 노드 버전이 낮아서 오류가 발생했습니다.이럴때 사용할 수 있는게 nvm( Node Version Manager )입니다.  Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경으로, 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주어 서버 사이드 애플리케이션 개발을 가능하게 만든 플랫폼입니다. 프로젝트 실행을 위한 npm start 역시 node.js의 명령어 입니다. 프로젝트 별로 다른 Node.js버전을 사용해야 하면, 이를 수동으로 설치/제거하거나 가상 머신을 사용할 수 있지만, 이는 매우 번거러운 일 입니다. 하지만 nvm은 간단한 명령어로도 한개의..

map()함수는 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 반환한다. map()함수 특징 ✅ 키가 모든 자료형이 가능하다. ✅ 크기를 쉽게 얻을 수 있다. ✅  쉽게 반복할 수 있다. 👉🏻 map()은 배열의 요소를 새로운 배열로 변환할 때 사용한다.(불변성 유지) 👉🏻  데이터 변환, 특정 속성 추출, 포맷 변경 등의 작업에 사용된다. ⛔ map()은 항상 새 배열을 반환한다. 기존 배열을 변경하지 않는다. ⛔  map()에 전달된 함수는 배열의 모든 요소에 대해 한 번씩 호출된다. map 생김새task = new Map([['task', 'Code'],['date', 'today'][false, 'Start coding']]);배열 VS map// Arraycon..

실생활 예시: 학교 사물함 사물함에는 각각 고유한 번호(key)가 있고, 그 안에 학생들의 물건(value)이 들어있습니다. Map은 이러한 사물함 시스템과 비슷합니다. // Map 생성const locker = new Map();// 사물함에 물건 넣기 (set)locker.set('1번', '영희의 교과서');locker.set('2번', '철수의 체육복');// 사물함 확인하기 (get)console.log(locker.get('1번')); // '영희의 교과서'// 사물함에 물건이 있는지 확인 (has)console.log(locker.has('3번')); // false// 사물함 비우기 (delete)locker.delete('2번');// 전체 사물함 개수 확인 (size)console.lo..