Favorite page 템플릿 만들기 Remove 버튼 활성화 시키기 ![](https://velog.velcdn.com/images/zhy2on/post/6bf775a4-87b5-4a97

콜백함수에 인자를 넘겨줘야 할 때는 함수를 선언해주는 방식을 사용해야 한다이렇게 하면 버튼을 누르지 않아도 onClickRemove가 실행돼 버린다. 괄호를 보고 함수인 걸 알아서 그대로 실행해버리기 때문이다.그래서 인자를 전달해줘야 하는 경우는 저런식으로 사용해야 함

Favorite 모델 만들기 schema를 먼저 만들고 그걸로 model을 만든다. mongoose.Schema -> 스키마 생성 mongoose.model(name, schema) -> 스키마로 어떤 name의 모델을 만듦 삽질..🫠 504 Gateway Tim

https://www.youtube.com/watch?v=pVflC9y9C6U 캐스팅 정보를 가져올 때는꼴의 url로 요청하면 된다.landing page에선 무비 포스터를 클릭하면 해당 무비 디테일 페이지로 넘어갈 수 있게 GridCards 컴포넌트를 배치했

강의 https://www.youtube.com/watch?v=TrxXFbF52gs App.js 각 무비이미지를 클릭하면 `/movie/movieId` 꼴의 url로 접속 하게 됨. Route컴포넌트의 `:`을 사용해 movieId에 따라 url 라우팅을 할 수

React Router에서 사용되는 속성 React Router는 URL과 일치하는 컴포넌트를 렌더링하고, 이때 `해당 컴포넌트에 props로 여러 속성을 전달`한다. props.match는 이러한 속성 중 하나로, 현재 URL과 일치하는 라우팅 규칙에 대한 정보를 담고 있다. ex) props.match.path: 현재 라우팅 규칙의 경로 정보를 포...

Route 컴포넌트에서 exact path를 사용할 때 ":"(콜론)은 동적 URL 매개변수(parameter)를 나타내는 역할을 한다. exact path는 특정 URL 경로와 정확히 일치하는 경우에만 해당 Route 컴포넌트가 렌더링되도록 지정하는 데 사용된다. 콜론(:)은 동적인 URL 매개변수를 나타내는 경로 매개변수(parameter)로 사용된다...

Load More button 만들기 useEffect의 의존성에 빈 배열이 들어 있기 때문에 컴포넌트가 마운트 될 때 한 번만 useEffect가 실행된다. 다음 페이지의 popular movie를 불러오기 위해선 url의 끝에 page번호를 업데이트해서 api를 호출하면 된다. 그렇게 하기 위해 CurrentPage state를 선언해주고 but...

강의 https://www.youtube.com/watch?v=95sFIH4Hsxk Grid Card Component 만들기 Movies & map 함수 Movies를 map 함수를 이용하여 하나하나의 movie에 대한 정보를 받아올 수 있도록 한다. Movies도 세팅이 되기 전에 컴포넌트가 렌더링 될 수 있기 때문에 인라인 조건문을 통해 Movi...

문제(setState의 비동기적 특성) 다음과 같은 코드에서 setMainMovieImage()를 하고 console log를 찍어 출력해보면, 값이 들어가 있는 것이 아니라 초기값인 null이 나온다. 그래서 아래와 같이 html 코드를 짜면 null의 backdrop_path에 접근하기 때문에 오류가 난다. ![](https://velog.vel...

강의 https://www.youtube.com/watch?v=vF2ifU4bY 전체적인 Template 간단하게 만들기 TMDB API에서 가져온 모든 데이터를 STATE에 넣기 MainImage Component를 만들기 Landing page 만들기 App

강의 https://www.youtube.com/watch?v=P7DrJmQxgV8&t=1s TMDB API key https://www.themoviedb.org/settings/api 회원 가입 후 settings -> API API에서 공통된 부분의 url을 상수로 지정해놓으면 좋다. API url 레퍼런스: https://developer.the...

강의 https://www.inflearn.com/course/따라하며-배우는-노드-리액트-영화사이트-만들기/dashboard 2강 Boiler-Plate & MongoDB 연결 boilerplate code 보일러 플레이트 코드란 단순작업에 필요한 코드를 작성할 때

Using React Router client (front-end) react-router-dom https://v5.reactrouter.com/web/guides/quick-start https://goddaehee.tistory.com/305 우리가 흔히 생각하

강의 #2 코드 ``git clone -b {branch_name} --single-branch {저장소 URL} `` Installation 폴더 세팅 및 패키지 설치 material-ui https://mui.com/material-ui/getting-sta

강의 #1 Installation 기본 패키지 설치 및 세팅 packages `express`: Node.js framework. 서버 돌리는 용 `mongoose`: MongoDB를. Node.js와 MongoDB를 연결해주는 ODM `dotenv`: 환경변수

https://codepen.io/CucuIonel/pen/yLaLGL해당 css를 바탕으로 styled-components를 사용하여 리액트 컴포넌트로 채팅화면을 구현한다.apache 대신 리액트 서버를 이용한다https://developer.moz

Section 12. Lifting State Up Shared State State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것 ex) 부모 컴포넌트:2 자식1:부모

조건부 rendering자바스크립트의 truthy, falsy: true는 아니지만 true로 여겨지는 값, false는 아니지만 false로 여겨지는 값리액트 element를 변수처럼 다루는 방법그냥 변수가 element도 될 수 있다.. 정도로 생각하면 될 듯Inl

State: 리액트 Component의 상태, 리액트 Component의 변경 가능한 데이터state는 개발자가 정한다.렌더링이나 데이터 흐름에 사용되는 값만 스테이트에 포함시켜야 한다 --> 스테이트가 변경될 경우 컴포넌트가 재렌더링 되는데 렌더링과 관련 없는 값을