20220312 토요일
오늘의 도전과 배움
1. next.js 핸즈온 듣기
2. 0auth 구글, 트위터 연결하기
3. 코테스터디 참여next.js 핸즈온 듣기
미량님 next.js 블로그 만들기 핸즈온을 들었다.
먼저 SSR, SSG에 대한 개념을 간단히 듣고
next.js가 SSR을 하기 때문에 CSR을 하는 React.js보다
SEO 측면에서 훨씬 낫다는 것을 배웠다.
이후 미량님의 블로그 가이드글에 따라 보일러 플레이트를 설치하고
순서대로 tailwind를 설정하고 라우팅과 스타일링을 해보았다.
그리고 next.js의 contentlayer 라이브러리를 처음 써보았는데 너무 신기했고 getStaticPaths와 flattenPath를 처음 알게 되었다.
- getStaticPaths : 동적 라우팅을 사용할 때 어떤 html을 만들어야하는지 알려주는 역할
- getStaticProps : flattendPath는 contentLayer 라이브러리에서 만들어주는 주소 / allpost를 가져온 다음에 flattendPath와 같은 주소의 블로그 내용들을 찾아주는 역할
사이드 프로젝트 트위터 로그인 API 연동하기
트위터 개발 계정을 만들고
key값을 생성해서 (Id, secret key, bearer)
프로젝트 레포지터리 내에 pages 폴더에 auth 페이지를 만들고
파일 안에 session,jwt,providers 정보 입력
vercel 배포시
env variables 입력칸에 모든 로그인 api의 Id와 key값을 입력 후 배포
(Github 팀 계정을 쓰니 vercel에서 Github으로 로그인했을때 자동으로 팀 계정이 되어버림.. 팀 계정은 무료 체험 14일 후 요금이 부과된다)
코테스터디
오늘은 좀 수월한 문제여서 더 새로운 게 많이 있을까 했는데
스터디를 통해 또 ParseInt와 RTTI(캐스팅 변환 비용)의 개념을 새로 알게 되었다.
parseInt
parseInt는 몇진수를 쓰는지 꼭 써줘야함 오옹
parseInt(a, 10)
10진수가 default임
변환 비용(RTTI)
형변환을 안하고 푸는게 가장 성능이 높다
캐스팅 런타임 비용이 줄어든다.(C++언어에서 유래한 듯)
테스트 코드
console.time();
console.timeEnd();참고 블로그
https://sexycoder.tistory.com/55
궁금한 점, 어려웠던 점
오늘은 좀 더 깊게 이해하고 체화하고 싶은 개념들이 많았다.
SSR, SSG에 대한 개념
SEO를 최적화 - InferGetStaticPropsType
contentlayer라이브러리
로그인 API를 프로젝트에 연동하는 방법
오늘은 트위터 연동하는 미팅에 참여했는데 서비스마다 조금씩 방식이
다르다고 들어서 나중에 구글, 카카오 로그인도 연동해보고 싶다.
내일 해보고 싶은 점, 방향
스크럼 전에
하루 계획 짜기
자유 시간
- 딥워크 인터뷰
- 번역 리뷰 회의
