헬리_storage

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

오늘도 여전히 기업협업 중이다.. 오늘은 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..

기업협업중이다. 로그인 페이지부터 맡았는데, 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("문제 발생") // 앱종료되는 로직 // } // },[]) ..

여전히 프로젝트 중이다. 위치를 맵에 표기하기 위해 카카오 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 파일에 ..

프로젝트 중이다.. 영화 상세페이지 구현중에 스크롤을 컨트롤 하는 버튼이 있으면 좋겠어서 찾아보고 구현해 보았다. 구현 : 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..

참고한 카카오 개발자 페이지 https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#additional-feature Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com //KakaoAPI.js import React, { useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { REST_API_KEY, REDIRECT_URI } from '../../config'; const ..

Styled component 를 이용해서 각 다른 css 효과를 주기위해 버튼 3개를 만들어 보면서 각각 다르게 적용해 보았다. props를 이용해서 해보았다.... 어렵ㄷㅏ... 😂 바로 적용한 코드 적고, 그 밑에주석으로 설명을 좀 덧붙여 보았다. Practice.js (자식 컴포넌트) import styled, { css } from 'styled-components'; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; border: 1px solid lightgray; font-size: 1rem; line-height: 1.5; color: ${p => p.color || 'gray'}; background: ..

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

Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch 해결하기 git merge를 진행하려고 하면 한번씩 꼭.... merge가 왜 필요한지 commit message를 남기라고 하더라.. Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch 이런식으로 나오고 키보드 누르더라도 아무것도 안눌린다.. 이때!! 해결할 수 있는 방법! 1. i..