Jun's TID

어제 작성한 todoList App이 종료됐다가 다시 켜져도 이전에 데이터를 가지고 있을 수 있도록, AsyncStorage를 적용하여 간단한 데이터를 가지고 있을 수 있도록 해보자. 기존 코드를 다시 작성하지는 않으려고 하니, 기존 코드를 확인하려면 여기로 가서 확인하자. 우선, App.js에서 useEffect Hook을 사용하여 아래와 같이 저장과 불러오기 기능을 직접 추가한다. ◎App.js (...) /* 데이터 불러오기 */ useEffect(() => { const load = async () => { try { const rawTodos = await AsyncStorage.getItem('todos'); const savedTodos = JSON.parse(rawTodos); setTod..

async와 await은 JavaScript의 비동기 프로그래밍을 위해 ES2017에 도입된 키워드이다. async 함수는 항상 Promise를 반환하며, 함수 내부에서 await 키워드를 사용하여 Promise의 결과를 동기적인 방식으로 처리할 수 있다. await 키워드는 async 함수 내에서만 사용할 수 있다. async 함수: 이 키워드를 사용하여 함수를 선언하면, 함수는 자동으로 Promise를 반환한다. 함수 내부에서 return 문을 사용하면, 이 값은 Promise가 이행(fulfilled)될 때의 값이 된다. await 키워드: Promise가 처리될 때까지 함수 실행을 일시 정지시키고, Promise가 이행되면 결과값을 반환한다. 오류가 발생하면 예외를 발생시킨다. // 1 + 1을 ..

Promise는 JavaScript에서 비동기 작업을 표현하고 다루는 데 사용되는 객체이다. 이는 비동기 작업의 최종 완료(또는 실패) 및 그 결과값을 나타낸다. Promise 객체는 세 가지 상태 중 하나를 가진다. 대기(pending): 초기 상태, 이행 또는 거부되지 않음. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. Promise는 then, catch, finally 메소드를 제공하여, 이행 또는 거부 상태가 되었을 때 실행할 콜백 함수들을 연결할 수 있다. 비동기로 1 + 1을 계산하는 예제 코드와 함께 확인해보자. // 1 + 1을 수행하는 비동기 함수 const asyncAddition = new Promise((resolve, reject..

AsyncStorage는 React Native에서 제공하는 간단하고 비동기적인 키-값 저장 시스템이다. 이 시스템은 앱 세션 간 데이터를 영속적으로 저장하는 데 주로 사용된다. AsyncStorage는 사용자 설정, 앱 상태 또는 간단한 인증 정보와 같은 작은 데이터를 로컬 장치에 저장하기 위한 것이다. 이 시스템은 암호화되지 않았으므로, 중요한 정보나 대량의 데이터를 저장하기에는 적합하지 않다. AsyncStorage의 주요 메소드로는 setItem, getItem, removeItem, clear 등이 있다. 데이터는 문자열 형태로 저장되므로, 객체를 저장하려면 JSON.stringify를 사용하여 직렬화해야 하며, 데이터를 검색할 때는 JSON.parse를 사용하여 역직렬화해야 한다. 설치는 마찬..

맛집 카테고리를 생성해 놓고, 거의 1년을 비어있는 상태로 놔두다가 이제 첫 글을 쓴다. 맛집 포스팅이 나름 조회수 효자기도 하고, 포스팅하기도 편해서 자주 올려야지~ 했는데, 사실 딱히 '와! 여긴 올려야 해!' 하는 음식점을 많이 안 가본 것이 제일 컸다. (뭐, 맨날 워낙에 가는 곳만 가는.. 익숙함 = 최고라고 생각하는 사람인지라...ㅋㅋㅋ) 어제 여자친구가 당직이여서 간단하게 저녁을 먹으러 구월동에 갔다가 피자 & 파스타가 당긴다고 음식점을 하나 찾아오셨길래 진짜 오래간만에 고급진 이탈리안 레스토랑에 갔다. 상호명은 파니노구스토(panino gusto), 사전 정의로는 panino: 오일에 찍어 먹는 동그란 작은 빵, gusto: 풍미 있는? 요런 느낌인 거 같다. 가게 분위기는 정말 무슨 파인..

우선, yarn을 사용하여 vector-icons 모듈을 설치하자. yarn add react-native-vector-icons 안드로이드 안드로이드는 react-native 프로젝트 디렉토리 내에 있는 android/app/build.gradle 파일 맨 아래에 아래와 같이 작성하면 된다. ◎build.gradle (...) apply from: file('../../node_modules/react-native-vector-icons/fonts.gradle') iOS terminal 에서 우선, pod를 설치해야 한다. cd ios pod install 이후에 마찬가지로 react-native 프로젝트 디렉토리 내에 있는 ios 디렉토리로 이동하여 info.plist 파일을 찾아 아래와 같이 작성해..

이번에도 마찬가지로 front-end 국민 실습 App인 todoList를 만들어 보려고 한다. 나름 CRUD도 다 들어가야 하고, 기본적으로 react-native app이 어떤 '형식'으로 구성이 되어 만들어지는 지를 확인할 수 있는 아주 좋은 실습이라고 생각은 하지만, 조금 지루한 프로젝트인 건 반박할 수 없는 사실이다. App의 데이터는 react를 공부하면서 다뤘던 useState Hook을 기반으로 하며, StyleSheet를 사용하는 것과 아래 코드에서 확인할 수 있겠지만, 버튼과 같은 컴포넌트들을 터치했을 때 그 터치 효과를 정해줄 수 있는 여러 컴포넌트를 을 사용하는 걸 제외하면 react App 제작과 크게 다르지 않다. 바로 한번 확인해보자. ◎App.js import React, {..

React Native에서 StyleSheet의 resizeMode 속성은 이미지의 크기 조정 방식을 결정하는 데 사용되는 것이다. 이 속성에는 여러 옵션이 있는데, 주요 옵션은 다음과 같다. - cover: 이미지가 컨테이너의 경계를 초과하지 않도록 조정되며, 비율은 유지된다. 이미지의 일부가 컨테이너에 맞지 않을 수 있다. - contain: 이미지가 컨테이너 안에 완전히 들어가도록 조정되며, 비율은 유지된다. 이미지의 너비나 높이가 컨테이너의 너비나 높이보다 작아질 수 있다. - stretch: 이미지가 컨테이너의 너비와 높이에 맞도록 늘어난다. 이 때 이미지의 원래 비율은 유지되지 않는다. - repeat: 뷰의 크기대로 이미지를 리사이징한다. 이 과정에서 이미지의 가로 세로 비율이 원본과 달라질..

거의 모든 웹/앱 개발 언어 실습의 고유 첫 프로젝트인 아주 간단히 버튼으로 숫자만 하나씩 증가/감소시킬 수 있는 카운터를 만들어보자. ◎components/Counter.js import React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; const Counter = ({count, onIncrease, onDecrease}) => { return ( {count} ); }; const styles = StyleSheet.create({ wrapper: { flex: 1, }, numberArea: { flex: 1, alignItems: 'center', justifyContent: 'center', }, n..

JavaScript의 비구조화 할당은 객체나 배열로부터 속성이나 요소를 변수에 쉽게 할당할 수 있도록 하는 표현식이다. 이 기능은 ES6(ECMAScript 2015)에서 도입되었으며, 코드의 간결성과 가독성을 향상시키는 데 도움이 된다. 객체 비구조화 할당 객체의 비구조화 할당을 사용하면 객체의 속성을 직접 변수로 할당할 수 있다. const obj = { a: 1, b: 2, c: 3 }; // 전통적인 방식 const a = obj.a; const b = obj.b; const c = obj.c; // 비구조화 할당 const { a, b, c } = obj; 추가 기능: 기본값 할당: 객체에 해당 속성이 없을 경우, 기본값을 할당할 수 있다. const { a, b, c, d = 4 } = obj..