기술 블로그

서론 useRef는 기본적으로 요소에 접근할 때 사용한다고 알고 있었다. 하지만 렌더링 부분과 상관없는 값을 다룰 때도 사용할 수 있다! useState의 상태는 변화할 때마다 리렌더링이 이루어지지만, useRef의 값은 변화할 때마다 리렌더링이 이루어지지 않는다. 현재까지 useState로 모든 값을 관리했다. 그래서 렌더링 부분과 상관없는 값이 변화할 때도 리렌더링이 이루어졌다. 본론 아래는 현재 프로젝트의 수정 전 코드이다. (다른 부분은 코드를 생략했다) 디바운싱을 구현한 코드인데, 이 때 timer의 값을 useState로 관리했다. 아래 코드의 과정은 검색창(input)에서 타자를 칠 때마다 onChange이벤트에 의해 onDebounce함수가 실행되고 -> setTimeout에 의해 0.6초..

과정 Github actions를 이용하여 PR에서 자동 테스팅하는 과정은 이전 포스트에서 다뤘다. 1. 테스트 성공 시 자동 merge하기 1-1. 해당 저장소 -> Settings -> General -> Pull Requests -> Allow auto-merge 체크 - PR을 남기고, github actions의 테스팅이 통과되면, 자동 merge가 되는 것이다!! - 만약 테스팅이 실패되면, 자동 merge가 되지 않는다. 2. 만약 테스팅이 실패했다면, 자동 merge는 되지 않지만 수동적으로 merge를 시킬 수 있다. 문제가 될 수 있으니 테스팅이 실패했다면 수동적으로도 아에 merge할 수 없도록 설정하였다. 2-1. 해당 저장소 -> Settings -> Branches -> Bran..

문제 Input 검색창에서 검색을 한 후 검색어 저장하는 기능이 있었다. 정확히 말하면 최대 5개까지만 검색어 저장을 하고, 저장되어 있는 검색어를 또 검색했다면 마지막으로 오게 하는 기능이다. 그런데 문제없이 잘 작동한 줄 알았는데, 나중에 확인해보니 검색어 저장이 6개까지 되고, 7개째 오류가 발생했다. 아래는 오류가 났을 때 코드이다. // input은 검색어 // const [records, setRecord] = useState([]); const onSubmitForm = () => { //... setRecord(records.filter((item) => item !== input).concat(input)); if (records.length > 5) setRecord(records.sh..

(5가지) 과정 1. 웹 브라우저에 원하는 도메인을 입력하고 각 단계별로 해당 주소가 캐싱되어 있는지 확인한다. (이전에 접속한 적이 있는 페이지이고, 캐싱이 적용되었다면 DNS요청없이 IP주소를 찾을 수 있다) 1-1. Browser DNS Cache PC는 가장 먼저 브라우저 내에 존재하는 Browser DNS Cache에서 IP주소를 찾는다 1-2. OS DNS Cache 만약 Browser DNS Cache에서 못 찾으면, OS DNS Cache에서 IP주소를 찾는다 1-3. Router DNS Server 만약 OS DNS Cache에서도 못 찾으면, Router DNS Server에서 IP주소를 찾는다 1-4. DNS Server 만약 Router DNS Server에도 도메인에 대한 IP 주..

자바스크립트는 싱글 스레드이며, 이것은 Call Stack이 하나라는 이야기이다. 자바스크립트는 기본적으로 작업들을 동기 작업을 한다는 의미이다. 그런데 어떻게 자바스크립트에서 비동기 작업들이 가능한건지? 이벤트 루프, Task queue가 있어서 가능하다 자바스크립트 엔진 Call Stack 자바스크립트는 단 하나의 호출 스택(Call Stack)을 사용한다. 처리할 작업들은 차례대로 호출 스택(Call Stack)에 담아서 차례대로 처리한다. 하나의 함수가 실행되고, 이 함수의 실행이 끝날 때까지 어떤 task도 수행될 수 없다 (동기 작업). Task queue (대기실) Task queue는 처리할 비동기 관련 작업들을 임시 저장하는 큐이다. 비동기 작업에 관련한 Web APIs(setTimeou..