안녕하세요

ScrollToTop.js 컴포넌트를 만들고 import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } useEffect를 이용하여 pathname이 변경될 때마다 스크롤 위치가 최상단으로 이동하도록 합니다. 만든 컴포넌트를 index.js 에서 BrowserRouter 사이에 추가해주었습니다. const root = ReactDOM.createRoot(d..

JadenCase 문자열 만들기 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상 200 이하인 문자열입니다. s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다. 입출력 예sreturn "3people unFollowed me" "3people Unfollowed Me" "for ..

선택한 영화의 id와 같은 url 주소로 이동하도록 하여 영화를 소개하는 페이지를 만듭니다. 1. App.js 에서 Route로 list 페이지를 만듭니다. 영화의 id에 해당하는 페이지로 이동한다는 것을 알 수 있도록 path는 "/list/:id" 로 이름을 주었습니다. 2. Movie.js에서 영화데이터를 받아와 영화 목록을 보여줍니다. 영화의 이미지를 클릭하면 이동하는 주소를 영화데이터의 id로 지정해줍니다. return ( ex) http://localhost:3000/megabox-react/list/894205 해당 영화의 데이터의 id가 984205라면 위와 같은 url로 이동하게 됩니다. http://localhost:3000/megabox-react/list/894205 3. usePa..

스크롤바를 커스텀합니다. scroll이 적용된 영역에서 ::-webkil-scrollbar 에 관련된 css로 형태를 지정할 수 있습니다. .scroll { overflow-y: scroll; height: 450px; width: 100%; &::-webkit-scrollbar { width: 6px; /* 스크롤바의 너비 */ } &::-webkit-scrollbar-thumb { background: #555555; /* 스크롤바의 색상 */ border-radius: 10px; } &::-webkit-scrollbar-track { background: rgba(33, 122, 244, 0.1); /*스크롤바 뒷 배경 색상*/ } }