원티드 5월 프론트엔드 챌린지를 하면서 모노레포에 대해 알게 되었다. 모노레포란 무엇인지, 이와 반대되는 멀티레포는 무엇인지 알아보자.

웹서핑을 하다가 새로운 vscode-pets라는 익스텐션을 알게되었다. vscode의 explore 구석에 작은 펫들을 키울 수 있는데, 사실 많은 상호작용은 가능하지 않지만 그냥 작은 도트 펫들을 보는 것만으로도 기분이 좋아진다.

먼 미래라면 몰라도 아직까진 나도 챗gpt가 신입 개발자를 대체하기엔 무리라고 생각한다. 그러니 그 전에 부지런히 챗gpt를 활용해서 빠르게 성장하는 개발자가 되어보자. 나중에는 정말로 이런 말을 들을 지도 모르니 말이다.

스타일링을 함에 있어서는 원하지 않는 기본 스타일이 적용 될 수 있으므로 reset으로 **기본적인 태그의 스타일을 초기화** 하여 원하는 스타일로 적용시킬 수 있다. 그 중에서 유명한 `reset.css`와 `normalize.css`에 대해 알아보자.

슬라이드를 만들었으면 슬라이드 안에 영화의 정보를 담은 카드를 만들어 담아 보자. react multi carousel의 기본 코드를 작성하고 props로 받아온 영화들을 MovieCard라는 컴포넌트를 만들어 map으로 리스트했다.

배너 밑의 영화리스트들을 슬라이더로 만들어보자. 그리고 API로 영화정보를 받아와서 배너와 슬라이드에 적용될 때 까지 로딩 스피너를 보여주도록 하자.

홈페이지에서 API로 받아온 영화 정보로 배너를 만들어보자.

useEffect는 렌더링 이후에 실행되기 때문에 에러가 나게 된다. 따라서 데이터가 있다면 렌더링을 시켜주는 조건부 렌더링을 실시해야 한다.

앞에서 만든 리덕스를 적용하기 위해 리듀서를 만들어보자.

스타일링을 하다가 z-index가 적용되지 않아서 구글링해서 발견한 z-index의 규칙을 정리해보았다. 단계적으로 이해하기 위해서는 1단계부터 읽어도 되지만 순서 상관없이 4번이나 7번부터 읽어도 상관없다.

전역적인 상태관리를 하기 위해 리덕스를 세팅해보자.

일단 간단하게부트스트랩으로 만들어 놓고 나중에 Scss로 기깔나게 스타일링을 하려고 한다. 검색창이 있는 네비바 코드를 가져와 수정을 거쳐 네비바를 만들어보았다.

네트워크 통신의 기본 규칙인 프로토콜에 대해 설명한다. 프로토콜의 종류인 OSI 모델과, TCP/IP 모델에 대해 설명하며 데이터가 어떻게 전송되는지 캡슐화와 역캡슐화를 통해 설명한다.

페이지를 전환하며 보여주기 위해서는 라우터를 적용하여야 한다. 전에 설치한 react-router-dom 모듈의 `BrowserRouter`, `Routes`, `Route`를 적용시켜 준다.

클론코딩을 위한 프로젝트 생성, npm 모듈 설치, 프로젝트를 완성하기 위해 할 일들을 리스트업 해 보았다.

리액트 복습도 할 겸 포트폴리오를 만들기 위해 영화 OTT 서비스인 넷플릭스를 클론코딩 해보려고 한다. 영화의 API는 The Movie Database(이하 'TMDB')라는 영화 정보 사이트의 API를 사용하기로 했다.

타입스크립트에서는 특정 인터페이스나 타입을 다른 여러 파일에서 사용해야 할 경우가 있는데, 그럴 때 `export`로 내보내고 `import`로 들여와서 사용을 할 수 있다.

타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지, 타입스크립트에서 두 개의 코드 타입이 서로 호환이 되는지를 점검하는 것을 타입 호환이라고 한다. 타입 호환은 타입 그 자체가 아니라 타입의 구조가 호환이 된다면 타입 호환이 된다. 이를 구조적 타이

어떤 변수의 타입이 여러가지일 때, 타입이 A인 경우와, B인 경우를 나눠서 다른 동작을 수행시킬 수 있다. 이를 타입 가드라고 한다.

타입스크립트는 자체적으로 변수에 할당된 데이터의 타입을 추론할 수 있다. 하지만 개발자가 항상 의도하는 대로 타입을 추론하는 것은 아니며, 타입스크립트보다 개발자가 더 타입을 잘 알고 있는 경우도 있다. 그럴 때, 개발자가 변수의 타입을 단언해 줄 수 있다.