본문 바로가기

전체 글105

[React] React에서 setTimeout 매서드로 스플래쉬(Splash) 구현하기 기업협업중이다 😂 React Native로 모바일 앱을 많이 구현하지만 아직 RN은 미숙하기때문에.. React.js 로 Splash 구현을 해 보았다. 현재 프로젝트에서는 앱으로 들어가면 바로 login -> home 으로 갈 수 있게 구현해야 했다. 그래서 splash는 login.jsx에 구현하였다. 1. HomeSplash.jsx 만들기 import React from 'react'; import * as S from './HomeSplash.style'; const HomeSplash = () => { return ( ); }; export default HomeSplash; 2. Splash 넣을 컴포넌트 가서 추가해주기 import HomeSplash from '../Home/HomeComp.. 2023. 4. 4.
[React] useState로 onClick 시 아이콘 변경 + 캐러셀 움직일때 같이 해당 아이콘 변경 (naverMap) 여전히 기업협업중 ,,! 아직도 home을 끝내지 못했다... 😂 useState를 사용해서 map을 돌린 데이터에있는 이미지a 를 누를 때 이미지b 로 바뀌는 것을 하는데, 하나를 선택하고 다른것을 선택할 때 이미지가 다시 초기화 되지 않는다거나, 모두 눌리거나 하는 상황이 발생.. 왜 코드는 매번 할때마다 새로울까 😂 그래서 다시 고친 후 정리를 해 보겠다... 오늘 정리할 내용은 1. map 매서드를 쓴 후 아이콘을 각각 눌렀을 때 상태변경 관리 2. 캐러샐을 움직일 때 해당 데이터를 가진 marker가 지도 중앙으로 오면서 이미지도 변경되기 이다. 이전에 했던 코드에서 추가된 것이 있어서 혹~ 시나 참고 하시려면 https://hayley-0616.tistory.com/44 [React] 네이버 .. 2023. 4. 3.
[React] 네이버 지도 API 이용 캐러셀 + center 움직이기 지난 포스트에 Marker 누를때 해당 정보를 가진 캐러셀이 맨 첫번 째 슬라이드로 보이게 하는 것을 정리 했었는데 (참고) https://hayley-0616.tistory.com/43 [React] 네이버 지도 API 이용 + Slick 캐러셀 띄우기 기업협업 중이다.. 여전히 Home을 맡았는데, 홈 자체가 네이버 지도를 불러와서 각각 Marker 를 클릭하면 그 Marker(가게) 의 정보가 담긴 캐러셀이 나오게 해야했다! 처음에 했을때는, Marker를 누르면 hayley-0616.tistory.com 이번에는, Marker을 눌렀을 때, 해당 데이터 같이 불러오는 캐러셀도 보이기 + 센터 좌표 바뀌기 를 해 보았다. 정리를 또 해 보겠다.... 이번에도.. 어려웠다... 지도 api.. 정말 .. 2023. 3. 31.
[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.

티스토리툴바