oyatplum

2. Calendar_1 : 에러랑 친해지기 하하 처음엔 콘솔 창에 빨간 불만 켜지면 눈알 돌아가고 환장했다.. 그냥 다 포기해버리고 싶고... 망연자실이었는데 그냥 에러 자체를 구글에 복사해서 찾아보고... 다른 사람들이 에러 해결한 방법들 보면서 공부하니까 나름 고칠만 했다.. 아마도ㅋㅋ 헤헤 아닌가봐 어이가 없엉쇼~ 이전 포스팅에서 css로도 고생했다고 했는데.. weeks 컴포넌트에서 뒤죽박죽 얼렁뚱땅 요일들 간격 맞추느라 증.말 애먹었다. 이런 말도 안 되는 헛소리를 하고 결국 각각의 day를 하나의 div로 감싸서 박스 크기를 정해주고! 그리고 그 박스들을 정렬하는 방식으로... 해결했다.. 제일 고비는 마지막 에러였다. 분명히!! 배포하기 전에 로컬에서는 팽팽 잘만 돌아가다가 배포하면서 문제..

학습 목표 to-do 앱과 netflix 앱 구현을 바탕으로 Calendar 앱 구현하기!!! 커밋할 때 메세지 지켜보기... 매일 혼자 구현하다 보니까 커밋을 냅~다리 대충 적어버렸다.. 이제 커밋 메세지 양식을 조금이나마 지켜보려고....한다 우선 이 정도만 지켜보면서 만들어보자!!! 1. Calendar_1 : Header 작성하기 우선 폴더 구조는 이렇게 생겼다!! header는 말 그대로 캘린더의 헤더 부분이고 days는 일주일(요일)을 작성해주는 컴포넌트! weeks는 해당 월의 날짜가 모두 출력되는 컴포넌트, 마지막으로 calendar에서는 이 전체 컴포넌트를 한 번에 보여주도록 했다. 처음에 달력을 구현하기 앞서,,, 하드 코딩을 해야하나,,, 머리를 굴리다가 터질 것 같아서 https:/..

6. 최종 뭐.. 크게 달라진 건 없고 가장 신경쓰이는 미디어 쿼리 좀 바꿈.... 그리고 투두 앱처럼 파비콘을 ㅎㅎ 바꿔주고 넷플릭스에서 계정 로그인 하는 사진도 내 얼굴 박아줌 그냥 Nav있는 component 폴더에 사진 넣으니까 안 됨ㅠㅠㅠ 다른 폴더로 만들어서 import 하거나 뭐 어쩌구 다른 방법이 있는데 그냥 import 함 이렇게 image 폴더 만들어서 사진 넣어놓고 oyat 이라고 아무렇게나 적은 담에 요로콤시 가지고 오면 끝ㅎㅎㅎ 하하 넷플 클론 구현이라 딱히 크게 바꿔줄 건 없고.... 아무튼 이렇게 리액트 좀 힘들게 찍먹 해봤다ㅠㅠㅠ 흐므앙..... 좀 느낌이 오는 것 같기도^^... 부족한 부분 더 열심히 보충해보자.....아자ㅏ자....

5. netflix-clone_1 : useDebounce Custom Hooks 만들기 Debouce가 무엇인가?! 우리가 검색 창에 검색어를 입력하면 한 글자 한 글자 치는대로 바로 요청을 하게 된다. 당연히 이러면 성능에서 좋지 않겠지!!! 그래서 검색어를 입력 할 때 입력 결과가 나타날 때까지 지연을 줘야한다. 이 기능은 debounce라는 function에 의해 제어된다. debounce function은 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 keyup 이벤트의 처리를 지연시킨다. 이렇게 하면 UI코드가 모든 이벤트를 처리할 필요가 없고 서버로 전송되는 API 호출 수도 크게 줄어든다. 좌좌 그래서~ src 폴더 내부에 hooks 폴더와 useDebounce.js 를 만들어줬다...

4. netflix-clone_1 : React Router Dom react router dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍쳐와 달리 react router dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다. 리액트는 SPA(single page application)이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다. 여기서 자바스크립트를 이용해 다른 컴포넌트들을 이 index.html 템플릿에 넣음으로써 페이지를 변경해주게 된다. 이때 react router dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 주게 되는 것이다. 우선 reac..

