본문 바로가기

cbp 프로젝트 진행

 (21)
[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교육 및 매칭데이 운..
[2022.07.16](1) 버튼클릭시 해당 map과 내용보이기, json데이터 중 없는 내용은 안 보이게 설정 오류/index에 따른 컴포넌트 보이게 설정 오류 zata Map.jsx 오류 1.json파일 없는 내용은 안 보이게 하고 싶으나 jsx파일에서 map을 돌렸기에 빈칸으로 출력돼서 list형식이 보임 오류2: 해당 index에 따른 컴포넌트를 불러오고 싶으나 버튼 클릭시 한꺼번에 보임(json에서 를 값으로 지정해 불러오려 했으나 컴포넌트는 태그처럼 안 불러와졌음) [ { "id":0, "title":"서울본사", "mapImg":"ZetaKrMap", "address":"서울특별시 금천구 디지털로 130 남성프라자 1210호", "tel":"02-538-4801", "fax":"02-6008-4779" },{ "id":1, "title":"China", "mapImg":"ZetaCnMap", "address":"6F, Beiguang Building,..
구글맵 생성하기(해외가능) https://duopix.co.kr/google-map-key/ 구글지도 API 키 발급 받는 방법 - 듀오픽스 구글 지도 플랫폼 사이트에 접속, 구글맵 API키 발급 받기, 구글지도, 회사 지도, 약도, 구글 맵 API 키를 특정 사이트에서만 사용할 수 있도록 HTTP 리퍼러를 설정해주어야 합니다. 유료화 이후 사 duopix.co.kr 1. 위사이트 참고하여 가입 후 api받기(+api사용 제한해야함 ) 일단 아래로 로컬 확인 하는 사이트 넣어 놓음 http://localhost:3000 2. index.html 위쪽에 아래 코드 넣어서 api 받아오기 YOUR_API_KEY 부분은 발급받은 키로 수정 ▼ 아래코드로 이용! 오류때문에 밑에꺼로 사용하기 (이유는 아래쪽에 작성함) 이 방법x 콘솔오류 ..
카카오 맵 불러오기 방법 *위에는 마커없이 그냥 지도 불러오는 방법/ 아래에 지도에 마커 표시한 전체 코드 작성함 1. developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 애플리케이션 추가 사업자명 아무거나 해놔도 됨 3. 플랫폼>web에 일단 확인하는 로컬 url 등록하기 (아래로 일단 임의 등록) 사이트 도메인 http://localhost:3000 4.키 확인: "앱 설정 > 요약 정보"에 JavaScript 키에 키를 복사 5. 코드 적용해 맵 불러오기 index.html 안에 추가 6. 다른 jsx파일에 작성하기 /*gl..
[2022.07.15] css flex사용 시, 오른쪽 배치된 요소 안 글자는 왼쪽으로 배치 오류 / json data의 id에 +숫자0 출력 오류 오류1: Css로 flex를 줘서 양쪽에 배치하자 요소안에 글자도 오른쪽으로 배치됨 =>글자는 왼쪽 정렬을 원함 원인: map을 div자체를 계속 생성하게 하여 flex가 된 요소들이 2개가 아니라 map개수만큼 생성되어 각자 안에서만 flex가 이루어짐 ▼ 오류코드 { ztCsDt.map(function(data,i){ return( {ztCsDt[i].id} {ztCsDt[i].field} ) }) } ▼ 오류화면 ▼ 해결코드 : 로 감싸고 그안에서 map이 이루지도록 2개를 구성하여 해결함 { ztCsDt.map(function(data,i){ return( {ztCsDt[i].id} {ztCsDt[i].field} ) }) } { ztCsDt.map(function(data,i){ return( ..

티스토리툴바