스파르타코딩클럽 내일배움캠프 52일차

오늘 일과 간단 요약

1. 프로그래머스 level 0 1문제
2. react query 특강 복습
3. 1차 기능 구현 dev-before에 merge
4. 로그인/회원가입 기능 일부 수정

 

 

 

 

 

 

 

프로그래머스 level 0 1문제

오늘 오랜만에 오전에 재빨리 1문제를 풀었다.

생각보다 오래 걸리지 않는 문제라서 다행이었지 아니었으면 프로젝트 공부할 시간 없을뻔...ㅎ

https://daydream-sy.tistory.com/132

[프로그래머스 Level 0] 120862. 최댓값 만들기 (2)

이제 나름대로 생각하고 푸는 연습이 잘 되는 것 같다. 어려운 문제로 넘어가면 잘 될지는 모르겠지만...?

우선 level 0 을 전부 다 푸는게 목표였는데 우선 프로젝트 마무리한 뒤에 level 1로 넘어가볼까 고민이다.

문법만 아는게 아니라 슬슬 코딩 테스트도 준비해야 할것 같아서....일단 이번주에는 시간 나는대로 1문제씩 푸는 걸로..!

 

 

 

 

 

React Query 특강 복습

어제 저녁에 특강이었는데 중간에 튕겨져나가기도 했고, 시작부터 들은 게 아니라서 오늘 다시 한 번 들으면서 복습했다.

react native 강의를 들을 때도 정리했던 개념인데 react로 보니까 또 달라보인다(?)

공부 부족인가...? 같은 내용인데 코드 짜는 게 조금 다르다고 새롭게 보이다니...ㅋㅋㅋㅋㅋㅋ

특강 듣고 추가로 궁금햇던 부분은 따로 공부해보면서 블로그에 글로 올렸다.

 

원래 특강이나 강의 들을 때 메모장(혹은 노션)에 정리하고 블로그 글로 옮기는데, 두 번 쓰면서 다시 복습이 되기도 하고

좋은 것 같다. 지금은 native를 하는 중이라 native에 또 익숙해졌지만 금방 다시 react로 돌아와야 하니까...

지난번 react 프로젝트에도 query를 적용하는 연습을 해보거나 새로 투두리스트를 만들어서 적용해봐야지.

특강 들으면 알 것 같은데, 막상 해보면 또 헷갈릴 수도 있으니까.

 

아래는 내가 정리한 블로그 글.

https://daydream-sy.tistory.com/133

[React] React Query

 

 

 

 

 

 

1차 기능 구현 완료

오늘 정기 회의에서 각자 맡은 기능이 얼마나 구현 완료되었는지 체크하고 내가 맡은 로그인 부분과 홈화면, 그리고 내 정보 화면은 dev-before 브랜치에 병합하기로 했다.

 

우선 내가 먼저 pull request를 날리고 병합을 하려는데 늘 그렇듯 충돌이 일어나서 충돌을 해결해가면서 병합했다.

나중에는 아예 터미널로 merge 했는데 지난 번 프로젝트에서는 pull request 날린 후에 vscode 가서 보면 충돌이 보여서 하나하나 해결했었는데 이번에는 왜 안 보이나 의문이다.

대신 터미널에서 충돌 해결하며 merge해서 앱이 잘 실행되나 체크했다.

 

재현님이 aos, ios 에뮬레이터를 둘다 돌릴 수 있어서 재현님의 화면 공유를 통해 해봤는데,

안드로이드에서는 보지 못했던 에러들이 발견되었다.

 

• detail page에서 로그아웃 시 로그인 페이지로 넘어가는 로직 추가
• 로그인 페이지 css 추가
• Stacks 에 headerLeft 지운 부분 추가
• Stacks 에서 detail 페이지에서만 header 나타나게 하기

 

회의 후에 나타난 자잘한 에러 사항들을 정리하네 네 가지나 나왔다.

내가 처음에 feature/login 에 푸쉬할 떄는 css가 적용되었고 커밋도 완료했었는데 병합하니까 사라져있었다(?)

다행히 백업해둔 부분이 있어서 이부분은 괜찮았고, 나머지를 저녁 먹고 와서 바로 해결했다.

 

 

 

 

 

로그인/회원가입 기능 수정

• Stacks 에 headerLeft 지운 부분 추가
• Stacks 에서 detail 페이지에서만 header 나타나게 하기

// Stacks.jsx

...

