프론트엔드

import React from "react"; const Main = () => { const arr = ['사과', '배', '오렌지', '복숭아'] // map을 통한 컴포넌트 렌더링 함수 // 매개변수로 전달된 배열의 요소를 하나씩 꺼내어 컴포넌트로 변환해 리턴한다. const PracticeMap = (arr) => { return ( {articles.map((item, index) => { // map 내부에서 변수 선언, 함수 호출 가능 return ( {index}번째 과일은 {item}입니다. ); })} ); }; return ( {PracticeMap(arr)} ); }; export default Main; https://goddaehee.tistory.com/303 [React]..

https://velog.io/@gin2808/React-useNavigate%EB%A1%9C-state-%EB%84%98%EA%B8%B0%EA%B8%B0 [React] useNavigate로 state 넘기기 리액트에서 화면이동을 위해서는 두가지 방법이 있다.Link와 useNavigate가 있는데 오늘은 useNavigate를 이용해 스테이트를 넘기는 걸 해보려한다.npm install react-router-dom --savenavigate("/이동할주소",{replac velog.io 예시 ////////// 프롭스 전달하기 예시 import { useNavigate } from "react-router"; const SignIn = () => { const navigate = useNavigat..

https://velog.io/@rmaomina/react-env React에서 .env 환경변수 사용하기 외부 api에 접근하기 위해 token 등이 필요한 경우, 배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 한다. .env 파일을 가지고 process.env로 가져오는데, null값이라 나서 헤맸다. velog.io

문제 발생 필자는 카카오 로그인 API 기능을 사용하기 위해 위 사진처럼 index.html에 javascript SDK 를 추가하였다. https://developers.kakao.com/docs/latest/ko/javascript/getting-started 공식 API 문서를 살펴보니 카카오 로그인 API는 Kakao 객체로 접근하는 것을 알게되었다. 하지만 필자는 SDK 스크립트를 불러온 index.html 파일이 아닌 Main.jsx에서 API 기능을 사용하고 싶었다. 이에 Main.jsx에서 Kakao.init()으로 접근하니 오류가 발생했다. 해결 방법 index.html에 있는 SDK 스크립트를 Main.jsx에서 접근하려면 어떻게 해야할까? 위 궁금증을 해소하기 위해서는 window 객..

1. 학자금 대출 신청사이트 접속한다.2. e-러닝 동영상 이수 버튼을 클릭하면 해당 동영상 리스트들이 재생된다.3. 동영상 재생을 멈춘다4. 키보드 Ctrl + Shift + c 버튼을 누른다.5. 아래 사진과 같은 창이 뜬다.6. 소스 분석 결과 이수 여부를 담은 변수가 프론트단에 var 변수 안에 저장이 되어있다.7. 콘솔 탭으로 이동 후 아래 코드를 입력하고 엔터를 친다._movClear=true;7. 코드창을 닫고 동영상을 다시 재생하면 동영상 시간을 옮길 수 있다.8. 동영상 시간을 종료 시간과 가깝게 위치시킨다.9. 이수완료10. 이수 동영상 마다 1~9 과정을 반복한다. 실행결과

기능 배열에 있는 모든 요소를 순회하며 슬롯 머신 처럼 애니메이팅 한다. 시연 영상 사용 방법 1. styled-components 설치 npm install styled-components 2. framer-motion 설치 npm install framer-motion 3. SlotMachine.jsx 파일 생성 후 아래 코드 복붙 import React, { useRef, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import styled from "styled-components"; const SlotMachine = () => { // useRef를 사용하여 motion.div의 DOM 요소에..

Q1. 그렇지만 react에서는 state가 변경되면 재렌더링을 진행하는 것 아냐? 나는 state가 변경된다 => motion.div 내부 컨텐츠가 변경된다 => 재렌더링 된다 => 애니메이션이 재생된다 이렇게 이해했는데 틀린 부분 좀 짚어줘 A1. 맞습니다. React에서는 상태(state)가 변경되면 해당 컴포넌트가 재렌더링됩니다. 그러나 애니메이션 라이브러리인 Framer Motion에서는 일반적인 React의 렌더링과는 조금 다른 동작이 있을 수 있습니다. Framer Motion은 컴포넌트의 렌더링과 애니메이션을 분리하는 방식으로 동작합니다. 컴포넌트는 상태가 변경되어도 렌더링될 때마다 애니메이션을 다시 시작하지 않습니다. 대신, Framer Motion은 애니메이션을 명시적으로 제어할 수 있..

import React from "react"; import { motion } from "framer-motion"; const Penalty = () => { const arr = ["사과", "배", "포도", "망고", "수박", "귤", "딸기", "바나나"]; const variants = { visible: { opacity: 0.7, y: 0 }, hidden: { opacity: 0, y: 50 }, }; return ( {arr.map((item, index) => ( {item} ))} ); }; export default Penalty;