Just Do IT!

스파르타코딩클럽 내일배움캠프 37일차 본문

스파르타코딩클럽 내일배움캠프/TIL

스파르타코딩클럽 내일배움캠프 37일차

MOON달 2022. 12. 20. 21:10
728x90
반응형
오늘 일과 간단 요약
  1. 프로그래머스 Level 0 1문제 (풀이 링크)
  2. 심화 강의 내용 추가 공부
  3. react 로그인/회원가입 기능 공부
  4. react-query 특강
  5. axios 복습

 

 

 

 

 

프로그래머스 1문제

오늘은 풀고 나서 다른 풀이 방법이 생각나는 신기한 문제였다.

문제를 풀면서 뭔가 길게 길게 비효율적으로 푸는 것 간다는 생각은 했지만, 그냥 그대로 쭉 풀어보고

다른 사람들의 풀이를 보고나서야 두 번째 풀이 방법이 생각났다.

 

정규 표현식...!

저번에 문제 풀 때도 정규 표현식을 어떤 방식으로 써야 할지 몰라서 아예 공부해두고 정리했었는데,

이번에는 풀고 나서 방법이 떠오르긴 했다. 다만 정확히 기억이 나지 않았을 뿐...ㅋㅋㅋㅋ

역시 한번 공부하고 난 뒤에 풀 수 있으리라는 건 너무 오만이긴 했다 ㅋㅋㅋㅋ

그래도 정규표현식이라는 단어 자체를 떠올렸다는 것에 만족하며....

계속해서 상기시키고 공부해서 나중에는 나도 고수들처럼 짧게 코드 쓰는 날이 오기를...!

 

 

 

 

심화 강의 내용 추가 공부

어제 너무 정신 없게 강의를 듣긴 했지만...아무리 생각해도 심화 강의로는 너무 부족했다.

제대로 된 자세한 설명도 없고 그냥 이런 거에요, 식으로 하고 개인 공부가 필수인 강의라니...

그래서 오늘은 문제 풀고 나서 심화 강의 내용에 대한 공부를 하기 위해 구글링을 엄청 했다.

처음에는 같은 강의를 두번 들을까 생각했는데, 어차피 같은 내용이니까 새롭게 공부하자고 마음 먹었다.

 

그래서 이것저것 찾아봤는데...딱 알맞은 강의를 찾지 못했다 ㅠㅠ

유데미는 강의 양이 너무 길고 흐름으로 쭉 이어가야 해서 아예 시도도 안했고

유튜브로 생활 코딩 볼까 하다가 벨로퍼트의 리액트 문서가 있길래 일단 그걸 읽었다.

 

https://react.vlpt.us/redux-middleware/01-prepare.html

 

1. 리덕스 프로젝트 준비하기 · GitBook

1. 리덕스 프로젝트 준비하기 리덕스 미들웨어를 공부해보기 전에, 리덕스 프로젝트를 먼저 새로 생성해주도록 하겠습니다. 다음 명령어를 사용하여 새로운 프로젝트를 준비해주세요. $ npx create

react.vlpt.us

 

리덕스 부분부터 읽었는데 한 번 더 읽으면서 복습하니까 좀 나은것 같기도 하고...

내일은 그냥 유데미 들어볼까 고민이다.

구글링해서 다른 사람들 블로그에서 정리본을 여러번 보기도 하고....

뭐든 더 보충해서 들어야 할 것 같다. 프로젝트 할 때 민폐가 되면 안되니까....ㅠ

 

 

 

 

react 로그인/회원가입 기능 구현해보기(아직 성공 X)

심화 과제에 나와있는 팀 프로젝트 부분을 보다가 문득 로그인/회원가입 기능은 어떤 식으로 구현해야 하나 궁금해졌다.

 

json-server 을 이용하면 백엔드 파트를 대신할 수 있다고 해서 저번 프로젝트에 사용했던 firebase가 떠올랐다.

그 때는 정말 아무것도 몰라서 어떤 식으로 코드를 짜야 해나 했었는데...(물론 지금은 아니라는 건 아니고...)

여튼 그래서 구글링해봤는데 json-server-auth 라는 새로 보는 것이 나왔다.

 

https://github.com/jeremyben/json-server-auth

 

