1.30 TIL / 잠 안와서 새벽4시까지 타입스크립트 투두리스트 만듬 뿌듯,getServerSideProps를 공부하고 퍼즐이 맞춰짐,

vanila js로 캐러셀 만들어 보았다. 다른 분이 만들어 놓은 틀에서 중앙에 있는 (초점이 맞추어진) 셀은 하얀색으로 배경이 바뀌도록 하였는데, 이도 생각보다 껄끄러운 작업이었다.

나는 배열의 중앙 인덱스를 centerCell로 잡고 centerCell의 색을 바꾸는 로직으로 작성했는데, cell의 개수가 홀,짝일때를 구분해야 했다.

말로하면 쉬운데 알고리즘 연습이 평소에 안되어 있다보니까 머릿속 로직을 구현하는데 시간이 오래 걸렸다.

그 밖에도 DOM복습이 되었다.

children노드는 유사배열이라서 Array.from을 사용해야 함을 코드스테이츠 Section1때 기록하고 잊고 있었는데 오랜만에 당시 게시글을 다시 읽어보며 코드를 작성했다.

이걸 적어놓은 작년 8월의 나를 아주 칭찬한다.

JS : 배열과 유사배열

배열과 유사배열 유사배열: []로 감싸져있지만 배열이 아닌것들. 배열의 메서드를 활용할 수 없다. ex) forEach를 사용하면 에러가 난다. 위의 콘솔창에서 els는 배열이 아니다. 때문에 forEach메서드

wnsdufdl.tistory.com

첨에 리액트 배울땐 DOM두고 왜 이딴걸 배우나 싶었는데, 이젠 DOM이 감이 안온다. 리액트사고방식에 갇혀있는게 느껴졌다.

next.js 의 getServerSideProps() 함수 공부했다.

회사에서 next.js를 공부하지 않고 맨땅에 헤딩식으로 헤쳐나갔다.

~~getServerSideProps()가 무슨 역할인지도 모르고 그냥 props를 전달하는구나.. 라고만 생각하고 업무를 보았다. 그래도 해결이 되었으니깐~~

~~오늘 공부를 하면서 퍼즐이 맞춰지는 느낌이 들었다.~~

~~내가 맡은 업무는 랜딩페이지인데, 랜딩페이지라서 신문기사처럼 읽기 위주의 페이지이다. 때문에 상호작용이 크게 없다.~~

~~반면 검색엔진에 유리하도록 하기 위해 초기 HTML이 필요하다.(meta 태그)~~

~~getServerSideProps()를 이용하여 DB 데이터를 서버에서 미리 다 다운받고 HTML로 pre-rendering시키는 서버사이드렌더링을 할 수 있다.~~

뭣도 모르던 열흘전의 내가 이상하게 써놔서 다시씀

회사 레포지토리에서 쓰는건 getSeverSideProps()가 아니라 getStaticProps임 ㅋㅋ

프리렌더할때 쓰는 함수가 getServerSideProps도 있고, getStaticProps도 있는데

getServerSideProps: 매번 서버에서 데이터를 패칭하여 프리 렌더하기 때문에 렌더링이 오래걸린다. pre-render가 꼭 필요한 동적 데이터가 있는 Page에서만 사용하는 것이 좋다. 성능은 getStaticProps보다 안좋지만(매번 fetching하니깐), 언제든 내용을 동적으로 수정할 수 있다.
getStaticProps: 빌드시 한번 프리렌더하고 그 후에는 해당 데이터들이 변하지 않는다. 매번 데이터 fetch를 하지 않기에 성능면에서 getServerSideProps보다 좋다. => SEO가 필요하고 변하지 않는 공개 캐시 데이터를 가져올 필요가 있을때 사용 권장

너무 졸리다.

잠이안와서 타입스크립트로 투두리스트를 만들었다 아직 미완성이다.

기록 (21.7.19 ~