꿈꾸는 개발자의 블로그

Web API를 이용하여 함수 하나만 쓰면 되는데, 원하는 위치(x 좌표, y 좌표)를 넣어주면 된다! 그래서 웹 페이지의 최상단으로 이동하려면 window.scrollTo(0, 0)으로 구현이 된다. 아래는 특정 요소의 높이를 받아와서 그 아래로 이동하는 예시이다. TypeScript + Styled-components를 사용하여 구현하였고, 아래 화살표를 클릭하면 해당 배경의 이미지 높이를 받아와서 그 아래로 스무스하게 이동할 수 있게 하였다. 특정 요소 밑으로 이동하기 1. 해당 요소의 높이 받아오기 2. window.scrollTo() 사용하기 전체 코드 import React, { useRef } from "react"; const Intro = () => { const ref = useRef(..

각각의 이미지 카드를 자동으로 순환시켜 슬라이드 쇼 형식으로 보여주고 싶었다. 이런 방식을 캐러셀이라고 하고, 다음의 라이브러리를 이용하여 구현할 수 있었다! 이미지 슬라이드/캐러셀 구현하기 (Carousel) 1. 라이브러리 설치 2. 라이브러리 imort하여 적용 3. 코드 구현 4. 스타일 수정 1. 라이브러리 설치 $ yarn add react-slick $ yarn add slick-carousel 2. 라이브러리 import import Slider from "react-slick"; // 스타일 수정이 필요할 시 import import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; 3. 코..

저번에 이어 오늘은 코드 구현까지 해보았다~! 나중에 셀렉트 박스를 통해 정보를 불러올 것이기 때문에, MUI 필드를 임포트 하여 적용해놓았다. 스타일링은 Styled-components로 하였다. 전체 코드 Map.js import { useEffect } from "react"; const { kakao } = window; const Map = () => { useEffect(() => { var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; var ..

Kakao Map API를 적용하여 우리 동네 사이트를 보여주고자 했다. 그렇게 하기 위해선 먼저 Kakao 사이트에서 API KEY를 발급 받아야 한다. 그리고 내 프로젝트에 발급받은 키를 등록하면 사전 준비는 완료가 된다! 다음 글에서는 구현까지 해보겠다. Kakao Map API 사용하기 : API KEY 발급 받고 적용하기 1. APP KEY 발급 클릭하기 2. 애플리케이션 추가하기 3. 플랫폼 등록하기 4. 프로젝트에 발급받은 앱 키 등록하기 1. APP KEY 발급 클릭하기 https://apis.map.kakao.com/ 에 접속하여 오른쪽 상단에 있는 APP KEY 발급을 클릭한다. 2. 애플리케이션 추가하기 앱 이름에는 프로젝트 이름을, 사업자명에 내 이름을 적고 저장한다. 3. 플랫폼 ..

리액트에서는 되도록 돔탐색을 하지 않는 것이 좋다고 한다. 그래서 useRef를 사용해보았다. 전달하는 대상이 Html 엘리먼트가 아닌 컴포넌트 타입이라면 ref를 전달하기 위해 아래와 같이 사용하는 것이 좋겠다! useRef : HTMLInputElement 요소 받아오기 import useRef React ref를 생성하고 ref 변수에 할당 ref를 JSX 속성으로 지정해서 ref={ref}으로 전달 이러한 과정을 거치면, ref.current는 DOM 노드를 가리키게 된다!! 이전 코드 더보기 import React from "react"; const Test = () => { const handleScroll = () => { const screenHeight = document.querySel..