카운트 먼저 App을 간단하게 만들어주는데, 테스트를 진행할 부분은 그냥 data-testid라고 적어줘도 된다. 왜냐하면 쿼리 함수로 쓴 getByTestId가 data-testid를 찾는 역할을 하기 때문이다. TestId가 "counter"인 엘리먼트의 텍스트가 0인지 확인하고 싶은데, 그냥 숫자 0이라고 테스트를 진행해 통과되지 않았다. toBe(0) -> toHaveTextContent(0)으로 작성하면 테스트가 정상적으로 통과된다. 버튼 테스트 플러스 버튼과 마이너스 버튼을 만들었다. 각자 버튼이 "-" "+"라는 텍스트를 가지고 있는지 테스트를 진행했다. 컴포넌트를 쭉 훑어보면서 testid가 minus-button인 돔 요소를 찾아 buttonElement라는 변수에 그 부분을 할당했다. ..
TDD 실제 코드를 작성하기 전 테스트 코드를 먼저 작성하고, 그 테스트 코드가 패스될 수 있는 실제 코드를 작성한다. TDD의 장점 많은 기능을 테스트하기에 소스 코드의 디테일이 높아지면서 클린 코드를 만들 확률이 높아짐 실제 개발하면서 많은 시간이 소요되는 디버깅 시간과 실제 개발 시간이 줄어듬 React Testing Library npx create-react-app 으로 리액트 앱을 생성하면 테스팅 할 때 React Testing Library를 사용한다. React Testing Library는 리액트 컴포넌트를 테스트하는 라이브러리로, 실제 DOM을 사용해 컴포넌트를 렌더링한다. 이전에는 에어비앤비에서 만든 Enzyme를 사용했는데 이는 구현 주도 테스트(Implementation Drive..
1. useParams로 영화 상세 페이지 구현 검색 페이지에서 검색어에 해당되는 영화가 나오는데, 이제 그 영화를 클릭했을 때 영화 포스터가 나오게 하고 싶다. 사실 영화를 클릭했을 때 이런 저런 정보가 나오면 좋겠지만 일단 강의에서는 포스터만 나오게 해두었다. 과연 내가 복습하면서 기능을 추가할 수 있을지 의문이긴 하다 ㅋㅋ..... 아무튼 useParams로 영화 id를 가져오려고 한다. 전 게시글에서 SearchPage를 구현할 때 검색 결과가 있다면 map으로 영화를 꺼내오게 만들었다. 그렇게 나온 이미지 부분을 클릭하면 그 이미지가 마치 다음 페이지에 나온 것처럼 보여주기 위해 navigate를 썼다. {searchResults.map((movie) => { if (movie.backdrop..
(점점 울고 싶어지지만 일단 간다) 1. useLocation을 이용한 검색 페이지 구현 이런 식으로 Nav에 넷플릭스 로고와 유저 이미지 가운데로 Input 박스를 넣어 검색어를 받아주려고 한다. Nav.js에 가서 const [searchValue, setSearchValue] = useState("")를 작성해준다. 이후 상단 UI 부분에 input을 적어주되 value={searchValue} (=초기 ""), onChange={handleChange}를 같이 적어준다. 이 함수는 아래와 같이 인풋 박스에 무언가 적힐 때마다 그 값으로 searchValue를 바꿔주고, 경로를 이동 시킨다. q는 query의 약어로 해당 파라미터는 검색어를 나타낸다. 즉 /search 경로로 이동하면서 검색어를 이..
1. React-Router-DOM 리액트에서 브라우저 URL을 관리하고 페이지 라우팅을 처리하는 라이브러리 이 라이브러리를 사용하면 리액트 어플리케이션을 다중 페이지로 구성하고 각 페이지의 경로를 정의할 수 있다. 📌 라우팅과 리액트 라우터 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여준다. 리액트는 SPA(Single Page Application)으로 새로운 페이지를 로드하는 게 아니라 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 띄고 있다. 리액트 라우터는 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 역할을 한다. 그러니까 실질적으로는 하나의 페이지만 있는데 URL에 따라 그 데이터를 렌더링 해주는 역할로 이해했다. 📌 용도에 따른 패키지 종류 ..
1. 모달 생성하기 모달이란 웹이나 앱에서 일시적으로 화면에 나타나는 팝업 형태의 UI 컴포넌트다. 주로 사용자의 입력이나 알림, 추가 정보를 표시하는 데에 사용된다. 모달이 나타나면 배경은 일시적으로 가려져 다른 부분에 대한 상호작용이 차단되는데, 모달을 닫거나 작업을 완료하면 모달은 사라진다. 모달은 사용자 경험을 개선하고 정보를 전달하는 역할을 하는데, 일반적으로 흐릿한 배경과 모달 내 내용을 포함하는 컨테이너로 구성된다. 이 이미지와 같이 여러 영화가 있는 배경은 흐릿해지고, 등장한 모달이 클릭한 영화의 상세 정보를 제공하고 있다. 우측 상단의 ❌를 누르면 사라진다. (추후에 저 버튼이 아니라 바깥 화면을 눌러도 모달이 꺼지게끔 기능을 디벨롭할 예정이다.) 먼저 모달의 열림과 닫힘을 표현하기 위해..
1. 영화 나열을 위한 Row 컴포넌트 생성 이런 식으로 최상단 배너 밑에 영화들이 주제별로 나열될 수 있도록 구현하고자 한다. Row 컴포넌트를 App.js에 넣어줄 건데, 맨 위에 NEFLIX ORIGINALS는 그 밑에 Trending Now보다 이미지가 크다. 이런 식으로 title, id, fetchUrl은 동일하게 하되 NEFLIX ORIGINALS만 isLargeRow를 추가해주었다. requests 파일에서 오타가 있어서 오전 내내 디버깅 했었던 게 떠오른다. 😇 Row 컴포넌트도 수정한다. fetchUrl로 받아오는 게 있으니 axios도 import 해야 한다. (단순 axios가 아니라 경로에 있어야 한다.) 위에서 Row에 props로 내려준 것들이 title, id, fetchUr..
1. API 받기 & axios 인스턴스 생성 및 요청 보내기 MBTI 테스트나 to do 어플리케이션과 달리 이번 클론 코딩은 API를 받아 화면을 구성한다. The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 이 곳에서 회원가입 후 API Key를 받는다. API URL은 아래와 같다. 최신 영화: https://api.themoviedb.org/3/movie/latest?api_key=&language=en-US 디테일한 정보: https://api.themoviedb.org/3/movie/{movie_id}?api_key={{api_ke..
1. React Hooks? 리액트의 컴포넌트는 클래스, 함수형 2가지 방식으로 만들 수 있다. 이전에는 클래스 컴포넌트를 많이 사용했는데, 그 이유는 컴포넌트의 상태와 생명주기를 클래스에서만 다룰 수 있었기 때문이다. (그럼 함수형에서는 뭘 할 수 있었냐? UI를 렌더링 하는 역할이었다.) 어차피 Hooks가 나오게 된 배경을 설명하느니라 나온 거라 생명주기가 무엇인지 강의에서 잘 다뤄지지 않아 서치해보았다. 그냥 이 부분은 그렇구나 하고 이해하고 넘어갔는데 되게 복잡했다. Mounting(생성) : 컴포넌트가 생성될 때 발생하는 단계 constructor() : 컴포넌트의 인스턴스를 생성하고 초기화 한다. render() : 컴포넌트의 UI를 렌더링 한다. componentDidMount() : 컴포..
1. JSX란? JSX는 Javascript Syntax extension, 자바스크립트의 확장 문법이다. 리액트에서는 JSX를 이용해 화면에서 보이는 UI를 구성하는데, 이 때 자바스크립트의 로직과 HTML 구조를 같이 사용할 수 있어서 기본 UI에 데이터가 변하는 것이나 이벤트들을 처리하기 용이하고 보다 쉽게 구현할 수 있다. 물론 JSX를 쓰지 않으면 리액트를 쓸 수 없다 이런 것은 아니지만, JSX를 쓰지 않으면 일일이 ReactDOM을 렌더 해줘야 된다. 그냥 대충 말하자면 React.createElement로 형태/속성/내용을 할당한 후 렌더를 또 해야 한다. 이런 식으로... 노마드코더 때 리액트 JSX 없이 한 번 해봤는데 그게 무슨 말인지 이제 좀 알겠다 :) 아무튼 그래서 JSX는 어떻..