3. netflix-clone_1 : 영화 나열을 위한 Row 컴포넌트 생성하기 우선 Row.js에 함수를 만들고 App.js에서 이렇게 props를 내려주기 위해 Row를 가져왔다. 처음의 netflix originals만 사이즈를 다르게 해주기 위해 isLargeRow를 추가해줬다. 이제 내려준 props를 Row.js에서 가져오자. 우선 Row의 인자로 props를 써주고 useEffect를 통해 필요한 정보를 가져오기 위해 fetchMovieData 함수를 콜했다. fetchMovieData 함수에서는 비동기 요청을 하니까 저번처럼 async await을 사용하고 axios.get을 통해 fetchUrl을 가져온다. 이렇게 가져온 requset가 무엇인지 콘솔로 찍어보면 호묘묭... 이제 이 영화..

이전 내용 netflix-clone 2에서 포스팅 내용 중 마지막에 네비게이션 바를 만들면서 이렇게 삼항 연산자 쓰는 법.... 요상하다고 했었음..... https://velog.io/@rlaghwns1995/JavaScript-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A6%AC%ED%84%B0%EB%9F%B4 [JavaScript] 템플릿 리터럴 ES6이전에는 템플릿 문자열이라고 부르던 것을 ES6에서 템플릿 리터럴이라 부르게 되었다. ES6에서 문자열을 삽입하는 방식에 대해 알아보자 !! 템플릿 리터럴이란 내장된 표현식을 허용하는 문자 velog.io 규진 오빠가 보다 답답했는지 알려줌.. 호호^_^... 이렇게 또 배워갑니다... 따흑 2. netflix-clone_1 : 이미지 ..

학습 목표 netflix를 만들어 보자고!!!!! 1. netflix-clone_1 : The Movie DB API Key 생성하기 가장 처음으로는 react-netflix-clone 최상위 폴더를 만들고 터미널에 요롷게 해당 디렉토리에 리액트 앱을 설치해준다. 넷플릭스를 만들기 위해선 우선적으로 영화 정보를 가져와야겠지?? 그 곳이 바로 The Movie DB이고 API를 사용해서 가져올 것이다. 이때 중요한 것은 API Key 가 있어야 가져올 수 있다. 그렇다면 이 API Key는 어디서 가져올 것이냐!! https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to di..

8. 최종 우선 내가 만들고 있던 깃허브 배포 페이지에 리액트 프로젝트를 더 확실하게(?) 배포하려면... 그러니까 다른 사용자도 와서 내가 만든 것 좀 구경하게끔ㅋㅋ.. 하고 용량도 관리를 해주려면 build를 해줘야 한다. https://velog.io/@nemo/github-page-deploy-%EB%B0%B0%ED%8F%AC [React] 깃허브 페이지에 리액트 프로젝트 배포하기 자, 이제 제작한 앱을 깃허브 페이지에 배포해보자.메인 디렉토리 URL : https://{본인아이디}.github.io/서브 디렉토리 URL : https://{본인아이디}.github.io/movie-app우리는 메인이 아닌 서브 디렉토리에 배 velog.io 그래서 이 사이트를 참고해서 다... 올려줬고 이제 강의..

7. To-do_1 : 리액트 확장 프로그램 추가하기 이전 포스팅에서 React.memo를 통해 console을 찍으면서 리렌더링의 유무를 확인했었다. 이건 리액트 확장 프로그램을 통해서도 확인할 수 있다. 구글에서 '크롬 확장 프로그램'으로 검색을 해서 크롬 웹 스토어에 들어가 리액트를 검색하면 이렇게 개발 툴이 나오고 여기서 크롬에 추가를 하면 바로 확장 프로그램이 추가된다. 이제 우리가 만든 앱을 크롬으로 시작하면 리렌더링 되는 부분을 설정에서 보이도록 설정했을 때... 리렌더링 되는 부분이 색깔로... 표시된다고 한다... 나중에 크롬으로 열어서 확인해봐야겠다!! 7. To-do_2 : 할 일 리스트 모두 지우기 버튼 생성 이건 간단하게 할 수있다. App.js에서 할 일 목록 다음에 handle..