분류 전체보기

📌Redux란? React 프로젝트의 규모가 커질때마다 자식으로 넘겨주어야 하는 props의 깊이도 점점 깊어진다. 따라서, 어디에서든 내가 원하는 state를 사용할 수 있는 라이브러리 Redux이다. 리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 참고로 Redux는 react의 종속된 도구가 아니다! 📌Redux 설치 npm 명령어를 통해서 라이브러리를 설치해준다. 리액트에서 redux 라이브러리를 더 효율적으로 사용할 수 있는 react-redux 라이브러리도 설치해주는 것이 좋다. npm install redux npm install react-redux 이렇게도 가능 npm install redux react-redux 📌Red..

📌스크롤 유도 가이드 구현 "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; export default function page() { const [isSpecialCase, setIsSpecialCase] = useState(false); const handleScrollGuideClick = () => { if (isSpecialCase) { window.scrollTo({ top: 0, behavior: "smooth", //스크롤 부드럽게 }); } }; useEffect(() => { const handleScroll = () => { const isScrollAtBottom = w..

📌가로 스크롤바 구현 page.js "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; export default function page() { const scrollSectionRef = useRef(null); const scrollContentRef = useRef(null); useEffect(() => { const scrollSection = scrollSectionRef.current; const scrollContent = scrollContentRef.current; const handleScroll = () => { const scrolled = window.pageYOff..

📌useRef? const ref = useRef(value) useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다. 우리가 자바스크립트를 사용 할 때에는, 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다. React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴때 우리는 useRef라는 React Hook을 사용한다. 함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환한다. ※ref오브젝트 { current : value } ref 오브젝트는 언제든 수정할 수 있다. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. 컴포넌..

📌모달창 만들기 nextjs는 특별한 조치를 취하지 않으면 server component로 간주한다. 그래서 useState를 사용하려면 맨 위쪽에 "use client"; 코드를 추가해 client component로 만들어야 한다. "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; import Link from "next/link"; import "./modal.modul.css"; export default function Modal() { const [burgerClass, setBurgerClass] = useState("burger-bar unclicked"); const [isM..

✅문제설명 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가 매개변..

✅문제설명 휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다. 예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가 할당되어 있다면 1번 키를 한 번 누르면 "A", 두 번 누르면 "B", 세 번 누르면 "C"가 되는 식입니다. 같은 규칙을 적용해 아무렇게나 만든 휴대폰 자판이 있습니다. 이 휴대폰 자판은 키의 개수가 1개부터 최대 100개까지 있을 수 있으며, 특정 키를 눌렀을 때 입력되는 문자들도 무작위로 배열되어 있습니다. 또, 같은 문자가 자판 전체에 여러 번 할당된 경우도 있고, 키 하나에 같은 문자가 여러 번 할당된 경우도 있습니다..

✅문제설명 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 solution을 완성하세요. ..