내가 보려고 만든 개발 공부 일지

1. 훅은 오직 리액트 함수 내에서만 사용되어야 한다. 일반적인 js 함수에서는 호출하면 안된다. 2. 리액트 함수 최상위에서 호출해야 한다. -> 반복문, 조건문, 중첩된 함수 내에서 hook을 호출하면 안된다. useState 나 useEffect 같은 훅들이 여러 번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해 놓는다.(=LinkedList) 그래서 매 렌더링마다 순서대로 훅을 호출할 수 있는것이다. 근데 만약 조건문이나 반복문안에서 훅을 썻다고 해보자, 그럼 훅이 어떤 조건에따라 실행되지 않을 수 있다. 그럼 렌더링 때마다 맨처음 함수가 실행될때 리액트가 기억해놓은 훅의 호출 순서가 꼬여서 실행될 것이고 결국 버그를 초래할 것이다. 이게 항상 리액트 함수 최상위 레벨에서만 훅을..

어떤 컴포넌트 사이에 다른 컴포넌트를 넣으면 그 컴포넌트의 props.children에 사이에 들어간 컴포넌트들이 담겨져 온다. ex) function Wrapper({children}){ // 컴포넌트 사이에 들어온 다른 컴포넌트들은 props.children 에 할당됨 var style = { border : "2px solid blue", padding : "20px" } return ( {children} ); } 위 예제를 보면 Wrapper 사이에 Hello 컴포넌트들이 들어가있는데 이 Hello들은 Wrapper의 props.children 으로 가져올 수 있다.

const el:HTMLDivElement | null = document.querySelector('div.toast'); 위와 같은 코드가 있다고 할때, 여기서 그냥 el.firstChild 이렇게 쓰면 el 값이 null 일 수 도 있다고 에러를 준다… 그래서 if(el) ~~ 이런식으로 falsy 값 체크를 해주야 되는데 매번 코드를 짤때마다 이 짓을 하기엔 너무 번거롭다. 로직 흐름상 절대로 null 이나 undefined 같은 값이 절대 오지 않는 경우에는 el!.firstChild --> 이처럼 변수 뒤쪽에 느낌표 (assertion operator) 를 써주면 되고 이건 컴파일러에게 "이값은 절대 null , undefined 이 될 수 없으니 그냥 넘어가" 라는 뜻이다. 참고 https:..

(일단, express 에서 사용되는 함수를 미들웨어 라고 부른다. --> 요청과 응답 사이의 중간작업을 해준다는 의미) 예제1) var app = express(); 일때 App.use( A, B, C ) 이런식으로 use 함수를 쓸수있다. (use 안에 인자로 들어가는 함수를 실행하겠다 라는 의미) 여기서 A 에 url 을 적어주면 해당 url 로 요청이 왔을때 B, C 함수가 차례로 불리게되는것이다. 그리고 B 에서 (req, res, next )=>{ next(); } 와 같이 해줘야 C 가 실행된다. (next()를 해주지 않는다면 요청은 거기서 영원히 멈추게 될것이다.) 만약 use의 인자 함수가 하나일때 next()를 하면 요청 url 에 매칭되는 다음 함수(미들웨어) 가 실행된다 Next ..