return (
    <NativeStack.Navigator
      screenOptions={{
        headerTitleAlign: "center",
        headerLeft: () => {
          if (authService.currentUser) {
            return (
              <TouchableOpacity onPress={() => goBack()}>
                <Text>뒤로</Text>
              </TouchableOpacity>
            );
          }
        },
        headerRight: () => {
          return (
            <TouchableOpacity onPress={handleAuth}>
              <Text>{authService.currentUser ? "로그아웃" : "로그인"}</Text>
            </TouchableOpacity>
          );
        },
      }}
    >
      <NativeStack.Screen name="Login" component={Login} />
      <NativeStack.Screen name="Detail" component={Detail} />
    </NativeStack.Navigator>

이 코드가 수정한 코드.

headerLeft를 지웠었는데 지우고 나니까 ios에서는 아예 header 부분이 사라져서 사용자들이 어떤 버튼을 누르면 뒤로 갈 수 있는지 모를 것 같았다. 그래서 아예 추가하고 대신에 로그인 한 경우에만 headerLeft가 나오도록 했다.

처음에는 적용이 안되서 뭔가 했더니 return 하지 않은 것...ㅋㅋㅋㅋ 이것도 수정했다.

 

 

• detail page에서 로그아웃 시 로그인 페이지로 넘어가는 로직 추가

// Stack.jsx

...

const handleAuth = () => {
    if (authService.currentUser?.uid) {
      // logout 요청
      signOut(authService)
        .then(() => {
          setOptions({ headerRight: null });
          reset({
            index: 1,
            routes: [
              {
                name: "Tabs",
                params: {
                  screen: "Home",
                },
              },
              {
                name: "Stacks",
                params: {
                  screen: "Login",
                },
              },
            ],
          });
        })
        .catch((error) => console.log("error: ", error));
    }
  };

logout 했을 때 reset으로 navigate 기록이 사라지게 하면서 바로 login 페이지로 넘어가게 다시 코드를 수정했다.

수정 전에는 detail 페이지에서 로그아웃했을 때 그대로 detail 페이지에 있었고 심지어 로그인 버튼을 눌러야만 페이지 이동을 했었는데, reset을 하지 않고 navigate로 해서 생긴 문제였다.

이걸 reset으로 바꾸니 자연스럽게 해결 완료!

 

// Detail.jsx

..


  useFocusEffect(
    useCallback(() => {
      if (!authService.currentUser) {
        // 로그인 X
        reset({
          index: 1,
          routes: [
            {
              name: "Tabs",
              params: {
                screen: "Home",
              },
            },
            {
              name: "Stacks",
              params: {
                screen: "Login",
              },
            },
          ],
        });
        return;
      }
    }, [])
  );

...

 

detail 페이지에서 로그아웃 하면 바로 useFocusEffect를 통해 로그인 페이지로 넘어가게 하는 것...!

이 부분을 새로 추가해주고 다시 앱을 실행시켰더니 ios, aos 모두 제대로 작동되는 걸 확인했다.

 

이 모든걸 하고 나서야 로그인/회원가입이 제대로 확인한 기분이다.

안드로이드로만 앱을 실행하다보니 아이폰에서 어떤 식으로 실행되는 걸 못봐서 그 점이 아쉬웠다.

나도 맥북 살걸...(?) 맥북으로는 xcode 통해 ios 에뮬레이터를, android studio 통해 aos 에뮬레이터 실행시키는 게 좋아보였다. 물론 로딩이 좀 걸리긴 하지만...ㅋㅋㅋㅋㅋ

 

아무튼 이 기능까지 추가해서 feature/login 브랜치를 다시 만들어두었다.

내일 다른 분이 글쓰기 기능까지 완료되면 병합해서 2차 기능 구현 완료를 할 예정이다.

 

 

 

 

 

 

 

짧은 일기

기능이 다 구현되었다고 생각했는데 생각치 못한 곳에서 에러가 발견되서 솔직히 좀 당황했었다.

아이폰/안드로이드 가 이렇게 다른가 싶기도 하고...? 아니면 내가 생각하지 못한 걸 수도 있다.

사실 detail page에서 넘어가는 부분은 생각도 안 하고 있었는데 오늘 오류를 발견한 거였다. 나머지는 아니었고.

그래서 기능 구현했다고 생각하지 말고 두번 세번 보는 습관을 들여야겠다는 생각이 들었다.

 

나중에 발견하고 당황하는 것보다는 여러번 보고 대비하는 게 더 나으니까.

오늘 내가 생각한 교훈(?)이다. 여러 경우의 수를 생각할 것.

 

아마도 내일 오전까지 필수 기능들이 다 구현될것 같은데 그 이후에 data 받아오는 것이 수정되면 될것 같다.

프로젝트의 끝이 보인다...! 순조롭게 진행되는 것 같아서 참 다행이다.

아무래도...팀원들을 만나는 내 운이 아직 좋아보인다..ㅋㅋㅋㅋㅋ