분류 전체보기218 함수의 호출을 간격을 제한하는 쓰로틀(Throttle) 쓰로틀이란? 어떠한 동작을 할 때마다 이벤트가 실행되도록 바인딩 되어있는 상황에서, 너무 잦은 이벤트의 호출은 프로그램의 성능을 떨어뜨리고 나쁜 유저 경험을 제공할 수 있습니다. 이를 해결할 수 있는 방법으로 바인딩 되어있는 이벤트가 최소한의 시간 간격을 갖고 실행되도록 제한하는 절차가 있는데, 이러한 기법을 쓰로틀(Throttle) 이라고 합니다. 개념 실행할 함수를 래핑하는 쓰로틀 함수를 만들고, 이 함수가 일정한 시간마다 실행되도록 setTimeout을 적용합니다. 정해준 주기에 한 번씩만 실행될 수 있도록 setTimeout 내부에서 플래그 변수를 제어해줍니다. 이렇게 되면, setTimeout 내부가 실행되면 플래그 변수의 상태가 변해 인자로 받게되는 함수(원래 이벤트에 바인딩 되었던 함수)가 .. 2022. 3. 12. 함수와 바인딩, this 이 글은 이 포스트의 연장선에 있습니다. 같은 동작을 가진 함수를 바인딩하더라도, 경우에 따라서 실제로는 다른 값을 가지는 경우가 있습니다. 함수의 선언 방식에 따라 이벤트를 어떻게 바인딩하는 것이 좋을지에 대해 알아보겠습니다. this 이벤트에 함수를 바인딩 할 때, this는 특히 신경써야 하는 부분입니다. this에 대한 정보는 아래 그림처럼 실행 콘텍스트 객체에 포함되어 있습니다. 그러나 호출에 따라 다른 값이 할당되기 때문에 함수 내부 구조만 보고서는 this 값을 정확히 예측하기란 어렵습니다. 때문에 this가 어느 곳을 바라보고 있는지 알아내려면 아래 내용들을 살펴보아야 합니다. 함수의 종류에 따라 일반적인 함수와 화살표 함수가 가리키는 this는 서로 다릅니다. const obj = { f.. 2022. 3. 3. Cypress로 E2E 테스트 시작하기 프로그램을 만들며 기능이 정상적으로 동작하는지, 의도에서 벗어난 점은 없는지 테스트하는 것은 매우 중요합니다. 지난 번에 작성한 Jest 기본 사용법에서는 테스팅 프레임워크인 Jest를 사용해 간단한 단위 테스트를 진행하는 법을 알아보았습니다. 이번 글에서는 E2E 테스트에 특화된 프레임워크인 Cypress를 이용하여 테스트를 시작하는 과정을 보겠습니다. E2E 테스트란? 테스트에 앞서, E2E 테스트란 무엇일까요? 지난번에 진행한 단위 테스트의 경우 하나의 기능을 테스트 하는 수준에서 그쳤습니다. 이처럼 큰 프로그램 내에서 하나의 작은 기능 (함수, 클래스 등)을 테스트 하는 것을 단위 테스트(Unit test)라고 부르고, 반대로 유저가 프로그램을 이용하는 시나리오를 따라 프로그램 전체를 테스트 해보.. 2022. 2. 21. node.js에서 명령어로 브라우저 실행하기 이 글은 Windows OS 기반의 환경에서 작성되었습니다. CRA 등을 사용하여 프로젝트를 구성해보신 분이라면, npm run start 과 같은 명령어로 서버 구동부터 브라우저로 결과물을 확인하는 과정까지 한 번에 실행되는 것을 보셨으리라 생각합니다. 그러나 이런 사전 설정없이 단순히 node 프로젝트에서 start 명령을 사용하면 단순히 node ./bin/www 명령만 실행되고 끝입니다. 만약 결과물을 보고 싶다면 직접 브라우저에서 localhost:3000 처럼 자신이 설정한 주소를 입력해서 확인해야 합니다. 이번 포스트에서는 번거로웠던 이 과정을 한 번에 처리할 수 있도록 해보겠습니다. "scripts": { "start": "node ./bin/www" } 처음 node.js 프로젝트에 ex.. 2022. 1. 30. AWS S3 에서 POST 메소드 사용하기 (405 Method Not Allowed) 이번에 AWS S3에 프로젝트를 배포할 일이 생겼는데, POST 요청으로 데이터를 전송하려 했지만 정책상의 문제로 405 method not allowed 에러에 막히게 되었습니다. 기존에 리액트 프로젝트를 S3에 올려서 사용하시는 분들이 계시기에 분명 방법은 있을것이라 생각했고, 결국 해결되었는데 어떻게 해결하였는지 제 사례를 공유해보려 합니다. 들어가기 전 저는 AWS 프로젝트를 사용해 본 경험이 극히 적고, 배경지식이 거의 없었다는 점을 감안해주시면 감사하겠습니다. 문제 상황 우선 프로젝트의 구조는 위와 같은 모습입니다. 리액트로 이루어진 프론트 단과, 스프링으로 이루어진 백 단이 서로 요청과 응답을 주고받는 평범한 상황입니다. 기본적으로 유저에 관한 데이터를 주고 받는 회원가입이나 로그인 같은 동.. 2022. 1. 22. react에서 <script> 방식으로 js 파일 로드해야 할 때 react로 개발을 하던 중, HTML 파일에서 곧바로 제가 맞닥뜨린 상황의 경우 외부 라이브러리 파일이 본문의 특정 dom 요소를 찾아 액션을 부여하는 식으로 작동하는 구조였는데, 리액트 프로젝트의 경우 html은 먼저 로드되고, dom 요소들이 나중에 생성되기 때문에 먼저 실행된 외부 라이브러리들이 dom 요소를 찾지 못하는 결과로 이어지게 되었습니다. 그렇다면 컴포넌트들이 모두 로드 된 다음에 외부 파일을 불러오면 되지 않을까? 하는 생각이 들었고 요소를 동적으로 생성해서 붙여주면 되겠다는 그럴듯한 추측을 해보았습니다. 제가 시도한 방법은 아래와 같습니다. util/loadExternalJS.js function loadExternalJS() { // 필요한 파일들을 동적으로 생성해줍니다. cons.. 2022. 1. 11. 이전 1 ··· 14 15 16 17 18 19 20 ··· 37 다음
