본문 바로가기

프론트앤드47

[React] 네이버 지도 API 이용 + Slick 캐러셀 띄우기 기업협업 중이다.. 여전히 Home을 맡았는데, 홈 자체가 네이버 지도를 불러와서 각각 Marker 를 클릭하면 그 Marker(가게) 의 정보가 담긴 캐러셀이 나오게 해야했다! 처음에 했을때는, Marker를 누르면 해당 정보들은 모두 나오는데, 캐러셀 형태로 나오지않았어서 애를 먹었다... 일단 코드를 보면서 정리를 해 보겠다. 아직 데이터가 완성되지 않아서 Mock data 를 이용했다. 📌 여기가 부모컴포넌트인 Home const Home = () => { const [homeMartList, setHomeMartList] = useState([]); const [selectedMart, setSelectedMart] = useState(null); const handleMarkerClick = .. 2023. 3. 31.
[React] Footer 이미지 누를때마다 상태변화 (useState) 오늘도 여전히 기업협업 중이다.. 오늘은 Footer를 하다가 막히는 부분을 뚫어보았기 때문에 이렇게 글을 써본당..히히 구현하고자 한것 하나하나 누른것들만 주황색 글씨와 그림이 바뀌게 해야했다. 맨처음 구현한 코드 import React, { useState } from 'react'; import * as S from './Footer.style'; import FOOTER_LIST from './FooterList'; const Footer = () => { const [clicked, setClicked] = useState(false); const handleClicked = () => { return setClicked(!clicked); }; return ( {FOOTER_LIST.map(f.. 2023. 3. 28.
[React] 로그인 구현 + 비밀번호 보이게 기능 코드정리 기업협업중이다. 로그인 페이지부터 맡았는데, westagram 을 하고 난 뒤 그 후로는 카카오로그인을 맡았던 터라.. (?) 구현하는방법이 긴가민가..했다 그래서 기억기억 🤨 여차저차 생각해냈다! 기억난 김에 블로그에 정리해야지 🙋🏻‍♀️ 일단 처음에 적은 코드이고, 여기서는 백엔드와 해야하는 통신을 하는 로직은 주석처리해서 따로 여기에 적지는 않았다! //Login.jsx const Login = () => { const navigate = useNavigate(); const [inputId, setInputId] = useState(''); const [inputPw, setInputPw] = useState(''); const [showPw, setShowPw] = useState(false);.. 2023. 3. 27.
[React] 네이버 지도 API 이용 주소->좌표 구하기 1. 서브module 로드 하기 원래 naver api를 로드하던 index.html 파일에 &modules=geocoder를 추가한다. 주소-> 좌표로 변환 import React, { useEffect } from 'react'; import { Container as MapDiv, NaverMap, Marker, useNavermaps, } from 'react-naver-maps'; import * as S from './Home.style'; const Home = () => { // useEffect(()=>{ // if (인터넷연결 확인 = true) // {Navigate("스플래시 링크")} // else { // alert("문제 발생") // 앱종료되는 로직 // } // },[]) .. 2023. 3. 22.
[React] KAKAO MAP API이용 (카카오맵) 여전히 프로젝트 중이다. 위치를 맵에 표기하기 위해 카카오 api를 구현해 보았다. 지도안에서 검색까지 되는 기능은 아니고, 정해진 위치를 가준으로 주변이 보이게 해 보았다. https://apis.map.kakao.com/web/guide/ 구현했던 순서대로 나열해 보겠다 1. 카카오 developers에 가서 로그인 후 프로젝트 중인 app 을 추가한다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 해당 app의 키들 중 JavaScript키를 public/index.js 파일에 .. 2023. 3. 8.
[React] 페이지 상위로 가는 button 프로젝트 중이다.. 영화 상세페이지 구현중에 스크롤을 컨트롤 하는 버튼이 있으면 좋겠어서 찾아보고 구현해 보았다. 구현 : Up버튼을 누르면 상세 페이지 내 상위로 scroll이 올라감 //return 위 const [toggleBtn, setToggleBtn] = useState(true); const handleScroll = () => { const { scrollY } = window; scrollY > 200 && setToggleBtn(!toggleBtn); }; useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScrol.. 2023. 3. 6.

티스토리툴바