TIL 2023-06-05

1. 오늘 겪은 문제

1. contextapi, localstorage
2. private route
3. react-quill editor

2. 해본 시도

1. 처음에 context에 유저정보를 저장하여 로그인 상태를 관리하려고 하였으나, 세로고침 해버리면 초기화가 되어버리는 문제가 있었다. 해서 localstorage에 저장하여 관리하려고 시도하였다.
2. localstage에 유저상태를 저장하여 관리는 한다 치고, 그럼 이제 권한에 따른 url접근을 제한 해야하는데 adminroute, userroute 컴포넌트로 나누어 시도했다.
3. 자꾸 레이아웃이 깨져서 뒷전으로 두고 있던 react-quill editor적용을 다시 시도했다.

3. 해결 방법

1. localstorage를 사용하고 나니 contextapi를 굳이 사용하지 않아도 되었다. 편했어 사실아주...
2. 성공적으로 적용했다. 해당 컴포넌트안에서 인증 확인 로직을 정의하고, 그에 따라 react-router-dom의 useNavigate를 사용해서 접근 url을 설정해주었다.
3. 왜 그런가 했더니 quill theme css를 적용하지 않아서 생기는 문제였다. 이후 quill로 입력받은 html텍스트들은 추후에 파싱하여 렌더링해줘야 한다.

4. 새롭게 알게 된 점

• https://velog.io/@choco1drink/React-LocalStorage-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84
• https://gaemi606.tistory.com/entry/React-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%A0%95%EB%B3%B4-%EC%97%86%EC%9D%84-%EA%B2%BD%EC%9A%B0-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A1%9C-redirect%ED%95%98%EA%B8%B0-react-router-PrivateRoute
• https://velog.io/@velopert/react-context-tutorial

5. 오늘 더 효율적으로 일할 수 있었을 것 같은 방법은?

최고 성인으로 살자.