맑음때때로 여름

React 버튼 클릭 시 스크롤 이동하는 방법 (useRef) - useRef 훅을 이용 - useRef : 특정 DOM을 가리킬 때 사용하는 Hook함수 import React, { useRef } from 'react'; import styled from 'styled-components'; function App() { /* 스크롤 이동 */ const inputForm = useRef(); //특정 DOM을 가리킬 때 사용하는 Hook함수, SecondDiv에 적용 const onMoveToForm = () => { inputForm.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return ( 버튼을 누르면 아래로 이동합니..

https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com

React에서는 불변성을 유지해야하기 때문에, state 내부의 값을 직접적으로 수정하면 안된다. (함수를 사용하여 새로 만들어야한다.) 값을 직접 수정할 시 상태가 바뀌었다고 React에서 파악하지 못한다. 따라서 React 배열을 다룰때 사용하지 말아야하는 함수와 사용해야하는 함수가 있다. >> React에서 배열을 다룰 때 사용하지 말아야하는 함수 (상태값을 직접적으로 바꾸는 함수들) push splice unshift pop >> React에서 배열을 다룰 때 사용하는 함수 (새 배열을 만드는 함수들) concat (새로운 배열 추가) slice (배열 안에 값을 잘라 올때) map (배열 안의 값을 변경 할 때) filter (특정 조건만 제외할 때 = 배열 안의 값 삭제 하고 싶을 때 사용)

객체 안에 있는 값을 추출하여 바로 사용할 수 있다. const object = { a: 1, b: 2 }; const { a, b } = object; //비구조화 할당 문법 console.log(a); // 1 console.log(b); // 2 const [ inputs, setInputs ] = useState({ //state 지정 //const [ 상태 값 저장 변수 , 상태 값 갱신 함수 ] = useState(상태 초기 값) calResult : '', calculating : false //계산 누르면 F->T 클리어 누르면 T -> F }); const { calResult, calculating } = inputs; //비구조화 할당

노마드 코더 Coin Tracker 챌린지 문제 - 가지고 있는 달러를 내가 원하는 코인으로 변환 했을 때 얼마나 되는지 계산하는 문제 import React, { useEffect, useState } from 'react'; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); const [dollars, setDallars] = useState(""); const [result, setResult] = useState(""); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response..

22년 11월 네이버 플러스 멤버십데이 (11/13~11/15) 네이버 멤버십 데이 공지가 떳네요. 네이버 플러스 멤버십 데이 11월 날짜는 11월 13일 부터 11월 15일 까지 혜택은 아래와 같습니다. 첫째날 (13일 ~ 14일) 장보기 20% 할인 - 딱히 장볼게 없어서 패스! [주의 사항] 발급 기간 : 11월 13일(일)~14일(월) 유효 기간 : 발급 당일 23:59까지 할인 조건 : 이마트몰/SSG새벽배송/홈플러스/GS프레시몰/트레이더스/프레딧/농협하나로마트/초록마을/올가/동네시장 내 100원 이상 구매 시, 상품 1개에 한해서 20% 할인(최대 3천원)조건 : 발급 기간 내 각 마트별, 동네시장 대상으로 ID당 매일 1회씩 발급멤버십 회원일 경우에만 할인 쿠폰을 받을 수 있습니다. (패밀리..

1. 리액트 상태 변경 시, constants을 보낼때와 function을 보낼때 차이 const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); setToDos((currentArray) => [toDo, ...currentArray]); //setToDos에 함수를 보낸다. => 함수를 보낼때 첫번째 인자는 현재state다! 따라서 currentArray 인자는 현재 상태를 뜻한다. setToDo(""); //setToDo에 constants를 보낸다. 풀코드 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); co..

환승연애2 남희두 아이스하키 일본인 선수 패는 짤 아이스하키에서 어느 정도 파이팅이 허락된다는데 ㅋㅋㅋ 찰지게 패네 ㅋㅋㅋ ㅋㅋㅋㅋㅋ 분이 덜 풀리셨나보다ㅋㅋㅋ 본업 존잘 아래는 영상

끼야 !! 나이가 먹어서 예전만큼 시상식 다 챙겨보진 않지만, 오늘 유튜브 보는데, 울 태연이 2022 지니뮤직어워드에서 여자 솔로 부문 수상했네 ㅎ 축축축 무대가 없어서 조금 아쉽긴하지만, 그래도! 태연이가 수상소감 마지막 쯔음에 조만간 콘서트 한다네요 !! 이 얼만의 콘서트인가 !? 이번엔 꼭 가고 말겠어 아래 2022 지니뮤직어워드 태연 수상소감 영상 !! 1:50 쯔음에 콘서트 떡밥 살짝 투척 ㅋㅋ 팬들 환호성 ㅋㅋㅋㅋㅋ 니맘내맘 사진 출처 : https://twitter.com/TaeNy_Bar/status/1590311827099254785?t=L5F7_nh9SMjN2WxKSb4LRg&s=19 존멋탱구리 탱구!

와우 편의점에서 처음으로 포켓몬빵을 구매했다 ㅋㅋ 오후 1시 쯤에 커피 사가지고 집에 돌아오는 길에, 골목에 있는 GS25 편의점을 지나가다가 혹시나 하고 들어갔는데, 딱 하나 구석에 숨겨져 있어서 냉큼 사왔다 ㅋㅋㅋ 태어나서 첨으로 사보네 ㅜㅜㅜ 감격 토게피의 딸기우유슈 빵 안에 딸기 크림이 있었는데 맛있었다. 안에 스티커는 !? 오늘의 포켓몬은 뭘 까아아 요? 띠딕 니로우 !! 악 비행 타입 만족! 한때 포켓몬 4세대까지 미쳐서 게임이고 만화책이고 애니고 다 챙겨봣는데 ㅋㅋㅋ 추억이 새록새록 하구만 ㅋㅋㅋ 백수라서 시간도 많겠다 종종 포켓몬빵 구하러 구석에 숨겨진 편의점 돌아다녀 봐야겟다.