chobyeonggyu03 님의 블로그

이번 글에서는 3주만에 해결한 React Native 환경에서 mutilpart/form-data 형태로 서버에 JSON데이터와 이미지 파일을 동시에 보내는 방법에 대해 정리해 보도록 하겠다. 글쓴이는 여러 시행착오 끝에 react-native-image-picker와 react-native-fs 라이브러리를 활용하여 서버에 JSON 데이터와 이미지 파일을 같이 보내는 걸 성공하였는데, 이 2개의 라이브러리를 활용하는 방법에 대해 설명하기 전에 먼저 서버와 포스트맨을 활용해 어떠한 데이터를 서버에 전달해야 했는지에 대해 정리해 보도록 하겠다. (RN언어가 아니라면 앨범에 접근가능한 사진선택 관련 라이브러리와 파일시스템 라이브러리를 각자 언어에 맞는 라이브러리로 다운받아주면 된다.) 서버측 코드 위의 사진..

이번에 나가는 한국관광공사x카카오 공공 api 활용 공모전 프로젝트를 진행하며, 숙소 등록 화면의 프론트엔드와 백엔드를 병합시키는 과정에서 JSON 데이터만을 String 형태로 변환하여 사용자가 입력한 데이터를 서버에 보낼때는 문제 없이 작동했지만, multipart/form-data 형태로 바꾸어 서버에 이미지 파일과 Json데이터를 같이 보낼 때 정말 많은 오류들을 발생해 숙소 등록시에 이미지를 서버와 aws s3를 활용한 DB에 제대로 보내지 못하고 있던 상황이었다. 3주동안 해당 오류에 직면하게 된 이유는 아무래도 앱 개발 환경과 백엔드와의 통신, React Native 언어를 모두 처음 접해보는 것이었기에 사소한 오류에서부터 남들보다 힘겹게 걸음마를 떼기 시작한게 가장 크지 않을까 싶다. 잡담..

이번 글에서는 아직까지도 이미지를 파일형태로 서버 api 보낼 때 생기는 오류를 해결하지 못하여 'react-native-blob-util'가 아닌 'react-native-fs' 라이브러리를 활용해 해결해 보고자 아래의 공식문서를 참고하여 'react-native-fs' 사용법에 대해 정리해보고자 한다. https://github.com/itinance/react-native-fs GitHub - itinance/react-native-fs: Native filesystem access for react-nativeNative filesystem access for react-native. Contribute to itinance/react-native-fs development by creating ..

문제 그룹 단어란 단어에 존재하는 모든 문자에 대해서, 각 문자가 연속해서 나타나는 경우만을 말한다. 예를 들면, ccazzzzbb는 c, a, z, b가 모두 연속해서 나타나고, kin도 k, i, n이 연속해서 나타나기 때문에 그룹 단어이지만, aabbbccb는 b가 떨어져서 나타나기 때문에 그룹 단어가 아니다. 단어 N개를 입력으로 받아 그룹 단어의 개수를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 단어의 개수 N이 들어온다. N은 100보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 단어가 들어온다. 단어는 알파벳 소문자로만 되어있고 중복되지 않으며, 길이는 최대 100이다. 출력 첫째 줄에 그룹 단어의 개수를 출력한다. 예제 입력 1 3 happy new year 예제 출력 1 3 ..

문제예전에는 운영체제에서 크로아티아 알파벳을 입력할 수가 없었다. 따라서, 다음과 같이 크로아티아 알파벳을 변경해서 입력했다.  크로아티아 알파벳변경  čc=ćc-dždz=đd-ljljnjnjšs=žz=  예를 들어, ljes=njak은 크로아티아 알파벳 6개(lj, e, š, nj, a, k)로 이루어져 있다. 단어가 주어졌을 때, 몇 개의 크로아티아 알파벳으로 이루어져 있는지 출력한다.dž는 무조건 하나의 알파벳으로 쓰이고, d와 ž가 분리된 것으로 보지 않는다. lj와 nj도 마찬가지이다. 위 목록에 없는 알파벳은 한 글자씩 센다.   입력첫째 줄에 최대 100글자의 단어가 주어진다. 알파벳 소문자와 '-', '='로만 이루어져 있다.단어는 크로아티아 알파벳으로 이루어져 있다. 문제 설명의 표에 나..

