이번에는

ToDo 리스트 응용편이라고 하는 것으로
다양한 기능을 추가해 보았습니다.

구체적으로
· 로그인 기능 구현
・백엔드와의 제휴에 의한 토큰 인증
등이 메인이 됩니다.

또한 이번에는 React-Redux와 Hooks를 사용하여
구축을 해 보았습니다.

솔직히 좌절했지만,
지금 어디까지 만들어졌는지 확인하십시오.
다음에 살려 가고 ​​싶습니다!

그럼 보자.

~로그인 전~

[홈]

SemanticUI의 아이콘으로 GitHub 고양이를 넣어 보았습니다.
매우 귀엽고 치유됩니다 🐱

[signIn]

react-hook-form을 사용하여 백엔드와 협력했습니다.
처음 redux-form을 사용하고있었습니다 만, 이쪽이 사용하기 편리했습니다.
[signUp]

↑ 필요없는 이용 약관

여기에 등록한 요소는 미리 백엔드 측에서 지정한 이름과 일치해야 합니다.
이렇게하면 로그인 할 때 token 인증을 할 수 있습니다.

~로그인 후~
[Create]

여기도 react-hook-form을 사용하여 작성되었습니다.
signUp으로 사용자를 만들 때와 기본적으로 동일하며,
action을 호출해 처리를 시키고, Reducer에 걸쳐 state를 갱신해 갑니다

[편집]

여기가 없어!
이상은
・페이지네이션 기능으로 3개씩, 모든 표시를 볼 수 있게 한다
・ToDo의 하나 하나의 페이지로 천이할 수 있어, 이하의 편집을 할 수 있도록 한다
　□Title, 콘텐츠를 편집할 수 있도록 한다
　□ 그 자체를 삭제할 수 있도록 한다
입니다만, 꽤 잘 작동하지 않았습니다,, 다음 번 리벤지!

[signOut]

Sure하면 로그인전(처음은 Home)으로 돌아갑니다☺️
이 구성 요소가 가장 편했습니다! ! !

【반성】
· 조금씩 이해하지 못한 기능을 도입하면 몰랐다.
・더 메모를 실어 가고, 확실히 보는 알 코딩을 유의하면 좋았다
・Udemy의 강좌를 도중에 방치했기 때문에, 버그의 개소를 모르게 되었다
→ 초조하지 않고 한 구분이 붙고 나서 다음 단계로 진행하고 싶다
・강좌가 사경이 되지 않도록, 이해도를 확인하면서 진행해 나간다

【배우기】
· React-Redux를 돌리는 방법을 이해했습니다.
・react-router-dom에서 Link를 사용할 수 있게 되었다
・Hooks(useState)를 이용할 수 있었으므로,
class 컴포넌트로 state의 버킷 릴레이를 하지 않아도 되었다
・Hooks(useEffect), sessionStorage를 가볍게 이해했다
・REST API 제휴의 기초를 이해한, 보다 자유자재로 취급할 수 있게 되고 싶다

【향후】
ToDo에 관해서는 향후 Edit의 도입이나 리팩토링을 수시로 실시해 나갈 것입니다.
GoogleOAuth등의 인증 기능도 탑재할 수 있으면 편리할까라고 생각하거나.
Udemy에서 JS와 React 강좌를 받으면서 배우고 싶습니다!
다른 언어라면 Swift가 조금 흥미있을까, Mac이고.
그리고 React Native에서 iOS 앱도 만들어보고 싶습니다!
TypeScript도 접할 수 있다고 생각합니다.
그리고 No Code가 어떤 것인지, 어디까지 자유롭게 할 수 있는지 신경이 쓰이므로 만져 보고 싶습니다.