미미 공부/취미방

01 key와 리렌더링 알아보기 key값은 해당 요소에만 들어간 유일하고 고정된 값이다. (랜덤으로 요소의 순서를 바꾸는 상황) key값이 없는데 리렌더링 되는 경우 요소의 글자가 바뀐다고 판단해서, 모든 글자를 리렌더링하고, 리렌더링 되더라도 포커스 위치가 그대로 있는다. key값이 있는데 리렌더링 되는 경우 요소의 위치가 바뀐다고 판단해서, 위치를 재배치한다. 포커스가 해당 key 요소에 고정되 따라다닌다. useState로 key값을 제일 먼저 비교하고 바뀐 부분만 리렌더한다. 02 상태 끌어올리기 state lifting 형제요소끼리 서로 상태를 감지할 수 없기 때문에, 부모가 감시해서 컨트롤 할 수 있게 state lifting이라는 개념을 사용한다. 1. React.useState()는 Bod..

node, npm, npx가 무엇인가설명을 몇 번 들어도 헷갈려서 정리를 해 놓기로 한다...🙃Node.js일반적인 웹사이트/웹 애플리케이션은HTML을 웹브라우저가 읽어서 보여준다.하지만, Node.js사이트/애플리케이션은JavaScript를 Node.js Runtime이라는 프로그램이 읽어서 보여준다.웹브라우저에 Node.js는 이미 설치가 되어있지만우리 컴퓨터에는 없으니 작업하기 위해서 프로그램 설치가 필요하다.그래서 우리는 Node.js Runtime(Node.js)를 컴퓨터에 설치하는 것!참고 :  https://www.opentutorials.org/course/3332/21029 Node.js - 설치 - 생활코딩수업소개 운영체제 별로 Node.js를 설치하는 방법을 소개합니다. 자신의 컴퓨..

npm ERR! code ENOENT npm ERR! syscall open npm ERR! path some/path/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'some\path\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoentnpm start를 했는데 이런 에러 문구가 떴다.package.json을 찾을 수 없다고 말하고 있음. (문제점)(설명)터미널에서 디렉터리 위치가 제대로 되어있는데 npm start만 하면 디렉터리 위치가 바뀌어서 npm이 시작된다...

01 React style 스프레드 연산자(props. 해당 코드에서는 {...rest})에는 정보들이 다 들어있다. 정보들은 Button 커스텀 엘레먼트를 이용해 만든 태그들에 들어있는 정보들이다. (해당 코드에서는 className, text, style) 일반 CSS와 동일하게 순서와 레벨에 따라 속성 값이 덮어써진다. (예. inline CSS > id > class > tag) style props는 객체 데이터고, 스타일은 카멜케이스로 넣어준다. 커스텀 엘레먼트에 들어가 있는 모든 props들은 공통적으로 적용된다. *HTML에서 이미 사용 중인 태그명 혹은 속성명은 최대한 사용하지 않으려고 한다. 02 useRef() js의 document.querySelector, getElementBy...

01 컴포넌트 상태 다루기 컴포넌트 : 엘리먼트(요소)의 집합 useState 컴포넌트의 상태 관리 React.useState(기본값)을 console창에 출력해 보면 배열 데이터를 반환한다. keyword는 값, setKeyword는 값 할당에 사용된다. useState를 사용하면 새로 랜더하지 않아도, 값이 바뀌면 바로 랜더된다. (지난번 코드는 render함수로 을 매번 랜더해줬다.) 02 컴포넌트 사이드 이펙트 다루기 useEffect 컴포넌트의 사이드 이펙트 관리 (부수 효과) 부수 효과를 내기 위한 훅 어떤 조건을 설정해서 그 조건이 변할 때 동작한다. 조건은 dependency array라고 한다. 공란 : 아무것도 넣지 않으면 모든 변화에 동작 실행 [] : 빈 배열은 처음에 컴포넌트가 실..

01 리랜더링 (리액트의 장점) (예시) button 내부 텍스트를 매 초 바뀌게 한다면, JS는 버튼이 새로 만들어지면서 글자가 바뀐다. React는 변경된 부분만 새로 들어가고, 버튼은 처음 그대로 있다. 바뀌기 전후 DOM을 비교하고 새로 그릴지 판단한다. 타입 > key > props 순서로 비교해서 바뀐 부분만 새로 그린다. 리플로우, 리페인트? 02 addEventListener event를 카멜케이스로 넣는다. (예) onClick, onBlur, onFocus ... 03 간단한 검색창 만들어보기 onChange가 일어날 때 input 내부 value 받아서 p태그에 업데이트해주기 1. state 객체변수 생성. keyword라는 속서을 넣는다. 2. onChange가 발생할 때, keyw..