초보를 위한 리액트js 강의를 다시 보면서 진행하고 있는 프로젝트이다. 때문에, 자세한 내용은 해당 시리즈에서 참고 바란다. typescript 템플릿으로 리액트앱 만들기 CRA 홈페이지 절대경로 설정하기 조금 난항을 겪은 부분 처음에는 tsconfig.json에서

tmdb api에서 지원되는 비디오들의 유튜브 키를 변수로 받아서 로드 하는데 자꾸 아래와 같은 에러가 떠서 찾아봤다.출처 https://love2dev.com/pwa/service-worker-preload/사이트의 페이지 속도를 향상시키기 위한 많은 미묘한

https://min9nim.github.io/2018/12/super-props/

우리는 "/movie-detail"에서 리프레시를 하거나, 직접 쳐서 들어가면 state=undefined를 얻게되는 경우들을 보았다."/movie-detail"를 도메인에 직접 치거나, 리프레시를 하면 아예 홈화면으로 돌아가도록 유저를 홈으로 리다이렉트 시키는 것이

모든 컴포넌트에는 props가 있다. Movie.js처럼 About.js에도 props가 있는데,콘솔을 보면 4 개의 props가 보인다. history, location, match, staticContext. 이것들은 아직 About.js로 전송된 것은 아니고,

출처port 번호로 PID 찾기lsof -i :포트번호실제로 코드를 실행한 결과, 다음과 같이 PID 를 얻을 수 있었습니다.PID로 강제종료하기kill -9 PID해당하는 PID 인 53665 로 종료한 결과, 성공적으로 종료되었습니다.kill -9 53665

네비게이션이 라우터와 관련된 처음 듣는 용어일 거라고 생각했는데, 네비게이션 바 얘기할 때 그 네비게이션이란 것을 깨달았다.우리는 홈과 어바웃 두 개의 버튼만 만들어 줄 계획이다.먼저 Navigation.js 를 새로 만들어주고 <a>Home</a>과 &lt

웹서핑을 하다보면 도메인 뒤에 대쉬와 키워드가 붙으면서 안쪽으로 더 깊숙이 들어가는 느낌을 자연스레 경험한다. ex) https://comic.naver.com/index.nhn 네이버 웹툰 화면 https://comic.naver.com/webtoon/list.nhn

react-router dom 설치네비게이션으로는 react-router dom이라는 것을 쓴다.네비게이션을 만들어주는 패키지이다.npm install react-router-dom을 입력해 설치한다.설치되는 동안, 더 많은 화면을 보고 더 많은 것들을 할 수 있도록

이제 깃허브에 우리의 프로젝트를 올리는 일이 남았다.터미널에서 npm i gh-pages 를 입력하면 뭔가 쭉쭉 설치되는 것이 보인다.gh-pages는 내 웹사이트를 깃허브의 것허브 페이지 도메인에 나타나게 해주는 명령어다. 일반적으로 나의 프로젝트의 이름을 갖고 와

니꼬가 쓴 방법글자수를 length로 알아내서 slice()로 원하는 글자수 만큼 자르는 것.

리액트를 하면서 오랜만에 css를 했다.스타일링은 니꼬쌤이 클론 해보라고 보내준 behance의 웹디자인을 따라했다.따라하던 중 '아.. 이거 js로 따로 해야하나?' 싶었던 것이 아래 기능이었다.기능은 두가지 였는데1\. 각 메뉴에 hover하면 border-left

다른 props들과 다르게 genres는 배열로 이루어져있다. 한 드라마가 로맨스 스릴러이듯..첫번째 영화인 "Potter's Ground"의 장르는 아래와 같다.genres: \["Action","Drama","Thriller","Western"]때문에 genres는

s

비동기적 데이터 페치를 완료했다면 렌더링을 할 차례⬇️ 먼저 우리가 가져온 movies를 콘솔로그 해 영화 데이터가 어디에 있는지 찾아보자movies> data > data> movies: (20)\[{...},{...},{...},{...}, ...]⬇️ 찾은 영화데

니꼬는 axios를 이용할 예정, axios는 fetch 위에 작은 레이어라고 한다. ex) 땅콩 주위에 멋진 초콜릿.axios의 설치방법은 이렇다.npm i axiosAPI를 다운로드한다. YTS는 URL이 자주 변경되기 때문에 니꼬가 아래의 파일로 재가공하여 제공했

이론적으로 우리가 할 일은 componentDidMount에서 데이터를 fetch하는 것이다.6초 뒤에 We are ready를 보여주는게 아니라 movie 데이터를 보여주는 것!API로부터 data fetching이 완료되면 We are ready 대신에 movie를

react component에서 사용하는 유일한 function은 render function이지만, 그외에도 많은 것들을 가지고 있다.life cycle method라는 것들을 가지는데, 리액트가 컴포넌트를 생성하고 없애는 방법이다.component가 생성될 때,re

Previously...버튼을 누르면 콘솔에 각각 기록되도록 만들었다.어떻게 하면 버튼을 눌렀을 때, state가 작동해서 숫자가 변화할까?TILstate는 그냥 쓴다고 작동하지 않는다.이유는 react가 render()를 리프레쉬하지 않기 때문이다.우리는 state의

버튼을 클릭하면 각각 콘솔에 add와 minus를 기록하는 함수가 실행된다. 클래스 컴포넌트 function App()은 function component다. 우리는 리액트 컴포넌트의 많은 기능들을 사용하기 위해 이를 지우고 class component를 사용하기로