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

오늘 일과 간단 요약

1. 로그인/회원가입 기능 구현 완료
2. 로그인 하지 않은 경우 home 대신 login 페이지가 나오도록 변경
3. CSS 추가
4. (저녁) react-query 특강

 

 

 

 

 

 

 

로그인/회원가입 기능 구현

분명히 지난주 금요일 TIL에는 주말 내에 기능 완료하고 오늘 css만 추가하는 것이었는데....ㅎ

역시 컨디션 관리도 꼭 필요하다는 걸 절실히 깨달았던 주말이었다.

주말 내내 골골대다가 다시 코드를 보니까 내가 짠 코드임에도 적응하는 시간이 필요했었고, 그 덕분에 기능 구현까지 시간이 좀 걸렸다.

 

10시에 팀원들과 간단히 회의를 하다가 오류 부분을 공유했었는데 아무래도 튜터님께 가야할 것 같아서 다녀왔는데

놀랍게도 구조분해 할당을 하지 않은 나의 잘못이었다...!

사소한 것처럼 보이지만 사소하지 않은 실수라고 해야 하나...튜터님이 알려주시고 나서야 깨달았다.

 

 

// Login.jsx

...

export default function Login({
  navigation: { navigate, goBack, setOptions },
}) {
  
  ...
  
  useEffect(() => {
    setOptions({ headerRight: () => null });
  }, []);
  
  ...
  
 }

이 부분에서 setOptions is undefined 이라는 오류가 나왔었다. 처음에는 설정을 잘못했나, 싶었는데 이유는 따로 있었다.

바로 navigation을 받아오는 부분을 잘못 적은 것이다.

위에 적힌 코드에서는 navigation : { } 이런 식으로 제대로 구조분해 할당을 받아왔는데, 이전에는 { }로 감싸주지 않아서 setOptions 가 정의되지 않았다는 것이었다.

 

이런 걸 캐치하지 못하다니....튜터님한테 가서 질문하고 설명을 듣고 나서야 제대로 이해되었다. 그래서 setOptions을 지워도 goBack()이 제대로 실행되지 않는 것이었다니...ㅋㅋㅋ 앞으로 까먹지 말아야지.

 

그리고 난 뒤에 로그인 하지 않으면 홈이 아닌 로그인 화면이 바로 나오게 하는 방법도 물어봤다.

두 가지 방법이 있다고 하셨는데,

• Stacks.jsx 파일에서 initial route를 Login 화면으로 정하는 것
• Home.jsx 파일에서 로그인을 하지 않았다면 login 화면으로 가게 하는 것 (useFocusEffect 활용)

이 두가지 중 난 두번째 방법을 선택했다.

 

사실 선택이라고 하기엔 애매한게.... initial route를 했는데 navigate가 제대로 작동하지 않고 오류가 떠서 그나마 잘 이해하고 있는 useFocusEffect을 썼다. 이해했다고 하지만 이것도 오류나서 오류나는 걸 고치느라 시간이 좀 걸렸다 ㅋㅋㅋ

initial route를 설정하는 건 프로젝트가 끝난 뒤에 따로 공부해서 이해해보고 리팩토링을 하던지 해야겠다.

(물론 react 공부로 돌아가면 까먹을수도 있지만...까먹지 않으려고 기록해둔다....ㅋㅋㅋ)

 

그래서 작성한 코드가 아래 내용. 지난주에 심화 강의에서 들었던 부분과 비슷하다.

// Home.jsx

...

