TIL : TypeScript + React를 이용한 todoList 만들어보기(RTK )

 

RTK로 만들기전

useState로 관리를 하던 state을  다른 컴포넌트에서 이용해야하려면  프롭스로  처리를  해야되었습니다. 그렇게 되면  프롭스 드릴링이 생김과 동시에  에러가 발생해도  찾기가 어려웠습니다. 그래서  저는  리덕스를 사용하기로 했습니다. 저는  이 리덕스 툴킷 공식사이트에 왜  리덕스톨킷을 이용하는지에서   리덕스 스토어 구성에서   따로따로 선언해야 되는 점이  힘들지는 않지만 , 이 로직이 복잡해지면  에러 잡기도 힘들어져서 저는  결국  이것을 단순화한 리덕스 툴킷을  사용하기로 하였습니다. 그리고 리덕스의 기본 컨셉을  이어간다는 것을  이해하게 되었습니다.

 

---

[ 1 ] 말 그대로  사용자가  title ,text를 입력하는 로직입니다.

 

[ 2  ]    

 

      우리가  리덕스 스토어로부터 데이터를 불러오는 것입니다.

       디스패치라는 친구입니다. 

           예를 들어서  버튼을 클릭하면  1중가하는 리듀서가 있습니다.  

                   (1)  버튼을 클릭합니다.

                   (2)   액션함수로  전달됩니다.

                   (3)  state를 반환합니다.

                   (4)  리덕스 스토어에 반영됩니다.

                    (5) 최종적으로  ui에 반영됩니다. 

 

 

[  3 ]    디스패치가  addTodo를 실행시켜     text 와  title이 데이터가  리덕스 스토어에  저장됩니다.

 

 

[4]    디스패치가 deleteTodo , updateTodo 를 실행시켜  투토를 삭제하거나   투토 상태가 반영됩니다.

 

 

  

현재 하고 있는  리액트 쿼리를 이용한 투트리스트 + 타입스크립트

사용자의  소중한 데이터가 존재하는  Server url을 어느 미친  개발자가  공개하겠습니까?   그래서  저는  다음과 같이 . env에  저장합니다.

https://devpost.tistory.com/86

TIL : .env

 

 

https://velog.io/@devmag/.env-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EA%B9%83%ED%97%88%EB%B8%8C%EC%97%90%EC%84%9C-%EC%A0%9C%EC%99%B8%EC%8B%9C%ED%82%A4%EB%A0%A4%EB%A9%B4

.env 파일을 깃허브에서 제외시키려면?

 

1. .env 를 다음과 같이 지워줍시다.

 

2.   add , commit , push  을 해줍시다. 그다음부터 status를 찍어봅시다. 

 

3. .env 파일이  추척을 하지 않습니다.

 

 

4.  다음과  process.env.REACT_APP 으로 접근하시고  서버 껐다 다시 시작해주기 바랍니다.

 

5. 제대로  동작하는지  실행해봅시다. 잘되는군요 너무 좋습니다~~~~

 

 

저는 오늘  env를 통해  한번더  데이터의 소중함을 깨달음입니다.
UI 만들면 뭐합니까 ,  데이터를 탈취당했는데  
거기에   주민등록번호 , 전화번호 ,  주소가  있으면  어떻게 하실건가요
저는  그게 무섭습니다.