2022.12.11, weekly memoirs

weekly memoirs

 

 

 

 

---

 

 

 

 

이번 주에 한 일

 

 

 

 

 

✅  캣보우 프로젝트 

 

이번주 목표 : 배포 후 애드 센스 신청하기

달성 : 😂

 

 

✔️ http, https 이슈 공부

 

 

 

 

 

 

 

 

느낀점

 

 

 

1. 

배포된 서버와 함께 통신을 했는데 http, https 에러가 터졌다 🥲

https 에서 http API로 통신을 요청하니 생긴 일이었다

보안상의 이유로 브라우저에서 Block 한 것 😂

 

 

백엔드 팀원분이 에러를 고치실 동안 이를 프론트에서도 해결해보려고 여러가지 시도를 해봤는데

 

 

1) json 파일에 들어가 proxy : "baseAPI" 설정 -> 실패

2) 헤더에  Referrer-Policy: unsafe-url 설정 -> 실패

참고 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

 

3. 헤더에 Access-Control-Allow-Origin': '*' 설정 -> 실패

 

 

4. axios config 설정에 http 관련 요소가 있어서 시도해봤는데

  // `httpAgent`와`httpsAgent`는 각각 Node.js에서 http와 https 요청을 수행 할 때
  // 사용할 커스텀 에이전트를 정의합니다. 이것은 기본적으로 활성화되지 않은 `keepAlive`와 같은
  // 옵션을 추가 할 수 있게 합니다.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

참고 : https://yamoo9.github.io/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%A9%94%EC%84%9C%EB%93%9C

참고2 : https://stackoverflow.com/questions/51363855/how-to-configure-axios-to-use-ssl-certificate

 

이 또한 실패했다.

 

사실 저 스택 오버 플로우 글을 하나하나 뜯어보면서 정독하고 죄다 해봤는데... 모두  실패했다 🥹

 

 

결국엔 백엔드 팀원분이👍 이틀을 고생하여 수정하셨는데

지금 생각해보면 저 로직으로 성공했으면 더 큰 문제가 생겼을 거 같단 생각이 든다.

 

당시엔 어떻게든 성공하고 싶어 눈이 멀어(...) 이것 저것 시도했지만 개발 서버에서만 사용하고 배포시엔 쓰지 말라는 경고도 많이 보았을 뿐더러

당연한 얘기지만 https 끼리 서로 통신하는게 가장 좋은 선택이니까...!

 

 

 

 

 

 

 

 

 

 

✅ TodoList 

 

 

이번주 목표 : 완성하기

달성 : 🏃‍♀️ 밤샘각

 

✔️ ts 공부

✔️ useForm 사용하여 로그인 회원가입 구현

✔️ useQuery 공부

 

 

 

 

 

 

느낀점

 

 

1. 

 

useForm은 form 많은 페이지를 만들 땐 이만한 hook이 없을 거 같다. 

회원가입 할 때 사진, 이름, 성별, 아이디, 비밀 번호를 받았는데 각각 input에 register만 걸어주면 onChange 부터 유효성 검사도 매우 편리했다.

error 메세지 띄우는 것도 매우 간편해 즐겁게 작업했다.

 

 

2.

 

useQuery 잘 알아두면 너무 잘 쓸 거 같은데 컨셉을 이해하기까지 조금 시간이 걸릴 거 같다.

CRUD 기능 구현은 되겠지만 알고 쓴다는 느낌이 없어서 아쉽다 🥲... 공식문서 + 블로그 + 유툽 기반으로 엄청 찾아봤는데 사람마다 쓰는 방법이 달라 헤매고 있는 중이다. 그리고 연습 겸 todoList에 쿼리를 쓰긴 했지만 간단한 todoList에 다소 오버 스택이라는 생각도 들었다 😂

Todo 는 결국 개인 페이지이여서 데이터를 주기적으로 받을 필요도 없고 새로운 Todo 가 생성될 때마다 데이터 통신을 하고 다시 받아오기 때문에 캐싱도 애매하다고 느꼈다 😂 이를 어떻게 잘 활용할지 계속 고민해봐야할 듯 하다.

 

 

 

 

 

 

 

✅ 개생포 스터디

 

 

 

 

1.

 

프로젝트 방향성 정했고, 프론트 스택도 모두 정했다. 스타일 컴포넌트와 리액트 쿼리, 타입스크립트로 결정!

다음 주부터 3주간 다시 달릴 예정이다.

 

사용할 observer 도 미리 예습해놓았고 리액트 쿼리도 공부해놓았으니 이번엔 좀더 클린한 코드로 속도 있게 구현하지 않을까 싶다 ☺️

파이팅!