export default function Home({ navigation: { navigate, reset } }) {
  const isDark = useColorScheme() === "dark";

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

 

useFocusEffect()을 사용해서 로그인이 되지 않으면 reset으로 로그인 페이지로 넘어가도록 설정했더니,

로그인을 하지 않으면 절대로 홈으로 들어갈 수 없게 되었다.

와이어프레임대로 되어서 이제서야 내가 맡은 역할을 한 기분이랄까...ㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

CSS 추가

지금까지 기능 구현만 했으므로 와이어프레임대로 CSS를 추가했다.

원래였으면 오늘은 CSS만 했을 텐데..아파서 아무것도 못한다는 게 이럴 때는 참 아쉽다.

더군다나 프로젝트였는데...ㅠㅠ 앞으로는 체력관리 잘해야겠다.

 

우리 조는 모두 @emotion/native 를 이용하기로 했기 때문에 그걸 그대로 이용했다.

나름대로 열심히 했는데...ㅋㅋㅋㅋ 역시 디자인 쪽은 그다지 소질이 없는 것 같다.

 

 

당근 마켓이 아니라 망고 마켓이기 때문에 망고 아이콘도 추가해줬는데 내 생각에는 깔끔해보이는데 잘 모르겠다.

나중에 기능 다 합치고 하루 정도는 전체 CSS를 수정할 거라서 그 때 수정될 수도 있을 것 같다.

 

일단은 요정도로 내 역할은 잘 해냈으니 다행이다.

아 맞다, 그리고 navigation 부분도 내가 맡은 것이라서 함께 feature/login 브랜치에 올려뒀다.

 

이걸 토대로 다른 분들이 코드를 작성하면 될 것 같다.

오늘은 10시에도 회의하고 5시에도 회의했는데, 내일은 5시에만 회의하고 그 때까지 필수 기능을 전부 구현하는 걸 계획으로 삼았다. 다행히 나는 지금 완료해서 더 추가하거나 수정할 부분이 있나 봐야겠다.

 

지금 생각나는 건 저 header 부분을 false로 두고 싶은데, false로 둘 경우에 detail page에서도 header가 보이지 않는다는 문제점이 있는데....이걸 어떤 식으로 바꿔야 할까 그게 고민이다.

로그인 페이지에서는 header가 없는게 오히려 깔끔한데 detail 페이지에서는 어떨지 모르겠다.

나중에 다 합쳐보고 나서 결정할 거지만 저거 말고 다른 부분은 생각나지 않으므로....ㅋㅋㅋ

 

 

 

 

 

React Query 특강

원장 튜터님 최고...!

오늘 저녁에 진행한 특강이었는데, 7시 30분이라고 생각하고 까먹고 있다가 좀 늦게 들어갔다...ㅋㅋㅋㅋ

진짜 레전드...좀 늦게 들어가서 처음부터 복습하려면 내일 영상 올라오면 복습해야겠다.

 

react query가 저번에 특강 한번 하고 native 심화 강의에서 하고 지금 또 배우니까 나중에 사이드 프로젝트할 때나 지금 프로젝트 진행할 때 좀 더 이해하고 사용할 수 있지 않을까 싶다. 그냥 내 바램일 수도 ㅋㅋㅋ

 

특강은 복습이 필요하기 때문에 따로 정리는 내일 해야겠다.튜터님 강의는 진짜 짱이다..!!

 

 

 

 

 

 

 

 

짧은 일기

체력이 진짜진짜 중요하다....진짜로...

오늘도 몸살기가 좀 있어서 쉬엄쉬엄 했는데 이래도 되나 싶었다.

프로젝트 진행 중인데 내 역할은 다해야지 싶어서 오늘 어찌저찌 다 해놓긴 했는데...내일은 좀 더 힘내서 해야지.

 

확실히 프로젝트를 하니까 react native 공부를 더 하는 것 같기도 하고, 좀 더 재밌게 느껴진다.

나중에 전부 완료되면 우리 조가 만든 앱이 그럴듯 해보일 것 같아서 그것도 기대되고. 아직 4일 정도 남았으니까

만약 시간이 따라준다면 추가 기능도 했으면...물론! 내일까지 1차 기능 구현 완료가 된다는 전제하에...ㅋㅋㅋ

 

아무튼 오늘은 별로 공부를 못한 것 같아서 좀 그렇다. 아까 얘기했지만 컨디션 관리 진짜 중요...

꼭 사람은 겪어봐야 깨닫게 된다. 컨디션 관리 잘해서 매일 평균치 공부는 했으면 좋겠다.

 

오늘까지만 쉬엄쉬엄 하고...내일부터는 다시 열심히 해야겠다.