전에 useRef 에 대해서 공부를 한적이 있었는데오래된건지.. 좀 까먹어서 ㅠㅠㅠ조금 더 자세히 공부하고자 포스팅하게 되었다  1. useRef여기서 Ref 는 참조(Reference) 이담즉!!!! DOM 요소나 컴포넌트의 인스턴스에 대한 참조를 관리할 때 사용된다. 원래 다른 컴포넌트는 상태 변화나 부모 컴포넌트의 변경에 의해 다시 그려지지만useRef를 사용하면 컴포넌트가 리렌더링되더라도 useRef 에 저장된 값은 초기화되지 않고 그대로 유지된다.  따라서.. useRef 로 저장한 값은 컴포넌트가 리렌더링될 때도 유지되면서 값이 변경되어도 컴포넌트를 리렌더링 하지 않느다. 따라서 리렌더링과는 별개로 값을 저장하거나 컴포넌트에 접근하는데 유용하다.   🔇 포커스를 설정하거나 스크롤 위치를 변경..

오늘은 . . 카카오 디벨롭스를 활용하여 카카오 로그인 기능을 구현해보겠다.  이런 기능을 구현해보고자 한다! 1. 카카오 디벨롭스 회원가입하고 api 받기https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 여기에서 회원가입을 하고 내 애플리케이션 등록을 해야 시작할 수 있다!카카오로 바로 회원가입을 하고 이 페이지에서 애플리케이션 추가하기 버튼을 눌러 내 애플리케이션을 등록한다.  그 후에 앱 키를 발급받는다!나는 네이티브 앱 키를 복사하여 사용하였다.   2.  로그인권한 '예' 하기카카오디벨롭스..

1. asyncstorage 란 ?모바일 애플리케이션 (iOS 및 Android)에서 데이터를 저장하는 데 사용되는 라이브러리이다.AsyncStorage는 React Native 애플리케이션에서 영구적으로 데이터를 저장해야 할 때 주로 사용된다.   2. 🤔 이걸 왜 써야하지 ?우리는 어플을 종료후에 다시 실행하였을 때 데이터가 남아있지 않은 문제가 생길 수 있다. 이때 key-value 기반으로 로컬에 데이터를 저장할 수 있게 해주는 라이브러리를 사용할 수 있다. 즉 로컬 저장소로 애플리케이션의 클라이언트 측 (사용자의 기기) 에 데이터를 저장한다. 이렇게 하면 어플이 다시 실행될 때 데이터를 복원하는 데 사용이 된다.  🙋🏻‍♀️  * 사용자의 기기에 데이터를 저장하는 이유는 무엇일까 ? ?우리..

https://khw063011.tistory.com/44 [RN] 네비게이션 (1)- navigation 사용하기https://reactnavigation.org/docs/navigation-container/😘 Navigation 이란?React Navigation 라이브러리에서 제공하는 컴포넌트로, 내비게이션 상태를 관리하고 앱의 내비게이션 트리를 설정하는 역할을 한다.모든khw063011.tistory.com 하단바 각각에 navigation 을 설정해두었는데이번에 하단바에서 좀 수정하고싶은 오류가 생겨서 공부를 하다가네비게이션 상태에 대해 좀 더 공부할 게 생겨서 포스팅을 한당  1. 문제상황 지금 나는 게시판을 작성하는 글 작성 페이지와작성된 글들을 볼 수 있는 커뮤니티 페이지로 나눠서 관리..

저번에 axios 사용법을 공부했었는데 이번에 마침 ! api 호출에서 조금 더 추가된 기능을 공부해야할 필요가 있었어서 아예 싹 다 정리해보고자 한다.  1. axios 란? axios는 브라우저와 Node.js 환경에서 사용 가능한 Promise 기반의 HTTP 클라이언트.웹 애플리케이션에서 서버와의 통신을 단순화한다.RESTful API 와 상호작용할 때 유용하게 사용할 수 있다.자동으로 JSON 데이터를 직렬화하거나 파싱해준다.요청과 응답 전후에 특정 작업을 수행할 수 있다.node js 와 브라우저 모두에서 사용가능한 범용적인 HTTP 클라이언트이다.  2. Axios와 Fetch의 차이점기능axiosfetch데이터 형식기본적으로 JSON 지원, 추가적인 설정 없이도 JSON 데이터를 쉽게 다룬..

