뚝딱뚝딱 코딩 기록_

[React Native_ Onboarding Screen] 온보딩 화면 만드는 방법에 대해 알아보자 ❓ 온보딩 화면 (Onboarding Screen) 💡 온보딩 화면이란 어플을 처음 설치한 후 실행했을 때 한 번만 나오는 화면을 말한다. 💡 어플 사용법 등의 내용이 간단하게 들어간다. 💡 어플을 처음 실행했는지 여부를 state에 업데이트하고 Local Storage에 저장한다. 1. 라이브러리 설치 yarn add @react-native-async-storage/async-storage yarn add react-native-pager-view or npm install @react-native-async-storage/async-storage npm install react-native-page..

[React_header title] 웹 페이지의 header title을 바꾸는 방법에 대해 알아보자 사진과 같이 header에 있는 title을 페이지마다 다르게 하고 싶을 수 있다. 그런 경우는 간단하게 바꿀 수 있다. import React, { useEffect } from 'react'; `````` useEffect(() => { const titleElement = document.querySelector("title"); titleElement.innerHTML = `바꾸고 싶은 내용`; }, []); 💡 document.querySelector로 title을 가져온 후 innerHTML을 사용하여 내용을 바꿔준다 💡 페이지마다 useEffect 를 사용하여 페이지가 렌더링 되었을 때 바..

[React_useNavigate] 리액트에서 화면 이동 방법에 대해 알아보자 1. 리액트 라우터 설치 npm install react-router-dom or yarn add react-router-dom 2. 라이브러리 임포트 import { BrowserRouter, Route, Routes } from 'react-router-dom'; 3. App.jsx - BrowserRouter export default function App () => { return ( //컴포넌트 ) } 4. path 지정 - Routes, Route `````` import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Component1 from..

[React Native_ FlatList] FlatList로 무한 스크롤하는 방법에 대해 알아보자 `````` import React, { useState } from 'react'; import { View, FlatList } from 'react-native'; import RenderItem from './item'; // 리스트에 보여줄 컴포넌트 `````` export default function App() { // data : 렌더링할 데이터 리스트 const data = [ {key: value}, ]; // 새로고침 state const [isRefreshing, setIsRefreshing] = useState(true); const handleRefresh = () => { set..

[React_ react-create-app] 👉React 공식문서 바로가기👈 React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org ❔ React - UI 구축을 위한 자바스크립트 라이브러리 - html과 자바스크립트 표현식을 동시에 사용 가능 - Virtual DOM (가상 돔)을 생성하고 이전 상태와 비교하여 변경된 부분만 업데이트 ❓ React 설치 1. node.js 설치 👉 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScr..

[React Native_ Font] 리액트 네이티브 컴포넌트에 로컬 폰트 적용하는 방법에 대해 알아보자 1. expo-font 설치하기 expo install expo-font 2. 원하는 폰트 다운받기 💡 원하는 폰트를 assets 폴더에 fonts 폴더에 다운받는다. 💡 개인적으로 사용한 폰트는 무료 폰트 사이트인 산돌구름에서 다운받았습니다. 👉 https://www.sandollcloud.com/ 산돌구름 다양한 언어와 폰트를 내가 원하는 대로! 한글, 영문, 중국어 등 19,000여종의 폰트로 더 완성도 높은 디자인을 경험해보세요. www.sandollcloud.com:443 3. 폰트 사용하기 import React, { useState, useEffect } from 'react'; impo..

[React Native_image axios] ImagePicker로 받아온 이미지 데이터를 서버로 보내는 방법을 알아보자 1. ImagePicker 사진 가져오기 expo ImagePicker library를 이용하여 데이터를 받아오는 방법은 지난 포스팅에서 소개했다. ImagePicker 사용 방법이 궁금하다면 포스팅을 참고하면 될 것이다. 👉 [리액트네이티브] 갤러리에서 사진 가져오기-ImagePicker 2. axios import axios from 'axios'; const data = { key: value, } axios.post('url', data} .then(response => console.log) // 성공한 경우 .catch(error => console.log) // err..

[React Native_expo-image-picker] 갤러리에서 사진 가져오는 방법에 대해 알아보자 1. ImagePicker 설치하기 expo install expo-image-picker 2. 접근 권한 허용 const [galleryPermission, setGalleryPermission] = ImagePicker.useMediaLibraryPermissions(); // 권한이 없는경우 허용 여부 요청 if (!galleryPermission?.granted) { const permission = setGalleryPermission(); // 허용하지 않는 경우 종료 if(!permission.granted) { return null; } }; 💡 useMediaLibraryPermiss..

[Project_EKHANA Renewal] 🚍 프로젝트 소개 📄 목적 : EK하나관광 기존 홈페이지 리뉴얼 📄 내용 관광버스 견적을 요청하고 이를 처리할 수 있는 서버 재구축 불필요한 기존 기능들 (게시판, 공지사항 등)을 제외 기존 기능 보완/강화 (견적요청시 알람-이메일 기능) 홈페이지 UI 리뉴얼 📄 기능 견적 요청하기 견적 목록 확인하기 나의 견적 목록 확인하기 회사 정보 관리자 페이지에서 업데이트 / axios REST API 모바일 웹 화면 / react-device-detect 📄 개발 기간 : 약 4주 🚍 사용 기술 📄 front Library : React, Material-UI API : axios, useNavigate 📄 back Spring boot, Thymeleaf, Spri..

[React Native_ EXPO CLI] 👉React Native 공식문서 바로가기👈 Introduction · React Native This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. reactnative.dev ❔ React Native - 자바스크립트를 사용하여 모바일 어플리케이션을 개발할 수 있는 프레임워크 - iOS와 Android 어플리케이션 동시에 개발 가능 - 자바스크립트로 작성된 코드를 네이티브 코드로 렌더링 - Web 과는 조금 차이가 있음 ❔expo CLI vs React-Native CLI 1. expo CLI..