서버 연결 오류 해결 방법 리액트 네이티브에서 개발을 진행하다보면 서버 연결 오류가 발생하는 경우가 있습니다. 이러한 오류는 대부분 네트워크 설정 문제로 인해 발생합니다. 아래는 서버 연결 오류를 해결하는 방법입니다. 먼저, 서버가 정상적으로 실행되고 있는지 확인해야 합니다. 서버가 실행되지 않은 상태에서 연결을 시도하면 오류가 발생합니다. 네트워크 설정을 확인하세요. 만약 Wi-Fi를 사용하고 있다면, Wi-Fi에 연결되어 있는지 확인해야 합니다. 만약 Wi-Fi가 연결되어 있지 않다면, Wi-Fi에 연결한 후 다시 시도해 보세요. 만약 같은 IP 대역대 내에 있다면, 같은 IP 대역대 내에서 서버에 연결할 수 있습니다. 이 경우, 서버를 실행할 때 IP 대역대를 지정하여 실행해야 합니다. 서버 주소를..
리액트 네이티브는 모바일 애플리케이션을 개발하기 위한 자바스크립트 기반 프레임워크입니다. Expo는 React Native 기반 앱을 더 쉽게 개발하고 빌드하고 배포할 수 있도록 하는 툴킷입니다. 이번에는 Expo를 이용해 간단한 React Native 앱을 만들어보고 그 과정을 블로그 글로 작성해보도록 하겠습니다. Expo 설치하기 먼저 Expo CLI를 설치해야합니다. 다음 명령어를 사용하여 Expo CLI를 설치할 수 있습니다. npm install -g expo-cli 새로운 프로젝트 생성하기 Expo CLI를 설치하면 expo init 명령어를 사용하여 새로운 프로젝트를 생성할 수 있습니다. 프로젝트 이름과 템플릿을 선택할 수 있습니다. 템플릿은 미리 구성된 Starter App을 사용하여 프로..
1. 데이터 세분화 총 네개의 각자 다른 api를 불러와서 하나의 데이터로 합쳤을때 각자 객체의 속성값이 다르게 나와서 이 데이터들을 활용하는 것에 어려움이 있었습니다. 1) 먼저 모든 데이터에는 주소가 존재했기에 주소를 통한 filter처리를 먼저 해주었습니다. 서구,중구 등 셀렉트 요소를 사용하며 셀렉트가 될때 const handleSearchGu = (e) => { console.log(recentItems); const inputText = e.target.value.trim(); // localStorage.setItem("selectedOption", inputText); setChooseGu(locatoinList[inputText]); const filteredData = inputText..
fetch대신 axios를 쓴 이유 Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, fetch보다 사용하기 더 편리하며 브라우저와 Node.js에서 모두 지원됩니다. 또한, Axios는 인터셉터를 사용하여 요청 및 응답을 가로챌 수 있으므로, 토큰을 포함한 인증 헤더를 간단하게 처리할 수 있습니다. 이러한 이유로 Axios가 많은 개발자들에게 선호되는 HTTP 라이브러리 중 하나라고 합니다. 이렇게 대전에 관련된 4개의 api를 하나의 데이터로 추출 할 수 있었습니다. 또한 데이터를 localstorge에 저장하여 데이터를 바로 사용 할 수 있게 설정 했습니다. 프로젝트에서 사용하는 훅과 문법 정리 Axios Axios는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. Ax..
안녕하세요! 리액트에서 이전/다음 버튼을 만드는 Pagination 컴포넌트를 작성해 보았습니다. import React, { useState } from "react"; const Pagination = ({ itemsPerPage, totalItems, onPageChange, currentPage }) => { const pageNumbers = Math.ceil(totalItems / itemsPerPage); const handlePageChange = (pageNumber) => { onPageChange(pageNumber); }; return ( handlePageChange(currentPage - 1)} > 이전 {Array.from({ length: pageNumbers }, (_, ..
JavaScript의 pop() 메소드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다. 이 메소드는 배열의 길이를 1만큼 감소시킵니다. 예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다. const arr = [1, 2, 3, 4]; 이제 pop() 메소드를 사용하여 배열에서 마지막 요소를 제거하고 반환할 수 있습니다. const lastElement = arr.pop(); // 4 console.log(arr); // [1, 2, 3] console.log(lastElement); // 4 pop() 메소드는 기존 배열을 변경하므로, 반환된 마지막 요소를 다른 변수에 저장하려면 따로 할당해 주어야 합니다. 이 메소드를 사용할 때 주의할 점은 배열이 비어 있는 경우 undefined를 반환한..
이번 글에서는 카카오맵 API를 이용하여 주소 검색 기능을 만들어보겠습니다. 이 기능을 만들기 위해서는 카카오맵 API를 불러와야 하는데, 다음과 같이 script 태그를 이용하여 불러올 수 있습니다. 위 코드에서 appkey 부분에는 본인이 발급받은 앱 키를 입력해야 합니다. libraries=services는 주소 검색 기능을 사용하기 위해 필요한 라이브러리입니다. 이제 HTML 코드를 작성해봅시다. 검색 위 코드에서는 div 태그로 지도를 표시할 영역을 만들고, form 태그로 주소 입력 폼을 만듭니다. 그리고 JavaScript 코드를 작성합니다. var map = new kakao.maps.Map(document.getElementById("map"), { center: new kakao.map..
알고리즘 문제를 풀다 보면 반복문과 조건문을 이용해 원하는 값을 추출하는 경우가 많습니다. 이번 문제는 주어진 수 n 이하의 홀수를 오름차순으로 추출하는 문제입니다. 우선 문제를 해결하기 위해서는 반복문과 조건문을 이용해 주어진 범위 내의 숫자를 검사하여 홀수인 경우 배열에 추가해야 합니다. 이를 코드로 구현하면 다음과 같습니다. function solution(n) { const oddNumbers = []; for (let i = 1; i
