헬리_storage

기업협업 중이당...ㅎ 이 전 포스트 글과 마찬가지로, login ->home 으로 이어지는데 이 때, login 컴포넌트가 제일 처음 랜더링 될 때, 인터넷 연결을 확인하고, 만약 안되어 있는경우에는 경고모달을 띄우는 로직을 구현하였다. 정말.. 기업협업하면서 여러가지를 시도하고있다... 레벨업 중.. ㅎ_ㅎ 1. 연결확인을 위한 useEffect useEffect(() => { const checkConnection = async () => { try { const response = await fetch('https://www.google.com', { mode: 'no-cors' }); const status = response && response.status; if (status === 200..

기업협업중이다 😂 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..

지난 포스트에 Marker 누를때 해당 정보를 가진 캐러셀이 맨 첫번 째 슬라이드로 보이게 하는 것을 정리 했었는데 (참고) https://hayley-0616.tistory.com/43 [React] 네이버 지도 API 이용 + Slick 캐러셀 띄우기 기업협업 중이다.. 여전히 Home을 맡았는데, 홈 자체가 네이버 지도를 불러와서 각각 Marker 를 클릭하면 그 Marker(가게) 의 정보가 담긴 캐러셀이 나오게 해야했다! 처음에 했을때는, Marker를 누르면 hayley-0616.tistory.com 이번에는, Marker을 눌렀을 때, 해당 데이터 같이 불러오는 캐러셀도 보이기 + 센터 좌표 바뀌기 를 해 보았다. 정리를 또 해 보겠다.... 이번에도.. 어려웠다... 지도 api.. 정말 ..

기업협업 중이다.. 여전히 Home을 맡았는데, 홈 자체가 네이버 지도를 불러와서 각각 Marker 를 클릭하면 그 Marker(가게) 의 정보가 담긴 캐러셀이 나오게 해야했다! 처음에 했을때는, Marker를 누르면 해당 정보들은 모두 나오는데, 캐러셀 형태로 나오지않았어서 애를 먹었다... 일단 코드를 보면서 정리를 해 보겠다. 아직 데이터가 완성되지 않아서 Mock data 를 이용했다. 📌 여기가 부모컴포넌트인 Home const Home = () => { const [homeMartList, setHomeMartList] = useState([]); const [selectedMart, setSelectedMart] = useState(null); const handleMarkerClick = ..

기업협업중이다. 로그인 페이지부터 맡았는데, westagram 을 하고 난 뒤 그 후로는 카카오로그인을 맡았던 터라.. (?) 구현하는방법이 긴가민가..했다 그래서 기억기억 🤨 여차저차 생각해냈다! 기억난 김에 블로그에 정리해야지 🙋🏻‍♀️ 일단 처음에 적은 코드이고, 여기서는 백엔드와 해야하는 통신을 하는 로직은 주석처리해서 따로 여기에 적지는 않았다! //Login.jsx const Login = () => { const navigate = useNavigate(); const [inputId, setInputId] = useState(''); const [inputPw, setInputPw] = useState(''); const [showPw, setShowPw] = useState(false);..

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("문제 발생") // 앱종료되는 로직 // } // },[]) ..

Styled component를 자습했다... 솔직히.. 왜쓰는지 모르겠다. 가장 최근 5년간 가장 인기있는 라이브러리라는데... 왜..? .. 다 이유가있겠지... 일단 내 손에 안익어서 그런가보다 하고... 그냥 냅다 정리부터 해본다. ㅠ 현업에서 일하는 친구도 스타일 컴포넌트를 쓴다고 한다.. 일단 className을 지정안해도 되고 손에익으면 너무 편리하다고하는데..? 공부나하자..ㅠ Styled Component css, Sass에서는 별도의 css, sass 파일을 생성하여 js파일에 import해서 사용했지만, 스타일드 컴포넌트는 스타일링을 할 때 ES6의 Tagged Templeate Literal 문법을 이용하여 js파일 안에서 선언해서 사용할 수 있다. 적용 방법 : styled 객체에..

조건부 렌더링 사용하기를 간단하게 해 보았당 :) 구현해야 하는 것 const Review = () => { const [open, setOpen] = useState(false); const reviewOpen = () => { setOpen(!open); }; useState 를 이용해서 false 일때는 text가 안보이게, true때 보이게 설정하였다. 배송도 빠르고 정말 좋아요. {!open ? ( "" ) : ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에도 필요하면 또 여기서 시킬 것 같아요. )} 더보기 ▼ 삼항 연산자를 이용하였다. !open ? 일때 ture 이면 " " ( 빈 문자열)을 반환, false 이면 ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에..

구현하고자 한것 useState를 선언합니다. 선언한 state는 숫자를 관리하는 state가 되어야 합니다. - 버튼을 누르면 숫자가 하나씩 줄어들도록 구현해주세요 (단, 숫자가 1일때는 더 이상 숫자가 내려가지 않게 구현해주세요) + 버튼을 누르면 숫자가 하나씩 늘어나도록 구현해주세요 reset 버튼을 누르면 숫자가 1로 되도록 구현해주세요 함수실행 방법 2가지 1. (); 만 오는경우 자체가 함수 즉시실행 2. () => {} 무언가 인자값을 넘겨줘야 할때 콜백함수를 이용하며, 함수를 나중에 호출해 준다 예시) 차이 : 인자값을 넘겨줘야 할때 () => {} 콜백함수를 이용 . state 가져올때 2가지 방법 1. setState(state - 1 ); -> 이전값이뭐든 상관없고 그냥 -1 해줘 2..