Programming/React (17) 썸네일형 리스트형 [React] window.scrollTo() : 지정된 위치로 스크롤 이동하기 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(.. [React] react-slick : 이미지 슬라이드/캐러셀 구현하기 (Carousel) 각각의 이미지 카드를 자동으로 순환시켜 슬라이드 쇼 형식으로 보여주고 싶었다. 이런 방식을 캐러셀이라고 하고, 다음의 라이브러리를 이용하여 구현할 수 있었다! 이미지 슬라이드/캐러셀 구현하기 (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. 코.. [React] Kakao Map API 사용하기 저번에 이어 오늘은 코드 구현까지 해보았다~! 나중에 셀렉트 박스를 통해 정보를 불러올 것이기 때문에, 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 .. [React] Kakao Map API 사용하기 : API KEY 발급 받고 적용하기 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. 플랫폼 .. [React] Typescript + useRef (Forwarding Refs) : HTMLInputElement 요소 받아오기 리액트에서는 되도록 돔탐색을 하지 않는 것이 좋다고 한다. 그래서 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.. [React] <video> 태그를 이용한 동영상 재생하기 동영상을 프로젝트 메인에 자동으로 재생하고 싶었는데, 마침 쉽고 간단하게 구현할 수 있는 방법이 있어서 공유한다! 만약 동영상으로 화면 전체를 채우고 싶다면! 참고! 2022.06.25 - [Programming/CSS] - [CSS] Styled-components + 동영상으로 화면 전체 채우기 [CSS] Styled-components + 동영상으로 화면 전체 채우기 인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동 aldrn29.tistory.com React 동영상 재생하기 public 폴더 하위에 동영상 파일 추가 (.mp4가 아닌 파일은 적용되지 않는걸까... [React] Mui styled-components 설치 및 구현 방법 프로젝트를 진행하며 전체적으로 styled-components를 이용하여 스타일을 지정하고 있었는데, Mui로 불러온 같은 방식으로 구현하다가 오류가 나는 상황이 생겼다..!! 알아보니 그 이유는 Mui는 emotion이 기본 엔진인데, styled-components로 엔진을 교체하기 위한 작업이 동반되지 않았기 때문이였다. 공식 문서에도 친절히 설명이 되어있었는데 ㅠㅠ 에휴... 앞으로! 진짜 공식 문서부터 잘 챙겨보는 것을 습관화해야겠다! Mui styled-components 설치 yarn add @mui/material @mui/styled-engine-sc styled-components Mui styled-components를 이용한 구현 import 부분에서 모듈 이름을 materialSt.. [React] TypeScript + 객체 값 순회하기 분리수거 서비스 웹 페이지를 만들면서 퀴즈와 답을 화면에 그려야했다. 퀴즈 문제와 답에 관련된 데이터를 받아와서 화면에 표시해주어야 했기 때문에, 이 때 사용한 객체를 순회하는 방법을 소개한다. Object.values().map() 으로 객체 순회하기 1. 객체의 type을 설정한다. 2. 객체의 값(value)을 map() 함수를 통해 순회한다. * 객체의 값 뿐만 아니라 키도 필요하다면 다음의 함수를 사용할 수 있다. Object.keys(obj) 객체의 키만 담은 배열을 반환합니다. Object.values(obj) 객체의 값만 담은 배열을 반환합니다. Object.entries(obj) [키, 값] 쌍을 담은 배열을 반환합니다. 그리고 이 때! 주의할 점은 map() 함수 내에서 리턴할 때, {.. 이전 1 2 3 다음 목록 더보기
