본문 바로가기

분류 전체보기

 (265)
[2022.07.20] 최종 정리- 해당 영역 스크롤시 왼쪽 메뉴 글씨 색 변경 설정(2) [2022.07.18] 해당 영역 스크롤시 왼쪽 메뉴 글씨 색 변경 설정(1)에 이어서 수정된 부분 1안 : 스크롤position을 숫자로 넣음 오류: 이렇게 설정시 콘텐츠가 추가되거나 반응형때 스크롤위치가 변경되면 오류가 생길 수 있음 import React from 'react'; import {useState, useEffect} from 'react'; import ztHistoryDt from './../../db/historyList.json'; import './../../styles/zeta/zetaHistory.scss'; import AOS from 'aos'; import 'aos/dist/aos.css'; const ZetaHistory = () => { const [ztHisDt,..
[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 리소스는..
[2022.07.18](2) 모달창 띄우기, 클릭시 링크 이동 1. footer에서 개인정보처리방침누르면 모달창으로 띄우게 하고 싶음 https://velog.io/@uni/React-%EB%AA%A8%EB%8B%AC%EC%B0%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0 [React] 모달창 띄우기 html작성css작성useState(보이고 안보이고가 들어가면됨) 괄호안에는 문자든 숫자든 형식은 상관없다~ 페이지를 처음 열었을때 모달창이 안보여야 하니까 false를 넣어주자.조건문을 써야 한다면 삼 velog.io 코딩애플 들었던 부분을 응용하여 코드를 작성함 ... const [ftModal, setFtModal] = useState(false); function FtModal(){ return( {setFtModal(!ftModal)}}> ZETA ..
[2022.07.18] 해당 영역 스크롤시 왼쪽 메뉴 글씨 색 변경 설정(1) 오류: 스크롤이 되다가 해당 위치에 도달시 왼쪽 title 컬러가 변경되게 효과를 넣고 싶었으나 어려움을 겪음...계속해서 구글링하고 youtube보면서 방법을 찾으려고 했으나 오류가 남 observer 로 처음 시도를 해보았으나, 다른 파일에서는 여기 코드 스타일대로 진행시 되었지만, 실제 작업 파일에 적용하려 하자 에러가 남 addEventListener 이 방식도 시도했으나 오류 최종적으로 addEventListener를 다시 구성해서 코드를 작성하여 성공 최종적 참고 사이트 https://iancoding.tistory.com/224 [React] 리액트 헤더 스크롤 시 CSS 변경 헤더 스크롤 시 디자인 변경 Vue에서 제작한 코드를 React로 변환하는 작업 중인데 코드가 달라서 리액트 버젼으..
[2022.07.17] 클릭시 특정 dom으로 스크롤 이동 history.jsx 오류1: 클릭시 해당 dom에 각각 이동되어야 하는데 기준점이 없어 오류가 남. 해결: ref를 해당 index로 지정 const refs = React.useRef([]); const handleClick = (i) => { refs.current[i].scrollIntoView({ behavior: 'smooth' }); //smooth:부드럽게 효과 }; ... 제타플랜의 시작으로 한국 기업 컨설팅의 handleClick(0)}>미래를 시작하다. handleClick(1)}>미래를 시작하다. handleClick(2)}>무한발전을 하다. handleClick(3)}>기반을 다지다. .... { ztHisLists.map(function(titleDt,i){ return( (re..
[2022.07.16](2) json중첩 사용된 데이터 불러오기 오류 history.jsx 수정1 오류: json이 중첩된 상태라 불러오려는데 계속 오류가 났다. 오류코드: Cannot read properties of undefined (reading 'map') ... ▼ json 배열은 이런 형태 { "first-tab": [ { "id": 0, "year": "2021", "list": ["12 한국벤처캐피탈협회M&A 자문기관 공로패 수상", "09 항공안전기술원 드론기업 컨설팅 및 투자유치 지원사업 운영", "09 스포츠산업 선도기업 육성 지원사업 기관 선정", "08 서울대학교 BIG3 시스템반도체 분야 기업 글로벌 역량강화지원", "08 서울산업진흥원 국내외 VC/기업 네트워킹 행사 운영 대행", "07 경기경제과학진흥원 경기스타트업 M&A교육 및 매칭데이 운..

티스토리툴바