그냥 블로그

Event 위임구글 메인 페이지에서 내가 등록해놓은 Icon을 클릭하는 이벤트가 발생한다고 가정할 때, EventHandler를 어떻게 붙여주고, 발생시켜야 할까?  내가 선택하고 싶은건 notion 이지만 실제로 html은 다음과 같이 생겼기 때문에, querySelector('.tiles').addEventListner 형식으로는 불가능 하다. ( 심지어 이런식으로 하면 맨 상단에 하나만 붙는다 ) 모든 tile 요소는 동일하게 클릭 이벤트 발생 시 링크로 보내져야 할텐데... (사실, 저거는 a 요소로 써서 eventHandler를 직접 붙여줄 필요는 없지만 가정이다!!!! ㅎ)  querySelectorAll를 써서 반복문으로 일일이 붙여주거나....const cardAll = document.q..

정리해보기 Semantic Tag포함된 콘텐츠의 특정 의미를 정의하고, 목적을 갖는 태그다. 기존 HTML 태그 기능과 마찬가지로 block element이면서 사이트 구조(레이아웃)를 설계하기 위해 존재한다.     태그에 의미를 부여해 구조를 파악하기 쉽게 함. 이전에는 구조 구분을 위해 태그에 id나 클래스 등으로 구조를 설계했으나, HTML5에서는 시맨틱 태그의 등장으로 좀 더 명시적이며 직관적인 구조 설계가 가능해졌다  메인 홈이랑 기사 페이지에 작성되어 있는 시맨틱 구성? 이 좀 다르다고 느꼈다. 메인 홈은 section으로 header, main, aside 전부 분리되어 있었는 반면에 기사 페이지에는 section은 없었고 그냥 div로 되어 있는 부분이 많았음. 상위 요소에서 뭔..

이 글은 단지 프로젝트를 하면서 봤던 내용과 생각을 정리한 글입니다 : ) 전문가는 아니기 때문에 오류가 있을 수 있고, 저 또한 확실하게 알고 있지 못한 상황이기도 합니다. 혹시, 더 알고 있는 내용이 있다면 코멘트 남겨주시면 감사하겠습니다 !!   이번 프로젝트는 기존에 안써봤던 다양한 기술 스택을 써보고 싶었다. 사실 이런 기준으로 선택하면 안될 것 같지만, 한번 써보자 싶었기에 공고에서 많이 보이는 유명한 기술 스택들을 써보고자 했다.  그렇게 선택한게 1) Next.js : CSR과 SSR을 제대로 경험해 보기2) Recoil, React Query : 기존 Redux의 Boiler plate 단점을 극복하기 위한 기술 스택으로 많이 언급되고 많은 곳에서 사용됨. 3) TypeScript : J..

React Query가 좋은 이유 중 하나가 cache 기능일 것이다 ㅎㅎ .이걸 이용해서 redux 같은 전역 상태 관리 라이브러리를 쓰지 않고 React-Query 만으로도 관리할 수 있기도 한 것이다!!  React-Qury는 이 캐싱 기능을 다루기 위해 stale, cahcetime, refresh 등의 option을 제공한다. stale 상태 "탁한", "신선하지 않은" 이란 뜻으로, 업데이트가 필요한 상태이다. react-query는 쿼리가 stale 할 때, 다음과 같은 상황에서 해당 쿼리를 fetch한다. 새로운 인스턴스가 마운트 될 때브라우저 화면이 다시 focus 될 때네트워크가 재연결됐을 때트결히 설정한 refeetch interval이 있을 때 staleTime 쿼리를 fetch한 ..

[08/30] "is not a constructor" 리팩토링을 진행하다 Error가 발생했다. "생성자가 아닙니다".... 살펴본 결과, class 명 일치, import 파일명 일치....원인을 찾을 수가 없었다. 해결하기 위해서 어쩔 수 없이 오류가 난 곳을 주석 처리해가면서 거슬러 올라간 결과 순환 참조 문제 때문이란 걸 알 수 있었다. 설계에서는 순환이 없었는데, 리팩토링을 하다보니 이런일이 일어나고 있었다... test 파일로 예시를 들자면 아래와 같은 상황이었다.const test2 = require('./test2');class test1{ constructor() { this.test2 = new test2(); }}module.exports = test1;con..

💡 정리 요약  1. 비동기와 멀티스레딩 차이  지난번에, work-thread를 사용해보면서 비동기랑 멀티 스레딩이 그래서 어떤 차이인지가 궁금했었다. 뭔가 비슷한 것 같아서.... 그래서 차이를 한번 알아보쟈 :) 비동기 프로그래밍  여러 일이 동시에 발생한다. 프로그램은 실행시간이 긴 함수를 실행할 때, 함수의 실행 흐름을 막지(block) 않고, 계속 프로그램을 실행한다. 비동기 시스템에서는, 추가적인 스레드를 시작하여 해결한다. 단일 스레드 접근(single-thread approach)의 또 다른 예로, OS에서 파일을 가져와서 연산을 하는 것이 있다.  비동기 프로그램 접근 방식은, 실행속도가 느린 함수를 하나 실행하고, 그 동안 추가적인 콜백(callback) 함수들을 실행하는 것이다.멀..