전체 글

1. 앱 만들기https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com내 애플리케이션 > 애플리케이션 추가하기 2. 플랫폼 설정방금 만든 앱 클릭 > 플랫폼 > web > 플랫폼 등록 > 도메인 주소 입력만약 로컬 환경에서 테스트 작업이라면 로컬 서버를 실행시킨 후 주소 복사 붙여넣기Redirect URI은 카카오 로그인 완료 후 이동할 페이지 주소(선택 사항) 3. 키 복사하기앱 > 앱 키 > JavaScript 키 값 복사 4. SDK 설치index.js에 아래 코드 복사 붙여넣기  htt..

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;

1. 도메인 구매(링크 > 도메인 > 도메인 검색 > 사용하고 싶은 주소 검색) https://domain.gabia.com/regist/regist_domain 가비아: 대한민국 도메인 점유율 1위 대한민국 100만 도메인 등록 업체 domain.gabia.com 2. 도메인 DNS 설정 my 가비아 > 이용중인 서비스(도메인) > DNS 관리툴 > 구매한 도메인의 우측에 있는 설정 버튼 > DNS 설정 > 레코드 수정 아래 표와 같이 레코드를 수정/추가 한다. 타입 호스트 값/위치 TTL 우선 순위 서비스 A @ 185.199.108.153 1800 DNS 설정 A @ 185.199.109.153 1800 DNS 설정 A @ 185.199.110.153 1800 DNS 설정 A @ 185.199.11..

https://8ugust-dev.tistory.com/47 [Git-Pages] Github Custom Domain 설정 (hosting.kr / react) (2022)1. 도메인 구매 https://hosting.kr 사이트로 접속합니다. 회원가입 및 로그인 은 너무 당연한 과정이니 생략하겠습니다. 구매를 원하고자 하는 도메인을 검색합니다. 도메인 별 가격을 확인한 뒤, 원8ugust-dev.tistory.com  배포 후 빈화면만 뜬다면?!위 글의 4번 과정인 React : Package.json 설정 변경을 꼭 봐야한다!

/* Chrome, Safari, Opera*/ ::-webkit-scrollbar { display: none; } /* Firefox */ scrollbar-width: none; /* IE and Edge */ -ms-overflow-style: none;