본문 바로가기

분류 전체보기340

[양방향 통신 방법] Polling vs WebSocket 기존의 양방향 통신 방법 HTML5 표준 기술인 웹소켓 방식 이전에는 마치 실시간인 것처럼 작동하게 하는 방법들이 있었다. Polling(폴링) 클라이언트가 n초 간격으로 request를 서버로 계속 날려서 response를 전달받는 방식이다. 장점 비교적 구현이 쉽다. 단점 서버측에서 보낼 내용이 없어도 클라이언트는 알 수 없기 때문에 계속해서 request를 통한 확인이 필요하다. HTTP는 단발성 통신이기 때문에 header가 매우 무거운 프로토콜 중 하나로 이 프로토콜이 계속해서 requeset를 날리면 서버의 부담이 증가한다. 초 간격을 늘린다면 실시간성이라고 보기 어렵다. Long Polling(롱 폴링) 클라이언트의 요청에 대해 응답을 보내지 않고 timeout이 날 때까지 기다리다가, 이벤.. 2022. 5. 17.
[JavaScript] Proxy 객체란? Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다. Proxy는 다양한 라이브러리와 몇몇 브라우저 프레임워크에서 사용되고 있다. Syntax new Proxy(target, handler); target : 기본 동작을 가로챌, 즉 감싸게 될 객체로 함수를 포함해서 모든 객체가 가능하다. handler :동작을 가로채는 메서드인 'trap'을 가지고 있는 객체로, 여기에서 프록시를 설정한다. proxy에 작업이 가해지고, handler에 작업과 상응하는 트랩이 있으면 트랩이 실행되어 proxy가 이 작업을 처리할 기회를 얻게 된다. 트랩이 없으면 .. 2022. 5. 6.
[Heroku] Heroku and Github : Items could not be retrieved, Internal server error node로 만든 개인프로젝트를 간단하게 호스팅하기 위해서 Heroku를 사용하고 있다. 원래는 Heroku Git CLI를 사용하다가, Deployment method 중 Connect to Github로 Automatic deployment가 가능하길래 후자를 사용하던 중이었다. 그러나, 메일로 날라온 Automatic deployment Fail 안내 An automatic deployment for bus-information-site failed. The build failed with the message Unauthorized. Token from user was used to interact with GitHub. This account was matched as the GitHub comm.. 2022. 5. 5.
[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.
반응형

티스토리툴바