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

오늘 일과 간단 요약

1. 무한 스크롤
2. 무한 스크롤...포기
3. 배포 후 api 오류 해결
4. font 적용하기

 

 

 

 

 

 

 

 

 

애증의 무한스크롤

오늘 일어나서 하면 깨끗한 정신(?)으로 시도하니까 될 거라고 했던 건 나만의 오만...

어제에 이어서 오늘 오후까지 계속 했는데 data가 한번에 불러와지고 무한 스크롤이 전혀 되지 않았다...ㅎ

제대로 로딩은 되고 무한 스크롤만 적용이 안되서 이것저것 다 시도해봤지만 장렬히 실패

 

결국 무한 스크롤 대신 인섭님이 pagenation 적용하셨고 화면공유로 함께 api data 받아오는 걸 바꾸면서 적용해서

페이지로 나타내는 걸로 구현했다.

 

이게 이상하게 이미 있는 data를 무한 스크롤로 구현하는 건 되는데 api에서 받아와서 무한 스크롤 적용하는 건 안된다.

아마 방법이 있는데 내가 못 찾았을 가능성이 거의 80%나 되지만, 일단 굉장한 자괴감과 현타가....ㅠ

지금까지 뭔가 어려워도 이정도 고민했으면 전부 찾을 수 있었고 해결할 수 있었는데 이번에 처음 기능 구현에 실패하면서 엄청난 현타가 와버렸다.

뭔가 지금까지 0에서 시작한 것이 아닌 튜터님 코드와 구글링을 통해 얻은 코드들을 바탕으로 만들어서 그런가 싶고...

이렇게 뭔가 하나에 매달린 적이 처음도 아닌데 실패한 건 처음이라 그런가 굉장히 기분이 별로 좋지 않았다.

 

그래서 창순님이 추천해주신 영상을 보고 우리 프로젝트에 적용해보려고 했는데 쉽지 않았다.

추천해주신 영상은 infinite query를 적용하는 유튜브 영상이다. 이게 보는 것과 실제 적용은 정말...정말 쉽지 않다...

 

링크는 아래.

https://www.youtube.com/watch?v=s92apk05kT4 

 

react query에 대해 사전 지식이 없이 시작해서 그런가 싶다.

이전에 react 팀프로젝트를 했을 때는 react query가 아닌 redux thunk를 썼었어서 이번에 query를 써보는 게 처음이다.

물론 react native 강의에 나오기도 했고 튜터님 코드를 따라 적용해보기는 했지만 온전히 내 것이 되지는 못한 것 같다.

 

그래서 이번에 팀 프로젝트 끝나면 어떤 분이 유데미에 query 관련 강의가 있다고 하셔서 구매해서 봐야겠다.

이렇게 또 공부할 거리가 많아지고...

 

여튼 pagenation을 통해서 무한 스크롤을 대체했지만, 개인적으로 나에게 좀 실망한 하루였다.

공부를 열심히 한다고 하는데...역시 코딩은 쉽지 않다....

 

 

 

 

 

배포 오류

그렇게 오후가 다 지나고 저녁 먹고 와서 배포를 했는데, 배포 하자마자 콘솔창에 에러가 생겼다.

콘솔창을 보니 api가 아예 받아와지지 않는 오류였다.

그래서 멘붕이 왔었는데 구글에 오류 메세지를 그대로 치니 다른 사람들의 오류 해결 창이 보여서 TIL에도 적고

따로 글로도 정리하려고 한다.

 

오류 메세지는 아래와 같다.

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

 

이 에러는,

암호화된 HTTPS 페이지에 암호화되지 않은 HTTP를 요청할 때 발생하는 에러였다.

 

해당 경고를 제거하고 제대로 api를 받아오기 위해서는 index.html 에 아래 meta 태그를 추가해야 했다.

 

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

이걸 추가하고 바로 push 해서 배포한 페이지에 적용하고 나니 다행히 제대로 api가 불러와졌다.

재빨리 구글링해봐서 정말 다행이다.

역시 에러 메세지를 바로 구글에 검색하면 나보다 먼저 그 에러를 접한 사람들의 이야기가 나오니 동질감도 느껴지고,

보다 더 쉽게 해결할 수가 있다.

 

이를 통해 배포는 완료했고,

배포 이후에도 추가로 해야 할 일들이 있어서 그걸 했다.

 

 

 

 

 

gogle font 적용

그냥 일반 폰트를 적용하니 별로 좋지 않다는 의견들이 모아져서 구글 폰트에서 header 폰트와 아래 콘텐츠 폰트를 google font에서 적용하기로 했다.

 

header에는 아래 폰트를,

https://fonts.google.com/specimen/Gugi?preview.text=Culture.map()&preview.text_type=custom&category=Serif,Display,Handwriting&subset=korean&noto.script=Kore 

Google Fonts: Gugi

 

나머지 콘텐츠에는 아래 폰트를 적용했다.

https://fonts.google.com/noto/specimen/Noto+Sans+KR?preview.size=20&subset=korean&noto.script=Kore 

Google Fonts: Noto Sans Korean

 

 

다른 분이 폰트를 적용해주기로 했는데 웹페이지에는 제대로 적용이 안되서 보니까 index.html 에 link 태그를 붙이지 않아서 생긴 오류였다.

 

그래서 내가 조금 수정해서 다시 PR 날리고 dev 브랜치에 merge했다.

딱히 별로 한 건 없지만...라이브코딩을 통해 이야기를 주고받은 거 말고는 한게 없어서...ㅋㅋㅋㅋ

TIL에 적어본다.

 

 

 

 

 

 

 

 

 

짧은 일기

솔직히 오늘은 하루종일 별로 기분이 좋지 않았다. 내일배움캠프를 하면서 처음으로 현타가 왔다고 해야 할까...

하고 싶었던 기능을 끝내 구현하지 못하고 포기한 경험이 처음이라 그럴 수도 있다.

포기한게 아니라 내 머리로는 한계여서 그런 거지만....ㅎ 나중에 실력이 더 쌓이면 할 수 있을까 싶다.

 

여튼 이번 프로젝트를 진행하면서 뭔가 더 기여를 하고 싶은데 그러지 못해서 너무너무 아쉽다.

특히 무한 스크롤을 구현해내고 싶었는데 애증의 무한 스크롤...당분간은 쳐다보기도 싫다...ㅋㅋㅋㅋㅋ

 

어제와 오늘 이틀 내내 고민했던 부분인데 끝내 못해서 내 실력에 대한 현타도 오고 아쉬움도 너무너무 크다.

진짜...공부할 거 너무 많은데 더 추가되고....내 앞에 거대한 산이 쌓이는 기분이다.

그래도 해야 할 건 해야 하니까, 프로젝트에서 생긴 자잘한 버그들을 살펴봐야겠다...

 

프로젝트가 끝나고 나면 다시 한번 세웠던 계획을 전면 수정할 것 같다.

솔직히...지금은 너무 정신적으로 피로가 느껴져서 내일 바로 해야지...진짜 공부를 하면 할수록 쉽지 않다.