열정보단 시스템

여태 공부했던 서버 요청에 대한 모든 것들을 정리하려고 한다. 일단 서버와의 통신을 위해 axios를 쭉 사용해왔는데 가장 먼저 왜 'axios'인지부터 시작해서 .get/.post에 대한 구현 방법을 다루고, 두 번째 글에서는 모듈화를 위한 react-query, custom Hook 작성까지 다뤄볼 예정이다. (axios.create로 인스턴스를 만들어 간단한 모듈화 진행은 다음 링크를 타고 가면 볼 수 있다.) 앱 개발자에게 있어 굉장히 중요한 주제들 중 하나라고 생각한 만큼 이번 글은 길어질 것 같으니 공부하시는 분들에게 필요한 개념만 쇽-쇽 찾아가길 바란다. // if(도움이 된다면...) 왜 Axios 인가 서버와의 통신을 위해 어떤 기술을 써야하는가가 독학 초반에서의 가장 큰 궁금증이었다. ..

이번에는 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 생성 ..

구글 로그인 구현을 iOS, Android 모두 완료했다. 구글 로그인을 마치는 순간, 구글 서버로부터 유저 정보와 토큰이 날라올 것이고, 우리는 여기서 필요한 정보를 저장하여 백으로 보내줄 것이다. Swift를 공부할 때엔, 받아온 token을 KeychainWrapper를 활용하여 안전하게 보관을 하고 필요할 때마다 꺼내서 인터셉터를 통해 헤더에 얹어서 API를 쏴주었다. RN 스터디 순서는 다음과 같다. 토큰을 어떻게 저장할 것인지 Axios 상에서 Interceptor는 어떻게 구현하는지 헤더에 얹어서 token을 .post하였다면, refresh Token 갱신을 어떻게 하는지 Token 저장하기 보통 State와 같은 Component의 상태 관리를 위해서는 Redux를 사용한다. 하지만 우리..

Restful API 는 내가 개발이 재미있다고 느낀 첫 번째 관문이다. 화면 상에 시각적 요소들을 배치하는 것도 중요한 장치이지만 눈에 보이지 않는 서버 자원들을 화면으로 옮겨담는 것은 굉장히 흥미로운 일이라고 생각한다. Swift의 Alamofire 라이브러리로 API의 개념을 처음 공부했을 때에는 그 개념을 이해하는 데에만 며칠이 걸렸던 것 같다. 문장을 읽어도 '이게 무슨 말이지?' 싶었고 API 개념, 구현뿐만 아니라 generic type과 @escaping, closure, json parsing, codable & decodable, 비동기(DispatchQueue.main.async), 싱글톤과 같이 얽히면서 서로 구현에 들어가는 것들에 대한 공부도 필요했다. 그 결과, 짧은 개발 독학 ..