Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

javascript 4

JavaScript V8 엔진과 GC(Garbage Collection)

저는 프로젝트를 진행하면서 과자를 먹곤 하는데요. 과자를 먹다 나온 쓰레기들을 버리러 갈 때 팀원들의 자리에 있는 쓰레기도 함께 모아 가져가며 가비지 콜렉터라는 농담을 했습니다. 그러다가 문득 JavaScript의 Garbage Collection(가비지 콜렉션 이하, GC)은 어떤 방식으로 작동하는지 궁금했습니다. 이전에는 알아보았을 땐 BFS와 같은 탐색을 진행하면서 참조할 수 없는 메모리를 해제한다고 얼렁뚱땅 넘어갔었는데 FE article에서 소개한 Garbage Collection in V8를 읽고 내용을 정리하고 요약해 보았습니다.V8 엔진V8엔진은 구글에서 개발한 오픈 소스 자바스크립트 엔진입니다. 웹 브라우저에서 자바스크립트 코드를 실행하는 데 사용되며, 높은 성능을 가지고 있습니다. 또한..

개발/JavaScript 2024.04.14

트러블 슈팅: React Native의 FormData는 웹과 (조금)다릅니다! (feat. 서버가 FormData의 key와 value를 구분하는 법)

리액트 네이티브를 사용한 개발을 진행하던 중 한 가지 문제가 생겼습니다. FormData를 통해 백엔드에 데이터를 보내주었는데 백엔드 측에서 이를 읽지 못하였습니다. 분명 키와 값 쌍을 정해주었는데 해당 키를 null로 조회하였습니다. 백엔드 측의 코드도, 프론트엔드 측의 코드도 아무런 문제가 없어 보였는데 말이죠.FormData는 무엇인가?FormData는 form 필드와 그 데잍터를 나타내는 키-값 쌍을 쉽게 생성할 수 있는 인터페이스입니다. 이름에서도 유추할 수 있듯이 html의 form을 구성하는 데이터를 쉽게 구성할 수 있도록 도와주는 객체입니다. HTML의 경우 다음과 같은 코드를 작성하면 해당 폼 요소가 가진 필드 전체가 자동으로 FormData로 구성이 됩니다. FormData의 인자는 f..

JavaScript HTTP 요청 작은 팁 3가지

비동기 함수를 병렬적으로 실행하는 법 만약 여러 개의 비동기 함수를 실행 시켜야한다면 어떻게 해야 될까요. 모든 비동기 함수에 await를 붙여 하나씩 실행시키는 것보다는 먼저 모든 함수를 실행시켜놓고 모든 작업이 완료되길 기다리는 것이 더욱 효율적이겠죠? 자바스크립트에서는 Promise.allSettled를 사용하여 이런 방식이 가능합니다. const results = await Promise.allSettled([promise1, promise2, promise3, ...]); results.forEach((result, index) => { // 비동기 함수 실행 성공 if (result.status === 'fulfilled') { console.log(`Promise ${index + 1} fu..

개발/JavaScript 2024.02.11

동기(synchronous)와 비동기(Asynchronous)(feat. 직렬과 병렬 그리고 블록과 논블록)

동기와 비동기동기한 작업이 다른 작업에 종속되어 순차적으로 실행되는 개념프로그램이 실행 될 때, 한 작업이 완료되고 나서야 다음 작업이 실행된다면 동기적인 것이다.작업(코드)의 순서가 곧 실행 순서이다.동기는 실행 순서가 보장되어 있다.비동기한 작업의 완료를 기다리지 않고, 다른 작업을 동시에 실행하도록 하는 프로그래밍 개념비동기적인 코드는 작업이 완료될 때까지 대기하지 않고, 다른 작업을 계속해서 진행한다.처리에 오랜 시간이 걸리는 작업(네트워크 통신, 파일 입출력, 웹 요청 등)이 존재할 시, 다른 작업을 실행함으로 효율적인 작업처리에 도움을 준다.작업(코드)의 순서와 실행의 순서가 다를 수 있다.동기는 실행 순서가 보장되어 있지 않다.실행 순서가 보장되어 있다?프로그래밍에서의 실행은 작업의 시작, ..