열정보단 시스템

로그인을 성공한 상태에서 앱을 껐다 켰을 때 로그인 상태를 유지시켜주기 위한 코드를 짜다가 난관에 부딪혔다. 엄청 간단해보이던 구현이 생각보다 길어졌으나 그 덕에 AsyncStorage에 대해 더 공부하게 되었다. (아니면 지름길을 내가 볼 줄 모르는 것이라던지..) 기존에는 로그인/회원가입을 담당하는 AuthStack과 BottomTabNavigator로 이루어진 MainTab에 대한 분기점은 아래 코드와 같이 삼항연산자를 통하여 간단하게 구현해놓았던 상태이다. 무튼 리액트네이티브서울 커뮤니티에 이번 일을 계기로 질문글을 하나 작성하게 되었다. 작성하는 김에 Redux를 활용하면 어떠한 이점을 취할 수 있는지 구체적인 솔루션을 물어보았다. 부족한 질문에 대한 답변을 두 분이나 달아주셔서 안도.. 우선,..

제목 그대로 토큰과 url path 등 모든게 정상적으로 설정이 되어있음에도 불구하고 403 에러가 난다. 결론은 서버 내부 권한 문제인데 이는 strapi 페이지에서 Setting 항목을 통해 수정이 가능하다. 스택플로우 참고-! Strapi API calling error: {"statusCode":403,"error":"Forbidden","message":"Forbidden"} I am working with strapi and i am getting an error 403 Forbidden on calling an api e.g http://localhost:1337/data I've called all the APIs and the result is same 403 error I've trie..

useContext가 가지는 의미. 역할. 로 시작 https://pks2974.medium.com/react-context-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC-9c35ce6617fc React Context 간단 정리 React Context API 를 간단한 예제로 알아보자 pks2974.medium.com 유저 정보를 위한 전역 상태 관리를 적용하려고 시작한 공부.. 아직 정리 중 context 만들었으면 앱 전체를 Provider로 감싸주기 context 실제 사용. 사용한 곳은 가입을 담당하는 Hook 에 적용 가입시 발생한 토큰 저장, 로그아웃시 토큰 삭제를 담당하는 함수

