본문 바로가기

FrontEnd94

[JavaScript] Proxy 객체란? Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다. Proxy는 다양한 라이브러리와 몇몇 브라우저 프레임워크에서 사용되고 있다. Syntax new Proxy(target, handler); target : 기본 동작을 가로챌, 즉 감싸게 될 객체로 함수를 포함해서 모든 객체가 가능하다. handler :동작을 가로채는 메서드인 'trap'을 가지고 있는 객체로, 여기에서 프록시를 설정한다. proxy에 작업이 가해지고, handler에 작업과 상응하는 트랩이 있으면 트랩이 실행되어 proxy가 이 작업을 처리할 기회를 얻게 된다. 트랩이 없으면 .. 2022. 5. 6.
[JavaScript] 한글 키보드 입력 시 이벤트가 두 번 호출되는 경우 문제상황 Ant Design의 Input에 onPressEnter를 사용하는 중 위와 같은 문제가 발생했다. 텍스트를 입력하고 엔터를 누르면 Select의 옵션 값으로 추가가 되도록 구현했는데, 함수가 두 번씩 호출되어 텍스트의 마지막 글자가 옵션값에 추가가 되어버렸다. 해결 방법 onKeyDown/onKeyUP 그리고 onKeyPress onKeyDown, onKeyUp 키를 누르고 떼는 동작 자체에 반응 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter를 인식하고 한/영, Print Screen은 인식하지 못함 onKeyPress 위와 달리 문자가 실제로 입력됐을 때 반응 따라서 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Sc.. 2022. 5. 2.
[Next.js] NextJS SSG로 빌드하기 SSG(Static-Site-Generation)이란? Next는 브라우저에서 렌더링 할 때 기본적으로 pre-rendering(사전 렌더링)을 한다고 소개한다.(Next default 설정) pre-rendering이란 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다. 즉 Pure React에서 CSR 방식은 번들링된 js가 클라이언트 단에서 모든 추가 렌더링을 담당했다면 Next의 pre-rendering 시스템에서는 빌드 타임 때 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해 가지고 있다가 서버로 요청이 들어올 때 알맞은 페이지를 반환해준다. Next에서 pre-rendering을 하기 위해 두 가지 형식을 제안하고 있는데, 이는 다음과 같다. 1. Static-G.. 2022. 4. 15.
[React.js] Yarn berry 적용하며 발생한 에러 정리 Failed to load config "react-app" to extend from. .yarnrc.yml에 nodeLinker: node-modules를 제외하여 Plug'n'Play 기능을 활성화하려고 할 때 생기는 오류로 아래와 같이 Create React App에서 사용하는 ESLint 구성 패키지를 추가함으로써 해결했다. yarn add eslint-config-react-app -D 이 방법 이외에도 package.json의 extends에서 react-app를 삭제하는 방법도 사용하는 것 같다. "extends": [ "react-app" ] }, Plugin "react" was conflicted between "package.json » eslint-config-react-app 해.. 2022. 4. 13.
[React.js] Uncaught ReferenceError: process is not defined 오류 설명 이 오류는 react-error-overlay(react-scripts의 dependency이기 때문에 많은 사람들에게 생소함)의 결과로, 이 패키지의 종속성이 webpack v5를 지원하도록 업데이트되었다. 해결 방법 첫 번째 방법, update react-scripts v5 npm install react-scripts@latest # or yarn upgrade --latest react-scripts 하지만 webpack 버전 5이상은 폴리필을 수동으로 구성해야하기 때문에 아래와 같은 에러가 발생할 수 있다. [Webpack] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.. 2022. 4. 12.
[React.js] React Hook의 등장 배경 React Hook이란? React 16.8v부터 추가된 기능으로, 클래스 형식의 리액트 컴포넌트에서만 할 수 있었던 state 관리 및 라이프사이클등을 함수형 컴포넌트에서도 사용할 수 있다. 기존 클래스 컴포넌트에 대한 불만 사항 extends와 super(props)를 매번 작성해야 하는가? 클래스형 리액트 컴포넌트 사용을 위해서는 extends 키워드를 사용해 React.Component를 상속 받아야한다. 또한 state를 사용하기 위해서는 constructor 내부 최상단에 super(props)를 해야한다. (자바스크립트 상속 클래스의 규칙) 이렇게 반복되는 코드 작성을 줄일 수는 없을까? 다른 언어와는 다른 자바스크립트의 this class Foo extends Component { cons.. 2022. 4. 5.
반응형