감귤밭 호지차 농장

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 동안 추가적인 이벤트..

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..

용어 정리 - CSS Prreprocessors - SCSS - SASS 둘 다 CSS 전처리기 SCSS는 SASS에서 파생된 언어 - 거의 동일한 기능을 보유 (문법적으로 살작 다를 뿐 ) - 미관상 문제 sass는 중괄호와 세미콜론 생략, scss는 기존의 css와 비슷하게 중괄호와 세미콜론으로 구분 SASS & SCSS 링크 : sass 받아들이기, 당신이 그냥 CSS로 그만 코딩해야 하는 이유 2019. 링크 : Emotion vs SCSS vs Styled-Components _ 2023 링크 : css-in-js 라이브러리 선택 비교 (styled-component vs emotion) 링크 : React - emotion 과 styled-component의 차이 링크 : (번역) 우리가 CS..

node:internal/process/promises:288 triggerUncaughtException(err, true /* fromPromise */); ^ [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/emma/Desktop/temp/invitation): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' Require stack: - /Users/emma/Desktop/temp/invitation/postcss.config.js (@/Users/emma/Desktop/temp/invitation/postcss.conf..

React에서 SVG 파일을 함수 컴포넌트화해서 간편하게 관리 및 재사용하고 불러올 수 있게 만들어봅시다. # 사용 기술 스텍 React x Vite x TypeScript SCSS https://www.telerik.com/blogs/how-to-use-svg-react How to Use SVG in React SVG is an excellent way to develop scalable and responsive visuals. This article introduces SVGs and different methods of using them in a React application. www.telerik.com type SVG = { fillColor: string; width: string; h..

하도 공고에 반응형 웹 과 관련해서 우대 사항이 많기 때문에 겸사 겸사 간단한 반응형 웹 프로젝트를 만들어보려고 합니다. 이전 메인 프로젝트 리팩토링 작업은 아무래도 주소가 달라서 서버랑 통신을 못해서 네틀리파이로 배포가 안되더군요.. ㅠㅠ 눈물을 머금고.. 손을 놓기로 결심하였습니다. 아래는 피그마 작업 입니다. 크게 웹과 모바일 + 태플릿 크기로 간단하게 만들어볼 예정입니다. 기술 스텍은 이번에는 제가 사랑하는 TailwindCSS를 사용하지 않고 순수 CSS 로 제작해보겠습니다. 겸사 겸사 연습인 거죠. Styled-Components 정도는 사용해서.. 야무지게 만들어보겠습니다. 시간이 되면 주말에 Express 도 곁들여서 게시판도 한번 만들어 보고 싶은 욕심은 언제나 계속 생겨나네요... 디자..