맨 땅에 프론트엔드 개발자 되기

React의 state 변경 비동기 처리 React 에서 상태 변경을 할 때 setState 혹은 useState Hook을 써서 변경하면 상태 변경 동작은 비동기로 처리된다. (동기/비동기의 차이점을 알아야 밑에 내용이 이해가 가능하다.) React가 상태 변경을 비동기로 처리하는 이유는 효율성 때문이다. 리액트는 상태가 변경될 때마다 재렌더링을 일으키도록 설계되었는데, 만약 한꺼번에 너무 많은 state가 변경될 경우 일일이 재렌더링을 일으킨다면 너무 비효율적이기 때문에 state 값이 변경될 때 React 내부 로직 기준에 따라 한번에 state 변경을 취합해서 재렌더링을 일으킨다. 그리고 그 취합은 16ms 단위로 이루어진다고 한다. 여러 개 State 변경 에러 해결하기 아래 예제는 input ..

Promise, Fetch, Async, Await 에 대해 알아보자 Promise Promise는 JavaScript의 비동기 처리에 사용되는 객체로써 비동기로 처리되는 결과를 동기처럼 반환한다. 실제로 동기처럼 처리되는 것이 아니라 미래의 데이터 처리가 완료된 시점에 결과를 제공하겠다는 ‘약속(프로미스)’를 반환한다. - Promise 객체를 사용하는 이유 JavaScript에는 동기 작업과 비동기 작업이 있는데, 비동기로 처리되는 작업의 결과를 사용하기 위해 Promise 객체를 사용한다. 비동기 작업이 끝난 후의 결과를 이용해서 작업을 수행하려면 Promise 객체의 콜백함수로 작업을 지정해줘야 한다. 그래야 ‘순서를 보장’ 받을수 있다. 이러한 콜백함수가 너무 많아지면, 수정이 복잡해지고 코드의..

오늘은 firebase storage를 사용하다가 겪은 에러에 대해 기록해보려고 한다. 참고로, 아래 내용은 리액트의 환경이다. 1. 에러 내용 내가 구현하려고 했던 것은 firebase storage에 이미지 파일을 업로드 한 이후, 그 이미지 파일 경로를 불러와 화면에 출력하는 것이었다. firebase 공식문서를 통해 아래와 같은 내용을 확인할 수 있었고, listAll을 통해 불러와진 이미지 파일들을 forEach문 반복문을 활용해 useState로 상태 변경을 하고 화면에 출력하려고 했다. 나의 코드 listAll(listRef) .then((res) => { let url = []; res.items.forEach((itemRef) => { url.push({ name: itemRef._loc..

JavaScript 동기와 비동기, 콜백함수 JavaScript를 공부하다보면 자주 듣게 되는 용어인 ‘동기’와 ‘비동기’. 한자어로 되어 있어서 직관적으로 무슨 뜻인지 알기가 어려운데, 알고보면 쉽기도 하고 CS적으로 깊이 들어가다 보면 어렵기도 한 용어다. 일단 얕게 이해할 수 있을만큼 공부해본다. 동기(Synchronous)와 비동기(Asynchronous) 동기와 비동기를 간단하게 설명하자면, 동기는 순차적으로 이행되는 방식, 비동기는 비순차적으로 이행되는 방식이라고 할 수 있다. 순차, 비순차라는 말을 보면 무엇엔가 순서가 있다는 말이 된다. 자바스크립트는 싱글스레드 언어다. 그 말인 즉, 문서의 위에서부터 아래로 순서대로 스크립트를 읽어나가며 일을 처리하며, 하나의 순서대로 처리된다는 뜻이다...