지난 편에서 useState의 setter가 비동기적으로 동작할 수 밖에 없는 이유에 대해서 살펴보았습니다. 이번 글에서는 비동기적으로 동작하는 useState를 사용할 때 주의할 점과 조금 더 잘 쓰는 방법에 대해서 정리해보겠습니다. 😃 setter를 사용하는

👍 Liked 방학동안 푹 쉬기 4월1일부터 4월10일까지 레벨 1 방학이었다. 정말 푹 쉬었다. 잠을 정말 많이 잔 거 같은데 하루는 몇 시간동안 잘 수 있나 궁금해져서 16시간동안 자다 깨다를 반복한 적도 있다. 😇 밤낮 바뀐 것은 덤. 생활 루틴을 강제할 수

useState에서 setter가 비동기적으로 동작한다는 얘기는 다들 한 번쯤 들어보셨을 것 같습니다. 왜 비동기적으로 동작할까요? 비동기적으로 동작한다면 리액트를 사용하는 입장에서 어느 부분을 주의해야할까요? 두 가지 질문에 대해 정리해보고자 합니다. React

모달은 보통 Div 태그로도 구현하지만 Dialog 태그로 구현하면 더 쉽고 간략하게 만들 수 있다. UX 개선을 위해 '닫기' 버튼으로 모달 닫기 외에도 아래와 같은 기능을 추가할 것이다. ESC 키로 모달 닫기 모달 외의 영역 클릭 시 모달 닫기 모바일 사이즈에서

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 즉, 자신만의 파일 스코프(모듈 스코프)를 가진다.파일 스코프를 갖는 모듈의 자산(변수, 함수 등)은 기본적으로 비공개 상태이다

에러가 없는 코드를 한 번에 작성하는 것은 매우 힘든 일이다. 에러가 발생하면 프로그램은 실행 도중 강제 종료되므로 에러 핸들링은 매우 중요하다.다음 코드를 보자.위 코드는 DOM에서 button 태그를 찾고 class 속성들 중 hidden이란 속성을 제거하라는 코드

👍 Liked 지속 가능한 도시락 선릉 캠퍼스 기준 점심값 비용이 평균 1만 ~ 1.2만에 달한다. 여러 지원비를 받고 있는 상태라 생활비는 괜찮은 편이지만 저축에 욕심이 난다. 도시락을 먹으면 4천원 선에서 해결 가능하니 최대 8천원가량 저축 가능한 셈. 지속 가

제너레이터를 통해 비동기를 동기 처리처럼 동작하도록 구현하였지만, 코드의 가독성이 매우 떨어지는 문제점을 야기했다. ES8에서는 async / await가 제너레이터를 대신할 수 있게 되었다.async / await는 프로미스를 기반으로 동작한다. 프로미스의 후속 처리

제너레이터 ES6에서 도입되었으며, 코드 블록을 일시 중지했다가 필요한 시점에서 재개할 수 있는 특수한 함수이다. 제너레이터 특징 제너레이터는 다음과 같은 특징이 있다. 함수 호출자에게 함수 실행 제어권을 양도할 수 있다. 함수 호출자와 함수 상태를 주고받을 수 있

사전적인 의미에서 비동기란 '동시에 일어나지 않는다.' 라는 뜻입니다. 즉 요청과 결과가 동시에 일어나지 않는다는 의미이죠.비동기는 언제 사용될까요? 대표적인 예로 API 통신을 들 수 있겠습니다. 브라우저는 싱글 스레드이기 때문에 API 요청에 대한 응답을 받는 동안

옵서버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. -위키백과즉, 어떠한 상태가 변하면

Quiz 위 코드의 출력 결과는 무엇일까요? 바로 다음과 같습니다. > My age is : undefined 왜 이런 결과가 나올까요?

fetch 함수는 XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API다.fetch 함수는 XMLHttpRequest보다 사용이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유

프로미스는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 갖는 객체이다.프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만, 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)

👍 Liked 새로운 시작 드디어 고대하던 우테코가 시작되었다. 다들 서먹서먹한 분위기에 약간은 경계하는 듯한(?) 느낌도 받았다만, 금방 친해졌다. 특히 처음 만난 온보딩조(연극조)들과는 지금도 가장 친하게 지낸다. 나의 점심 메이트들~ 오전에 일어나서 생활해본

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이며, REST API는 REST를 기반으로 서비스 API를 구현한 것이다.REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라 표현한다.자원, 행위, 표현의 3가

Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 이를 통해 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.브라우저에서 제공하는 Web API XMLHttpRequest 객체를 기반으로 동작

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출하도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다.기능 : 전달받은 시간 후에 단 한 번 동작하는 타이머를 생성반환 : 고유한 타이머 id (브라우저 : 0이 아닌 숫자,

이벤트(event)란 어떠한 사건을 의미하며, 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 방식이 필요하다.브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 이를 통지해준다. 보통의 경우는 이벤트가 발생하기 전에는 실행되

브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다.즉, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이 객체들간 관계를 표현할 수 있는 트리 구조로