💻💭🎧🌏

기존에 그냥 완성된 답변으로 받았던 ChatGPT 응답을 SSE(Serve-Sent-Event) 를 이용해 실시간으로 완성하는 걸로 변경하게 되었다. 어떻게 받아와야할지 여러 방법을 찾아보는데 SSE 표준은 애초에 POST 방식은 지원을 하지 않는다고 한다. (그래서 SSE는 보통 EventSource를 이용해 응답을 받지만 단순 GET인 경우에만 가능하다.) 그런데 나는 내가 요청한 질문에 대한 답변을 받아야하는 것이므로... 응용 방식을 여럿 찾아보았다. 그러던 중 나의 상황에 아주 딱 맞는 유튜버의 설명 등장... 최고세요... https://www.youtube.com/watch?v=JxIQCOrsxxg 물론 이 분은 ChatGPT 기능을 프론트엔드에서 바로 구현한거라 약간 차이점이 있었기에 이슈..

ImageBackground 코어 컴포넌트 사용하기 import {ImageBackground} from 'react-native' ImageBackground 사용법

Platform과 Dimensions API 실행 OS 확인 import {Platform{ from 'react-native' console.log(Platform.OS) ✅ 앱이 실행되는 폰이 안드로이드폰인지 아니면 아이폰인지를 확인한다. ✅ 위의 코드를 실행하면 android 또는 ios 라고 결과가 나온다. Dimension API import {Dimension} from 'react-native' const {width, height} = Dimensions.get('window') ✅ width, height 는 폰을 가로로 회전하더라도 변하지 않는다. 뷰 컴포넌트의 backgroundColor 스타일 속성 ➡️ 이름에 'View' 가 들어간 뷰컴포넌트는 backgroudColor 스타일 속..

스타일 객체 설정 안쪽 중괄호 부분 : 객체를 의미한다. 바깥쪽 중괄호 부분 : JSX 구문에서 자바스크립트 코드를 설정할 때 쓰는 문법이다. ✅ 컴포넌트의 style 속성에는 배열을 설정할 수 있다. StyleSheet API import {StyleSheet} from 'react-native' 스타일 객체를 style 속성에 설정하는 것 : 인라인 스타일 이 외에도 StyleSheet API를 지정해서 사용할 수 있다. 스타일 객체 생성하는 방법 : StyleSheet의 create 메서드 사용 const styles = StyleSheet.create({ 키_이름1: 스타일_객체1, 키_이름2: 스타일_객체2, ... }) 인라인 스타일과 StyleSheet 스타일의 차이 인라인 스타일 방식 : ..

버튼을 누르면 대화상자가 나타나는 기능 구현하기 버튼 컴포넌트 import react from 'react'; import {SafeAreaView, Alert, Button} from 'react-native'; export default function App() { return ( Alert.alert('home pressed.', 'message')} /> ); } Button 코어 컴포넌트는 onPress 속성을 제공한다. ➡️ 콜백 함수를 지정해야 함. 콜백 함수의 형태 : () => {/* 함수 몸통 */} 리액트 네이티브는 Alert API (Application Programming Interface) 를 제공한다. Alert API 가 제공하는 alert 정적 메서드 : static a..

이번 글에서는 02-1 리액트 네이티브 프레임워크의 작동 원리 / 02-2 JSX 구문 탐구하기 파트를 공부해봅니다 ... 1. 리액트 네이티브 프로젝트 만들기 npx react-native init 프로젝트 디렉토리명 --template react-native-template-typescript 2. npm start ※ 이때 알맞은 프로젝트 디렉토리에서 npm start를 실행하지 않으면 아래와 같은 오류가 발생할 수 있다. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/parkseyeon/React-Native/package.json npm ERR! errno -2 npm ERR! enoent Could not read packag..