9.25 월 - 메인프로젝트 데일리 회고(멘토 미팅)

카카오맵 api 사용

참고:

[React] 카카오 맵 API로 지도 검색 앱 구현하기 with TypeScript

멘토 미팅 질의응답

Q1) 로그인 상태에 따른 조건부 렌더링 상태 실시간 반영 x

• 로그인 요청 성공 시 로컬스토리지에 loginStatus 란 임의의 값을 true로 저장해둔 상태
• 로그인 요청은 components > Form > user > LoginForm.jsx 컴포넌트에서 실행
• navbar 조건부 렌더링은 components > Nav > Nav.jsx > NavTop.jsx 컴포넌트에서 실행
• Nav 컴포넌트는 App.jsx에서 라우팅 경로 상단에 위치하므로 state를 내려주고 올려받아야 의도대로 렌더링 될 것으로 예상됨

function App() {
  return (
    <div>
      <GlobalStyle />
      **<Nav />**
      <Layout>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/sign-up" element={<SignupPage />} />
          **<Route path="/login" element={<LoginPage />} />**
          <Route path="/mypage" element={<MyPage />} />
          <Route path="/mypage/:userId" element={<MyEditPage />} />
          <Route path="/sns" element={<SingleFeedPage />} />
          <Route path="/sns-user" element={<UserFeedPage />} />
          <Route path="/sns-weekly" element={<WeeklyRankPage />} />
          <Route path="/sns-upload" element={<SnsUploadPage />} />
          <Route path="/alert" element={<AlertPage />} />
          <Route path="/adopt-pet" element={<AdoptPetPage />} />
        </Routes>
      </Layout>
      <Footer />
    </div>
  );
}

export default App;

function NavTop() {

// ... 생략

  **const checkIsLogin = () => {
    if (localStorage.loginStatus === 'true')
      return (
        <button type="button" onClick={handleLogout}>
          로그아웃
        </button>
      );

    return (
      <>
        <NavButtonLogin onClick={() => navigate('/login')} type="button">
          로그인
        </NavButtonLogin>
        <NavButtonRegister
          yellow
          onClick={() => navigate('/sign-up')}
          type="button"
        >
          회원가입
        </NavButtonRegister>
      </>
    );
  };**

  return (
    <NavTopLayout>
	

			{/* ... 생략 */}

      <NavButton>**{checkIsLogin()}**</NavButton>

****
    </NavTopLayout>
  );
}

export default NavTop;

A) 리덕스로 state값 받아서 하면 되지 않을까?

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    addToken: (state) => {
      state.token = localStorage.getItem('token');
    },
    addUser: (state) => {
      state.user = localStorage.getItem('user');
    },
  },

• dispatch하면서 리듀서 안쓰고 있는데 쓰도록 개선하면 되지 않을까

Q2) AWS - 클라이언트 정적웹 ↔ ec2 + s3 백엔드 서버 연동 관련 질문

---

• 클라이언트(https):
  • cloudFront
  • Route53
  • s3
• 백엔드 서버(http):
  • ec2에 서버, rds에 db 설치
  • 배포자동화를 위해 s3 사용

---

클라이언트와 서버가 별개로 배포인 아키텍쳐에서 어떻게 연결시켜야 할 지

• ACM 인증서가 같은 리전에서 확인이 불가능한 상태
• cloudFront의 클라이언트 배포 주소로만 서버에서 cors를 해제해주면 될 지,
• 같은 리전에서 클라이언트를 배포할 때 도메인을 발급받은 ACM 인증서를 사용해야 하는지

A) 아키텍처를 지금 잘못 잡았음.

→ cloudfront는 cdn이다! https 구현하려고 쓰는게 아니라

멘토님 조언

• 갈등 상황이나 체력과 멘탈관리 문제는 실무에서의 연습으로 생각하고 소프트 스킬을 갈고 닦을 기회로 삼자.
  • 책 추천: 구글 엔지니어는 이렇게 일한다
  구글 엔지니어는 이렇게 일한다
• 내가 감당할 수 있는 작업량의 한계치를 파악할 수 있는 기회임.
• 나만의 휴식 루틴이 필요
• 이번주까지 끝내고 차주는 기능점검(QA)하는 기간으로 잡아야 이 프로젝트를 완성할 수 있다.
• 코드리뷰
  • input 요소에는 label 요소가 항상 있어야 합니다.
  • 프로젝트에서 ul의 자식으로 a가 있는데 이러면 안 됩니다.
  • 버튼 요소의 자식으로 헤딩을 넣을 순 없습니다.
  • 푸터에서 주소는 addr 요소를 사용하면 좋습니다.
  • 버튼에 텍스트가 없으면 aria-label을 사용하면 좋습니다.
  • 페이지의 타이틀이 없습니다.
  • body 요소는 하나여야 합니다.
  • main 요소가 있으면 좋습니다.
  • ReactPortal이 너무 많은 데 왜 그런건지?
  • 불필요한 주석은 제거해둬야 합니다.