Frontend

useEffect fetch("data/products.json") .then((res) => res.json()) .then((data) => { console.log("🔥뜨끈한 데이터를 네트워크에서 받아옴"); setProducts(data); }); return () => { console.log("🧹 깨끗하게 청소하는 일들을 합니다."); } ⚠️다음과 같은 함수작성은 문제가 있다. SetProducts(data)를 통해 useState([])가 업데이트되고나면 -> React는 업데이트된 컴포넌트함수(Products)를 다시 호출한다. -> SetProducts(data)를 통해 useState([])가 업데이트되고나면 -> React는 업데이트된 컴포넌트함수(Products)를 다시 호출한다...

filter spread 연산자 key import React, { useState } from 'react'; export default function AppMentor() { const [person, setPerson] = useState(initialPerson); const handleUpdate = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`); setPerson((person) => ({ ...person, mentors: person.mentors.map((mentor) => { if (mentor.name === prev) { return { ...mentor, n..

map 불변성 spread연산자 import React from "react"; import { useState } from "react"; export default function AppMentors() { const [person, setPerson] = useState({ name: "당신", title: "개발자", mentors: [ { name: "밥", title: "시니어개발자", }, { name: "제임스", title: "주니어개발자", }, ], }); const handleNickname = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`); setPerson(..

객체initialState transform onPointerMove AppXY.css .container { width: 100vw; height: 100vh; background-color: beige; } CSS에서 전체 배경을 설정하고 싶다면 위와 같이 코드를 작성하면 된다. 답안1(state를 개별적으로 작성) AppXY.jsx import React, { useState } from 'react'; import './AppXY.css'; export default function AppXY() { const [x, setX] = useState(0); const [y, setY] = useState(0); return ( { console.log(e.clientX, e.clientY); set..

이벤트 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 이벤트의 종류 1) 마우스 이벤트 이벤트 설명 click 요소에 마우스를 클릭했을 때 이벤트가 발생 dbclick 요소에 마우스를 더블클릭했을 때 이벤트가 발생 mouseover 요소에 마우스를 오버했을 때 이벤트가 발생 mouseout 요소에 마우스를 아웃했을 때 이벤트가 발생 mousedown 요소에 마우스를 눌렀을 때 이벤트가 발생 mouseup 요소에 마우스를 떼었을 때 이벤트가 발생 mousemove 요소에 마우스를 움직였을 때 이벤트가 발생 contextmenu context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 2) 키 이벤트..

토글 fetch 삼항연산자 fetch 사용법 fetch는 자바스크립트의 built-in 메서드이다. fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다. 두번째 인자인 옵션 객체는 필수가 아니므로 url만을 인자로 설정해도 된다. fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 컴포넌트가 re-rendering ..

비동기처리에서 진도가 잘 안나갔다.. (뭐 물론 자바스크립트랑 리액트랑 병행해서였다는 핑계거리가 있기는 하지만) 뭔가뭔가 외부문서와 외부강의를 봐도 이해도 안가고 제자리걸음이었다. 그러다 모던자바스크립트 Deep Dive책을 참고했더니 퐝! 하고 뚫렸다. 어려운 책이라 참고를 가장 늦게 했는데 오히려 비동기처리의 과정이 빠짐없이 적혀있어 미시적으로 찝찝하고 이해안가는 부분이 이해가 가게되어서 거시적으로도 이해가 되었다. 백지에 펜으로 필기하다가 내친김에 굿노트로 잘 정리해둬서 두고두고 이해안갈때마다 보려고 꽤 시간들여 요약본을 만들었다. 아마 이것만 가지고 비동기를 접해보지 못한사람이 비동기를 이해하기는 힘들지만, 나한테는 이해안갔던 빈곳위주로 잘 정리해둔 필기노트니까 나한테는 이해가 가서 좋다. 일부러..

callstack, Single Thread 작동과정 살펴보기 자바스크립트는 단 하나의 싱글 컨텍스트 스택을 가지고 있다. 따라서 싱글 쓰레드(Single Thread): 자바스크립트 엔진은 기본적으로 한번에 하나의 일만 처리한다. -> 동기적(직렬적)으로 실행된다. function a() { for (let i = 0; i < 1000000000000000; i++); return 1; } function b() { return a() + 1; } function c() { return b() + 1; } console.log("시작했다!"); const result = c(); console.log(result); 콜백 비동기 자바스크립트는 기본적으로 동기적인 언어이다. 하지만, Host환경(브라우저..