본문 바로가기

전체 글

 (265)
[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( ..
[2022.07.14] SCSS @use사용시 변수 안 불러와지는 오류/ 배열에 img src담고 해당 index시 변경될 때 오류/SCSS파일여러개적용시class오류 오류1. scss 작업중 use를 통해 scss파일을 불러오자 변수를 불러올 수 없다고 에러가 뜸 해결: import를 통해 불러오자 파일 안에 변수도 똑같이 불러와 적용되어 해결함 @use './index.scss'; =>x @import './index.scss'; =>o import와 use 차이점 참고 사이트 https://velog.io/@bisari31/import-use-%EC%B0%A8%EC%9D%B4%EC%A0%90 @import @use 차이점 원티드 프리온보딩 코스 중 scss를 사용하게 됐는데,사용하면서 궁금한 것들을 공부해봤다.SCSS 파일을 불러오려면 import 하면 된다.근데 @use 이렇게 생긴 놈을 발견했는데 이건 무엇에 쓰이는 것 velog.io 2. 오류 : img s..
[2022.07.13] 특정 영역 도달 시 한 쪽은 스크롤, 다른 쪽은 고정 fix시키기 오류 import React from 'react'; import {useState, useEffect, useRef} from 'react'; import certiUrl from './../../db/certificateList.json'; import awardUrl from './../../db/awardList.json'; import './../../styles/zeta/index.scss'; const Index = () => { const [certiData,setCertiData]=useState([]); const [awardData,setAwardData]=useState([]); const [selectedTab, setSelectedTab] = useState(certiUrl); //c..
[2022.07.13] react 이미지 경로 불러오기 / SCSS에서.active시 before적용 오류 오류1. 이미지 경로를 불러올 때 오류가 남 해결: (배경이미지로 넣을시) 1.배경이미지로 불러오는 경로를 제대로 설정한다. .ztCircle{ background: url(./../../img/zeta/zeta_circle.png)no-repeat; background-size: contain; width: 500px; height: 400px; } (img에 src로 불러올 때) 2: 경로를 올바르게 설정했음에도 오류가 남 -> 크롬 검사에서 경로가 다른 주소(http://localhost:3000/static/media/zeta_circle.)로 자동 변경되어 있는 걸 확인 ->상대경로 앞에 아래와 같이 코드를 추가하자 올바르게 파일을 불러올 수 있었음 (참고사이트) 오류2. SCSS 에서 acti..
[2022.07.12] json 파일 불러와서 map 적용시키기 zeta>index 파일 ▼ 전체 코드 참고 import React from 'react'; import {useState, useEffect} from 'react'; import certiUrl from './../../db/certificateList.json'; import awardUrl from './../../db/awardList.json'; import './../../styles/zeta/index.scss'; const Index = () => { const [certiData,setCertiData]=useState([]); const [awardData,setAwardData]=useState([]); const [selectedTab, setSelectedTab] = useSta..

티스토리툴바