서버 코드를 어느정도 마무리 한 후 클라이언트에 넘어가서 프런트를 도와 코드를 어느정도 작성하기로 했다. 다들 맡은 컴포넌트와 기능들이 있어 내가 바로 투입되서 작성할 수 있는 부분을 맡았고 일단 고양이를 지도 위에 표시해주는 마커를 받고 또 그 카루셀들을 표시해주는 부분을 맡았다. 이 부분을 구현하기 위해 addCat을 성공적으로 작동하는 부분도 손을 봤고 고양이 추가 후 바로 맵에 적용이 돼 보이게 하는 부분도 적용을 하기 위해 노력했다.
먼저 마커를 표시해주고 카루셀을 표시해주기 위해서는 맵 스토어에 있는 getMapInfo를 통해 현재 화면에 찍혀있는 좌표들을 보내 그 해당 지역에 있는 고양이 정보들을 보내주는 함수를 완성시키고 또 그 함수를 받아와 map 을 돌면서 그 위치에 마커를 찍어주는 부분을 구성하고 다듬었다. 음 일단 구분을 위해 마커와 카루셀을 다른 배열에 관리해서 마커는 지도에서 마커를 찍어주는 용으로, 카루셀은 카루셀 디스플레이 용으로 사용했다.
getMapInfo = async () => {
const currentBound = this.currentBoundingBox;
await axios
.post(`${SERVER_URL}/map`, { location: currentBound }, defaultCredential)
.then(res => {
this.markers = res.data;
this.carousels = res.data;
const matchedIndex = this.carousels.findIndex((data) => data.catId === this.selectedCatId);
if (matchedIndex === -1) {
this.isShowingCarousel = false;
} else {
this.carouselIndex = matchedIndex;
}
return true;
})
.catch(err => console.dir(err));
};정보를 배열에 담아주면 map을 돌면서 필요한 부분들을 가져와 렌더에 사용한다. 화면이 드래그 되다가 멈추면 그 좌표를 기반으로 그 안의 고양이 정보들을 다 가져와서 생각보다 많은 요청을 보낸다. 근데 이 방법이 최선인 것 같아 이렇게 구현하기로 했다.
또 고양이 추가해주는 함수가 막연히 정보를 채워서 보내는 게 아닌 정보가 다 채워졌는지, 맞는 포맷인지, 또 고양이 위치를 표시하는 마커가 움직였는지 다 체크를 해서 요청을 보내는 함수를 세부적으로 구성했다. 몇개의 함수를 걸쳐서 추가해주기 전에 형식이 맞는지 확인을 한다.
addCat = async () => {
const {
addCatAddress,
addCatLocation,
addCatPhotoPath,
addCatNickname,
addCatDescription,
addCatSpecies,
addCatCut,
} = this;
const result = await axios
.post(
`${SERVER_URL}/cat/addcat`,
{
address: addCatAddress,
location: addCatLocation,
photoPath: addCatPhotoPath,
catNickname: addCatNickname,
catDescription: addCatDescription,
catSpecies: addCatSpecies,
cut: addCatCut,
},
defaultCredential,
)
.then((res) => {
Alert.alert('등록에 성공하였습니다!');
this.root.helper.clearAddCatBio('addCatBio');
return true;
})
.catch((err) => {
if (err.response && err.response.status === 404) {
Alert.alert('고양이를 등록할 수 없습니다');
} else {
console.dir(err);
}
});
return result;
};addCat 함수는 필요한 정보들을 받아 정말 다이렉트하게 요청을 보내고, 고양이를 데이터베이스에 추가해준다.
<TouchableOpacity
onPress={async () => {
const validation = await validateAddCat();
if (validation) {
const addressResult = await getAddress();
// console.log('주소검증 성공', addressResult);
if (addressResult) {
const addCatResult = await addCat();
// console.log('등록 성공', addCatResult);
if (addCatResult) {
// Alert.alert('등록에 성공하였습니다!');
navigation.goBack();
await getMapInfo();
} else {
console.log('등록 실패');
Alert.alert('고양이를 등록할 수 없습니다');
navigation.goBack();
}
} else {
console.log('주소검증 실패');
Alert.alert('고양이를 등록할 수 없습니다');
navigation.goBack();
}
} else {
console.log('검증 실패');
}
}}
>하지만 고양이를 등록해주는 컴포넌트에서 먼저 등록 버튼을 누르면 validateAddCat을 통해 형식이 맞는 지 확인하고, 주소가 적절한지 확인하고 또 등록이 성공적으로 됬는지 확인한다. 그리고 성공적으로 등록이 되면 뒤로 돌아가면서 위치 반경에 있는 고양이 정보를 가져오는 getMapInfo라는 함수를 실행시켜주는데 이 부분은 고양이 추가 이후 navigation.goback()으로 지도로 돌아갈 시 정보를 가져오는 요청이 없어 바로 추가된 고양이를 확인 못하는 부분을 보완하려 넣어주었다. 지도로 돌아가며 요청을 보내 정보를 업데이트해 자신이 추가한 고양이가 바로 지도에 뜨는 것을 확인할 수 있다. 엑스포로 어플이 구현돼 이 부분을 확인하기위해 android 에뮬레이터를 쓰다쓰다 계속 낮은 컴퓨터 사양으로 인해 컴퓨터가 멈추고 속도가 너무 느려 내 개인 핸드폰에 엑스포 앱을 깔아 빌드를 해 확인을 했다. 디버거를 키고 사용하면 속도가 매우 느려지는 것도 이번에 안 사실이다.
프런트에서 테스트를 위해 고양이 상태에 이모티콘을 추가해 보내주고 있었는데 형식이 맞지 않다고 계속 truncated error가 났다...
CREATE DATABASE cats CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
이 명령어는 한글을 사용 가능하기 위해 처음 데이터 베이스를 만들 때 utf8mb4로 기본 character set을 설정해 한글 사용을 가능케 한건데 이모티콘을 사용가능하기 위해서는 데이터베이스의 기본 character set 전체를 utf8mb4로 설정해줘야 가능하다고 나와 그걸 가능케 하기위해 엄청 많이 검색을 한 것 같다.
데이터베이스의 모든 character set수정을 위해선 데이터베이스의 my.conf를 수정해줘야 했다. 수정을 위해 검색을 하고하고 /etc/mysql 로 들어가 my.conf를 열어보니
!includedir /etc/mysql/conf.d/
이 줄 하나만 적용이 되게 되있어 conf.d를 가보니 mysql.cnf 안에 [mysql] 하나 들어있었다. 아마 이 안에 코드를 수정을 시도했는데 에러가 떠 당황해서 여러 군데를 뒤져봐 mysql.conf.d/를 들어가 거기 안에 새로운 코드를 작성해 주었다.
character_set_server=utf8mb4
collation_server=utf8mb4_unicode_ci
init_connect=set collation_connection=utf8mb4_unicode_ci
init_connect=set names utf8
collation-server = utf8mb4_unicode_ci
character-set-server = utf8mb4
skip-character-set-client-handshake = TRUE
이 부분을 넣어준 후 my.conf에
!includedir /etc/mysql/mysql.conf.d/
를 추가해주어 방금 수정한 부분을 적용가능케 해주었다.
이렇게 해주고 status를 통해 데이터베이스의 세팅을 확인하니 기본 캐릭터셋이 utf8mb4이 되는 걸로 확인했다. 이렇게 실행을 하니 이모티콘이 삽입되는 것을 확인할 수 있었다.
몇일 째 데브로그가 밀려...시간도 많이 없어서 좀 아쉽다...프로젝트 하는데 시간이 계속 부족한 것 같다. 소켓도 적용해야 하는데...언제하련지
