[React Native] Chat GPT로 개발하기 - 6일차
·
React Native/JavaScript
expo에서 글자를 읽어주는 기능을 만들고 싶어 쓰는 부분은 해결했으니 이제 읽어주는 기능이 필요해서 질문을 했다. 지난번 스트레스로 이번엔 미리 Expo라는 것을 알려주고 글자를 읽어주는 기능에 대해서 질문했다. 그래도 이번엔 한번에 필요한 기능을 말해줬다. 일본어를 읽을건데 일본인도 가능해? 읽는 것은 문제가 없는데 나는 다국어 지원이 필요했다. 따로 설정 없이 일본어를 읽게하니 어색하게 글자를 읽었다. 그래서 일본어 설정이 가능한지 물어보고 답변을 받아서 읽어보게 했다. 다른 읽어주는 라이브러리는 없을까? 후.... 일본어 설정을 해도 이상한 기계음이 섞여 있어서 사용에 불편함이 많았다. 그래서 다른 라이브러리가 있는지 물어보고 해당 라이브러리를 사용할 계획을 했다. 바로 알려준 react-nati..
[React Native] Chat GPT로 개발하기 - 5일차
·
React Native/JavaScript
expo에서 터치로 쓰기를 하려면 어떻게 해야해? 간단한 어플을 만들기 위해서 지난번 Native 환경이 아닌 Expo 환경에서 다시 개발을 진행하다가 터치로 그림을 그리는 작업이 필요했다. 어떤게 있는지 궁금해서 간략하게 질문을 했었다. 해당 패키지를 설치하니 ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'deprecated-rea..
[React Native] Chat GPT로 개발하기 - 4일차
·
React Native/JavaScript
React Native에서 View 아래 버튼의 높이가 꽉차는데 내가 원하는 높이로 설정하려면 어떤 방법을 사용해야해? 당연하지만 height을 설정하면 문제가 없다고 한다. 하지만 당연히 height은 50으로 값을 넣어줬는데 내 화면의 버튼은 전체 화면을 가득 채웠다. flex 속성을 주면 꽉차게 설정되는데 방법이 없을까? 왜 그럴까 고민을 하다가 flex라는 속성에 의심을 하기 시작했다. flex는 부모 컴포넌트 기준으로 화면을 채운다고 했는데 이녀석을 내가 Button에게 1을 줬다 역시나 답변으로 flex 속성을 넣어서 그렇다고 한다. 내가 flex에 1을 준 이유는 flexDirection과 align-item을 주기 위해서였는데 flex 값을 주지 않아도 기본 display가 flex이기 때..
[React Native] Chat GPT로 개발하기 - 3일차
·
React Native/JavaScript
오늘은 UI 작업을 간단하게 하기 위해서 Atomic 패턴으로 기본적인 Box, Button, Text를 만들어보려고 한다. React Native는 깊게 사용하지 않아서 사용하는 속성 부분을 대부분 까먹어서 어려운 도전이 될 것 같다. react native에서는 display flex가 불가능해? 시작부터 문제가 있었다. display 속성을 통해서 flex 설정을 주려고 했는데 계속 오류가 났다. 내용을 알고보니 display flex가 기본 값이였다. 그리고 공간을 차지하는 영역을 결정하는게 flex 옵션이고 그외는 대부분 알고 있던 속성이라 이해했다. 산뜻한 출발! view 컴포넌트에게 margin도 줄 수 있지? 연속으로 부끄러운 수준의 질문 연속이다 .... margin을 주려고 "0 20p..
[React Native] Chat GPT로 개발하기 - 2일차
·
React Native/JavaScript
useColorScheme를 사용해서 테마를 설정하는데 이걸 다크모드로 어떻게 바꿔? React Native를 만들고 App.tsx를 확인하니 useColorScheme를 사용하는 것을 알 수 있었다. 사용하는 코드를 봤을 때 다크 모드 등을 설정하기 위해서 해당 값을 사용하고 있었다. 그래서 나는 어플 내에서 해당 속성을 사용하기 위해서 질문을 했다. 내가 원하는 답변이 아닌 useColorScheme를 사용하는 방법에 대해서 안내를 받았다. 아무런 정보가 없는 상태에서 바로 질문을 해서 이런 답변을 받는 것이라고 생각해서 이어서 질문했다. 여기서 앱 내부에서 dark 테마로 바꾸고 싶을땐? 이번엔 앞선 질문으로 useColorScheme를 사용하는 것을 알고 있을 테니 내가 원하는 목적을 질문했다. ..
[React Native] Chat GPT로 개발하기 - 1일차
·
React Native/JavaScript
오늘은 간단하게 Styled Component와 폴더 구조 등을 잡으려고 한다. react native에서 styledcomponent를 사용하는 방법이 괜찮아? 본격적으로 사용하기 전에 react native에서 styled-component를 사용하는 방법이 괜찮은지 물어봤다. 혹시라도 styled-component 외 emotion이라던지 다른 라이브러리가 인기가 있을 수 있다는 생각이기 때문이다. 오케이 전혀 문제 없다고 한다. 그러므로 바로 설치했다. import {createGlobalStyle} from 'styled-components/native'; 이렇게 작성하니 undefined is not Funtion이라고 하는데 뭐가 문제일까? 전역 스타일을 설정하기 위해서 createGloba..
[React Native] Chat GPT로 개발하기 - 환경 구성
·
React Native/JavaScript
Chat GPT가 생기면서 개인적으로 개발이 정말 쉬웠졌다고 느끼고 있다. 그러다가 생각난게 Chat GPT가 개발자를 대체할 수 있을까? 라는 생각을 하게 되었다. 누구나 질문만을 통해서 그럴싸한 결과물을 만들 수 있다면 어찌저찌해서 면접을 통과하고 회사에 입사를 하게 되었을 때 업무는 Chat GPT로 하는 것을 말이다. 그래서 한번 해보려고 한다. 나의 목표는 Chat GPT를 사용해서 어플을 만들고 그것을 구글 스토어에 올리는 작업까지를 진행해보려고 한다. 여기서 나는 100% 질문만으로 개발을 하진 않을 것이다. 그 이유는 이미 나는 React를 할 수 있고 개발 지식이 없는게 아니라서 자연스럽게 내가 알던 방식을 사용할 것이므로 가능한 질문을 통해서 복잡한 로직을 해결할 생각이다. 그런 경험을..
[React Native] Todo 앱 - Context & AsyncStorage_2편
·
React Native/TypeScript
들어가며. Todo 앱 - Context & AsyncStorage_1편과 이어지는 내용입니다. 앞선 부분을 보지 않으셨다면 확인하시는 것을 추천드립니다. 4. 개발 10. AddTodo 컴포넌트 import React, {useState} from 'react'; import AddButton from './AddButton'; import TodoInput from './TodoInput'; interface Props {} const AddTodo = ({}: Props) => { const [showInput, setShowInput] = useState(false); return ( setShowInput(true)} /> {showInput && setShowInput(false)} />} )..