GitHub - jeremyben/json-server-auth: Authentication & Authorization flow for JSON Server

Authentication & Authorization flow for JSON Server - GitHub - jeremyben/json-server-auth: Authentication & Authorization flow for JSON Server

github.com

 

이 기능을 사용하면 로그인/회원가입 기능을 사용할 수 있다고 해서

다른 사람들이 구현한 기능을 직접 따라치면서 이해보려고 했다.

 

  • jwt (json web token) : 특정한 json 데이터(유저 정부)에 대해서 암호화를 하여 이를 유저의 인증 정보로서 사용하는 것
  • 특정 유저가 로그인되었는지 확인할 때 이 token을 사용한다
  • 토큰은 유저마다 다르며 유저 정보와 함께 언제까지 해당 토큰을 쓸 수 있는지도 담겨 있다
  • 해당 토큰의 유효기간이 만료되기 전까지는 해당 토큰을 토대로 계속 로그인된 상태로 있을 수 있다
  • token을 이용해 어떤 유저가 지금 백엔드로 요청을 보내고 있는지도 확인 가능

 

 

일단 대충 사용법은 알아두고...직접 구현해보는데 오늘은 성공 못했다ㅠ

처음부터 제대로 된 이해 없이 무작정 따라해보는게 아닌가 싶어서 오늘은 그냥 여기까지 공부하는 걸로...

 

궁금해서 찾아봤는데 생각보다 난이도가 있는 것 같다.

아니면 내가 아직 익숙하지 않아서일수도?! 혹시나 기능 구현을 성공하고 이해하게 된다면..

팀 프로젝트에 써볼수 있지 않을까? 필수 기능은 아니라서 추가 기능이 되겠지만...

여튼 이 흐름은 나름 이해했는데, 코드로 구현해보는게 역시 쉽지는 않다 ㅠ

 

 

 

 

react-query 특강

어제에 이어 오늘도 특강이었는데, 오늘은 복습을 좀 해야 할것 같아서 따로 강의 정리는 하지 않았다.

미리 한번 읽고 특강 들으려고 했는데 오후 시간을 계속 로그인 저 기능에 매달렸더니...ㅎ

내일 시간 날 때 강의 다시 들어보고 복습해야겠다.

 

 

 

 

 

axios 부분 구현해보기

심화 강의 노션에서 예제에 todolist 관련 예제가 있어서 특강 전에랑 특강 후에 잠깐 직접 실습해봤다.

 

어떤 식으로 todo를 주고 받는지 어떤 식으로 코드를 짜야 하는지...등등

직접 실습해보고 추가해보면서 해봤는데 어제보다는 조금 더 이해가 갔다.

내일 수정 부분도 구현해보고, 내가 지난 주에 했던 숙련 과제를 업그레이드 해봐야겠다.

 

연습 예제에서는 그냥 axios 구현이었는데 reducer나 router 같은 게 추가되면 어떤 식으로 되나 실험해봐야지...

내가 제대로 하고 있나 싶긴 하지만...직접 해보면서 오류를 봐야겠다.

 

 

 

 

 

 

 

짧은 일기

어떤 식으로 추가 공부를 해야 괜찮을지 고민되는 하루였다.

심화 강의에 포함되어있는 내용은 확실히 어려워서 그런가 제대로 이해하고 싶은데 말처럼 쉽지는 않았다.

 

중간에 팀 프로젝트를 위해 github organization을 만들고 미리 repository setting까지 했다.

시작한건 아니고...그냥 초기 세팅을 조금 더 쉽게 하기 위함이랄까.

여튼 이런걸 하면서 시간을 좀 보내고 시행착오를 많이 겪은 하루였다.

 

그럼에도 아직 어떤 식으로 공부해야 좋을지 잘 모르겠다.

그냥 오늘 복습해본 부분 중에서 필요한 부분을 더 공부해봐야겠다.

이럴 땐 구글링이 답....혹은 튜터님한테 질문하러 가거나...

 

프로젝트 시작 전이라 그런지 좀 더 많이 공부해야겠다는 생각이 자꾸 든다.

그래도 좀 차분하게 해야 할것 같아서...내일은 오늘처럼 허둥거리지 않는 하루가 되었으면 좋겠다.

728x90