Jay

작업하고 있는 사이트에서 개발자도구를 연다. 컴포넌트를 선택한다. 눈모양을 선택하면 다음 해당하는 DOM요소로 이동한다. 대략적으로 확인한 다음에 계획하고 검증단계를 거친 후에 코드로 작성한다. app.module.css에서 코드를 아래와 같이 작성한다. max width를 보통 780으로 잡는 780을 16으로 나누면 48rem이다.(왜 16으로 나누는지 고민) 미디어쿼리일때는 content를 이미 display가 flex로 되어 있으니까 flex-direction을 column으로 주면 된다. @media screen and (max-width: 48rem) { .content { flex-direction: column; } } 참고: https://academy.dream-coding.com/co..

브라우저 상에서 fetch라는 웹 API 중에 하나인 것을 사용하면 간단하게 네트워크 통신을 할 수가 있다. 긴 URL을 query params를 섞어서 하고 또 받은 response를 JSON으로 변환하는 것들을 일일이 했어야 했다. Axios에 대해서 살펴보자. cmder창에서 추가할려고 하는 패키지를 쓴다. 라이브러리를 추가하고 VScode에서 확인하면 package.json파일에 axios 라이브러리가 추가된 것를 볼 수 있다. yarn add axios "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10",..

video_detail.jsx에 가서 iframe을 쓸 때 frameborder가 아니라 frameBorder로 바꿔 써준다. allowFullScreen도 마찬가지로 allowFullScreen으로 바꿔써준다. app에서 작성한다. 컴포넌트가 마운트 되었을 때만 쓰고 싶다하자. props이 바껴도 업데이트 돼야 될 이유가 없는데, 만약에 제공되는 유튜브 클라이언트가 바뀐다면 클라이언트가 바뀐다면 새로운 데이터를 받아 오고 싶을 수도 있다. 그래서 아래와 같이 app.jsx에 youtube를 전달해 줘도 된다. useEffect(() => { youtube .mostPopular() // .then(videos => setVideos(videos)); }, [youtube]); 디테일에서는 유니크한 타이..

비디오를 선택하게 되면 선택되는 비디오를 기억했다가, 선택된 비디오에 관련된 정보를 보여주는 것을 구현한다. 선택된 비디오가 없는 null인 상태이고 이제 detail 컴포넌트를 만들어서 선택된 정보를 넘기는 걸 해본다. app.jsx 코드에서 아래와 같이 추가한다. 선택된 것이 있으면 video 옆에다가 보여주게 해준다. function App({ youtube }) { const [videos, setVideos] = useState([]); const [selectedVideo, setSelectedVideo] = useState(null); const search = query => { youtube .search(query) // .then(videos => setVideos(videos)); ..

MVC(model view control)라는 어플리케이션을 만들 때 쓸 수 있는 디자인 패턴이 있다. 어플리케이션을 모델과 뷰와 컨트롤러로 나누어서 만들 수 있는 것이다. MVVM도 있고 안드로이드에서는 MVVM을 많이 쓰고 있다. MVI도 있고 MVP도 있고 다양한 디자인 패턴이 있다. 리액트는 뷰 레이어를 담당하고 뷰 레이어를 담당하는 것은 단순히 사용자에게 데이터를 보여주고 클릭이 되면 클릭 이벤트 자체를 처리해주는 뷰에 관련된 것만 말하는 것이고, 컴포넌트가 네트워크 통신도 할 수 있고, 비즈니스 로직도 처리할 수 있고, 모든 걸 다할 수 있는 걸로 뷰를 만들면 안된다. 본론으로 들어가서 지금까지 만든 app 컴포넌트의 문제점은 무엇일까? 컴포넌트에는 두 가지 문제를 꼽을 수가 있는데 코드안에 ..

search_header.jsx에서 검색기능을 처리해 보자. onClick이 되면 클릭한 것을 처리해 줘야 하고 input field에서 사용자가 엔터를 누르면 검색이 되도록 만들어야 하기 때문에 input에서도 onKeyPress라고 한다. 해당하는 이벤트를 알고싶으면 on이라고 하면 해당하는 이벤트에 대해서 알아볼 수 있다. 키가 눌러졌을 때 하는 거니까 onKeyPress라고 해준다. 그리고 const onClick은 이벤트를 받아서 해주고 그 다음에 const onKeyPress는 무슨 이벤트를 받아서 이벤트를 처리해준다. 중복적으로 하기보다는 const handleSearch 검색을 처리할 수 있는 콜백함수를 만들 것이다. 함수는 인자를 받지 않아도 되고 원하는 것을 input에 입력된 것을 알..

진행중인 폴더안에서 작업한다. public폴더 안에 images폴더를 만들어 주고 png파일들을 넣어준다. 받아놓았던 logo.png를 ico로 변환한 다음 public폴더 안에 넣는다. 컴포넌트 폴더안에 header파일들을 넣고 header.jsx안에 아래와 같이 코드를 작성한다. // rsi를 이용하고 import styles from './search_header.module.css'; import React from 'react'; const SearchHeader = props => Header; export default SearchHeader; app.jsx파일에 와서 return부분의 코드를 아래와 같이 작성하고, app.css를 app.module.css로 이름을 바꾸고 새로운 코드를 작..

side project 진행중인 폴더안에 작업한다. video_item.jsx에서 h1은 필요없기 때문에 지우고 list아이템에서 사용되어지는 VideoItem이기 때문에 li를 사용하고 img 태그에는 props에 있는 video에 있는 snippet에 있는 thumbnails안에 있는 medium을 이용해서 url을 사용한다. 메타데이터 정보도 추가를 해줄건데, 스타일링 위해서 div로 묶어주고 p태그를 이용해서 props안에있는 video안에있는 snippet안에 있는 하나는 title이고 하나는 channelTiltle로 들어가게 해준다. const VideoItem = ({video}) => ( {snippet.title} {snippet.channelTitle} ); export default..

App이라는 컴포넌트가 사용자에게 보여질 때 즉 마운트가 되었을 때 유튜브로부터 데이터를 받아 오는 이 부분을 진행한다. App이라는 컴포넌트에는 videos의 목록을 가질 수 있는 state가 있어야 한다. function 컴포넌트에서 state를 사용할 수 있는 방법은 useState라는 API를 이용하면 된다. 그러므로 app.jsx에서 videos라는 변수에 데이터를 저장하고 videos를 업데이트 할 수 있는 setVideos를 선언하고 나서 useState를 호출하고 나면 각각의 변수와 업데이트 할 수 있는 함수가 할당 되어진다. 그리고 데이터를 받아올 때 마운트가 되었거나 업데이트 될 때 쓸 수 있는 콜백을 등록할 수 있는것이 useEffec가 있다. 원하는 함수를 등록해 놓으면 컴포넌트가 ..

Postman 설치 이후 collections를 하나 만든다.(New collections) Authorization 부분에서 설정을 아래 그림과 같이 한다. 여기서 value값은 고유 키값을 의미한다. variables 부분에서 아래그림과 같이 설정한다. initial value와 current value값 둘 다 만들어 놓은 url부분에서 v3까지 가져온 것이다. 다음으로 add request를 누른 다음에 이름을 Search로 설정하고 아래그림과 같이 설정하면 해당 데이터가 JSON 형태로 나오게 된다. add request를 하나 더 만든 다음에 이름을 Most Popular로 하고 설정을 아래와 같이한다. 여기서 cookies 옆에 을 누르게 되면 다른 언어들을 이용해서 어떻게 데이터를 받아오는..