기술 블로그

일반적으로 재귀함수는 프로그래밍에서 아주 중요한 요소이며 알고리즘으로도 자주 활용되는 기법이다. 그러나 프론트엔드 환경에서는 어떨까? 이전 게시글에서 봤던 것 처럼 프론트엔드 개발자는 콜스택의 부하를 경계해야하고 여러 문제를 야기한다. 1. 잘못 사용하면 재귀는 스택 오버플로우를 일으키기 좋은 기법이다. 2. 각 함수 호출마다 실행컨텍스트가 생성되기 때문에 메모리 측면에서 좋지 않다. 3. DOM 조작시 성능 저하가 발생할 수 있다.( 매 함수마다 리플로우 리페인팅) 이를 방지하기위해 꼬리 재귀라는 기법을 사용할 수 있다. //일반 재귀 function factorial(n) { if (n === 1) { return 1; } return n * factorial(n-1); } //꼬리 재귀 functi..

동기: 이전 작업이 끝날때 까지 기다렸다가 끝난 이후 다음 작업을 실행하는것 비동기: 이전 작업의 완료여부와 관계 없이 다음 작업을 실행하는 것 자바스크립트에서 비동기는 아래와 같은 상황에서 발생한다. 👉 DOM Element 의 이벤트 이벤트 핸들러 - 마우스, 키보드 입력 (click, keydown 등), 페이지 로딩 (DOMContentLoaded 등) 👉 타이머 - 타이머 API (setTimeout 등), 애니메이션 API (requestAnimationFrame) 👉 서버에 자원 요청 및 응답 - fetch API, AJAX (XHR) 사실 위 사진이 자바스크립트 비동기 작업의 전부이다. 추가 할 점이 있다면 콜스택 옆에 메모리힙이 있다. 콜스텍과 실행컨텍스트 그리고 메모리힙 실행컨텍스트는 ..

프론트엔드 개발에 있어 리소스가 제한된 상황은 얼마든지 발생할 수 있다. 리소스란 네트워크, 서버, 클라이언트 등 더 나아가서 브라우저의 메모리,CPU 사용량,네트워크 대역폭 등을 의미한다. 코드 최적화- 코드 분할 대부분 리액트 앱은 웹팩,롤업,브라우저파이와 같은 툴을 이용하여 여러 파일을 하나로 병합하고 번들 된 파일을 웹페이지에 포함하여 한 번에 전체 앱을 로드한다. 이는 앱의 크기를 키우고 무겁게 만든다. 비대한 번들을 방지하는 해결 방법중 하나가 코드 분할이다. import() :동적 임포트 웹팩에서는 위 구문을 만나면 앱의 코드를 분할한다. 해당 함수는 모듈을 동적으로 불러와 결과를 프로미스로 반환한다. 주로 lazy()와 같이 사용된다. 코드 최적화 - 트리쉐이킹 사용하지않는 코드를 제거한다..