📌 트러블 슈팅 문제 확인# ios 시뮬레이터 실행yarn ios 시뮬레이터를 실행시켜서 metro를 이용해 앱을 실행하려고 했더니 위 사진에서 보이는 No bundle URL present 에러메세지가 나타났습니다.  이 오류는 React Native에서 No bundle URL present 메시지로 나타는 것으로, 주로 앱이 번들 서버를 찾지 못하거나 .jsbundle 파일이 포함되지 않아 발생합니다. 이를 해결하기 위해서 다음과 같은 시도를 해보았습니다.  📌 해결 방법1. 번들 서버 실행 확인앱을 실행하기 전에 터미널에서 yarn start 명령어로 Metro 번들러를 실행합니다. 저는 yarn을 사용중이어서 이와 같은 명령어를 사용하였는데 아래와 같이 본인 세팅에 맞춰서 사용해주세요.# 본..

📌 AJAX의 출현 배경초기 웹은 정적인 HTML 페이지로 구성되어 있어, 사용자가 정보를 요청할 때마다 전체 페이지를 새로고침해야 했습니다. 이로 인해 사용자 경험(UX)은 제한적이고, 웹 애플리케이션의 상호작용이 불편했습니다. AJAX는 이러한 문제를 해결하기 위해 등장했습니다.    📌 AJAX (Asynchronous Javascript and XML) 란 ?AJAX (Asynchronous JavaScript and XML)는 웹 페이지가 전체를 새로 고침하지 않고 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술입니다. 이를 통해 웹 애플리케이션은 서버에 요청을 보내고, 서버에서 응답을 받은 후, 그 데이터를 페이지에 동적으로 반영할 수 있습니다.   📌 동기방식 vs 비동기 방..

1. 눈누 사이트 접속https://noonnu.cc 눈누상업용 무료 한글 폰트 사이트noonnu.cc폰트 파일을 다운받기 위해 눈누 사이트에 접속합니다.  2. 폰트 선택하기다운로드 페이지로 이동 > 글꼴 다운로드 우리가 필요한 것은 .ttf파일이므로 글꼴 다운로드 시에 .ttf파일을 설치해주시면 됩니다. 3.  프로젝트에 폰트파일 등록하기3-1. react-native.config.js 파일 생성module.exports = { assets: ['./assets/fonts'], };3-2에서 추가할 폰트 파일이 있는 위치로 경로를 설정합니다.  3-2.  폰트파일 추가프로젝트 최상위에 이와 같이 폴더를 생성합니다.assets > fonts > 다운로드받은 파일 추가  3-3. App.js에 폰트 d..

현재 사용하고 있는 버전- react : 18.1.0- react-native : 0.70.15  다양한 내비게이터를 사용하고 싶어서 이와 같이 라이브러리를 설치하였습니다.yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated 성공적으로 설치되었고 아래와 같이 작성해주었습니다.   cd iospod install pod install하자마자 사진과 같은 에러가 발생했습니다. [Reanimated] Unsupported React Native version. Please use 0.71 or newer..🚫 자세히 보니 react-native버전과 새로 설치한 react-native-reanimated의 ..

📌 SPA란 ? (single page application)SPA는 하나의 페이지로 만들어진 어플리케이션을 의미합니다. html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax 통신을 통해서 처리합니다. 브라우저에서 사용자가 상호작용하면 필요한 부분만 업데이트해서 처리하게 됩니다. 또한 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. 하지만 SPA에도 단점이 존재합니다 🥹앱의 규모가 커지면 JS파일도 너무 커져서 로딩이 오래 걸리게 됩니다. 그로 인해 브라우저에서 렌더링이 완료되기까지 빈 화면이 나오게 됩니다.따라서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요)   📌 라우팅이란 ?라우팅은 브라우저..

📌 React 스타일링⓵ 태그에 직접 디자인 적용하기스타일 속성 중에 -로 연결된 속성은 카멜표기법으로 대체하여 적어줍니다.안녕하세요? ⓶ 일반 css파일에 디자인 후 import 기능을 통해 연결하기📍--- App.css .app-title { border: 1px solid #777; color: red;}-------------------------------------------------------📍--- App.jsimport './App.css'; //--- css파일 importfunction App() { css파일로 디자인하기 }export default App; ⓷ css 모듈 사용하기파일은 '컴포넌트명.module.css' 형식으로..

📌 훅(Hook)이란 ?리액트 훅은 React 16.8버전에 새로 추가된 기능으로 함수형 컴포넌트에서 사용되는 기술을 의미하며 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능입니다. 예시로는 useState, useEffect가 있습니다.   📌 훅의 규칙Hook은 반복문, 조건문, 중첩된 함수 내에서 실행하면 안되고 최상위 scope에서만 호출해야합니다.  이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장받을 수 있습니다. 또한 함수형 컴포넌트에서만 Hook을 호출해야합니다.   📌 반드시 알아야 하는 기본 훅✔︎ useState(초기값)배열을 반환하는 함수이며 첫번째 배열 요소에는 현재값을, 두번째 배열 요소에는 상태를 변경..

📌 Map 함수목록 요소들을 반복 처리할 때에는 map 함수를 사용하고, 반복 컴포넌트에는 반드시 key props를 전달해야합니다. ✔︎ key란 ? map함수를 호출할 때 콜백함수의 인자로 넘어오는 index값으로 컴포넌트를 렌더링 하였을 때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 사용하는 키워드입니다. 만약 key가 지정되지 않았다면 가상 DOM을 순차적으로 비교하면서 변경사항을 감지하기 때문에 key가 없을때보다 속도가 느립니다.  아래는 키가 설정되지 않았을 때 나타나는 console창입니다.key값을 지정하지 않는다고해서 화면이 렌더링되지 않는 것은 아닙니다. 하지만 콘솔창에 이와 같이 유니크한 key prop값을 입력하라고 경고문을 남겨주네요.자 그러면 key를 설정하러 가봅시다! ..

📌 이벤트 규칙이벤트의 이름은 모두 카멜 표기법으로 표현됩니다. ( onkeyup → onKeyUp )이벤트를 전달할 때에는 { 함수 } 형태로 사용합니다.   📌 input값 핸들링 해보기 1. input의 값이 변화되는 이벤트(onChange)를 연결합니다.2. 이벤트 안 첫번째 매개변수에서 event객체를 활용합니다. (e.target.속성값 활용가능)3. setter 함수를 이용해서 state를 변경합니다4. value 속성을 이용해서 state동기화 처리합니다. state를 통해 input의 value를 제어하지 않으면 에러가 발생할 수 있습니다.따라서, input에 value={상태값}을 처리해주어야합니다. ⓵ useState를 여러개로 관리하기let [name, setName] = use..