React Native로 2주동안 당근마켓 앱 클론 '키위 마켓'을 시작했다. 프론트엔드 2명과 백엔드 2명, 총 4명의 팀원이 함께 했다.

로그인

당근 마켓 앱에서 로그인은 휴대폰 인증으로 이루어진다. 이미 가입된 회원이라면 휴대폰 인증으로 바로 로그인이 가능하며, 신규 회원이라도 일단 휴대폰 인증 후 회원가입 페이지로 넘어가게 된다. 휴대폰 번호를 입력하고 인증 문자 받기 버튼을 누르면 인증 문자를 입력할 수 있는 창이 나타나게 된다.

로그인은 백엔드에서 휴대폰 문자인증을 구현하여 당근마켓과 동일한 방식으로 프론트에서도 구현할 수 있었다. 아래 코드는 현재 테스트 중인 코드로 아직 개발자를 위한 alert 창이 존재한다.

• 인증 번호 받기

const getAuthNum = async () => {
  try {
    const response = await fetch(PHONE_AUTH_API, {
      method: "POST",
      body: JSON.stringify({
        phone_number: phoneNumber,
      }),
    });
    const result = await response.json();
  } catch {
    // code..
  }
};

• 인증 번호 인증하기

const validateAuthNum = async () => {
  try {
    setOnValidating(true);
    const response = await fetch(AUTH_CHECK_API, {
      method: "POST",
      body: JSON.stringify({
        phone_number: phoneNumber,
        auth_number: authNumber,
      }),
    });
    const result = await response.json();
    if (result.message === "SIGNUP") {
      navigation.push("SignUp", { phoneNumber: phoneNumber });
    } else if (result.message === "SIGNIN") {
      alert("이미 가입된 회원입니다. 로그인 시켜줄게요!");
      AsyncStorage.setItem("data", result.token);
      Keyboard.dismiss();
      setOnValidating(false);
      navigation.replace("BottomTabNavigator");
    } else if (result.message === "DENY") {
      setOnValidating(false);
      alert("잘못된 인증번호 입니다.");
    } else {
      alert("버그 발견");
    }
  } catch {
    // code..
  }
};

이미 회원가입한 기존 유저라면 토큰을 저장하고 바로 메인 화면으로 넘어가게 된다. 신규 회원의 경우 회원가입 페이지로 넘어간다. 휴대폰 번호를 입력하는 < TextInput > 컴포넌트 코드에 넘겨주는 많은 props가 기억에남는다.

<PhoneNumberInput
  style={focusPhoneNum && styles.focused}
  value={phoneNumber}
  placeholder="전화번호를 입력해주세요"
  maxLength={PHONE_NUMBER_LENGTH}
  onChangeText={(phoneNumber) => setPhoneNumber(phoneNumber)}
  textContentType="telephoneNumber"
  keyboardType="number-pad"
  selectionColor={"#A0C95E"}
  onFocus={() => setFocusPhoneNum(true)}
  onBlur={() => {setFocusPhoneNum(false)}}
/>

회원가입

실제 당근마켓 회원가입 페이지와 상관없이 회원가입 페이지는 아래와 같이 구현하였다.

사용자로부터 현재 위치를 인증받아 그 곳의 한글 주소명을 받아온다. 회원가입시 필요한 정보는 사용자의 현재 주소 법정동의 지역 코드, 휴대폰 번호, 닉네임 세 가지가 필요하다. 위치 인증을 하면서 지역 코드를 받아오고, 백엔드 통신으로 닉네임 중복 검사를 해서 통과해야만 가입이 가능하다.

expo-location, kakao map REST API를 사용하여 현재 위치에 대한 주소와 지역코드를 확인하였고, 화면에 보이는 지도는 react-native-maps(google map)을 사용하여 현재 위치에 마커로 표시하였다. React Native에서 지원하는 웹뷰로 카카오 지도를 보여줄 수도 있지만, 구글 맵의 경우 React Native에서 라이브러리가 굉장히 잘 되어 있었기에 화면에 보여주는 지도는 구글 지도를 사용하게 되었다.

const getCurrentLocation = async () => {
  setMyTown("동내 인증중...");
  const { status } = await Location.requestPermissionsAsync();
  if (status !== "granted") {
    Alert("현재 위치에 대한 정보를 받아 오고싶어요");
    return;
  }
  const myLocation = await Location.getCurrentPositionAsync({});
  setCoordinate({
    latitude: myLocation.coords.latitude,
    longitude: myLocation.coords.longitude,
  });
  const townName = await getTownName([
    myLocation.coords.latitude,
    myLocation.coords.longitude,
  ]);
​
  setMyTown(townName);
};
​
const getTownName = async (coordinate) => {
  const response = await fetch(
    `https://dapi.kakao.com/v2/local/geo/coord2regioncode.json?x=${coordinate[1]}&y=${coordinate[0]}`,
    {
      method: "GET",
      headers: {
        Authorization: `KakaoAK ${KIWI_REST_API_KEY}`,
      },
    }
  );
  const result = await response.json();
​
  // [0]: 법정동, [1]: 행정동
  setTownCode(result.documents[0].code);
  return result.documents[0].address_name;
};