문제 상황 투두 앱 만들기 중에 오류가 발생했다. 특정 투두를 선택해 /todos/:id 페이지로 이동했더니 빈화면이 뜨고 다음의 에러가 발생했다. react-dom.development.js:19055 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. 동기적인 입력에 응답하는 동안 컴포넌트가 중단되었다. 이는 UI가 로딩중을 나타내는 것으로 대체되게 한다. 해결하기위해 중단된 컴포넌..
문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 유형 스택 문제 풀이 처음에는 인덱스를 사용한 순회 방식을 생각해 현재 인덱스를 다음 인덱스와 차례대로 비교하면서 큰 수를 만나면 다음 인덱스를 비교하는 방식으로 구현했다. 그 결과 테스트 케이스 20~22가 시간 초과가 발생했다. 인덱스를 사용한 순회 방식으로는 해결 안되는 테스트 케이스 인 것 같아 다른 방법을 찾아보던 중 스택을 사용하라는 힌트를 발견했다. 스택을 사용할 때는 다음의 사항을 고려했다. 가장 마지막 배열 요소부터 순회하며 스택에 추가한다. 그럼 스택에는 현재 요소 기준 뒤에..
시작하며 이번 원티드 프론트엔드 챌린지 과제는 React Query를 적용해보는 것이었다. 이전에 React Query를 사용해 본적이 없기에 React Query의 작동 원리와 사용하는 이유를 먼저 공부하기 시작하면서 알게된 stale-while-revalidate와 모호했던 캐싱이라는 개념에 대해 정리해보고자 한다. 캐싱(Caching)이란? Stale-While-Revalidate 전략에는 캐싱이란 개념이 사용된다. 캐싱이란 데이터나 값을 미리 복사해 놓고 있다가 요청 시에 그것을 제공하는 기술을 의미한다. 캐시는 복사본을 저장하고 있는 임시 장소를 말한다. 웹 캐시 역시 자신의 저장소 내에 요청된 리소스를 갖고 있다면 요청을 가로채 서버로 요청이 전달되는 것을 막고, 리소스의 복사본을 반환한다. ..
멋사에서 useState Hook을 배우던 중 setState의 인자로 값을 전달하는 것과 함수를 전달하는 것은 무엇에서 차이가 있는지 궁금했다. 이전에 했던 프로젝트에서도 useState Hook을 사용했던 적은 있었지만 "useState는 상태를 관리해주는 Hook이고, setState에 어떤 값을 넣어주면 그 값으로 상태가 변경돼~" 정도만 알고 사용했다. 따라서 자세한 동작 방식을 알고 setState에 함수를 전달해주는 이유를 정리하고자 글을 쓰게 되었다. setState, 무엇일까? useState가 실행되면 배열을 반환한다. 반환된 배열의 첫 번째 인덱스에는 현재 상태값(state), 두번째 인덱스에는 상태를 변경하는 함수(setState)가 저장되어 있다. 즉, setState를 통해 상태..
자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 전통적인 콜백 패턴은 콜백 지옥로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란해 여러 비동기 처리를 한번에 처리하는데 한계가 있다. ES6에서는 비동기 처리를 위한 새로운 패턴인 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴의 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다. 비동기 처리를 위한 콜백 패턴의 단점 1. 콜백 지옥 (Callback Hell) 🤔 콜백 지옥이 발생하는 이유? 결과 먼저: 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수 없다. 따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한..
Ajax란? 자바스크립트를 사용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식 이전의 전통적인 웹페이지는 어떤 부분을 변경하고 싶다면 서버로부터 완전한 HTML 파일을 전송받아 웹페이지 전체를 처음부터 다시 렌더링해야 했다. 이는 불필요한 데이터 통신이 발생하고, 클라이언트와 서버와의 통신이 동기 방식으로 동작하므로 다음 처리가 블로킹 된다는 단점이 있다. Ajax 방식을 사용하면 서버로부터 웹페이지의 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진다. 그리고 클라이언트와 서버와의 비동기 통신이 가능하여 블로킹이 발생하지 않는다. JSON (JavaScript Object Notation) 클라이언트와 ..
동기 처리와 비동기 처리 실행 컨텍스트 평가와 실행 과정 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(= call stack)에 push되고, 함수 코드가 실행된다. 즉, 함수의 실행이 시작된다. 함수 코드 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 pop되어 제거된다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 push 되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 2개 이상의 함수를 동시에 실행할 수 없다. 실행 컨텍스트 스택의 최상위 '실행 중인 ..
호출 스케줄링 타이머 함수를 사용하여 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것 setTimeout, setInterval가 생성한 타이머가 만료되면 콜백 함수가 호출된다. setTimeout 함수가 생성한 타이머는 딱 한번 동작(콜백 함수가 한번 호출)하고, setInterval 함수가 생성한 타이머는 반복 동작(타이머 만료될 때마다 반복 호출)한다. JavaScript에는 타이머 생성할 수 있는 함수 setTimeout, setInterval와 타이머 제거할 수 있는 함수 clearTimeout, clearInterval을 제공한다. 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드다. 자바스크립트 엔진은 싱글 스레드로 동작한다. 자바스크립트 엔진은 단..