문제알파벳 대소문자로 된 단어가 주어지면, 이 단어에서 가장 많이 사용된 알파벳이 무엇인지 알아내는 프로그램을 작성하시오. 단, 대문자와 소문자를 구분하지 않는다.  입력첫째 줄에 알파벳 대소문자로 이루어진 단어가 주어진다. 주어지는 단어의 길이는 1,000,000을 넘지 않는다.  출력첫째 줄에 이 단어에서 가장 많이 사용된 알파벳을 대문자로 출력한다. 단, 가장 많이 사용된 알파벳이 여러 개 존재하는 경우에는 ?를 출력한다.   예제 입력 1 Mississipi예제 출력 1 ?예제 입력 2 zZa예제 출력 2 Z예제 입력 3 z예제 출력 3 Z예제 입력 4 baaa예제 출력 4 A    나는 이 문제를 처음봤을 떄 가장 먼저 들었던 생각은 if문에 (대문자 || 소문자) 의 조건을 넣어 카운팅하여 카..

앞서 정리한 Axios의 기본적인 사용법에 대한 글에 이어 이번글에서는 현재 직면한 문제인 dataform을 활용해 json객체와 이미지 파일을 동시에 서버 api로 보내는 과정에서 생기는 type 에러를 해결하는데에 있어, Axios에서 클라이언트가 서버와 http 통신을 할 때 텍스트나 이미지 파일들을 전송할 때 사용하는 데이터 구조인 FormData에 대한 개념이 부족했기에 해당 개념부터 짚고 넘어가 보자 한다. FormData란?FormData는 서버로 웹 form의 데이터를 쉽게 구성하여 전송할 수 있도록 도와주는 웹 API에서 사용되는 데이터 객체로, 'key'-'vlaue'로 데이터들을 관리하며, 비동기 HTTP 요청을 통해 데이터를 서버에 전송해주는 데이터 객체이다. FormData의 특징..

현재 진행중인 공모전에서 Axios 라이브러리를 활용하여 서버 api와 통신 중, JSON파일만을 보낼때는 제대로 통신되었지만 이미지를 파일의 형태로 json파일과 같이 전송하는 부분에서 막히게 되어 앞전에 안드로이드 네트워크에 대한 공부한 내용을 바탕으로 AXIOS 라이브러리에 관해서도 한번 정리해보고자 한다. Axios란 무엇일까? 공식문서에서 정의한 Axios는 '브라우저와 node.js에서 사용할 수 있는 promise 기반의 HTTP 클라이언트 라이브러리'로써 서버와의 HTTP통신을 쉽게 할 수 있게 도와주는 Javascript기반의 비동기형 라이브러리이다. Axios의 특징들 Promise 기반 (ES6) : Axios는 promise기반의 API를 사용하기에 비동기형 HTTP요청을 쉽고 효율..

문제알파벳 소문자로만 이루어진 단어가 주어진다. 이때, 이 단어가 팰린드롬인지 아닌지 확인하는 프로그램을 작성하시오.팰린드롬이란 앞으로 읽을 때와 거꾸로 읽을 때 똑같은 단어를 말한다. level, noon은 팰린드롬이고, baekjoon, online, judge는 팰린드롬이 아니다.  입력첫째 줄에 단어가 주어진다. 단어의 길이는 1보다 크거나 같고, 100보다 작거나 같으며, 알파벳 소문자로만 이루어져 있다.  출력첫째 줄에 팰린드롬이면 1, 아니면 0을 출력한다.  예제 입력 1 level예제 출력 1 1예제 입력 2 baekjoon 예제 출력 2 0    이 문제를 처음 봤을 때 가장 먼저 StringBuilder와 reverse 속성을 활용해 문자열을 뒤집은 뒤 그래도 원래 문자열과 같은지 비..

문제예제를 보고 규칙을 유추한 뒤에 별을 찍어 보세요.  입력첫째 줄에 N(1 ≤ N ≤ 100)이 주어진다.  출력첫째 줄부터 2×N-1번째 줄까지 차례대로 별을 출력한다.  예제 입력 1 5예제 출력 1  * *** ***** **************** ******* ***** *** *   이 문제를 처음 봤을 때 가장 먼저들었던 생각은 저번에 마름모의 절반을 구현해보았었기 때문에 왼쪽부분을 구현하고" "공백과 별의 위치를 바꿔 0번쨰부터 시작하는 것이아니라 n번쨰 부터 뒤집은 마름모를 출력해주면 될 것 같다는 생각이 들어 저번에 구현했던 코드를 기반으로 풀이를 진행보았다.   하지만 풀이 동중 윈쪽와 오른쪽으로 나눠서 구현하는건 저번에 짜두었던 반복문 구조에 맞지 않았고,..