React (115) 썸네일형 리스트형 [2022.07.29]React- 소플 강의 정리2 소플의 처음 만난 리액트 -초청 강의 수강 Hook -훅은 무조건 최상위레벨에서만 호출해야 한다. -컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다. -리액트 함수 컴포넌트에서만(+우리가 직접만든 커스텀내에서도) 훅을 호출해야 한다. -훅이 많아지면 헷갈리기에 상단에 훅을 호출하는 것을 모아 놓아 구분하는 것이 좋음 플러그인 추천 eslint-plugin-react-hooks 의존성배열이 잘못되면 알려줌 Custom Hook 만들기 -이름이 use로 시작하고 내부에서 다른 훅을 호출하는 하나의 자바스크립트 함수 -재사용성을 높이기 위한 목적으로 사용 ▼ 아래와 같이 두가지 예시가 중복되는 코드가 많을 때 사용한다. ▼ 위 코드에서 커스텀 훅을 만든 코드 Custom Hook 사용하기 ▼ 위 .. [2022.07.28]React- 소플 강의 정리 소플의 처음 만난 리액트 -초청 강의 수강 react_sople>react01파일 참고) HTML 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 Tag: 태그를 사용해 뼈대를 만듦 기본 뼈대 태그: html, head, body * Single Page Application 한개의 페이지/ 각각 페이지를 만들면 효율적이지 않기에 한개 html파일 안에 body태그 안에 들어가는 content만 바꿔서 보여줌 =>SPA 리액트의 특징 JavaScript JavaScript : ECMAScript가 정식명칭, 그래서 ES6이런식으로 표준나타내는 용어쓰이는 것(2015년에 나옴,ES2015나 ECMAScript2015라고도 불림), ES12도나옴(2021년) / 생명을 불어넣는 역할, 스크립트 언어의 .. [React] heroku 헤로쿠 이용방법 (무료 호스팅) https://www.heroku.com/ Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 1.가입 (필수항목기입, korea,republick, i use another language선택) 2. create new app누르기 App name:youtube1s Choose a region: United States 3. 깃허브연결후 세팅들어가기 4.Config Vars 옆 Reveal Config Vars버튼 누르기 옆에 key:RE.. [React] npm 라이브러리 React Spinners 사용법 https://www.npmjs.com/package/react-spinners react-spinners A collection of react loading spinners. Latest version: 0.13.3, last published: 21 days ago. Start using react-spinners in your project by running `npm i react-spinners`. There are 653 other projects in the npm registry using react-spinners. www.npmjs.com 에서 데모 1. 터미널에서 설치 npm install --save react-spinners 2. 코드에 import와 사용하는 컴포넌트 넣기 (다.. [React] Youtube API (3) 참고 https://developers.google.com/youtube/youtube_player_demo?hl=ko YouTube 플레이어 데모 | YouTube IFrame Player API | Google Developers YouTube 플레이어 데모 Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies developers.google.com 홈 제.. [React] youtube api (2)이용참고 https://developers.google.com/youtube/v3/docs/search/list?hl=en&apix_params=%7B%22part%22%3A%5B%22snippet%22%5D%2C%22maxResults%22%3A30%2C%22q%22%3A%22css3%22%2C%22regionCode%22%3A%22kr%22%2C%22type%22%3A%5B%22video%22%5D%7D Search: list | YouTube Data API | Google Developers Search: list API 요청에 지정된 쿼리 매개변수와 일치하는 검색결과의 모음을 반환합니다. 기본적으로 검색결과의 집합은 쿼리 매개변수와 일치하는 video, channel, playlist 리소스를 식별하지만.. [React] YouTube Data API v3, weatherMap api 사용법 크롬에 google api console쳐서 들어가면 구글cloud api 사이트나옴(map 등 할때 생성하는 api사이트와같음) https://console.cloud.google.com/ YouTube Data API v3 사용 1. api>youtube검색>YouTube Data API v3 사용 클릭 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. 사용자인증정보>사용자인증정보만들기>api 만들기 3. 사이트 참고해서 https://developers.google.com/youtube/v3/docs/videos?hl=en Videos | YouTube Data API | Google Developers Videos video 리소스는.. [React] Json-server 제이슨 서버 사이트 https://www.npmjs.com/package/json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.0, last published: 9 months ago. Start using json-server in your project by running `npm i json-server`. There are 284 other projects in the npm registry using json-ser www.npmjs.com 1. 터미널에 작성하여 설치 npm install -g json-server 2. 사이트 참고하여 아래 5005으로 작성함(데이터파.. 이전 1 ··· 10 11 12 13 14 15 다음
