패스트캠퍼스 환급챌린지 50일차 미션 (3월 21일) : 인터랙티브 웹 강의 후기

서론

웹 개발을 하다 보면, 페이지가 사용자와 상호작용하며 동시에 여러 작업을 처리해야 하는 경우가 많다. 이때 필수적으로 마주치게 되는 개념이 바로 '비동기 처리'다. 자바스크립트는 기본적으로 싱글 스레드 언어이지만, 비동기 처리를 통해 복잡한 작업들을 효율적으로 관리할 수 있다. 오늘은 두 가지 강의를 통해 이 중요한 개념을 탐구해보고자 한다. 오늘은 간단히 동기와 비동기가 어떻게 다르고 비동기 처리는 어떤식으로 동작하는지, 콜백함수의 사용방법과 주의사항에 대해서만 배우고, promise문법과 async / await 문법에 대해서는 다음 강의에서 자세히 알아보도록 하자.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

• 첫 번째 강의: 비동기 - 개요
• 두 번째 강의: 비동기 - 콜백과 콜백지옥

첫 번째 강의: 비동기 - 개요

이 강의에서는 비동기 프로그래밍의 기본 개념을 배웠다. 비동기란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식을 말한다. 이를 통해 더 효율적인 프로그램을 작성할 수 있다. setTimeout 함수와 fetch API 사용법을 배워, 비동기 처리의 실제 예를 살펴보았다.

예시 코드:

위 코드에서 setTimeout과 fetch는 비동기적으로 실행되므로, 로그는 '시작' -> '종료' -> '3초 후 실행' -> '데이터 출력' 순서로 나타난다. 이를 통해 비동기 작업이 메인 스레드의 실행 흐름을 방해하지 않고, 백그라운드에서 작업을 수행하며 완료 후 결과를 전달하는 방식을 이해할 수 있었다.

두 번째 강의: 비동기 - 콜백과 콜백지옥

두 번째 강의에서는 콜백 함수를 이용한 비동기 처리 방법에 대해 배웠다. 콜백 함수란, 다른 함수의 인자로 전달되어, 그 함수 내부에서 실행되는 함수를 말한다. 이 방식을 통해 비동기 작업의 결과에 따라 다음 작업을 순차적으로 실행할 수 있다. 하지만 콜백 함수를 과도하게 중첩 사용하면 코드의 가독성이 떨어지고 유지보수가 어려워지는 '콜백 지옥'에 빠질 수 있다.

예시 코드:

위 예시처럼 콜백 함수를 중첩하여 사용하면, 코드가 깊어지고 복잡해지는 것을 볼 수 있다. 이러한 문제를 해결하기 위한 다양한 방법(예: 프로미스, async/await)이 존재하지만, 그 기초가 되는 콜백 함수에 대한 이해는 매우 중요하다.

결론

비동기 처리는 현대 웹 개발에서 중요한 개념 중 하나이며, 이를 이해하고 올바르게 사용하는 것은 개발자로서 필수적인 능력이다. 오늘 학습한 내용을 바탕으로, 비동기 처리의 기초를 더욱 탄탄히 다져갈 수 있을 것이다. 또한, 콜백 함수의 사용과 그 한계를 이해함으로써, 더 발전된 비동기 처리 방법을 학습하는 데 큰 도움이 될 것이다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N