2023-02-22 회고

- 잘 한 점

1. 라이브러리 확인
2. 배포
3. [1. 로그인 / 회원가입] => 속성을 확인
4. [Assignment 1]=> 이미 가입되어 있는 경우를 확인(alert)
5. [Assignment 4]=> 로그아웃 기능을 넣어서 테스트
6. [Assignment 5]=> 태그의 속성과 전체 구조를 확인
7. [Assignment 6]=> 태그의 속성과 전체 구조를 확인

 

-잘 못한 점

: 전체 페이지 구조를 미리 설계하지 못한 것, 중복되는 부분을 컴포넌트화 하지 못한 것, API 통신을 적절한 시점에 하지 못한 것, 리다이랙트

 

1. 후반에 UI가 바뀌면서 중복되는 요소가 생겼는데 컴포넌트화 하지 못했음. 전체적인 페이지 구조를 설계하지 않고 코드작업을 진행함. 중복 컴포넌트가 생기는 부분이 많아졌지만 컴포넌트화 하지 못함..
2. 변화가 생길때마다 API로 통신 해주었어야 했는데, 리스트를 만들어서 관리함.. 일관성 문제가 생길 수 있음
3. 시간이 없어서 README에 폴더구조, 기능에 대한 상세한 설명을 하지 못함
4. [Assignment 2]=> /signin으로 리다이랙트를 해서, 레이아웃 컴포넌트가 유지되지 않았음.(상단의 버튼들) 그래서 중복코드가 다수 생성됨=> react-router-dom의 공통 컴포넌트 사용하는 방법(Layout)
5. [Assignment 4]=> 해당 과제를 해결하기 위해 /signin, /signup, /todo 로 이동할 수 있는 버튼 등이 필요하다는 것을 인지하게 됨. UI를 새로 구성하게된 원인이 됨..
6. [Assignment 7]=> 체크박스를 리스트로 만들어서 관리한 것. : 이때는 몰랐는데 수정한 체크박스가 어떤 체크박스인지를 boolean 리스트로 만들어서 관리함. 대신 GET 한 id로 구분
7. [Assignment 8]=> 위와 동일하게 계속 리스트로 관리를 했음. 그렇게 하지 말고 변화가 생길때마다 해당 컴포넌트의 id 또는 class, name등에서 찾아서 조절해야 하지 않았을까?

- ?

1. [Assignment 1]=> 처음엔 정규식을 이용해서 ‘이메일 형식’을 검토했지만 이메일의 유효성 검사에는 ‘@’포함 조건만 있었음. 별도의 추가 조건 부여하지 않고 위의 조건대로만 진행하라는점, 새로운 조건을 추가하는 것을 지향하라는 점 때문에 오버엔지니어링하지 않았음
2. [Assignment 3]=> 로컬 스토리지 관리

    const access_token = checkRedirection(result) ? result.access_token : '';

    localStorage.setItem('userInfo', access_token);

1. API 부분도 분리할 수 있지 않을까?

 

-수정할 점

1. useMemo, useCallback을 시도해볼 것
2. constants폴더 만들기
3. react-router-dom의 outlet, 공통 레이아웃 컴포넌트를 이용해 상위 컴포넌트를 레이아웃
4. localstorage 선언 시점?
5. 레포를 새로 만들어야 할까?
6. 전체적으로 어떤 구조를 생각해야 할까? index.js -> App.js -> route.js?
7. 페이지에 대한 UI 그려보고, 컴포넌트 생각해보기

Router 컴포넌트 생성

<BrowserRouter>
   <Router />
</BrowserRouter>

공통컴포넌트인 Layout으로 Outlet 활용

    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<App />} />
        <Route path="/signin" element={<Login />} />
        <Route path="/signup" element={<Join />} />
        <Route path="/todo" element={<TodoList />} />
      </Route>
    </Routes>