티스토리

숨참고 개발다이브

검색하기

블로그 홈

숨참고 개발다이브

ramveloper.tistory.com/m

낡고 지친 작은 FE 개발자

구독자: 2

방명록 방문하기

주요 글 목록

Vercel 로 간단하게 React 웹 사이트 무료 배포하기 지난번 서비스가 유료로 전환된 줄 모르고 Heroku로 포트폴리오 사이트를 배포했었다.배포하자마자 이 사실을 알아차리고 바로 내려서 비용은 거의 나가지 않았지만 대체할 서비스를 찾아야 했고 그렇게 Vercel로 갈아타기로 결심했다. Heroku 배포가 궁금하다면 이전 포스팅 참고!https://ramveloper.tistory.com/73 Heroku(헤로쿠)로 간단하게 React 웹 사이트 배포하기Heroku는 간단한 설정으로 서버를 쉽게 배포할 수 있는 클라우드 플랫폼 서비스(PaaS)이다. Java, Node.js, Python 등 여러 언어를 지원한다.포트폴리오 페이지를 만들며 어떻게 배포하는게 부담 없이 편ramveloper.tistory.com Vercel이란?Vercel은 프론트엔드 배포 .. 공감수 1 댓글수 1 2025. 2. 5.
Heroku(헤로쿠)로 간단하게 React 웹 사이트 배포하기 Heroku는 간단한 설정으로 서버를 쉽게 배포할 수 있는 클라우드 플랫폼 서비스(PaaS)이다. Java, Node.js, Python 등 여러 언어를 지원한다.포트폴리오 페이지를 만들며 어떻게 배포하는게 부담 없이 편할까 생각하며 알아보니 Heroku를 많이 사용하는 것 같아 이용해 보았다. 이미 나는 배포를 마친 상황이지만 포스팅을 위해 자세히 알아보니 2022년 11월 28일 이후로 무료 플랜이 종료되었다고 한다!!(검색을 제대로 하지 않은 죄..🥲) Heroku 홈페이지https://www.heroku.com/ Cloud Application Platform | HerokuHeroku is a platform as a service (PaaS) that enables developers .. 공감수 3 댓글수 2 2024. 12. 12.
[SillyTavern] 실리태번의 월드 인포(로어북) 기능 알아보기 요즘 세상에 AI를 안 쓰는 사람은 거의 없을 것이라고 생각한다.하지만 AI챗? 그뭔씹 마이너 장르는 맞다. 그래도 꽤나 매력을 느껴서 이것저것 알아보던 와중에 실리태번(SillyTavern)이라는 프론트엔드를 알게 되었다.쓰다 보면 알다시피 본인들도 'for Power User'라고 설명할 만큼 학습 곡선이 크지만 다양한 부가 기능을 제공한다.개인적으로 타 AI챗 서비스에는 거의 없는 로어북 개념(특히 키워드 트리거)과 시스템 프롬프트를 쓰다보면 이게 어떻게 돌아가서 프롬프트를 넘길까? 라는 생각이 들게 되는데 오픈소스니까 한번 코드를 열어봤다. ‼️ 이 글에서는 실리태번 설치나 사용법을 작성하지는 않을 예정입니다.설치, 사용법을 원한다면 다른 글을 찾는 것을 추천합니다🙏🏻 월드 인포(Wor.. 공감수 0 댓글수 0 2024. 12. 2.
[React Native] 리액트 네이티브에서 Apollo Client로 GraphQL 사용하기 (with. SpaceX) Apollo Client란?Apollo Client는 GraphQL API와의 통신을 간편하게 도와주는 클라이언트 라이브러리이다.쿼리(Query)와 뮤테이션(Mutation) 요청: 클라이언트에서 원하는 데이터를 서버에 요청하거나 변경 작업 수행캐싱: 서버에서 가져온 데이터를 클라이언트 측에 캐싱하여 네트워크 요청을 최소화서버 상태 관리: 애플리케이션의 로컬 상태와 서버 상태를 통합적으로 관리 REST API와의 차이점은 이전 포스팅을 참고! REST API와 GraphQL의 차이점 알아보기REST API vs GraphQL API개발에서 데이터를 전달하고 처리하는 방법은 매우 중요하다.REST API는 오랜 시간 동안 표준으로 자리 잡아 왔고 GraphQL API의 등장 이후로 해당 방식을 채택하는 기.. 공감수 2 댓글수 1 2024. 11. 28.
REST API와 GraphQL의 차이점 알아보기 REST API vs GraphQL API개발에서 데이터를 전달하고 처리하는 방법은 매우 중요하다.REST API는 오랜 시간 동안 표준으로 자리 잡아 왔고 GraphQL API의 등장 이후로 해당 방식을 채택하는 기업이 늘고 있다. 프로젝트를 진행하다 보면 REST API가 표준으로 자리 잡은 만큼 많이 사용되기 때문에 GraphQL을 활용할 일이 별로 없었다.기존 시스템과의 호환성 문제나 서버를 새로 개발하거나 변환하는 비용이 들기 때문이라고 생각한다.실무에서는 아직 접하지 못했지만, 예제 프로젝트에서 사용 전 내용을 다시 정리하기 위해 포스팅해 본다😉 REST API와 GraphQL의 특징을 요약하면 다음과 같다.특징REST APIGraphQL API데이터 요청 방식엔드포인트마다 별도의 URL을.. 공감수 5 댓글수 2 2024. 11. 21.
[React Native] 리액트 네이티브 최신 버전 New Architecture 설정 끄기 React Native 0.76부터 New Architecture가 기본값으로 활성화되어 있다. New Architecture는 성능과 확장성을 개선한 새로운 아키텍처로, TurboModules와 Fabric Renderer를 기본적으로 제공하며 최신 React Native 프로젝트에 기본 적용된다. 하지만 프로젝트에 따라 New Architecture를 바로 사용할 수 없는 상황이 있을 수 있다. 예를 들어, 사용하는 라이브러리들이 아직 New Architecture를 지원하지 않거나, 기존 프로젝트에서 호환성 문제가 발생할 수 있다. 이럴 경우에 대비해 React Native는 New Architecture를 비활성화할 수 있는 옵션을 제공하고 있다. 공식 문서 https://reactnative.d.. 공감수 1 댓글수 1 2024. 11. 18.
[React Native] react-native-skia 를 활용해 토스 복권 긁기 따라해보기 가끔씩 여러 앱을 사용하다 보면 이런 기능은 어떻게 구현했을까 라는 궁금증이 생긴다.토스의 만보기를 통해 받는 복권긁기 역시 그런 궁금증을 가지게 하는 기능 중 하나였다.토스의 일부는 React Native로 만드는 것으로 알고 있어서(아닐 수도 있음.. 채용 공고보고 그런갑다 하는거임) 한번 구현해보자! 하는 맘으로 만들어보았다. 우선 토스의 복권 긁기 기능을 살펴보았다. 복권을 받고 광고를 보면 나오는 화면이 위와 같다.'여기를 긁어보세요' 문구와 함께 애니메이션 동작 -> 사용자가 직접 복권을 긁음 -> 다음 화면으로 넘어감 -> 당첨금 텍스트 및 카드, 상단 팝업과 하단 버튼이 Fade-in으로 등장 구글에 'react native scratch card'를 검색해보니 꽤나 괜찮은 예제들.. 공감수 1 댓글수 2 2024. 11. 15.
애플 실리콘(ARM) M2 맥북 homebrew 및 ruby x86_64 버전 재설치 삽질 기록 (react native pod install 오류) 테스트해보고 싶은 라이브러리가 있어 0.76 버전 리액트 네이티브 프로젝트를 생성해 봤는데 pod install 과정에서 다음과 같은 오류가 발생했다. ### ErrorLoadError - dlopen(/Users/{name}/.rbenv/versions/2.7.6/lib/ruby/gems/2.7.0/gems/ffi-1.16.3/lib/ffi_c.bundle, 0x0009): tried: '/Users/{name}/.rbenv/versions/2.7.6/lib/ruby/gems/2.7.0/gems/ffi-1.16.3/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have 'x86_64', need 'arm64')), '/Syst.. 공감수 5 댓글수 1 2024. 11. 14.
[React] 리액트 라인차트 (Line Chart) 컴포넌트 만들기 지난 글에 이어 이번에는 SVG를 활용하여 라인 차트를 그리고 react-spring으로 애니메이션 효과를 추가해 주었다.차트의 데이터 배열, 최대 데이터 수, 차트의 Y축의 최댓값을 받아 변형되는 라인차트 컴포넌트를 만들었다. RN으로도 해당 차트를 그리기도 했었는데, RN의 경우에는 이 코드를 많이 참고했었다.https://github.com/indiespirit/react-native-chart-kit/tree/master LineChart.tsximport { useCallback, useEffect, useRef, useState } from "react";import { useSpring, animated } from "react-spring";const DEFAULT_FILL_COLOR = .. 공감수 1 댓글수 1 2024. 11. 8.
[React] 리액트 원형 프로그래스 (Circle Progress Bar) 컴포넌트 만들기/예제 이런 식으로 생긴 원형 Progress는 자주 사용되는 디자인 요소 중 하나이다. 이런 프로그래스 컴포넌트를 라이브러리가 아닌, 직접 커스텀할 수 있는 컴포넌트로 생성해 보았다. 게시글에 올라가는 코드는 React 프로젝트이지만, 애니메이션 부분을 React Native에서 제공하는 Animated를 활용하여 Path 컴포넌트에 애니메이션을 적용하면 동일하게 작동된다. 전체 코드의 완성본은 다음과 같다. 반지름과 수치를 조절할 수 있는 range bar를 태그를 활용해 생성하였고, react-color라는 괜찮은 라이브러리가 있어 색상 피커도 추가해보았다. 포스팅에서는 가장 중요한 CircleProgress 컴포넌트에 대해서만 설명하도록 한다. CircleProgress.tsximport { animat.. 공감수 1 댓글수 1 2024. 11. 4.
[React Native] React Native의 New Architecture (JSI, JavaScript Interface) React Native의 기존 구조 기존 구조는 JavaScript와 Native 사이의 통신을 위해 Bridge를 사용했으며, 데이터를 JSON 형식으로 직렬화하여 전달하는 방식으로 이루어졌다. 그러나 Bridge 기반 통신은 이벤트 생성 속도를 따라가지 못해 성능 이슈가 발생하는 한계가 있다. 이러한 문제를 해결하기 위해 React Native 0.73 버전에서부터 Bridgeless Mode 설정이 가능하도록 적용되었다. 또한 0.74 버전부터 Bridgeless Mode가 기본값으로 변경되었다. https://ramveloper.tistory.com/61 [React Native] React Native의 구 Bridge 아키텍쳐(Architecture)React Native 공식 블로그에 New.. 공감수 7 댓글수 5 2024. 10. 31.
[React Native] React Native의 구 Bridge 아키텍쳐(Architecture) React Native 공식 블로그에 New Architecture가 새로 소개되었을 때(https://reactnative.dev/blog/2024/04/22/release-0.74), 작업 중이던 프로젝트에서는 일부 이슈때문에 당장 업데이트가 불가한 상황이었다.그렇게 잠시 잊고 살았는데 어느새 RN이 0.76버전까지 소개되었고, 이젠 New Architecture 위주의 업데이트가 이루어져서 더 늦기 전에 한번 정리해 둔 내용을 옮겨보려 한다. 우선, 왜 New Architecture가 나왔는지에 대한 정보가 필요하기 때문에 기존 구조에 대해 먼저 정리한다.기존 RN의 구조는 다음과 같다.React: React는 애플리케이션의 UI를 선언적으로 정의하는 부분으로, React Native에서 UI .. 공감수 4 댓글수 3 2024. 10. 29.
[프로그래머스] LV.0 삼각형의 완성조건 (2) 자바스크립트 문제선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다.가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다.삼각형의 두 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 나머지 한 변이 될 수 있는 정수의 개수를 return하도록 solution 함수를 완성해주세요.제한사항sides의 원소는 자연수입니다.sides의 길이는 2입니다.1 ≤ sides의 원소 ≤ 1,000입출력 예[1, 2]1[3, 6]5[11, 7]13입출력 예 설명입출력 예 #1두 변이 1, 2 인 경우 삼각형을 완성시키려면 나머지 한 변이 2여야 합니다. 따라서 1을 return합니다.입출력 예 #2가장 긴 변이 6인 경우될 수 있는 나머지 한 변은 4, 5, 6 로 3개입니다.나머지 한 .. 공감수 2 댓글수 0 2024. 10. 28.
[프로그래머스] Lv.0 자바스크립트 문제 정리 (2) 감기 이슈로 일주일이나 쉰 건에 대하여... 1. 문자열 섞기function solution(str1, str2) { const answers = []; for (i = 0; i .map()을 사용하면 더 간단하게 해결function solution(str1, str2) { return [...str1].map((x, idx)=> x+str2[idx]).join("");} 2. 문자 리스트를 문자열로 변환하기function solution(arr) { var answer = arr.join(''); return answer;} 까먹지 말라고 반복되는 join() 문제 3. 문자열 곱하기function solution(my_string, k) { var answer.. 공감수 0 댓글수 0 2024. 10. 28.
[프로그래머스] Lv.1 바탕화면 정리 자바스크립트 문제코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다.컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이 있는 칸은 "#"의 값을 가집니다.. 공감수 0 댓글수 0 2024. 10. 18.
[프로그래머스] Lv.0 자바스크립트 문제 정리 쉬는 동안 프로그래머스 Lv.0부터 다시 문제를 풀이해 보는데 기초를 정리한다는 마음으로 작성한다.풀이가 아니기 때문에 내가 작성한 답이 정답도 아닐 뿐더러 다른 사람의 답변을 보며 고찰하는 글임!! const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = [line];}).on('close',function(){ str = input[0];});lv.0 단계에서 자바스크립트로 선택 시 기본적으로 제공해주는 포맷이다.보통 입출.. 공감수 3 댓글수 1 2024. 10. 18.
[React Native/iOS] 리액트 네이티브 환경에서 iOS Privacy Manifest 정책 대응하기 iOS Privacy Manifest 애플이 WWDC23에서 개인정보 보호를 위해 API 오용을 방지하기 위해 사용하는 이유를 개발자가 명시하도록 발표했다. 앱이 앱 사용자의 개인정보를 보호하도록 하는 조치이다. 앱이 사용자의 개인 정보를 취급하는 방식에 대한 개요를 사용자에게 제공하는 개인 정보 취급 개요표(Privacy Nutrition Label) 소개 내용은 링크 참조 2023년 가을부터 사유를 명시해야 하는 API(타사 SDK 포함)를 사용하는 새로운 앱 또는 앱 업데이트를 App Store Connect에 업로드하는 경우, 앱의 개인정보 보호 목록에 승인된 사유를 제공하지 않으면 알림을 받게 된다. 2024년 봄부터 App Store Connect에 새로운 앱 또는 앱 업데이트를 업로드하려면 .. 공감수 0 댓글수 0 2024. 3. 25.
[React Native] patch-package를 사용해 라이브러리 커스텀하기 기본적으로 React Native 프로젝트의 .node-modules는 gitignore 에 등록되어 있다. 따라서 라이브러리의 내부 코드를 수정하면 협업 개발자들과 다른 시스템이 동작하게 된다. 이를 방지하기 위해 patch-package를 사용한다. 공식 문서 https://www.npmjs.com/package/patch-package patch-package Fix broken node modules with no fuss. Latest version: 8.0.0, last published: 8 months ago. Start using patch-package in your project by running `npm i patch-package`. There are 868 other proje.. 공감수 0 댓글수 0 2024. 3. 19.
[React Native] Hermes engine이란? React Native를 개발하다 보면, hermes engine이라는 단어가 많이 보인다. 그래서 hermes engine이 뭘까?? 공식 문서 https://reactnative.dev/docs/hermes Using Hermes · React Native Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. reactnative.dev Hermes란? hermes는 Fac.. 공감수 0 댓글수 0 2024. 3. 5.
[React Native] flatlist의 콜백 옵션 (removeClippedSubviews, onScrollToIndexFailed) removeClippedSubviews 공식 문서 https://reactnative.dev/docs/flatlist#removeclippedsubviews FlatList · React Native A performant interface for rendering basic, flat lists, supporting the most handy features: reactnative.dev removeClippedSubviews 속성을 true로 설정하면 화면 영역 밖에 있는 컴포넌트들을 자동으로 메모리에서 삭제한다. 기본적으로 React Native의 리스트나 스크롤뷰는 화면에 보이지 않는 항목들도 메모리에 유지하는데, 스크롤 동작이 부드럽게 유지되도록 하기 위한 것이지만, 많은 양의 아이템이 있는 경.. 공감수 0 댓글수 1 2024. 2. 28.
[React Native] tsconfig.json baseUrl 설정과 Unable to resolve module 에러 해결 Typescript baseUrl 설정 기존에 컴포넌트 혹은 파일을 import 할 때 경로가 깊어질수록 상대경로가 길어지는 문제가 있다. import { SvgImageExample } from '../../assets/svgs'; 하지만 tsconfig.json의 baseUrl 속성을 사용해 절대경로를 지정하면 ‘../../’ 부분이 생략이 가능해진다.나는 프로젝트 Root 하위에 src라는 폴더에서 코드를 관리하기 때문에 절대경로를 ‘./src’로 지정해 주었다. { "compilerOptions": { "baseUrl": "./src", }} 해당 속성을 지정해 주면 import 경로를 다음과 같이 가독성 좋게 변경할 수 있다. Unable to resolve module 에러 해결 하.. 공감수 0 댓글수 0 2024. 2. 22.
[React / React Native] 우아한 테크세미나 - React Query 와 상태관리 정리 현재 업무 프로젝트에서는 Redux를 사용 중인데, 서비스의 기능과 규모가 커질수록 redux, saga로 인해 코드가 복잡해지는 느낌이 있었다. 이를 개선하기 위한 방법을 고민하게 되었고, 국내 빅테크 기업에서도 React Query로의 전환 사례가 적지 않게 보여 react-query 적용을 결정하게 되었다. 적용 전, react query에 대해 다시 정리하고 공부하는 시간을 가지게 되었다. HTML 삽입 미리보기할 수 없는 소스 우아한 테크세미나 영상 https://www.youtube.com/watch?v=MArE6Hy371c 상태관리 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음 즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 ⇒ 관리해야하는.. 공감수 0 댓글수 0 2024. 2. 19.
[React / React Native] use-immer 란? https://github.com/immerjs/use-immer GitHub - immerjs/use-immer: Use immer to drive state with a React hooks Use immer to drive state with a React hooks. Contribute to immerjs/use-immer development by creating an account on GitHub. github.com A hook to use immer as a React hook to manipulate state. ⇒ immer 라이브러리를 기반으로 만들어진 React 환경에서 상태 관리를 할 수 있는 훅이다. 특징 use-immer의 특징은 다음과 같다. 복잡한 상태 업데이트: 상태가 .. 공감수 0 댓글수 0 2024. 2. 18.
[React Native/RN] npm과 yarn의 차이 JS 패키지 매니저 자바스크립트에서 많이 사용하는 패키지 매니저는 'npm'과 'yarn'이 있다. 두 가지 모두 JavaScript 프로젝트에서 의존성 관리와 패키지 설치를 용이하게 해주는 도구이다. 패키지를 쉽게 찾고, 다운로드하며, 의존성을 해결하여 프로젝트에 통합할 수 있도록 도와주는 역할을 한다. npm (Node Package Manager) https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript developmen.. 공감수 0 댓글수 0 2023. 6. 10.
[React Native/RN] lodash의 다양한 함수들 사용하기 (debounce(), chunk(), shuffle() 등...) 이전글 👉🏻[React Native/RN] lodash 사용하기 (findIndex(), flatten(), remove() 사용해보기) [React Native/RN] lodash 사용하기 (findIndex(), flatten(), remove() 사용해보기) lodash 란? lodash는 JavaScript의 유틸리티 라이브러리 중 하나로, 개발에서 자주 사용되는 일반적인 작업을 간단하게 처리할 수 있는 메서드와 함수를 제공한다. lodash는 배열과 객체를 다루는 함수를 ramveloper.tistory.com debounce() 함수 debounce() 함수는 입력받은 함수를 주어진 시간만큼 대기시켜 실행한다. 대기 시간 동안 추가적인 입력이 없을 경우에만 입력된 함수를 실행한다. import.. 공감수 0 댓글수 0 2023. 5. 1.
[React Native/RN] lodash 사용하기 (findIndex(), flatten(), remove() 사용해보기) lodash 란? lodash는 JavaScript의 유틸리티 라이브러리 중 하나로, 개발에서 자주 사용되는 일반적인 작업을 간단하게 처리할 수 있는 메서드와 함수를 제공한다. lodash는 배열과 객체를 다루는 함수를 포함하여 다양한 유틸리티 함수를 제공한다. 예를 들어, 배열의 요소를 반복하고 조작하는 함수, 객체를 다루는 함수, 함수를 조작하는 함수 등이 있다. lodash 설치 npm install lodash findIndex() 함수 findIndex() 함수는 배열에서 특정 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다. import { findIndex } from 'lodash'; const array = [ { id: 1, name: 'Apple' }, { id: 2, name: '.. 공감수 0 댓글수 0 2023. 4. 30.
[React Native/RN] Hooks - useContext 사용법, 전역변수 사용 이전글 👉🏻 [React Native/RN] Hooks이란? (useState, useEffect 사용법) 👉🏻 [React Native/RN] Hooks - useRef 사용법, TextInput onSubmitEditing 사용 예제 [React Native/RN] Hooks - useRef 사용법, TextInput onSubmitEditing 사용 예제 이전글 👉🏻 [React Native/RN] Hooks이란? (useState, useEffect 사용법) [React Native/RN] Hooks이란? (useState, useEffect 사용법) Hooks이란? Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 ramveloper.tistory.c.. 공감수 2 댓글수 0 2023. 1. 11.
[React Native/RN] Hooks - useRef 사용법, TextInput onSubmitEditing 사용 예제 이전글 👉🏻 [React Native/RN] Hooks이란? (useState, useEffect 사용법) [React Native/RN] Hooks이란? (useState, useEffect 사용법) Hooks이란? Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공한다. Hook은 ramveloper.tistory.com useRef Ref란? 재랜더링을 하지 않고 DOM을 선택해 직접 접근하기 위해 사용하는 것이다. useRef useRef는 .current 속성에 변경 가능한 값을 보유하는 '상자'와 같은.. 공감수 1 댓글수 0 2023. 1. 3.
[React Native/RN] Hooks이란? (useState, useEffect 사용법) Hooks이란? Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공한다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않지만 class 없이 React를 사용할 수 있게 해준다. 지원 버전 React 16.8.0 이상 React Native 0.59 이상 State Hook (useState) useState는 현재의 state 값과 이 값을 업데이트하는 함수.. 공감수 1 댓글수 0 2023. 1. 2.
[React Native/RN] 리액트 네이티브 구글 로그인 [Error: A non-recoverable sign in failure... [Error: A non-recoverable sign in failure occurred] 구글 로그인 시 해당 오류가 발생했다. 검색으로 확인해보니 간단하게 해결되는 문제였다. 파이어베이스 콘솔 프로젝트 설정에 '지원 이메일' 항목을 입력하면 되는 것이다. 1. add support email to solve this error 2. and wait 5 minutes your google login will be working fine stackoverflow에 따르면 5분정도를 기다려야한다고 한다. https://stackoverflow.com/questions/53816227/google-signin-sdk-is-failing-by-throwing-error-a-non-recoverable-sig.. 공감수 1 댓글수 0 2022. 12. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.