{/*---App.js-------------------------------*/} import dollimpanImg from './Images/dollimpan_img.png'; import dollimpanText from './Images/dollimpan_text.png'; function App() { {/*---돌림판---------------------------------*/} } /*mid-part : 돌림판*/ .bottom-part { margin-top: 50px; } .dol-lim-pan { position: relative; width: 300px; height: 300px; margin: 0 auto; } .dol-lim-pan img { position: absolute;..
1. 기본 print(149) >>> 149 print(13+14) >>> 27 print("Hello") >>> Hello print('my name') >>> my name print("""is""") >>> is 2. 특수기호 사용 print("""I'm happy""") >>> I'm happy print('''"안녕하세요"라고 말했다''') >>> "안녕하세요"라고 말했다 print("I\'m sad") >>> I'm sad 3. print를 한 번만 사용하여 2줄로 출력하기 print("my name is \n ddah0329") >>> my name is >>> ddah0329 # 맨안에 한 칸 띄어진 이유는 \n 띄고 ddah0329를 했기때문 print("""my name is ddah0..
// turtle_co/src/App.js import React, { useEffect, useState } from 'react'; import './App.css'; function App() { const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { const handleScroll = () => { setScrollPosition(window.scrollY); }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); // Calculate the..
1. 컴포넌트 사용 이유 2. 컴포넌트 만드는 문법 - function 사용 - let / const 사용 각각 사용하기에 장점 단점이 있음...! 3. 컴포넌트 사용하면 좋은 곳 1. 반복적인 HTML 축약 2. 큰 페이지를 컴포넌트로 만들 수 있음 3. 자주 변경될 거같은 컴포먼트 UI들 4. 컴포넌트 단점 1. state 사용 시 문제 생김 ** A 함수에 있던 변수는 B 함수에서 맘대로 가져다 사용 할 수 없음 --> 그래서 무작정 컴포넌트를 만들면 안됨.
state, 함수 이용 좋아요 버튼을 누르면 숫자가 올라가게끔 만들 것이다. 이때 숫자는 누르는 횟수만큼 +1이 되기 때문에 state를 써줄 것이다. 1단계 : 형태만 만들기 import {useState} from "react"; function App() { let [heart] =useState(0); return ( 좋아요 ❤️ {heart} ); } 2단계 : 좋아요를 눌렀을 때 0이 1로 바뀌도록 (onClick 사용) import {useState} from "react"; function App() { let [heart, heartAlterNums] =useState(0); return ( 좋아요 hearAlterNums(1)}> ❤️ {heart} ); } 3단계 : 누를때마다 +1이..
버튼을 누르면 state 변경 값으로 전환 되게끔 할 수 있다. - 방법 1 : 배열을 그대로 가져와서 수정하기 let [articleList, articleSwitch] = useState(['남자코트 추천', '강남 우동 맛집', '파이썬 독학']); return ( articleSwitch(['여자코트 추천', '강남 우동 맛집', '파이썬 독학'])}> 글변경버튼 ) 하지만 이렇게 할 경우에는 원본 데이터인 articleList가 보존이 안되고 여자코트 추천으로 바뀌기 때문에 적합하지 않다. 그래서 우리는 원본 데이터를 보존하면서 state를 사용해야하는 것이다. - 방법 2 : 원본 데이터 보존하면서 값 변경 let [articleList, articleSwitch] = useState(['남..