https://reactnavigation.org/docs/params/  Passing parameters to routes | React NavigationRemember when I said "more on that later when we talk about params!"? Well, the time has come.reactnavigation.org리액트 네이티브에서는 navigation 기능을 사용하여 페이지를 이동하면서 데이터를 함께 전달시킬 수 있다. 이때 전달되는 데이터를 'route parmas' 라고 한다. 이 부분을 공식문서를 보면서 함께 이해해보자!!!  흠 잠시만~~~~~  파라미터란? 한국어로는 매개변수라고 한다.-매개변수란 변수의 특별한 한종류인데 함수등과 같은 서브루틴의 ..

로그인화면을 구현하면서로그인 api 를 구축하는데 계속~^^ ㅎㅎ 계속~ ㅎㅎ에러가 떴다 ... 자꾸 network Error 라고 뜨니 도대체 뭐가 문제인지 모르겠고 작동 자체가 안됐다 ㅠ백엔드 분들께 물어봐도 서버자체는 postman 으로 작동을 잘 하고 있고 엔드포인트도 정확하다고 하셔서....내 문제 자체를 정확히 알 수 없었다.  구글링을 하는 수밖에..ㅜ 구글링을 해보니 생각보다 많은 사람들이 이러한 오류를 겪어본것을 알 수 있었다.해결방안이 굉장히 많았고 그 중 내가 시도한 몇가지만 정리해보자면 1. 서버포트가 열려있는지 확인 서버 자체에 접속이 안되어서백엔드 개발자 분께 서버 열려있는지 확인을 해달라고 하였다.url 자체가 작동하지 않았었는데 서버포트가 닫혀있던 문제였다. 첫 관문은 해결!..

1. SafeAreaView화면의 안전한 영역 내에서 콘텐츠를 렌더링하는 데 사용된다.안전한 영역(Safe Area)은 기기의 물리적인 특징(예: 노치, 홈 인디케이터) 때문에 콘텐츠가 가려지지 않도록 보장할 수 있다.예를들어 최신 Ipone 모델의 상단 노치 또는 하단의 홈 인디케이터를 피해서 콘텐츠를 배치하고 싶을 때 SafeAreaView 를 사용하면 안전한 영역 내에 콘텐츠가 위치하게 되는 것이다..단순히 View로만 코드를 감쌌을 때import React from 'react';import {View, Text, Button} from 'react-native';import {useNavigation} from '@react-navigation/native';const WelcomeScreen:..

📌 FlatList란? FlatList는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 리액트네이티브 컴포넌트 흠... 쓰면 되지 않나? 🤔  ScrollView: RN에서 많은 양의 데이터를 출력 할 때  사용화면의 높이보다 내용물이 커질 때 자동으로 스크롤이 가능해짐 Scroll을 생성하여 화면에 벗어난 부분도 볼 수 있게 함구현하려는 내용의 높이가 실제 화면의 높이보다 클 때 화면을 스크롤할 수 있도록 하기 위해 사용한다.FlatList:RN에서 많은 양의 데이터를 출력할 때 사용한 번에 모든 데이터를 렌더링하지 않고 화면에 보여지는 부분만 렌더링함 (--> 설정한 수만큼의 데이터만 보여지게 할수도 있음)데이터의 길이가 가변적이고 데이터의 양을 예측할 수 없는 경우에 적절..

이용약관 UI 에 대해 생각해볼 것1. '선택'과 '필수' 레이블에 대한 분리2. 이용약관 글에 대한 배치https://brunch.co.kr/@fbrudtjr1/34 실전 UI/UX - 약관동의를 설계할때 고려해야할 것들약관동의에 숨겨진 다양한 UI/UX적 장치들 | 위드코로나가 시작되기 일주일전. YTN 뉴스를 통해 흘러나오는 위드코로나 소식을 보고 서점군은 왠지 모를 불안감을 느낍니다. "설마... 방역정책 풀brunch.co.kr 좋은 글이 있어 공유합니닷.. 회원가입 창을 구현하면서 이용약관에 대해 고민을 해보았다. 나는 어차피 이러한 UI 들을 기획자분들과 디자이너분들이 이미 다 설계를 해주셔서 상관이 없었고 짜여진 디자인에서 코드만 입혀보았다.  디자이너분께서 넘겨주신 디자인은 대충 이러한 ..