[WIL] 항해 99 7주차 회고록

클론코딩중! 

저번 주에 뷰작업을 거의 끝내놓고, 기능구현을 서서히 하고있다. 순서를 먼저 정리하고 난다음 그 순서에 맞춰서 진행하다보니, 쉽게 작업되는 것 같다. 이전에는 너무 어렵게만 생각했었는데, 이번에는 순서를 그리고 그 순서에 맞춰서 쉽게 생각하니 쉽게 구현이 되더라 🤔 나한테 맞는 방법을 찾은 느낌. 실전 프로젝트 전에 찾을 수 있어서 정말 다행이다 

 

리덕스 툴킷

저번주는 리덕스액션! 이번주는 리덕스 툴킷이다. 확실히 쉽고, createSlice를 이용하여 만드니 코드량도 적고, 편리하였다. 필요했던 immer와 chunk도 내장되어있다. 이번에는 기존 사용법이 편해서, 따로 createAsyncThunk를 사용하지않았는데, 다음번에는 이것도 사용하리라!

 

로그인유지

이것 때문에 꽤나 고민을 많이 했는데, 우리팀은 JWT토큰을 이용하여 인증하는 방식을 택하였다. 기존 파이어베이스를 사용할 때에는 파이어베이스에서 제공해주는 세션스토리지방식으로 저장하였는데, 이번에는 서버와 협업을 함으로써, 어떤 스토리지에 넣는 것이 좋을까에 대한 고민도 했었다. 아래의 글이 많은 도움이 되었는데, 웹스토리지(로컬,세션)은 XSS공격에 취약하다. 하지만 쿠키에 저장한 값은 HttpOnly를 이용하여 javascript를 통한 접근을 막을 수 있다. HttpOnly는 서버 쪽에서 해야되는 부분이라고 알고있다. 오늘 일어나서 요청드려봐야지.. 흠흠

https://woowacourse.github.io/tecoble/post/2020-08-31-where_to_store_token/

토큰을 어디에 저장할까?

로그인 토큰을 받아서 디코드해서 유저정보를 리덕스스토어에 계속 주입해줄까 했지만, 어짜피 로그인 유지를 위해 매번 서버에 요청해줘야하니, 생략했다. 처음 액세스토큰 발급한 후로, 서버에서 지정한 시간이 지나면, 쓸 수 없고 다시 로그인해야한다는 점이 아쉽긴하다. 그래서 리프레시 토큰 관련하여 보고있었는데, 마침 튜터님을 만나 이부분을 상의드려보니 일단은 어려워서, 입문자에게는 추천하지 않는다고... 앞으로 해야할 작업들을 위해 미뤄두기로 했다. 다음번엔 일정 시간이 지나면 리프레시토큰을 사용해보고싶다. 

 

 

쿠키를 편하게 저장, 관리하는 라이브러리를 알아보자.

https://github.com/js-cookie/js-cookie

js-cookie/js-cookie

이번에 쿠키에 토큰을 저장하게 되면서 좀더 편안하게 쿠키를 저장할 수 없을까하며 npm을 뒤적이게 되었다. 그 중 js-cookie를 사용해보았는데, 아주 쉽고 깔쌈하다. 그 뒤로 튜터님과의 대화에서 이런걸 써봤다 했더니 universal-cookie를 추천해주시더라.. 요것도 좋다고오..👩‍❤️‍👩 

https://www.npmjs.com/package/universal-cookie

 

 

유효성검사에 유용한 것들...

회원가입할 때 쓰면 좋겠는데, 몇 개 조금 추천받았다. 풀어본다 😎

• joy
• yup
• useForm

 

 

리덕스없이 이런건 어때?

• reactVar
• useContext

배워보고싶은 것은 많고, ... 괜찮다 나에게 시간은 많으니까 🙄

 

 

체크박스를 활용하여 검색 기준 추가하기!

이 부분은 포스팅을 대신하도록 하겠다. 

https://cheri.tistory.com/177

input 체크박스를 활용하여 검색 기준 추가하기

 

 

카카오맵을 이용하여 베스킨라빈스 점포를 지도 위에 그리기!

열심히 정보를 찾아보다가, 데이터 양은 작지만 점포 api가 있는 것을 발견하였다.

http://www.baskinrobbins.co.kr/store/list_ajax.php?ScS= 

http://www.baskinrobbins.co.kr/store/list_ajax.php?ScS=

 

하지만 의지의 백엔드...! 결국 배스킨라빈스 서울지역 크롤링을 성공하셨다.......😎😎 

인포윈도우에 올릴 것들을 받아와서 컴포넌트에 props로 넣고 렌더링 돌리고 싶은데, 인포윈도우는 HTMLElement 혹은 HTML을 포함한 문자열만 받는다고.. 결국.. className 적용해서 인포윈도우를 스타일링 했다. 막상 또 인포윈도우로 스타일링 하고 나니 안예뻐서 자유도가 높은 커스텀오버레이로 바꾸게 되었다. 

 

인포윈도우 적용

 

커스텀오버레이 적용

깔끔하니 마음에 든다 🤗

 

리액트로 프로젝트의 한 사이클을 돌고나니, 다음번엔 무엇을 준비해야될지, 어떤 것을 더 신경써야할 지 감이 뽝 왔다😎 이제 남은건 실전인가~