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

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인 토이 프로젝트를 한다는 셈 치고 프론트엔드와..