9시 24분

useEffect useEffect는 componentWillUnmount, componenDidMount, componentWillUpdate의 기능을 한다. import React, { useEffect } from "react"; const App = () => { const sayHello = () => { console.log('hello'); } useEffect(() => { sayHello(); }); return ( ); } export default App; 아무것도 하지 않았는데 console에 hello가 출력된 것을 볼 수 있다. 이를 통해 useEffect가 componenDidMount의 역할을 한다는 것을 알 수 있다. import React, { useEffect, useS..

https://nomadcoders.co/react-hooks-introduction 실전형 리액트 Hooks 10개 - 노마드 코더 Nomad Coders Learn by Building 10 Hooks nomadcoders.co 노마드 코더의 실전형 리액트 Hooks 10개 강의를 참고하여 적습니당 리액트 + 노드로 앱을 만드는데, 프론트엔드(리액트)에서 막히는 부분이 많아 리액트에 대한 이해도를 높이기 위해 강의를 빠르게 듣고 그 내용을 정리해본다. useState useInput useTabs useEffect useTitle useClick useConfirm & usePreventLeave useBeforeLeave useFadeIn & useFullscreen useNotification u..

ThemovieDB API 링크: https://api.themoviedb.org/3/movie/popular?api_key=(발급받은 API key) 포스터 이미지 src를 얻는 방법: https://developers.themoviedb.org/3/getting-started/images 영화 포스터 이미지 사이즈 정보: https://www.themoviedb.org/talk/53c11d4ec3a3684cf4006400 영화 장르 리스트(아이디에 맞는 장르 이름): https://www.themoviedb.org/talk/5daf6eb0ae36680011d7e6ee

배포 npm install -s gh-pages 우선 gh-pages를 설치하자. gh-pages는 웹사이트를 깃허브의 도메인에 나타나도록 해준다. 도메인의 형식은 (사용자 이름).github.io/(프로젝트 이름)이다. 기억이 나지 않는다면 'git remote -v'로 확인할 수 있다. 나의 경우는 https://leeeeeyeon.github.io/yeonmovie_frontend/이다. 그 다음에 package.json에 들어가 맨 아래 코드를 추가해주자. , "homepage": "https://leeeeeyeon.github.io/yeonmovie_frontend" 그리고 'npm run build' 명령어를 통해 build 폴더를 만들어주었다. 이름은 다르지만, css&js 폴더에 있는 코드..

영화 컴포넌트 계획 짜기 복습복습! 컴포넌트가 처음 생성될 때 componentDidMount()가 실행된다. 우리는 componentDidMount()에서 API로부터 data를 fetch하고 > movie array를 render하고 map을 만들어서 movie 객체를 render한다 다음 강의에 들어가기 전에 일단 movie state를 만들어두자. import React from "react"; // import propTypes from "prop-types"; class App extends React.Component{ state = { isLoading: true, movie: [] }; render(){ const { isLoading } = this.isLoading; return ( ..

Component index.js에서부터 시작해보자. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); 여기서 은 HTML이 아니다. 이런 것은 기본적으로 component라고 불린다. 리액트는 component와 함께 동작하며, 모든 것이 component이다. 앞으로 우리는 component를 만들게 될 것이고, component를 보기 좋게 수정해 나갈 것이다. 그래서 도대체 component가 뭘까?! component는 HTML을 반환하는 함수이다. import React from "react"; ..

https://leeeeeyeon.tistory.com/96 에서 작성한거처럼 이제 프론트엔드와 백엔드의 역할에 대한 경계를 이해했다. 그리고 나는 백엔드 쪽으로 공부를 하고 싶다. 풀스택이라는 길도 있지만, 어디서 주워듣길 진정한 풀스택 개발자는 스스로를 자신 있게 풀스택이라고 말하지 않는다구 했다 (˘･_･˘) 결국 그만큼 잘하지 않으면 풀스택 개발자라기보단, 프론트엔드 조금, 백엔드 조금 아는 애매한 세미 풀스택 개발자가 된다고 생각했다. 그렇기 때문에 나는 풀스택 개발자 시러! 백엔드만 할거야!라고 했다. 하지만 json으로만 이루어진 API를 보며, 이것이 웹사이트에 어떻게 보일지에 대한 궁금증이 계속 마음 한 켠에 남았다. 그래서 난 결심했다! 1인 토이 프로젝트를 한다는 셈 치고 프론트엔드와..