- Think about 과 Think of의 맥락 "think about"과 "think of"는 모두 생각하다는 의미를 담고 있으나, 사용하는 맥락에 따라 의미상의 미묘한 차이가 있다. "think about"는 어떤 대상이나 주제에 대해 심사숙고하거나 고민하는 것을 의미한다. 이 표현은 보통 무언가를 깊이 있게 고려하거나, 어떤 문제에 대해 집중적으로 생각할 때 사용된다. 예를 들어, "I need to think about my future career"는 "나는 내 미래의 직업에 대해 심사숙고해야 한다"는 의미로, 여기서는 미래의 직업이라는 주제에 대해 깊이 있는 고민을 할 필요가 있음을 나타낸다. 반면, "think of"는 떠올리다라는 의미로 사용되며, 어떤 아이디어, 사람, 장소 등이 갑자..
이번에는 가장 일반적으로 사용하는 Stack Navigation을 구현하는 컴포넌트를 typeScript를 사용해서 구성해보려고 한다. 기본적으로 아래와 같이 RootStack을 구성할 수 있는데, ◎App.tsx import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import RootStack from './screens/RootStack.tsx'; const App = () => { return ( ); }; export default App; ◎screens/RootStack.tsx import React from 'react'; import {createNativeStackNavigator}..
typeScript로 contextAPI 를 사용하는 context 컴포넌트를 만들면 createContext로 사용할 전역 변수를 인터페이스로 만들어서 관리가 가능하다는 점과 제네릭 설정을 넣어 null 값에 대한 exception 처리를 손쉽게 할 수 있다는 장점이 있다. 바로 바로 참고할 수 있게 간단한 예제 컴포넌트만 하나 확인해보자. ◎AuthContext.tsx import React, {createContext, useContext, useState} from 'react'; interface User { id: number; username: string; } interface AuthContextValue { user: User | null; setUser(user: User): void..
좀 더 typescript와 친해져보자. 기존에 자주 사용하는 Hook들을 ts를 사용하여 변경하는 예제들을 확인하려고 한다. - useState import React, {useState} from 'react'; import {Button, Text, TextInput, View} from 'react-native'; const MessageForm = () => { // string 타입 const [text, setText] = useState(''); // interface 타입 체크 or null const [lastMessage, setLastMessage] = useState(null); const onPress = () => { setLastMessage({ message: text, d..
타입스크립트의 기본적인 문법을 다뤄봤으니, 이제 이 타입스크립트를 리액트/리액트 네이티브에서 어떻게 사용을 하는 지 확인해보자. Props를 어떻게 사용하여 자식 컴포넌트에 데이터를 전달하는게 JS 환경과 어떤 차이가 있는 지, 기본적인 예제 코드를 한 번 보자. Json 형식을 사용할 수도 있지만, 타입 검사를 위해 interface를 사용한다. ◎ Profile.tsx import React from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; interface Props { name: string; // normal param isActive?: boolean; // optional param image?: string;..
1. R & R: Short for "rest and relaxation," it refers to taking time off from work or duties to relax or recuperate. Example: After six months of continuous work, Mark took a week off for some much-needed R & R on a quiet beach. 2. Put something off: To delay doing something until a later time or date. Example: I've been putting off going to the dentist because I'm a bit scared, but I know I have..
타입 스크립트 좋더라, 타입 스크립트 쓰세요. 런타임 에러가 확 줄어요..!라는 말을 종종 들으면서도 현재 회사에서 잡고 있는 프로젝트가 전부 JS로 되어 있는 것도 그렇고, 뭔가 JS도 잘 쓰고 있는 마당에 굳이...?라는 생각이 들어서 따로 쳐다보지를 않고 있었다. 이젠 리엑트로 프로젝트도 하고 있고, 조만간 RN으로도 하나 진행할 거 같아서 더는 미루지 말고 한번 사용이나 해보자! 라는 생각이 들어서 다뤄보려고 한다. 기본적인 내용부터 차근차근 공부해보자. - 그래서 타입 스크립트가 뭐야? 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 하는 언어로, 자바스크립트의 모든 기능을 포함하면서 타입 시스템을 추가해 준다는 것이 기본 콘셉트이다. 이로 인해 큰 규모의 애플리..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/A4fZj/btsESLbEh3l/kXUKtdCBcKfRnAK1jvOgJk/img.gif)
어떤 언어던, 프레임 워크던 친해지는 데 가장 좋은 방법은 CRUD가 완벽하게 구현된 블로그 프로젝트이다. 이번에도 RN와 Firebase를 사용하여 아주 간단한 SNS 프로젝트를 책을 따라가면서 만들어봤다. 이 프로젝트는 회원 인증, 화면 전환, CRUD, 카메라 & 앨범 제어, 새로고침, 로딩바, 스플레시, 이벤트 Emit 등 다양한 기능이 들어간 Simple SNS 프로젝트이며, 이걸로 내 RN_비기너 타이틀...? 정도는 가질 수 있게 된 거 같다. 늘 그렇듯, 전체 코드를 따라가며 설명하는 건 너무 길고 책에서 설명하는 것과 크게 다르지 않기 때문에 따로 하지 않으려고 한다. Git: https://github.com/Choonham/publicGalleryChoon GitHub - Choonh..
react-native-splash-screen은 React Native 애플리케이션에서 시작 화면(스플래시 스크린)을 쉽게 구현할 수 있게 도와주는 라이브러리이다. 이 라이브러리를 사용하면 앱이 로딩되는 동안 사용자에게 보여줄 초기 화면을 설정할 수 있으며, 앱의 로딩 경험을 개선하는 데 유용하다. 이 글에서는 Android와 iOS 환경에서 각각 셋팅하는 방법과 기본적인 사용 예제에 대하여 설명하려고 한다. yarn add react-native-splash-screen npm install react-native-splash-screen --save Android 환경에서의 셋팅 android/app/src/main/java/[...]/MainActivity.java 파일을 열고, import or..
React Native의 EventEmitter는 컴포넌트나 모듈 간의 이벤트 기반 통신을 가능하게 하는 클래스이다. 이 클래스를 활용하여, 개발자는 특정 이벤트가 발생했을 때 리스너에 알림을 보낼 수 있다. EventEmitter는 주로 네이티브 모듈과 JavaScript 간의 이벤트 통신에 사용되지만, React Native 애플리케이션 내의 다른 용도로도 사용될 수 있다. 이 글에서는 해당 이벤트를 위해 eventemitter3 라는 라이브러리를 사용하려고 한다. yarn add eventemitter3 EventEmitter 사용법 EventEmitter 인스턴스 생성: EventEmitter의 인스턴스를 생성하여 이벤트를 발생시키고, 이에 대한 리스너를 등록한다. 이벤트 리스너 등록: addLi..
- 인천 구월동 맛집
- react
- AsyncStorage
- 정보보안기사 #실기 #정리
- redux
- 이탈리안 레스토랑
- javascript
- react-native
- Promise
- Async
- 인천 구월동 이탈리안 맛집
- redux-thunk
- await
- 파니노구스토
- 맛집
- Total
- Today
- Yesterday