감귤밭 호지차 농장

addEventListner "click" 사용자가 마우스나 트랙패드 등으로 요소를 클릭할 때 발생합니다. 해당 요소의 클릭 가능한 영역에서 클릭이 감지될 때 이벤트가 발생합니다. const button = document.querySelector(".addBtn"); button.addEventListener( 'click' , function( ){ } ) See the Pen vanila JS change by Emma-Hyejin (@Emma-Hyejin) on CodePen. "change" 사용자가 입력 필드의 값을 변경할 때 발생합니다. 예를 들어 체크박스나 라디오 버튼의 선택 여부를 변경할 때 , 혹은 요소의 선택된 옵션을 변경할 때 이벤트가 발생합니다. const input = docu..

세상세상 놀라온 정말 간단한 Axios GET/PUT/DELTE/PATCH 이런 기능만 쓰다가 면접에서 딱 "Interceptor" 설명해주세요. 하는 순간 아.......... 그래요.. 나는 길에 굴러다니는 말도 못하는 감자입니다. 읍.ㅇ.ㅡㅂ.... 인터셉터 공식 문서 : then 또는 catch 로 처리되기 전에 요청과 응답을 가로챌 수 있다. 공식 문서에서는 단어 뜻 그대로 서버로부터 데이터를 받아오거나 에러로 분기 되기 전에 중간에서 훽! 가로채는 녀석이란다. 서버랑 통신하기 전에 잠깐 기다렸다가 이것 좀 하고 가!!!! 이런 녀석이랄까...? //요청 axios.interceptors.request.use(function () { // 요청이 전달 되기 전에 작업 수행 return confi..

전역적으로 사용할 수 있는 유일한 인스턴스를 생성하는 패턴 특정 인스턴스가 오직 하나만 존재하도록 보장하는 소프트웨어 설계패턴입니다. 전역 변수를 사용하지 않고도 해당 객체를 전역적으로 접근할 수 있게 되며 공유 자원에 대한 동지 접근을 제어할 수 있다. 싱글톤 패턴 생성자 이용 싱글톤 패턴 예시 let instance = null; function Singleton( data = "Intial data " ) { //기존 인스턴스가 존재할 시 기존 인스턴스 반환 if(instance) { return instance; }; this.data = data; instance = this; }; //Singleton 인스턴스가 생성될 때 해당 메소드에 접근 //메소드 추가 Singleton.prototype..

면접에서 왜 Debounce 라이브러리로 썼냐고 그래서.. 엄.. Um.. 그것이 간편하니까.. 라고 대답한 댕청한 나 ㅋ Debounce 란 ( with Throttle ) 우선 Debounce에 대해서 간단하게 설명하고 넘어가자. Debounce는 Throttle과 함께 대표적인 웹 최적화 기법 중 하나이다. 주로 네트워크의 불필요한 연속 요청을 방지해 주는 아주 고마운 친구이다. Debounce 이벤트를 그룹화해서 특정 시간이 지난 후 하나의 Event만 발생하도록 하는 기술. 100ms로 설정을 해두면 첫 Event 발생 후 100ms 동안 추가적인 이벤트가 발생하지 않는다면 함수를 실행하고, 100ms안에 추가적인 이벤트가 발생한다면 다시 이 Event를 기준으로 100ms 동안 추가적인 이벤트..

1. 터미널 열어주기 2. 현재 노드 버전 확인 node -v 3. 노드를 쉽게 업데이트 하고 설치 할 수 있도록 " n " 패키지 설치 npm install -g n 4. 최신 버전 설치 sudo n latest * 비밀번호 입력하라고 나오는데 침착하게 MAC에서 설정해주었던 (설치할 때 쓰는 ) 전역? 비밀번호를 입력해주면 끝~ A. 번외 이렇게 해도 안된다면 그냥 (기존에 nvm)이 설치되어 있다는 전제 하에 터미널에 다음과 같이 입력합니다. nvm install v(원하는 버전) 제 현재 일자 기준 20.11.0 이 최신 LTS 버전이어서 " nvm isntall v20.1.0 " 입력해서 설치했습니다. [참고] + How to Update Node.js to Any Version: A Step-..

HTTP 특징은 비연결성 = 연결한 적이 있어도 연결을 끊어버린다. -> 대안책 : Polling, Long Polling, Websocket, SSE SSE ( Server - Sent - Event ) 클라이언트의 별도 추가 요청 없이 서버에서 업데이트를 스트리밍할 수 있는 단방향 통신입니다. SSE의 장점과 단점 장점 1. HTTP를 통해 통신하므로 다른 프로토콜은 필요가 없고, 구현이 굉장히 쉽다는 것이다. 2. 네트워크 연결이 끊겼을 때 자동으로 재연결을 시도한다. 3. 실시간으로 서버에서 클라이언트로 데이터를 전송할 수 있다. 폴링 같은 경우는 실시간이라고 보기 어려운 점이 있는데, 이러한 한계를 극복한다. 단점 1. GET 메소드만 지원하고, 파라미터를 보내는데 한계가 있다. 2. 단방향 통..

저장 공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. useRef로 관리되는 값은 값이 변해도 화면이 렌더링 되지 않는다는 특징이 있습니다. 또한, 컴포넌트가 종료되기 전까지는 렌더링이 되어도 값을 그대로 유지할 수 있습니다. 주로 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 경우 많이사용합니다. 로그인 시 클릭 하지 않아도 자동으로 입력 폼이 포커스되는 기능이나 무한 스크롤에서 스크롤 이벤트를 감지해서 새롭게 데이터를 불러올 때 사용합니다. 보통 무한 스크롤의 새롭게 이벤트가 일어나는 지점을 관리할 때 사용하고는 합니다. Ref 사용 예시 입력 폼 포커스 이벤트 useRef 사용 예시 무한 스크롤의 새롭게 이벤트가 일어나는 지점 관리 useState와 useR..

데이터를 캐시하는 useMemo 컴포넌트가 재렌더링되면 컴포넌트 내에 존재하는 변수 및 함수들을 재평가되기 때문에 다시 실행. 리액트는 과거에 계산한 값을 반복해서 사용할 수 있도록 useMemo를 통해 값을 캐시하는 방법을 제공. import { useMemo } from 'react'; const cachedData = useMemo(callback, [deps]) ReactJS에서의 메모이제이션은 순수함수에 들어가는 매개변수의 값이 같을 경우 객체를 새로 생성하는 것이 아니라 이전에 참조하던 객체의 주소를 그대로 사용한다. 이 데이터는 힙 메모리에 저장된다. 캐싱 작업은 명시적으로 데이터를 캐시 메모리에 저장함으로써 이루어진다. 메모이제이션은 메모리 캐시, 디스크 캐시, 브라우저 캐시, 분산 캐시 ..

(링크) : npm과 yarn (링크) : 리멤버 웹 서비스 좌충우돌 yarn Berry 도입기 (링크) : node_modules 로부터 우리를 구원해 줄 yarn Berry (링크) : 초보 웹 개발자를 위한 자바스크립트 빌드 퉆과 SWC (링크) : 기업들은 왜 Yarn Berry를 많이 사용할까 (링크) : yarn Berry 로 react.js 프로젝트 시작하기 (링크) : npm vs yarn vs yarn berry H...E..L>P SOS 살려주세오.. npm 과 yarn 은 자바스크립트 런타임 환경인 (Node.js)의 패키지 관리자. 전 세계 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn을 이용해서 본인 프로젝트에 설치 및 삭제를 ..