성급한 추상화란? 말 그대로 추상화를 미리 과도하게 적용한 것을 의미합니다. 복잡성을 줄이고 재사용성을 높여서 버그나 오타를 한 곳에서 해결하기 위해 추상화를 했지만, 오히려 안 하는 것이 더 나은 상황이 있습니다. 이런 성급한 추상화는 코드 이해와 관리를 더 어렵게

react-query v3.39.2 기준이다. 부모와 자식 컴포넌트에서 똑같은 useQuery를 사용했을 때 발생하는 문제와 해결방법을 정리했다.

useOnClickOutside에서 mousedown 이벤트 대신 click 이벤트 적용하기

자바스크립트 생태계에 기여하고 이끌어 가는 분들은 mac으로 개발했습니다. 그래서 mac에서 되던게 windows에서는 안되는 경우가 있어 mac과 유사한 환경을 구성하기 위해 linux를 설치해서 사용하는 게 좋습니다. 물론, 자바스크립트 개발자라면 mac을 사용하면

저번 시간에 구현한 함수를 응용해서 사용할 수 있는 함수 go, pipe, curry를 구현하고 사용법을 알아보겠습니다.

원하는 형태로 값을 변경시킨다.(맵핑)products에서 name속성만 뽑아서 출력하는 코드이다. 이 코드를 함수형으로 변경시켜 보겠다.map 함수를 구현해서 원하는 형태로 변경할 수 있게 함수를 전달인자로 받아서 유연성을 더했다. log(names) 같은 함수 내부에

제너레이터 함수는 이터러블을 생성하는 함수입니다. 일반 함수와 같이 함수 코드 블록을 한 번에 실행하지 않고 함수 코드 블록 실행을 일시 중지했다가 필요한 시점에 재시작하는 함수입니다. function\* 키워드로 선언, 하나 이상의 yield문 포함, return문은

자바스크립트 이벤트 루프, 콜스택, 런타임, 테스크 큐에 대해서 한 번쯤 들어 보셨을 겁니다. 전부 자바스크립트 동작에 관한 용어입니다. 이 용어들을 흐름에 따라 정리 해보겠습니다. 용어를 더 잘 이해하기 위해 필요한 예제들은 참고를 보시면 됩니다. 자바스크립트 엔진

문제상황 팀프로젝트를 할 때 문제가 발생했습니다. 한 분이 dev 브랜치가 아닌 master 브랜치에 잘못 merge해서 그 커밋을 revert했습니다. (실제 커밋은 아니고 간단한 예제를 만들었습니다.) 그 브랜치를 dev 브랜치에 merge하고 master 브랜치

두 개의 JSON 데이터를 공통된 키 값을 기준으로 SQL의 join처럼 원하는 데이터로 만드는 방법을 알아보겠습니다.인천공항에서 운항중인 공항 데이터입니다.INCHEON_AIRPORT_DATA라고 하겠습니다. 177개입니다.모든 공항 데이터입니다. AIRPORT_DA

AWS EC2에서 배포하고 있는 개인 프로젝트의 하나의 페이지가 어느 순간 데이터를 불러오지 못하고 있었습니다. 그래서 몽고 DB에 문제가 있다고 판단해 살펴보았습니다. 해킹을 당했습니다. 제가 전혀 보안을 생각하지 않고 27017포트에 모든 ip를 허용하며서 계정 인

리액트 렌더링 최적화 방법

웹 성능 최적화 할 수 있는 방법은 웹 페이지 로딩 최적화와 웹 페이지 렌더링 최적화로 크게 두가지로 나눌 수 있습니다. 이에 대해 알아보겠습니다.

이터러블과 이터레이터

styled components 라이브러리

리액트 리렌더링

git에서 폴더나 파일명 대소문자 구분하는 설정

HTML에서 시멘틱 태그

Express 초기 설정입니다. 거기에 타입스크립트를 곁들였습니다.

day.js 사용법