맑음때때로 여름

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..

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..

[React 상태 관리] - React는 변수 대신 state를 사용 - state 왜 사용? >> state가 변경되면 새로고침 없이 HTML이 자동으로 리렌더링 된다. (변수를 쓰면은 새로고침해야 바뀜) 1. setState - 클래스형 컴포넌트에서 사용하는 방법 - 요즘은 클래스형 컴포넌트 잘 사용하지 않음 2. useState - 함수형 컴포넌트에서 state 사용하는 방법 (가장 기본적인 방법인듯..) - React Hook 라이브러리에 포함된 함수 import React, { useState } from 'react'; const CalResultView = ({inputData, inintCalResult}) => { //{inputData} => 부모로 부터 받아온 props const [..

React 공부를 시작했다.. props와 state에 적응하기 위해 첫번째 프로젝트로 간단한 계산기를 만들고 있다.. 근데 대부분 클래스형으로 만들었는데, 요즘엔 함수형을 더 많이 사용한다고 한다. (함수형이 좀 더 빠르고 메모리도 덜 잡아먹는다) 그래서 다시 클래스형을 함수형으로 바꾸고 있다... ㅋㅋ 클래스형 적응 완료 했는데, React Hooks의 useState 요 놈 잘 지켜보겠다. 기록 남길 겸.. 간단한 예제를 남겨보겠다. 개념은 구글링하면 잘 정리된 사이트가 많으니 생략! import React, { Component } from 'react'; //클래스형 컴포넌트 class CalResultView extends Component { state = { claResult : '' } ..

아 공부하기 싫다.. 문제 점프 투 장고 공부 중에 pybo 앱만들고 urls.py에서 url 맵핑하고 views.py 작성했는데도 404 에러가 뜬다.. 원인 config/urls.py 파일에 views.index가 임포트가 안되어있다. 책을 다시 보니 책에 적혀있는데, 안보고 넘긴듯.. (책을 잘 읽자) 해결방법 config/urls.py 파일에 from pybo import views 입력해서 views 임포트 시켜준다. 이제 404에러 안뜨고 잘 나온다.

https://shlee0882.tistory.com/110 OSI 7 계층이란?, OSI 7 계층을 나눈 이유 1. OSI 7 계층이란? OSI 7 계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다. 1.1 OSI 7 계층을 나눈이유는? 계층을 나눈 이유는 통신이 일어나는 과정이 단계별로 파악할 수 있기 때문이다... shlee0882.tistory.com