정리 전 진행 상황 - Nesting Navigator 구조 재구성 (StackNavigator 간소화(MainStack 삭제 후 나머지 스크린을 RootStack으로 올림) - Navigator 별로 ParamList Setting - SignUp, HomeView-PostCard Button 처럼 navigate이 필요한 화면에서 NavigationProps(필요시 CompositenNavigateProp 사용) Setting 위 사진처럼 Navigator에 대한 Type Checking 만 별개 클래스로 코드를 짰다. Screen에 대한 TypeChecking은 NavigatinoProp과 RouteProp이 있는데, 화면마다 넣어줄 애들을 미리 세팅하다가 보니 너무 복잡해져서 코드가 꼬이면서 Ne..

이번 게시글에서는 리액트 쿼리에 대해 정리해보려고 한다. 개념을 정리함에 있어서 이 기능이 어떤 의미와 역할을 가지는지 파악하는 과정은 중요하며, 이는 내가 구현하는 코드에 어떤 이로운 영향을 미치는지 알아내는 중요한 과정이다. 우선, 리액트 쿼리(React Query)는 API 연동에 특화된 라이브러리로서 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와준다. 기존에 우리가 데이터를 넣어주거나 로딩 indicator를 띄워줄 때 또는 모달을 생성해줄 때 다음과 같이 useState를 써서 구현해주었다. const Example = () => { const [loading, setLoading] = useState(false); const [data, setData] = useState(null)..

코로나 양성이 떠서 자가격리를 하면서 체력이 많이 떨어졌다. 물론 방에서도 근력과 유산소 운동을 하긴 했지만, 감기 기운 있을 때 하루종일 잠을 자다보니 낮에도 너무 졸려서 공포방송을 틀어놓고 공부하는 해야할 정도..이다. 근황과 최근 생각에 대해 정리해볼 필요가 있기도 하고, 중간점검도 해볼 겸 해서 글을 작성하게 되었다. 우선, '열정은 기본이며, 시스템이 갖춰진 개발자'가 되자는 목표를 세운 것에 대해 간단히 부연설명을 하면서 서두를 시작해볼까 한다. 나는 동기부여가 무척 중요한 사람이다. 사람의 몸 역시 알고리즘으로 이루어져 있다고 생각하면 무언가를 실행함에 있어 실천하기가 더 편해진다. 이를 테면, 에너지 넘치는 텐션을 유지하기 위해 베이스가 강한 음악을 틀어놓고 샤워나 코딩을 하기도 하고, 먹..

구글과 무슨 악연이 있는지.. 분명 제기능을 잘 하고 있던 소셜 로그인이 안드로이드에서만 빌드 에러를 부려 말썽이다.. 첫 번째로 해결해야할 에러.. 1. react.gradle 에러 https://stackoverflow.com/questions/40019584/could-not-find-method-android-for-arguments-org-gradle-api-project Could not find method android() for arguments org.gradle.api.Project Getting a bug, when I try to compile my project in studio , i have search quite a bit with no real solution to it ..

이번에는 FlatList로 구현해놓은 홈뷰에 새로운 게시글을 넣어볼까 한다. 과정은 다음과 같다. HomeNavigation의 HeaderRight 버튼을 통해 모달뷰 접근 모달뷰에서 선택지를 골라서(카메라/앨범/--) UploadView 접근 UploadView에서 게시글에 들어갈 새로운 이미지소스와 텍스트를 입력 상단 체크 버튼 누를 시 서버로 Post 요청 홈뷰에서 리스트 Refresh할 시, 서버로 모든 게시글 Get 요청 중간에 게시글 텍스트와 이미지소스를 제외한 데이터만 받아오는 에러가 있었는데, 타입형 문제도 아니고 뭐지? 싶어서 어제 하루종일 낑낑대다가 결국 잠들었다.. 오늘 일어나서 터미널창 끄고 시뮬레이터도 다시 실행했더니 해결.. (네?..) 무튼 nodejs 코드는 다음을 추가했다...

React Native 안에서 axios 를 사용해서 정보를 업로드(post)하고, 가져오는(get) 방식을 직접 내 눈으로 확인하고 싶어서 간단한 서버를 만들어보기로 했다. 처음에는 어떻게 구현하는 건지 몰랐기에 엄청나게 복잡할 것으로 예상되기도 했었고, 혼자 공부하는 만큼 조언을 구하기 위해 카카오톡 오픈채팅방을 활용하여 업계 선배들에게 물어본 결과 직접 만들어보는 것이 도움이 될 거라고 하셨다. 서버를 만드는 데에 목적은 다음과 같다. 취업 후 백엔드 개발자와의 원활한 소통 RESTful API 설계 보완 구축은 가장 먼저 npm init 과 express 설치를 통해 package.json을 생성하고, VSCode 상에서 폴더를 불러와서 index.js 로 구현한다. package.json 생성 ..

사용자가 회원가입하기 위한 정보를 입력하기 전에 앱 권한 설정과 본인 인증 확인이 필요하다. 이번 시간에는 전화번호를 입력하여 본인 인증 기능을 구현하려고 한다.기본적인 화면 UI는 아래와 같이 TextInput과 버튼이 전부이다.이를 좀 더 세부적으로 구현하기 위해, TextInput은 전화번호를 입력하기 위해 11개의 번호만 입력할 수 있도록 제한시켰고, 11개가 입력되었을 때만 버튼의 disabled에 false 값을 주었다. 버튼은 TouchableOpcity로 구현했으며 키보드를 제외한 영역을 터치했을 시 키보드가 자동으로 사라지기 위해 TouchableWithoutFeedback을 사용해서 onPress에 Keyboard.dismiss() 함수를 넣어줬다. 그러나 TouchableWithout..