9시 24분

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..

이제 프론트엔드 작업이 얼추 끝났으니 백엔드로 다시 돌아가자! 서버 연동 리액트와 노드가 정보를 주고 받기 위해서는 리액트 서버, 노드 서버를 동시에 열 수 있어야 한다. 두 서버를 동시에 여는 것은 간단한데, 포트 번호를 다르게 하면 된다. https://leeeeeyeon.tistory.com/96을 참고하여 기초적인 express 환경을 갖추자. 이제 포트 번호를 바꿔보자. 포트 번호는 bin/www 파일에서 바꿀 수 있다. 15~16줄에 아래와 같은 코드가 있는데 3000을 3002, 8000 등 다른 번호로 바꾸어주자. var port = normalizePort(process.env.PORT || '3000'); app.set('port', port); Server side > Client로 ..

나는 ,, 오늘도 ,, 또 한다 ,, API 공부를 ,,, 그래도 할 때마다 그 깊이가 깊어지니까 또 다시 복습하고 더 배워보자! 이번에는 API의 개념을 확실히, 구체적으로 잡고, node.js-template을 API스럽게 코드를 바꿔볼 것이다 ! API의 개념 API (Application Programming Interface) : 응용 프로그램 프로그래밍 인터페이스, 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 API는 함수, 프로토콜, 도구들의 집합 형태로 제공된다. API의 사용자가 최종 사용자인 경우는 드물다. API의 사용자는 개발자이다. 위의 코드로 예시를 들어보자. 페이스북에서 제공하는 API로 인증 과정을 서비스..

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 ( ..

https://github.com/leeeeeyeon leeeeeyeon - Overview leeeeeyeon has 5 repositories available. Follow their code on GitHub. github.com 🛠 Tech Stack 🛠 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 🌱 About me 🌱 &nbsp &nbsp  [![Top Langs](https://github-readme-stats.vercel.app/api/t..

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"; ..